Schriften, Abstände und Design-Einstellungen deiner Website hinterlegen

Sobald du die Struktur deiner Website und die individuellen Einstellungen der Bausteine definiert hast, kannst du die Farb- und Design-Einstellungen hinterlegen sowie deine Custom Fonts hochladen.

Um die Einstellungen zu öffnen, klicke oben rechts auf das Bearbeitungssymbol . Anschliessend öffnet sich ein Bearbeitungsfenster mit den folgenden Tabs:

• Website-Thema
• Website Grid
• Website Typografie
• Domain
• SEO und Tracker

Farb- und Design-Einstellungen (Website-Thema)

Der Tab "Website-Thema" ist in die 3 Bereiche "Hauptfarben", "Boxen" und "Kontraste" unterteilt, in welchen wiederum nachfolgende Eigenschaften mit HEX-Codes angepasst werden können. 
In der Vorschau auf der rechten Seite kannst du deine Anpassungen in Echtzeit überprüfen.

Hauptfarben:

• Die Buttons werden in der Primärfarbe dargestellt.
• Die Sekundärfarbe wird lediglich bei den Überschriften der einzelnen Bausteine wie bspw. Programm, Location, Anmeldung, etc. angewendet.
• Die Haupt-Hintergrundfarbe bezieht sich auf die einzelnen Bausteine - ohne Boxen oder gesetzte Kontraste.
• Darüber hinaus kannst du die Farbe des Haupttextes hinterlegen, welche sich auf die Fliesstexte bezieht.

Boxen:

• Der "Hintergrund rund um die Boxen" bezieht sich auf jene Widgets, welches die Inhalte in zusätzlichen Boxen darstellt. Dazu gehören z. B. die Bausteine "Anmeldung" und "Programm" (Layout 1 & 2). 
• Die  Farbgebung für den "Hintergrund in der Box" kann ebenfalls individuell definiert werden.
• Aktivierst du den Toggle "Flache Boxen", wird die Box ohne Umrandung ("Schatten") dargestellt. Durch die Umrandung wird die Box optisch etwas abgehoben.

Kontraste:

Um die Kontraste auf der Website anzuwenden, aktiviere bitte zunächst den Toggle. In dem sich nun öffnenden Bereich kannst du folgende Einstellungen vornehmen:

• Mithilfe des Feldes "Kontrast Hintergrundfarbe" kannst du den Kontrast für all jene Bausteine definieren, in welchen der Toggle "Kontraste" aktiviert wurde. Mehr Infos findest du in den jeweils gewünschten Bausteinen. Standardmässig gilt dies insbesondere für den Header (Layout 2) sowie den Footer.
• Damit auch die Schrift den jeweiligen Widgets, bei welchen der "Kontrast Hintergrund" angewendet wurde gut lesbar ist, kannst du die entsprechende Farbe im Feld "Kontrast Textfarbe" definieren.

Linien und Rahmen:

• Über den Regler unter "Linien und Rahmen" hast du die Möglichkeit einzustellen, wie abgerundet die Ecken deiner Buttons dargestellt werden sollen. Ist der Regler ganz links sind die Buttons eckig, je weiter der Regler nach rechts verschoben wird, je abgerundeter werden die Buttons dargestellt.
  
  
• Der Regler unter "Linienstärke" ermöglicht dir die Rahmenlinie deines Buttons dicker darzustellen. 

Abstände (Padding & Margin) definieren (Website-Grid)

Der Reiter "Website Grid" bietet dir die Möglichkeit, die Abstände beispielsweise außer- oder innerhalb der einzelnen Bausteine sowie zwischen diesen zu verändern. Dabei kannst du zwischen einer horizontalen und vertikalen Ausrichtung unterscheiden.

Auf der Skala stehen dir dabei Werte zwischen 0 und 12 zur Verfügung. 0 suggeriert dabei den kleinsten Abstand, während 12 den größten Abstand darstellt.

• Outer Margin: über diese beiden Schalter legst du unter "Horizontal" fest, wie groß der äußere Abstand der Bausteine, sprich vom Website-Rand zum Baustein sein soll. Unter "vertikal" definierst du, welchen äußeren Abstand die einzelnen Bausteine nach oben oder unten haben.
• Inner Margin: über den Regler unter "Horizontal" hinterlegst du, welchen Abstand die Inhalte (z. B. Texte, Bilder oder Videos) links und rechts zum Bausteinrand haben. Mithilfe des Schalters unter "Vertikal" kannst du den Abstand innerhalb der Bausteine nach oben und unten anpassen.
• Padding zwischen Bausteinen: Dieser Regler bietet dir die Möglichkeit einzustellen, wie groß der Abstand zwischen den einzelnen Bausteinen auf deiner Website sein soll. Anders als beim Outer Margin ("Vertikal") wird der Abstand hierbei jedoch nicht für die Bausteine Navigation, Header oder Footer übernommen.

Für das "Smartphone Grid" stehen dir analog zur Desktop und Tablet-Version die folgenden Einstellungsmöglichkeiten zur Verfügung:

• Outer Margin (horizontal & vertikal)
• Padding zwischen Bausteinen

Du möchtest sehen, wie die Abstände in der mobilen Version aussehen? Wechsle dazu mithilfe der Smartphone-Icons im Vorschau-Bereich ganz rechts zur mobilen Ansicht.

Sowohl für die mobile als auch die Desktop/Tablet-Ansicht siehst du In der Vorschau direkt, wie sich deine Anpassungen auf die Struktur deiner Website auswirken. 

Du möchtest deine Einstellungen gerne rückgängig machen? Dann klicke auf den Button "Auf Standard zurücksetzen". 

Inhaltsbreite

Definiere in einem weiteren Schritt im Reiter "Website Grid" die Breite deiner Website. Dafür stehen dir drei Pixelgrössen zur Verfügung:

• 960 px
• 1.280 px
• 1.920 px

Eine weitere Option besteht darin, die Breite der Website nicht zu beschränken.

Die Breite ist standardmässig mit 1.280 px vordefiniert.

Schriften hinterlegen (Website-Typografie)

Über den Tab "Website-Typografie" definierst du die Schriftstärke- & größe sowie Zeilenhöhe und kannst deine Fonts hochladen.

• Überschrift 1 bezieht sich auf den Eventnamen im Header-Baustein.
• Überschrift 2 beeinflusst die Überschriften der einzelnen Bausteine (z. B. "Freitext", "Referenten", "Location" etc).
• Überschrift 3 bezieht sich bspw. auf die Adresse der Location oder die Vor- und Nachnamen der Referenten.
• Fliesstext bezieht sich auf jeden Text in den Freitext- oder Beschreibungsfeldern, wie z. B. die Referententitel und Beschreibungen oder die Anfahrtsbeschreibung unter "Location".

Bei der Schriftstärke kannst du im Dropdown für deine Überschriften (1-3) sowie den Fliesstext zwischen fein, normal, fett und extra-fett wählen. 

Die Schriftgröße kannst du ebenfalls über den Dropdown definieren. Die Einheit ist pt, sprich point font. Über das Stiftsymbol hast du zusätzlich die Möglichkeit die Schriftgrösse manuell zu hinterlegen.

Über die Zeilenhöhe kannst du den Abstand zwischen den einzelnen Zeilen definieren. Auch diesen Abstand kannst du den Dropdown bestimmen.