Page Comparison

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

title	Video-Tutorial: Theme Einstellungen

Farben, Schriften und Grundeinstellungen

Multimedia

name	4-theme-einstellungen.mp4
height	280

1. Erste Schritte

Um Stylingangaben zu hinterlegen, müssen Sie musst du zuerst in die Theme-Einstellungen gelangen:

1. Öffnen Sie Öffne das Design-Tab in der Seitenverwaltung:

Innerhalb dieser Kategorie befindet sich eine Auflistung der verschiedenen Themes, welche für Ihre deine Website installiert sind.

2. Scrollen Sie Scrolle etwas nach unten und suchen Sie suche nach dem Theme: iqual Barrio Subtheme

3. Klicken Sie Klicke auf "Einstellungen" um in den Stylingbereich zu gelangen:

Image RemovedImage Added

4. Sie befinden sich Du befindest dich nun in der Design-Maske und können kannst mit dem Gestalten deiner Website beginnen

Table of Contents

maxLevel	4
style	none

Anchor
Farben
Farben

2. Farben

2.1 Base Color Definitions

Innerhalb der Base Color Definitions definieren Sie definierst du ein Schema mit den wichtigsten Farben, welche anschliessend
für die verschiedenen Elemente und Bereiche verwendet werden können.

1. Klicken Sie Klicke auf das Rechteck der Farbe, welche Sie du anpassen möchtenmöchtest

2. Wähle Sie mithilfe des Farbeditors die gewünschte Farbe

Expand

title	Detaillierte Informationen zum Farbeditor

1: Im Farbeditor stehen Ihnen steht dir eine Auswahl von Grundfarben zur Verfügung. Sie können Du kannst sie entweder direkt übernehmen oder sie anwählen und mithilfe der Palette (2a) abändern.

2a: Innerhalb der Farbpalette (Colorpicker) können Sie kannst du nach der gewünschte Farbe suchen.

2b: Mithilfe dieses Reglers, können Sie kannst du die Helligkeit deiner Farbe bestimmen

3: Ansicht Ihrer deiner aktuell ausgewählten Farbe

4: Liegt Ihnen dir ein RGB-Wert vor, können Sie kannst du die Werte manuell eintragen

5a: Möchten Sie Möchtest du eine Farbe mehrere Male verwenden, können Sie kannst du sie mithilfe dieses Buttons zu den "Benutzerdefinierten Farben" hinzufügen.

5b: Übersicht Ihrer deiner benutzerdefinierten Farben

-
-

Info

title	Tipps für die Farbauswahl

→ Auch wenn die Möglichkeit besteht, die Graustufen durch "Farben" zu ersetzen, wird davon abgeratensollte darauf verzichtet werden. Eine Palette mit Graustufen eignet sich besonders gut zum Definieren von Rahmen, Underlines oder Seitenabschnitten. Des Weiteren wird von einer Verwendung von zu vielen verschiedenen Farben abgeraten, da eine Website dadurch überladen wirken kann.

→ Die Farben Schwarz & Weiss müssen Sie musst du 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 Farben kannst du nun verschiedenen Seitenbereichen zuordnen.

1. Wählen Sie Wähle für alle Bereiche den Hintergrund (Hintergrundfarbe) und die Textfarbe (Font Color) aus.

2. Bestimmen Sie Bestimme die Deckkraft eines Objekts mithilfe der Option "Opacity"

3. Überprüfen Sie ihre Überprüfe deine Einstellungen mithilfe der Live-Vorschau (Preview) innerhalb der rechten Seitenhälfte.

Expand

title	Ansicht Live-Vorschau

4. Speichern Sie ihre Speichere deine Konfigurationen

-

Info

title	Opacity

Die Deckkraft/Opacity wird mit Werten zwischen 0-1 definiert:

→ Komplett undurchsichtig: 1
→ Durchscheinend: 0.1 - 0.9
→ Transparent: 0

3. Übersicht Stylingoptionen

Hier finden Sie findest du eine Übersicht der wichtigsten Stylingoptionen in alphabetischer Reihenfolge. Spezifische Stylings für Komponenten finden Sie findest du in den dazugehörigen Kapiteln.

Anchor

	Stylingoptionen
	Stylingoptionen

Feld	Bedeutung	Optionen	Beispiel
Background color	Hintergrundfarbe	Auswahl der definierten Farben	Primary Color
Border bottom	Untere Rahmenlinie (Dicke)	Zahl (je nach Einheit*)	1px
Border color	Ramenfarbe	Auswahl der definierten Farben	Grey 5
Border color (Hover)	Rahmenfarbe bei Mouseover	Auswahl der definierten Farben	Grey 1
Border left	Linke Rahmenlinie (Dicke)	Zahl (je nach Einheit*)	1px
Border radius	Eckenrundung des Rahmens	Zahl (je nach Einheit*)	50%
Border right	Rechte Rahmenlinie (Dicke)	Zahl (je nach Einheit*)	5px
Border top	Obere Rahmenlinie (Dicke)	Zahl (je nach Einheit*)	5px
Farbe (Font color)	Schriftfarbe	Auswahl der definierten Farben	Black
Font size	Schriftgrösse	Zahl (je nach Einheit*)	20px
Font size (max)	Schriftgrösse (Desktop)	Zahl (je nach Einheit*)	2em
Font size (min)	Schriftgrösse (Mobile)	Zahl (je nach Einheit*)	4em
Font weight	Dicke der Schrift	100 (dünn) - 900 (dick)	300
Formatvorlage	Schriftauszeichnung	Normal oder Kursiv	Kursiv
Inverted Color**	Invertierte Farbe (alternativ)	Auswahl der definierten Farben	White
Line height	Höhe der Textzeile	Zahl	1.3
Margin bottom	unterer Aussenabstand	Zahl (je nach Einheit*)	10px
Margin left	linker Aussenabstand	Zahl (je nach Einheit*)	5%
Margin right	rechter Aussenabstand	Zahl (je nach Einheit*)	6.5%
Margin top	oberer Aussenabstand	Zahl (je nach Einheit*)	1.5rem
Opacity	Deckkraft	0 - 1	0.3
Padding bottom	unterer Innenabstand	Zahl (je nach Einheit)	2em
Padding left	linker Innenabstand	Zahl (je nach Einheit)	10px
Padding right	rechter Innenabstand	Zahl (je nach Einheit)	2%
Padding top	oberer Innenabstand	Zahl (je nach Einheit)	1.5rem
Schriftenfamilie	Schriftart	Auswahl von Schriftarten	Arial
Text decoration	Textunterstreichung	Linie, Punkte, Striche, Keine	Unterstrichen

-

Expand

title	*Übersicht der Masseinheiten

Bei einigen Optionen besteht die Möglichkeit, die Einheit auszuwählen:

EM & REM: Relative Masseinheiten, welche sich an der Grösse von Eltern- oder Wurzelelementen orientieren.

Prozent: Auch der Prozentwert (%) ist eine relative Einheit, welche mit Zahlen zwischen 0 und 100 befüllt werden kann.

Pixel (px): Pixel sind eine absolute Masseinheit, dies bedeutet, dass die Grösse im jedem Fall gleich bleibt.

→ https://www.mediaevent.de/tutorial/masseinheiten.html

Anchor

	inverted-color
	inverted-color

Expand

title	**Beschreibung Inverted Color

Die Inverted Color dient als Alternativfarbe, falls die Schrift in einer anderen Version benötigt wird. Am häufigsten tritt dieser Fall ein, wenn sich auf der Seite Abschnitte mit verschiedenen Hintergrundfarben befinden.

Beispiel: Deine Website hat einen weissen Inhaltsbereich. Die Standardfarbe Ihrer deiner Überschrift ist dunkelgrau. Nun möchten Sie möchtest du dieselbe Überschrift jedoch im schwarzen Footer verwenden.

→ Da Grau auf Schwarz keinen Sinn ergibt, definieren Sie definierst du eine helle Inverted Color, welche Sie du als Alternative benutzen könnenkannst, sobald ein Bereich einen dunklen Hintergrund besitzt.

-
-

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. Gestalten Sie Gestalte die Überschriften mithilfe der Stylingoptionen

2. Überprüfen Sie ihre Überprüfe deine Einstellungen mithilfe der Live-Vorschau (Preview) innerhalb der rechten Seitenhälfte.

3. Speichern Sie ihre Speichere deine Konfigurationen

4.2 Text Elements

Innerhalb dieses Tabs können Siekannst du 6 verschiedene Text-Styles erstellen.

1. Gestalten Sie Gestalte die Textelemente mithilfe der Stylingoptionen

2. Überprüfen Sie ihre Überprüfe deine Einstellungen mithilfe der Live-Vorschau (Preview) innerhalb der rechten Seitenhälfte.

3. Speichern Sie ihre Speichere deine Konfigurationen

4.3 Links

1. Stylen Sie Style den Link mithilfe der Stylingoptionen

→ Standard: So sieht der Link standardmässig aus
→ Hover: So sieht der Link aus, wenn Sie du mit der Maus darüber fahrenfährst

3. Überprüfen Sie ihre Überprüfe deine Einstellungen mithilfe der Live-Vorschau (Preview) innerhalb der rechten Seitenhälfte.

4. Speichern Sie ihre Speichere deine Konfigurationen

-
-

-

Innerhalb dieser Kategorie wird das Styling für 3 verschiedene Navigationen definiert.

1. Gestalten Sie Gestalte die Navigationen mithilfe der Stylingoptionen

2. Überprüfen Sie ihre Überprüfe deine Einstellungen mithilfe der Live-Vorschau (Preview) innerhalb der rechten Seitenhälfte.

3. Speichern Sie ihre Speichere deine 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

title	Ansicht Dropdown

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

title	Ansicht Mobilenavigation

5.3 Sidebar Navigation

Sidebar Navigation befindet sich auf Desktop-Geräten am Seitenrand einer Inhaltsseite:

Expand

title	Ansicht Sidebar Navigation

6 Styling

Im Tab "Styling" können Sie kannst du die Werte für Border (Rahmen) sowie diverse Abstände (Margin & Padding) definieren:

1. Gestalten Sie Gestalte die Elemente mithilfe der Stylingoptionen

2. Speichern Sie ihre Speichere deine Konfigurationen

6.1 Border

In dieser Kategorie können Sie Kategorie kannst du die Rahmen für die Eingabefelder der Webformulare Stylen:

Expand

title	Beispiele für verschiedene Stylings

Option	Beispielwert	Ansicht
Breite	1px
Breite	5px
Color	Grey 2
Opacity	0.3
Border Radius	15px

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

title	Beispiele für Margins

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
Margin bottom: 30px
Margin left: 0px
Margin right: 0px

Beispiel 2:

Margin top: 0px
Margin bottom: 0px
Margin left: 45px
Margin right: 30px

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

title	Beispiele für Paddings

Der Padding-Bereich (oranger Bereich) befindet sich zwischen Container und dem darin enthaltenen Element (Bild).

Beispiel 1:

Padding top: 80px
Padding bottom: 80px
Padding left: 80px
Padding right: 80px

Beispiel 2:

Padding top: 10px
Padding bottom: 60px
Padding left: 30px
Padding right: 30px

7. Buttons

Sie haben Du hast die Möglichkeit, 4 verschiedene Buttons zu gestalten.

1. Gestalten Sie Gestalte die Elemente mithilfe der Stylingoptionen

1.1 Color Settings & Inverted Color Settings: Farben

2. Überprüfen Sie ihre Überprüfe deine Einstellungen mithilfe der Live-Vorschau (Preview) innerhalb der rechten Seitenhälfte.

3. Speichern Sie ihre Speichere deine 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 können Sie 4 verschiedene Variationen definieren:

Expand

title	Beispiele für Button-Variationen

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 Sie du auf ihrer deiner Website verwenden könnenkannst.

1. Gestalten Sie Gestalte die Elemente mithilfe der Stylingoptionen

2. Speichern Sie ihre Speichere deine Konfigurationen

→ Anhand der unterstehenden Beispiele sehen Siesiehst du, 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

title	Styling-Beispiel Slider

1. Arrows - Background Color
2. Arrows - Color
3. Dots - Color Standard
4. Dots - Color Active

8.2 Quote / Zitat

Ein Zitat hebt eine zitierte Textstelle mithilfe von Satzzeichen grafisch hervor:

Expand

title	Styling-Beispiel Zitat

1. Highlights (quote marks) - Color

2. Highlights (quote lines) - Color

8.3 Icons

Kleine Piktogramme:

Expand

title	Styling-Beispiel Icons

1. Default Icon - Standard
2. Default Icon - Inverted
3. Alternate Icon - Standard
4. Alternate Icon - Inverted

8.4 Socials

Piktogramme mit Verlinkung auf bekannte Social Media Plattformen:

Expand

title	Styling-Beispiel Socials

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

title	Styling-Beispiel Tabbed Content

1. Tab Active - Font Color (Schriftfarbe)
2. Tab Active - Color (Hintergrund)
3. Tab Standard - Font Color (Schriftfarbe)
4. Tab Standard - Color (Hintergrund)

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

title	Styling-Beispiel Toggler

1. Standard - Color

2. Hover - Color

3. Active - 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 Ankernavigation stellt die Anker in Form einer Navigation dar:

Expand

title	Styling-Beispiel Anchor Navigation

1. Main Styling - Color Settings (Background) & Schriftenfamilie für das gesamte Element
2. Standard - Background Color (orange), Border Color (orange)
3. Standard - Font Color (schwarz)
4. Hover & Active - Background Color (weiss), Border Color (weiss)
5. Hover & Active - Font Color (schwarz)

...

Versions Compared

Old Version 94

New Version Current

Key

1. Erste Schritte

Anchor
Farben
Farben

2. Farben

2.1 Base Color Definitions

2.2 Color Assignments

3. Übersicht Stylingoptionen

4. Typography

4.1 Headings

4.2 Text Elements

4.3 Links

5. Navigation

5.1 Main Navigation

5.2 Mobile Navigation

5.3 Sidebar Navigation

6 Styling

6.1 Border

6.2 Margin

6.3 Padding

7. Buttons

7.1 Zustände und Variationen

8. Patterns / Muster

8.1 Slider

8.2 Quote / Zitat

8.3 Icons

8.4 Socials

8.5 Tabbed Content

8.6 Toggler

8.7 Anchor Navigation

Page Comparison

Versions Compared

Old Version 94

New Version Current

Key

1. Erste Schritte

AnchorFarbenFarben

2. Farben

2.1 Base Color Definitions

2.2 Color Assignments

3. Übersicht Stylingoptionen

4. Typography

4.1 Headings

4.2 Text Elements

4.3 Links

5. Navigation

5.1 Main Navigation

5.2 Mobile Navigation

5.3 Sidebar Navigation

6 Styling

6.1 Border

6.2 Margin

6.3 Padding

7. Buttons

7.1 Zustände und Variationen

8. Patterns / Muster

8.1 Slider

8.2 Quote / Zitat

8.3 Icons

8.4 Socials

8.5 Tabbed Content

8.6 Toggler

8.7 Anchor Navigation

Anchor
Farben
Farben