Die grafische Oberfläche einer Website wird innerhalb von sogenannten Themes bestimmt.
Bevor mit dem Bilden der Website 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.
1. Erste Schritte
Um Stylingangaben zu hinterlegen, musst du zuerst in die Theme-Einstellungen gelangen:
1. Öffne das Design-Tab in der Seitenverwaltung:
Innerhalb dieser Kategorie befindet sich eine Auflistung der verschiedenen Theme's, welche für deine Website installiert sind.
2. Scrolle etwas nach unten und suche nach dem Theme: iqual Barrio Subtheme
3. Klicke auf "Einstellungen" um in den Stylingbereich zu gelangen:
4. Du befindest dich nun in der Design-Maske und kannst mit dem gestalten deiner Website beginnen
| Table of Contents | ||||
|---|---|---|---|---|
|
2. Farben
2.1 Base Color Definitions
Innerhalb der Base Color Definitions definierst du ein Schema mit den wichtigsten Farben, welche anschliessend
für die verschiedenen Elemente und Bereiche verwendet werden können.
1. Klicke auf das Rechteck der Farbe, welche du anpassen möchtest
2. Wähle mithilfe des Farbeditors die gewünschte Farbe
| Expand | ||
|---|---|---|
| ||
1: Im Farbeditor stehen dir eine Auswahl von Grundfarben zur Verfügung. Du kannst sie entweder direkt übernehmen oder sie anwählen und mithilfe der Palette (2a) abändern. 2a: Innerhalb der Farbpalette (Colorpicker) kannst du nach deiner gewünschte Farbe suchen. 2b: Mithilfe dieses Reglers, kannst du die Helligkeit deiner Farbe bestimmen 3: Ansicht deiner aktuell ausgewählten Farbe 4: Liegt dir ein RGB-Wert vor, kannst du die Werte manuell eintragen 5a: Möchtest du eine Farbe mehrere Male verwenden, kannst du sie mithilfe dieses Buttons zu den "Benutzerdefinierten Farben" hinzufügen. 5b: Übersicht deiner benutzerdefinierten Farben |
-
-
| Info | ||
|---|---|---|
| ||
→ Die Farben Schwarz & Weiss 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 kannst du nun verschiedenen Seitenbereichen zuordnen.
1. Wähle für alle Bereiche den Hintergrund (Hintergrundfarbe) und die Textfarbe (Font Color) aus.
2. Bestimme die Transparenz eines Objekts mithilfe der Option "Opacity"
3. Überprüfe deine Einstellungen mithilfe der Live-Vorschau (Preview) innerhalb der rechten Seitenhälfte.
| Expand | ||
|---|---|---|
| ||
|
4. Speichere deine Konfigurationen
-
| Info | ||
|---|---|---|
| ||
→ Komplett undurchsichtig: 1 |
3. Typography
Innerhalb dieser Kategorie können sämtliche Stylings für Schriften definiert werden.
3.1 Headings
Beinhaltet die 6 Überschriften (H1 - H6), welcher zur Inhaltsstrukturierung (Hierarchieverhältnisse) dienen.
1. Gestalte die Überschriften mithilfe der Styling (Appearance)
2. Überprüfe deine Einstellungen mithilfe der Live-Vorschau (Preview) innerhalb der rechten Seitenhälfte.
3. Speichere deine Konfigurationen
3.2 Text Elements
Innerhalb dieses Tabs kannst du 6 verschiedenen Text-Styles erstellen.
1. Gestalte die Textelemente mithilfe der Styling (Appearance)
2. Überprüfe deine Einstellungen mithilfe der Live-Vorschau (Preview) innerhalb der rechten Seitenhälfte.
3. Speichere deine Konfigurationen
4. Nutze die Styles im Editor des Pagedesigners
3.3 Links
1. Style den Link mithilfe der Styling (Appearance)
→ Standard: So sieht der Link standardmässig aus
→ Hover: So sieht der Link aus, wenn du mit der Maus darüber fährst
3. Überprüfe deine Einstellungen mithilfe der Live-Vorschau (Preview) innerhalb der rechten Seitenhälfte.
4. Speichere deine Konfigurationen
-
-
-
4. Navigation
Innerhalb dieser Kategorie wird das Styling für 3 verschiedene Navigationen definiert.
1. Gestalte die Navigationen mithilfe der Styling (Appearance)
2. Überprüfe deine Einstellungen mithilfe der Live-Vorschau (Preview) innerhalb der rechten Seitenhälfte.
3. Speichere deine Konfigurationen
4.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 | ||
|---|---|---|
| ||
|
4.2 Mobile Navigation
Die Mobile Navigation wird auf Mobile-Geräten zuerst in der Form eines Burgers. Nach einem Klick darauf wird der Navigationsinhalt (die Seiten) eingeblendet oder ausgeklappt:
| Expand | ||
|---|---|---|
| ||
|
4.3 Sidebar Navigation
Sidebar Navigation befindet sich auf Desktop-Geräten am Seitenrand einer Inhaltsseite:
| Expand | ||
|---|---|---|
| ||
|
3. Styling
Im Tab "Styling" kannst du die Werte für Border (Rahmen) sowie diverse Abstände (Margin & Padding) definieren:
1. Gestalte die Elemente mithilfe der Styling (Appearance)
2. Speichere deine Konfigurationen
3.1 Border
→ DW: Option "Style" funktioniert nicht.
In dieser Kategorie kannst du die Rahmen für die Eingabefelder der Webformulare Stylen:
| Expand | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||
|
3.2 Margin
Das Margin stellt den Aussenabstand eines Elements dar:
| Expand | ||
|---|---|---|
| ||
3.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
|
3.2 Verschieben mit Gewichtung
1. Öffne die Seiteneigenschaften und lege die Gewichtung im Bereich "Menüeinstellungen" fest.
| Expand | ||
|---|---|---|
| ||
|
-
| Info | ||
|---|---|---|
| ||
→ Je kleiner/leichter die Zahl, desto weiter oben erscheint die Seite im Seitenbaum. |
4. Seite publizieren oder depublizieren
1. Klicke auf das Burger-Symbol einer Seite und wähle die Option "Publish" oder "Unpublish" um den Publikationsstatus zu ändern.
| Expand | ||
|---|---|---|
| ||
|
-
| Info | ||
|---|---|---|
| ||
Rot: Es gibt keine Live-Version dieser Seite, da sie nicht veröffentlicht ist. Der Inhalt ist für Besucher nicht sichtbar. Orange: Die Bearbeitungsversion unterscheidet sich von der Live-Version. Es wurden nicht alle Änderungen veröffentlicht. Grün: Bearbeitungsversion und Live-Version sind identisch und veröffentlicht. |
-
-
5. Seite kopieren
1. Öffne die Seiteneigenschaften und klappe den Bereich "Copy Page" auf.
2. Such nach der gewünschten Seite, deren Inhalt kopiert werden soll, indem du den Seitentitel oder Teile davon eingibst (autocompletion)
3. Wähle die gewünschte Sprache aus
| Expand | ||
|---|---|---|
| ||
Deutscher Inhalt der Seite "Anlässe" wird in die aktuelle Seite kopiert |
-
| Info | ||
|---|---|---|
| ||
|
6. Seite löschen
Zum löschen einer Seite stehen dir die folgenden beiden Möglichkeiten zur Verfügung:
1. Klicke auf das Burger-Symbol einer Seite und wähle die Option Delete Page.
2. Öffne die Seiteneigenschaften und klicke auf den Lösch-Button am unteren Seitenrand.
7. Pagedesigner Part erstellen
1. Erstelle eine neue Seite - nutze dafür eine der beiden Möglichkeiten:
→ Mittels Klick auf das "Plus-Icon" gelangst du direkt in die Maske zur Erstellung einer neuen Seite
→ Mittels Klick auf das "Burger-Icon" öffnen sich die Seitenoptionen - wähle anschliessend "New Page"
2. Wähle in der darauffolgenden Maske den Content Type "Pagedesigner Parts"
| Expand | ||
|---|---|---|
| ||
Pagedesigner Parts sind Seiten mit statischen Eigenschaften. Dies bedeutet, dass deren Inhalt auf mehreren Seiten verwendet werden kann. Ein Beispiel dafür ist der sogenannte Footer, welcher am Ende von fast allen Seiten angezeigt wird. Damit der Footer nicht auf jeder einzelnen Seite erfasst werden muss, kann er einmalig als Pagedesigner Part erstellt und befüllt werden. Anschliessend wird das Element von der Entwicklung so konfiguriert, dass es auf allen Seiten (oder auf bestimmten) ausgespielt wird. |
-
...