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 neben "Unveröffentlichter Entwurf" auf das Bearbeitungssymbol evenito.jpg

Bildschirmfoto_2020-10-28_um_08.53.28.png

Anschliessend öffnet sich ein Bearbeitungsfenster mit den folgenden Tabs:

Farb- und Design-Einstellungen

Vollbild_21_01_22__10_52.png

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 Titeln 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 "Hintergrundfarbe 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.
  • 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.

Abstände (Padding & Margin) definieren

evenito.png

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 die mobile Website Grid stehen dir analog zur Desktop und Table-Version die folgenden Einstellungsmöglichkeiten zur Verfügung:

  • Outer Margin (vertikal & horizontal)
  • 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". 

Bitte beachte: alle Anpassungen beziehen sich auf alle Widgets. Es besteht aktuell nicht die Möglichkeit Änderungen nur für spezifische Bausteine vorzunehmen. 

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.

Bitte beachte: selbst wenn du die Breite des Inhalts bzw. deiner Website bspw. auf 1.280 px setzt, kannst du den Inhalt der einzelnen Bausteinen dennoch auf die volle Breite ausspielen. Dies bietet sich bspw. bei dem Header an.

Schriften hinterlegen

Über den Tab "Website Typografie" definierst du die Schriftstärke und kannst deine Fonts hochladen. Bei der Schriftstärke kannst du dabei für deine Überschriften, die Zwischenschrift sowie den Fliesstext zwischen fein, normal, fett und extra-fett wählen. 

Bitte beachte: deine Schriften können mithilfe des Dateimanagers in den Formaten .ttf, .woff oder .woff2 in evenito hochgeladen werden.

Nächster Schritt: Website-Struktur erstellen

War dieser Beitrag hilfreich?
0 von 0 fanden dies hilfreich

Kommentare

0 Kommentare

Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.