Aussehen von Seiten und E-Mails

Unter Anpassen > Erscheinungsbild legst du fest, wie die Startseite und die Seiten zum Login und zur Anmeldung aussehen und wie der Rahmen um eure E-Mails aussieht. Du wählst Farben, Größen, Schrift und Hintergrundbild in Feldern und siehst das Ergebnis, während du änderst. Du musst kein CSS schreiben.

Die Seite hat zwei Reiter: Seiten und E-Mails. Sie werden getrennt gespeichert.

Das kannst du auf den Seiten einstellen

Gruppe	Das steuert sie
Seite	Die Hintergrundfarbe der Seite, die Textfarbe und ob der Text links oder zentriert steht.
Inhaltskarte	Das Feld in der Mitte der Seite mit Text und Formular: Hintergrund, Rahmen, Abstand, runde Ecken und den Abstand über Formularen.
Text und Schaltflächen	Die Schrift, wie fett die Überschriften sind und wie rund die Ecken der Schaltflächen sind.
Logo	Die Breite des Logos und den Abstand darum.
Hintergrundbild	Ein Bild hinter der ganzen Seite, mit einer farbigen Überlagerung, damit der Text lesbar bleibt.
Schriftarten	Eure eigenen Schriftdateien.

Zwei Dinge legst du woanders fest:

• Das Logo selbst ist das Logo der Startseite des Veranstalters unter Anpassen > Logoen.
• Die Farbe der Schaltflächen ist die Primärfarbe unter Einstellungen > Allgemeine Einstellungen > Oberflächenanpassung.

Siehe Logos und Farben.

So änderst du das Aussehen der Seiten

1. Geh zu Anpassen > Erscheinungsbild. Du bist auf dem Reiter Seiten.
2. Ändere die Felder links. Eine Farbe wählst du, indem du auf das Farbfeld klickst oder einen Farbcode eingibst, zum Beispiel #13846E. Größen gibst du als Zahl in Pixeln ein.
3. Behalte die Live-Vorschau rechts im Blick. Sie zeigt die Änderungen, bevor du speicherst.
4. Wechsle zwischen Startseite und Registrierung und zwischen Desktop und Mobil, um beide Seiten in beiden Breiten zu sehen. Vergrößern zeigt die Vorschau im Vollbild, und Schließen oder Esc führt zurück.
5. Klick auf Erscheinungsbild speichern.

Sobald du gespeichert hast, gelten die Änderungen für alle, die die Seiten besuchen.

So legst du ein Hintergrundbild fest

1. Öffne die Gruppe Hintergrundbild. Sie ist eingeklappt, bis es ein Bild gibt.
2. Wähl eine Datei im Feld Hintergrundbild. Das Bild muss PNG, JPEG oder WebP sein und darf höchstens 8 MB groß sein.
3. Wähl Bildanpassung: Seite ausfüllen, In die Seite einpassen oder Kacheln.
4. Wähl unter Scrollverhalten, ob das Bild mitscrollt (Scrollt mit der Seite) oder stehen bleibt (Bleibt stehen).
5. Leg Überlagerungsfarbe und Stärke der Überlagerung fest. Die Stärke ist eine Zahl von 0 bis 100, und 0 bedeutet keine Überlagerung. Erhöhe sie, bis der Text angenehm zu lesen ist.
6. Klick auf Erscheinungsbild speichern.

Das Bild erscheint erst in der Vorschau, wenn du gespeichert hast. Es ist immer zentriert, du kannst also keinen Ausschnitt wählen. Prüf es in der Breite Mobil.

Willst du das Bild entfernen, setz das Häkchen bei Dieses Bild entfernen und klick auf Erscheinungsbild speichern.

So verwendest du eure eigene Schrift

1. Speichere zuerst andere Änderungen mit Erscheinungsbild speichern. Ein Upload lädt die Seite neu.
2. Öffne die Gruppe Schriftarten.
3. Wähl die Datei im Feld Schriftdatei. Sie muss woff2, woff, ttf oder otf sein und darf höchstens 2 MB groß sein.
4. Wähl Schriftstärke und Stil so, wie die Datei sie enthält. Eine normale Schrift ist 400 und Normal, eine fette ist 700.
5. Klick auf Schriftdatei hochladen. Wiederhole das für jede Datei, zum Beispiel eine normale und eine fette.
6. Gib unter Text und Schaltflächen einen Namen in Name der Schriftart ein. Den Namen wählst du selbst. Verwende Buchstaben, Zahlen, Leerzeichen und Bindestriche, höchstens 60 Zeichen.
7. Klick auf Erscheinungsbild speichern.

Die Schrift wird erst verwendet, wenn sowohl eine Datei hochgeladen als auch ein Name eingetragen ist. Sie gilt nur für die Seiten. E-Mails verwenden immer eine Schrift, die jedes Mailprogramm hat.

So legst du das Aussehen der E-Mails fest

Der Reiter E-Mails steuert den Rahmen um die E-Mails, die das Event automatisch verschickt: Farben, Breite, Ecken, Abstand, Schrift und einen Fußtext. Den Text der E-Mails bearbeitest du unter Mailvorlagen. Siehe Mailvorlagen.

Die Einstellungen bewirken nichts, bevor du sie einschaltest.

1. Geh zu Anpassen > Erscheinungsbild und klick auf den Reiter E-Mails.
2. Ändere die Felder unter Farben und Größe und Schrift. Unter Schriftart der E-Mail wählst du zwischen Helvetica, Georgia, Verdana und Trebuchet.
3. Gib einen Text der Fußzeile ein, wenn ihr einen wollt. Er erscheint unter allen E-Mails und ist einfacher Text, typischerweise eure Adresse und Kontaktdaten.
4. Behalte die Live-Vorschau rechts im Blick.
5. Klick auf E-Mail-Einstellungen speichern.
6. Klick auf Test-E-Mail senden. Du bekommst eine Willkommensmail im gespeicherten Rahmen an deine eigene E-Mail-Adresse. Prüf sie in deinem Mailprogramm. Ein Browser ist nachsichtiger als ein Mailprogramm.
7. Schalte Diese Einstellungen für E-Mails verwenden ein und klick auf E-Mail-Einstellungen speichern.

Schaltest du den Schalter aus und speicherst, verwenden die E-Mails wieder den Rahmen, den sie vorher hatten.

Links in den E-Mails bekommen die Primärfarbe des Events. Der Rahmen hat kein Logo. Wollt ihr euer Logo in E-Mails, lass den Schalter aus und verwende die Designvorlage E-Mail-Layout. Siehe Designvorlagen und die Startseite.

Wenn ihr handgeschriebenes CSS habt

Hat das Event ein gespeichertes Stylesheet (CSS) unter Anpassen > Designvorlagen, bestimmt weiterhin dieses das Aussehen der Seiten. Oben auf dem Reiter Seiten steht "Diese Veranstaltung hat ein selbst geschriebenes Stylesheet", und die Einstellungen haben noch keine Wirkung. Die Vorschau zeigt, was sie bewirken würden.

Ihr könnt euer CSS weiter verwenden. Wollt ihr zu den Einstellungen wechseln, geht das in zwei Schritten:

1. Klick auf Aus dem Stylesheet übernehmen. Crewstack liest Farben und Größen aus eurem CSS in die Felder ein und speichert sie. Die Seiten ändern sich nicht.
2. Prüf die Vorschau, sowohl Startseite als auch Registrierung und sowohl Desktop als auch Mobil. Nur was die Einstellungen abbilden können, wird übernommen. Den Rest änderst du in den Feldern. Schriften und Hintergrundbild werden nicht übernommen, die lädst du hier hoch.
3. Klick auf Erscheinungsbild speichern, wenn du etwas geändert hast.
4. Klick auf Stattdessen diese Einstellungen verwenden und bestätige.

Euer CSS wird nicht gelöscht. Oben steht jetzt "Dein selbst geschriebenes Stylesheet ist ausgeschaltet", und Stylesheet wieder verwenden wechselt zurück. Unter Designvorlagen enthält Stylesheet (CSS) weiterhin euer CSS, aber ohne Häkchen bei Aktiv auf dem Reiter der Hauptsprache des Events.

Bei E-Mails ist es genauso. Habt ihr die Designvorlage E-Mail-Layout bearbeitet, verwenden die E-Mails sie, bis du Diese Einstellungen für E-Mails verwenden einschaltest. Dann ersetzen die Einstellungen eure Vorlage in allen E-Mails, auch Versionen für einen Mitgliedstyp. Schaltest du den Schalter aus, wird eure Vorlage wieder verwendet. Sie bleibt die ganze Zeit unter Designvorlagen.

Eigene Domain

Hat das Event eine eigene Domain, funktionieren die Einstellungen auch dort. Hintergrundbild und Schriften werden von derselben Adresse geladen, auf der die Seite angezeigt wird, es gibt also nichts einzurichten. Siehe Eigene Domain für ein Event.

Stolperfallen

• Die Einstellungen ändern die Seiten nicht. Das Event hat ein handgeschriebenes Stylesheet, das aktiv ist. Klick oben auf dem Reiter Seiten auf Stattdessen diese Einstellungen verwenden.
• Der Seitenhintergrund hat schon eine Farbe. Ist unter Oberflächenanpassung eine Sidebar-Hintergrundfarbe gewählt, beginnt Seitenhintergrund mit dieser Farbe, bis du eine andere wählst und speicherst. Siehe Logos und Farben.
• Was du geändert hattest, ist weg. Schriftdatei hochladen, Entfernen, Aus dem Stylesheet übernehmen, Stattdessen diese Einstellungen verwenden und Test-E-Mail senden laden die Seite neu. Was du nicht gespeichert hast, geht verloren. Speichere zuerst.
• Die Schrift wird nicht verwendet. Es fehlt entweder eine Datei unter Schriftarten oder ein Name in Name der Schriftart. Eine neue Schrift erscheint erst in der Vorschau, wenn du gespeichert hast.
• Eine Farbe oder eine Zahl wurde abgelehnt. Ein Farbcode muss aus # und sechs (oder drei) Zeichen bestehen, zum Beispiel #13846E. Zahlen müssen innerhalb der Grenzen des Feldes liegen, zum Beispiel 20 bis 800 bei Logobreite. Das Feld behält, was du eingegeben hast, mit dem Grund daneben, und nichts auf dem Reiter wird gespeichert, bis du es korrigiert hast.
• Die Test-E-Mail sieht nicht aus wie die Vorschau. Die Test-E-Mail verwendet die gespeicherten Einstellungen. Die Vorschau zeigt auch, was du nicht gespeichert hast. Klick auf E-Mail-Einstellungen speichern und sende den Test erneut.
• Das handgeschriebene Stylesheet bestimmt die Seiten wieder. Jemand hat bei Stylesheet (CSS) unter Designvorlagen das Häkchen bei Aktiv gesetzt und gespeichert. Damit ist das Stylesheet wieder eingeschaltet.
• Aus dem Stylesheet übernehmen hat nichts gefunden. Dann steht dort "Nichts in diesem Stylesheet entspricht einer Einstellung auf dieser Seite. Lege sie stattdessen von Hand fest." Regeln, die nur für bestimmte Bildschirmbreiten gelten, zum Beispiel Mobilgeräte, werden nicht gelesen.
• Das Event des neuen Jahres hat das Aussehen nicht. Die Einstellungen unter Erscheinungsbild, das Hintergrundbild und die Schriften werden nicht übernommen, wenn das Event in ein neues Jahr kopiert wird. Leg sie im neuen Event neu fest. Siehe Neues Jahr, neue Saison.