Die grafische Oberfläche einer Website wird innerhalb von sogenannten Themes bestimmt.
Bevor mit der Seitenerstellung begonnen wird, empfehlen wir das definieren der wichtigsten Stylings gemäss CD (Corporate Design) deines Unternehmens:
- Farben (Farbschema)
- Struktur
- Schriften
- Muster
- Hauptelemente (z.B Buttons oder Navigationen)
Anschliessend besitzt die Website bereits einen individuellen Charakter und kann mit Inhalt befüllt werden.
| Expand | ||||||
|---|---|---|---|---|---|---|
| ||||||
|
1. Erste Schritte
Um Stylingangaben zu hinterlegen, müssen Sie zuerst in die Theme-Einstellungen gelangen:
1. Öffnen Sie das Design-Tab in der Seitenverwaltung:
Innerhalb dieser Kategorie befindet sich eine Auflistung der verschiedenen Themes, welche für Ihre Website installiert sind.
2. Scrollen Sie etwas nach unten und suchen Sie nach dem Theme: iqual Barrio Subtheme
3. Klicken Sie auf "Einstellungen" um in den Stylingbereich zu gelangen:
4. Sie befinden sich nun in der Design-Maske und können mit dem Gestalten deiner Website beginnen
| Table of Contents | ||||
|---|---|---|---|---|
|
Anchor Farben Farben
| Farben | |
| Farben |
2. Farben
2.1 Base Color Definitions
Innerhalb der Base Color Definitions definieren Sie ein Schema mit den wichtigsten Farben, welche anschliessend
für die verschiedenen Elemente und Bereiche verwendet werden können.
1. Klicken Sie auf das Rechteck der Farbe, welche Sie anpassen möchten
2. Wähle Sie mithilfe des Farbeditors die gewünschte Farbe
| Expand | ||
|---|---|---|
| ||
1: Im Farbeditor stehen Ihnen eine Auswahl von Grundfarben zur Verfügung. Sie können sie entweder direkt übernehmen oder sie anwählen und mithilfe der Palette (2a) abändern. 2a: Innerhalb der Farbpalette (Colorpicker) können Sie nach der gewünschte Farbe suchen. 2b: Mithilfe dieses Reglers, können Sie die Helligkeit deiner Farbe bestimmen 3: Ansicht Ihrer aktuell ausgewählten Farbe 4: Liegt Ihnen ein RGB-Wert vor, können Sie die Werte manuell eintragen 5a: Möchten Sie eine Farbe mehrere Male verwenden, können Sie sie mithilfe dieses Buttons zu den "Benutzerdefinierten Farben" hinzufügen. 5b: Übersicht Ihrer benutzerdefinierten Farben |
-
-
| Info | ||
|---|---|---|
| ||
→ Die Farben Schwarz & Weiss müssen Sie nicht in den Base Color Settings definieren, sie sind standardmässig hinterlegt und können für jedes Element ausgewählt werden. |
2.2 Color Assignments
Die im Kapitel 2.1 definierten Farben können Sie nun verschiedenen Seitenbereichen zuordnen.
1. Wählen Sie für alle Bereiche den Hintergrund (Hintergrundfarbe) und die Textfarbe (Font Color) aus.
2. Bestimmen Sie die Deckkraft eines Objekts mithilfe der Option "Opacity"
3. Überprüfen Sie ihre Einstellungen mithilfe der Live-Vorschau (Preview) innerhalb der rechten Seitenhälfte.
| Expand | ||
|---|---|---|
| ||
|
4. Speichern Sie ihre Konfigurationen
-
| Info | ||
|---|---|---|
| ||
→ Komplett undurchsichtig: 1 |
4. Typography
Innerhalb dieser Kategorie können sämtliche Stylings für Schriften definiert werden.
4.1 Headings
Beinhaltet die 6 Überschriften (H1 - H6), welche zur Inhaltsstrukturierung (Hierarchieverhältnisse) dienen.
1. Gestalte Gestalten Sie die Überschriften mithilfe der Stylingoptionen
2. Überprüfe deine Überprüfen Sie ihre Einstellungen mithilfe der Live-Vorschau (Preview) innerhalb der rechten Seitenhälfte.
3. Speichere deine Speichern Sie ihre Konfigurationen
4.2 Text Elements
Innerhalb dieses Tabs kannst du 6 verschiedenen können Sie 6 verschiedene Text-Styles erstellen.
1. Gestalte Gestalten Sie die Textelemente mithilfe der 1187414355 Stylingoptionen
2. Überprüfe deine Überprüfen Sie ihre Einstellungen mithilfe der Live-Vorschau (Preview) innerhalb der rechten Seitenhälfte.
3. Speichere deine Speichern Sie ihre Konfigurationen
4.3 Links
1. Style Stylen Sie den Link mithilfe der 1187414355 Stylingoptionen
→ Standard: So sieht der Link standardmässig aus
→ Hover: So sieht der Link aus, wenn du Sie mit der Maus darüber fährstfahren
3. Überprüfe deine Überprüfen Sie ihre Einstellungen mithilfe der Live-Vorschau (Preview) innerhalb der rechten Seitenhälfte.
4. Speichere deine Speichern Sie ihre Konfigurationen
-
-
-
5. Navigation
Innerhalb dieser Kategorie wird das Styling für 3 verschiedene Navigationen definiert.
1. Gestalte Gestalten Sie die Navigationen mithilfe der 1187414355 Stylingoptionen
2. Überprüfe deine Überprüfen Sie ihre Einstellungen mithilfe der Live-Vorschau (Preview) innerhalb der rechten Seitenhälfte.
3. Speichere deine Speichern Sie ihre Konfigurationen
5.1 Main Navigation
Die Main Navigation befindet sich zumeist am Seitenanfang und wird auf Desktop-Geräten angezeigt.
Charakteristisch für diese Navigation sind die Unterseiten in Form eines Dropdowns:
| Expand | ||
|---|---|---|
| ||
|
5.2 Mobile Navigation
Die Mobile Navigation wird auf Mobile-Geräten zuerst in der Form eines Burgers angezeigt. Nach einem Klick darauf wird der Navigationsinhalt (die Seiten) eingeblendet oder ausgeklappt:
| Expand | ||
|---|---|---|
| ||
|
5.3 Sidebar Navigation
Sidebar Navigation befindet sich auf Desktop-Geräten am Seitenrand einer Inhaltsseite:
| Expand | ||
|---|---|---|
| ||
|
6 Styling
Im Tab "Styling" kannst du können Sie die Werte für Border (Rahmen) sowie diverse Abstände (Margin & Padding) definieren:
1. Gestalte Gestalten Sie die Elemente mithilfe der 1187414355 Stylingoptionen
2. Speichere deine Speichern Sie ihre Konfigurationen
6.1 Border
In dieser Kategorie kannst du können Sie die Rahmen für die Eingabefelder der Webformulare Stylen:
| Expand | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||
|
6.2 Margin
Das Margin stellt den Aussenabstand eines Elements dar. Für jede Kante (oben, unten, rechts, links) kann ein Wert hinterlegt werden.
| Expand | ||
|---|---|---|
| ||
Der Margin-Bereich (grüner Bereich) befindet sich ausserhalb eines Containers. Mithilfe dieses Wertes kann beispielsweise der Abstand zwischen zwei verschiedenen Elementen definiert werden. Beispiel 1: Margin top: 30px
Beispiel 2: Margin top: 0px
|
6.3 Padding
Das Padding stellt den Innenabstand eines Elements dar. Für jede Kante (oben, unten, rechts, links) kann ein Wert hinterlegt werden.
| Expand | ||
|---|---|---|
| ||
Der Padding-Bereich (oranger Bereich) befindet sich zwischen Container und dem darin enthaltenen Element (Bild). Beispiel 1: Padding top: 80px
Beispiel 2: Padding top: 10px
|
7. Buttons
Du hast Sie haben die Möglichkeit, 4 verschiedene Buttons zu gestalten.
1. Gestalte Gestalten Sie die Elemente mithilfe der 1187414355 Stylingoptionen
1.1 Color Settings & Inverted Color Settings: 1187414355 Farben
2. Überprüfe deine Überprüfen Sie ihre Einstellungen mithilfe der Live-Vorschau (Preview) innerhalb der rechten Seitenhälfte.
3. Speichere deine Speichern Sie ihre Konfigurationen
7.1 Zustände und Variationen
Diverse Elemente (darunter der Button) können in verschiedenen Zuständen auftreten:
→ Standard: So sieht das Element standardmässig aus
→ Hover: So sieht das Element aus, wenn du mit der Maus darüber fährst
→ Active: So sieht das Element aus, wenn es aktiv ist - meistens, nachdem darauf geklickt wurde.
Für Buttons kannst du können Sie 4 verschiedene Variationen definieren:
| Expand | ||
|---|---|---|
| ||
Default Button: Der Standard-Button auf hellem Hintergrund:
Default Button Inverted: Der Standard-Button auf dunklem Hintergrund:
Alternate Button: Ein alternativer Button für helle Hintergründe:
Alternate Button Inverted: Ein alternativer Button für dunkle Hintergründe:
|
-
8. Patterns / Muster
Patterns/Muster sind verschiedene Komponenten, welche du Sie auf deiner ihrer Website verwenden kannstkönnen.
1. Gestalte Gestalten Sie die Elemente mithilfe der Stylingoptionen
2. Speichere deine Speichern Sie ihre Konfigurationen
→ Anhand der unterstehenden Beispiele siehst dusehen Sie, wie die Patterns aussehen und wie sich die Stylingoptionen darauf auswirken:
8.1 Slider
Der Slider zeigt in einem vordefinierten Intervall verschiedene Bilder an.
| Expand | ||
|---|---|---|
| ||
1. Arrows - Background Color
|
8.2 Quote / Zitat
Ein Zitat hebt eine zitierte Textstelle mithilfe von Satzzeichen grafisch hervor:
| Expand | ||
|---|---|---|
| ||
1. Highlights (quote marks) - Color
2. Highlights (quote lines) - Color
|
8.3 Icons
Kleine Piktogramme:
| Expand | ||
|---|---|---|
| ||
1. Default Icon - Standard
|
8.4 Socials
Piktogramme mit Verlinkung auf bekannte Social Media Plattformen:
| Expand | ||
|---|---|---|
| ||
1. Social Icons - Color
|
8.5 Tabbed Content
Darstellung einer Ansammlung von Reitern (Tabs) - via Klick wird deren Inhalt eingeblendet.
Tabbed Content kann auch als Accordion dargestellt werden:
| Expand | ||
|---|---|---|
| ||
1. Tab Active - Font Color (Schriftfarbe) Ansicht "Tabbed":
|
8.6 Toggler
Dient als "Schalter" zum Ein- und Ausblenden von Elementen. Er besitzt die Form eines Burgers - sobald er aktiviert ist, wird er zum "Close-Button" (Kreuz). Der Toggler wird meistens zum Öffnen der mobilen Navigation eingesetzt:
| Expand | ||
|---|---|---|
| ||
1. Standard - Color |
8.7 Anchor Navigation
Anker dienen als Sprungmarken. Mittels Klick darauf, landet der Besucher an einer bestimmten Stelle einer Seite (automatisches Scrollen bis zum definierten Abschnitt).
Die Anchor Navigation stellt die Anker in Form einer Navigation dar:
| Expand | ||
|---|---|---|
| ||
1. Main Styling - Color Settings (Background) & Schriftenfamilie für das gesamte Element
|
...