Familiy

smart+nice+strong

+41 76 720 61 83
peter.mast@gmail.com

wichtige Links:

Stile für Websites

siehe auch: Stile für Websiten anpassen

Mithilfe von Stilen kannst du das Design deiner Website mit verschiedenen Farben, Typografie-Einstellungen und Layout-Optionen anpassen. In diesem Ratgeber erfährst du, wie du Stile verwenden kannst, um für deine gesamte Website ein einheitliches Design sicherzustellen.

So findest du den Bereich „Stile“:

1. Rufe das Dashboard (Backend) deiner Website auf

2. Navigiere zu Design >Editor und wähle dort Stile

  • Stile (9 Varianten, wie in Theme TT5)
  • Navigation Menü-Verwaltung für den Navigations-Block
  • Seiten (individuell, je nachdem welche Seiten angelegt wurden)
  • Templates (8 Templates)
  • Vorlagen 307 Vorlagen + 7 Template-Teile

3. Wähle im Menü Stile die Option durchstöbern:

  • Durchstöbere Stile (nur bestimmte Themes, wie TT5)
  • Typografie für Text, Link, Überschrift, Beschriftung, Button
  • Farben für Text, Link, Überschrift, Beschriftung, Button
  • Hintergrund: Hintergrundbild festlegen
  • Schatten: Natural, Deep, Sharp, Outlined, Crisp
  • Layout für: Inhaltsbreite, Innen+Aussen+Blockabstände
  • Blöcke: einzelne Blöcke für gesamte Website designen

Exkurs:
Bei bestimmten Themes, wie in Twenty Twenty-Five(TT5), kannst du aus verschiedenen Stilkombinationen auswählen. In Stile durchstöbern siehst Du die 9 Stilvarianten mit den 9 dazugehörenden Farb-Paletten und den 8 Typografie-Varianten, die ausgewählt und beliebig vermischt werden können. Solange du nicht auf speichern klickst, kannst du alles gefahrlos ausprobieren.

durchstöbern Stile
durchstöbern Stile

Im mittleren Bildteil sind die 9 Stil-Varianten zu sehen. Im abgebildeten Bild ist die 1-te (Standard) Variante ausgewählt. Im rechten Bildteil sehen die die Homepage deren Aussehen sich sofort, nach der gewählten Variante verändert. Die 9 Stil-Varianten(Palette, Typografie) können beliebig vermischt werden. Wenn Sie auf das Augen-Icon klicken wird anstelle der Homepage das Stilbuch angezeigt mit allen wählbaren Blöcken, um deren Aussehen zu bemustern.

Stile durchstöbern

Manche Themes enthalten verschiedene Stilvariationen (so auch TT5 mit 9 Stil-Varianten), um beispielsweise mit unterschiedlichen Schriftarten und Farben zu experimentieren. Mit diesen Stilvariationen kannst du deine Website mit vorgefertigten, vertrauenswürdigen Designs schnell optimieren und personalisieren. Das Theme Twenty Twenty-Five hat 9 Stile, mit dazugehörender Palette und Typography, welche beliebig miteinander kombiniert werden können:

Stil

Palette

Typography

Farbbedeutung Standard

2. Abend

Fira Code
Manrope

2. Contrast Haupttext für max. Lesbarkeit
tief Schwarz

3. Mittag

Beiruti
Literata(16 Variants)

3. Accent1 Links, Buttons, Hervorhebungen
grelles Gelb

4. Dämmerung

Vollkorn(2 Variants)
Fira Code

4. Accent2 für Call-to-Action, dekorative Elemente
sanftes Rosa

5. Nachmittag

Platypi(2 Variants)
Ysabeau Office(2 Var:)

5. Accent3 für visuelle Differenzierung
tiefes Violett

6. Zwielicht

Roboto Slab
Manrope

6. Primary für Überschriften, Hauptinhalte
mittleres Grau

7. Morgen

Literata(16 Variants)
Ysabeau Office(2 Var.)

7. Secondary für Karten, Zitate
Hellbeige

8. Sunrise

Platypi(2 Vaiants)
Literata(16 Var.)

8. Opacity 20% Schatten, Overlays, Hover-Effekte
Schwarz (20% Deckkraft)

9. Mitternacht

Literata
Fira Sans(18 Var.)

Typografie

Verwende die Typografie-Einstellungen, um das Design des Textes auf deiner Website zu verwalten.

Du kannst die Einstellungen getrennt vornehmen für:

  • Text
  • Links
  • Überschriften
  • Untertitel
  • Buttons

Unter „Typografie“ findest du die folgenden Optionen:

  • Schrift: Damit kannst du eine Schriftfamilie auswählen und auf den Text anwenden.
  • Größe: Damit kannst du die Schriftgröße festlegen. Du kannst aus einer Reihe von Standard-Schriftgrößen auswählen oder mithilfe des Slider-Buttons über der Schriftauswahl eine individuelle Größe in PX, EM, REM, VW, VH festlegen.
  • Mit Design änderst du die Schriftstärke (von dünn bis extra-fett) und die Neigung (normal oder kursiv).
  • Mit der Zeilenhöhe wird der Abstand oberhalb und unterhalb des Textes festgelegt. (Risiken: Ein Wert unter 1 (wie 0) ist nicht empfohlen, da Zeilen besonders auf kleinen Bildschirmen übereinander dargestellt werden.)
Typografie-Einstellungen
Typografie-Einstellungen

Schriftgrössen-Exkurs:

px Pixel
Für den Fließtext werden oft 18px auf dem Desktop und 16px auf mobilen Geräten empfohlen. Die Verwendung von Pixeln (px) ist fest, während Einheiten wie em oder rem eine bessere Skalierung für verschiedene Bildschirmgrößen ermöglichen.

em (Elternelement)
ist eine relative Einheit. Ist der Elterntext 16px, entsprechen 2em genau 32px (2x16px).

rem (Root EM)
entspricht in der Regel der Standardschriftgröße des Browsers (standardmäßig 16px). Es bleibt konstant, unabhängig von Verschachtelungen, was die Berechnung vereinfacht (z.B. 18px=18/16=1.125𝑟𝑒𝑚).

Umrechnung (bei 16px Basis):

  • 10px = 0.625rem
  • 12px = 0.75rem
  • 14px = 0.875rem
  • 16px = 1rem
  • 18px = 1.125rem
  • 20px = 1.25rem
  • 24px = 1.5rem
  • 32px = 2rem 

vw (Viewport Width)
5 vw entspricht 5% der Browserfensterbreite.

vh (Viewport Height)
5 vh entspricht 5% der Browserfensterhöhe.

Farben

Anhand der Farbeinstellungen kannst du die Farbpaletten für die globalen Elemente deiner Website verwalten. Wenn du z. B. die Hintergrundfarbe deiner Website ändern möchtest, würdest du für diese Änderung das Hintergrundelement verwenden.

Die erste Option, die du hier siehst, ist für die Palette. Die Farbpalette deiner Website legt die Standardfarben fest, die auf deiner Website verwendet werden. Du kannst zwar immer noch die Farbe eines einzelnen Elements festlegen, aber die Definition deiner Farbpalette gewährleistet ein konsistentes Farbschema auf deiner Website.

In den Farbeinstellungen direkt unter der Palette wird dir die Option zum Bearbeiten der Farbe von verschiedenen Elementen deiner Website angezeigt. Diese Elemente sind:

  • Text
  • Hintergrund
  • Links
  • Untertitel
  • Buttons
  • Überschriften

Hintergrund

Hintergrundbild für die gesamte Website festlegen.
Klicke auf den Button Hintergrundbild festlegen, um ein Bild aus deiner Mediathek auszuwählen oder ein Bild von deinem Computer hochzuladen.

Schatten

Verwende die Schatten-Einstellungen, um die standardmäßigen Schattenstile anzupassen, die für Elemente auf deiner Website verwendet werden. Die hier definierten Schattenstile können dann in den Schatteneinstellungen bestimmter Blöcke verwendet werden, die Schattenoptionen enthalten (einschließlich Button, Bild und Spalten). Themes enthalten die Standardstile „Natural“ (Natürlich), „Deep“ (Tief), „Sharp“ (Schlagschatten), „Outlined“ (Umrissen) und „Crisp“ (Scharf). Klicke auf das + -Icon neben Angepasst, um die Farbe, den Winkel, die Verteilung und die Unschärfe zu verfeinern und deine eigenen Schattenstile zu erstellen.

Layout

Verwende die Layout-Einstellungen, um die Breite des Inhaltsbereichs deiner Website zu steuern, den Innenabstand hinzuzufügen und den Abstand zwischen Blöcken anzupassen.

Blöcke

Klicke im Stile-Bereich auf Blöcke, um das Design bestimmter Blöcke für die gesamte Website anzupassen. Hier siehst du eine Liste aller Blöcke, die du auf Website-Ebene anpassen kannst. Wähle einen Block aus, um die verfügbaren Optionen für diesen Block anzuzeigen. Die Änderungen, die du mithilfe von Stilen an Blöcken vornimmst, wirken sich auf alle Blöcke dieses Typs aus, die du zu deiner Website hinzugefügt hast, es sei denn, du hast einen Block individuell angepasst. Wenn du z. B. einen Buttons-Block zu deiner Kontaktseite hinzugefügt und ihm eine gelbe Hintergrundfarbe zugewiesen hast, wird diese gelbe Farbe durch deine Änderung in den Stilen nicht überschrieben. Wenn du jedoch den Buttons-Block auf deiner Kontaktseite eingefügt und die Standardfarbe nicht geändert hast, wird der Block die Farbe annehmen, die du hier unter „Stile“ festgelegt hast.

Stilbuch

Um die Auswirkungen deiner Änderungen auf alle möglichen Inhalte zu sehen, die du zu deiner Website hinzufügen könntest, verwende das Stilbuch. Es zeigt dir Beispiele dafür, wie alle verfügbaren Blöcke nach dem Speichern von Stiländerungen aussehen.

  1. Klicke im Stile-Bereich oben rechts auf den Button Stilbuch. Das Icon sieht aus wie ein Auge, wie im Bild rechts.
  2. Navigiere mithilfe der Tabs oben auf dem Bildschirm zwischen verschiedenen Kategorien von Blöcken wie Text, Medien, Design und mehr.
  3. Klicke erneut auf das Stilbuch-Icon, um es zu deaktivieren und zu deinen Inhalten zurückzukehren.