Versions Compared

Old Version 75

changes.mady.by.user Karima Laghrami

Saved on

compared with

New Version Current

changes.mady.by.user Karima Laghrami

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Die grafische Oberfläche einer Website wird innerhalb von sogenannten Themes bestimmt. 

Bevor mit dem Bilden der Website 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
titleVideo-Tutorial: Theme Einstellungen
  • Farben, Schriften und Grundeinstellungen

Multimedia
name4-theme-einstellungen.mp4
height280

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'sThemes, 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: 

Image RemovedImage Added

4. Du befindest dich nun in der Design-Maske und kannst mit dem gestalten Gestalten deiner Website beginnen


Table of Contents
maxLevel4
stylenone

Anchor
Farben
Farben

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
titleDetaillierte Informationen zum Farbeditor

1: Im Farbeditor stehen steht 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 der gewünschte Farbe suchen.

2b: Mithilfe dieses Reglers, kannst  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
titleTipps 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 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 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 Deckkraft eines Objekts mithilfe der Option "Opacity"

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

Expand
titleAnsicht Live-Vorschau

4. Speichere deine Konfigurationen


-

Info
titleOpacity


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

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





3. Übersicht Stylingoptionen

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

Anchor
Stylingoptionen
Stylingoptionen

   FeldBedeutungOptionenBeispiel
   Background colorHintergrundfarbe Auswahl der definierten FarbenPrimary Color   
   Border bottomUntere Rahmenlinie (Dicke)Zahl (je nach Einheit*)1px
   Border colorRamenfarbeAuswahl der definierten FarbenGrey 5
   Border color (Hover)   Rahmenfarbe bei MouseoverAuswahl der definierten FarbenGrey 1
   Border leftLinke RahmenlinieRahmenlinie (Dicke)Zahl (je nach Einheit*)1px
   Border radiusEckenrundung des RahmensZahl (je nach Einheit*)50%
   Border rightRechte RahmenlinieRahmenlinie (Dicke)Zahl (je nach Einheit*)5px
   Border top

Obere RahmenlinieRahmenlinie (Dicke)

Zahl (je nach Einheit*)5px
   Farbe (Font color)SchriftfarbeAuswahl der definierten FarbenBlack
   Font sizeSchriftgrösseZahl (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 weightDicke der Schrift100 (dünn) - 900 (dick)300
   FormatvorlageSchriftauszeichnungNormal oder KursivKursiv
   Inverted Color**Alternativfarbe Invertierte Farbe (Kontrastfarbealternativ)Auswahl der definierten FarbenWhite
   Line heightHöhe der TextzeileZahl1.3
   Margin bottomunterer AussenabstandZahl (je nach Einheit*)10px
   Margin leftlinker AussenabstandZahl (je nach Einheit*)5%
   Margin rightrechter AussenabstandZahl (je nach Einheit*)6.5%
   Margin topoberer AussenabstandZahl (je nach Einheit*)1.5rem
   OpacityTransparenzDeckkraft0 - 10.3
   Padding bottomunerer unterer InnenabstandZahl (je nach Einheit)2em
   Padding leftlinker InnenabstandZahl (je nach Einheit)10px
   Padding rightrechter InnenabstandZahl (je nach Einheit)2%
   Padding topoberer InnenabstandZahl (je nach Einheit)1.5rem
   SchriftenfamilieSchriftartAuswahl von SchriftartenArial
   Text decorationTextunterstreichungLinie, Punkte, Striche, KeineUnterstrichen   

-

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 deiner Überschrift ist dunkelgrau. Nun möchtest du die selbe dieselbe Überschrift jedoch im schwarzen Footer verwenden.

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





-
-

3

4. Typography

Innerhalb dieser Kategorie können sämtliche Stylings für Schriften definiert werden. 

3

4.1 Headings

Beinhaltet die 6 Überschriften (H1 - H6), welcher welche zur Inhaltsstrukturierung (Hierarchieverhältnisse) dienen.

1. Gestalte die Überschriften mithilfe der Styling (Appearance) Stylingoptionen

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

3. Speichere deine Konfigurationen

3

4.2 Text Elements

Innerhalb dieses Tabs kannst du 6 verschiedenen  6 verschiedene Text-Styles erstellen.

1. Gestalte die Textelemente mithilfe der Styling (Appearance) Stylingoptionen

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

3. Speichere deine Konfigurationen

Nutze die Styles im Editor des Pagedesigners.3

1. Style den Link mithilfe der Styling (Appearance) Stylingoptionen

→ 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


5. Navigation

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

1. Gestalte die Navigationen mithilfe der

Styling (Appearance)

Stylingoptionen

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

3. Speichere deine Konfigurationen

4

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
titleAnsicht Dropdown

Image Modified

4

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
titleAnsicht Mobilenavigation

Image ModifiedImage Modified

4

5.3 Sidebar Navigation

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

Expand
titleAnsicht Sidebar Navigation

Image Modified

3.



6 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)

Stylingoptionen

2. Speichere deine Konfigurationen

3

6.1 Border 

→ DW: Option "Style" funktioniert nicht. 

In dieser

Kategorie kannst

Kategorie kannst du die Rahmen für die Eingabefelder der Webformulare Stylen:

Expand
titleBeispiele für verschiedene Stylings


   OptionBeispielwertAnsicht
   Breite1px
Image Modified
   Breite 5px
Image Modified
   ColorGrey 2
Image Modified
   Opacity0.3
Image Modified
   Border Radius15px
Image Modified
3


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
titleBeispiele 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

(betrifft das untere Bild)

: 

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

Image Modified

Beispiel 2

(betrifft das linke Bild)

:

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

Image Modified

3

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
titleBeispiele 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

Image Modified

Beispiel 2: 

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

Image Modified

4




7. Buttons

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

1. Gestalte die Elemente mithilfe der

Styling (Appearance)

Stylingoptionen

1.

1 Main Styling: Styling (Appearance)

1

.2

Color Settings & Inverted Color Settings:

Styling (Appearance)

Farben

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

3. Speichere deine Konfigurationen

4info

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
titleBeispiele für Button-Variationen

Default Button: Der Standard-Button auf hellem Hintergrund:

Image Modified

Default Button Inverted: Der Standard-Button auf dunklem Hintergrund:

Image Modified

Alternate Button: Ein alternativer Button für helle Hintergründe:

Image Modified

Alternate Button Inverted: Ein alternativer Button für dunkle Hintergründe:

Image Modified

5


-



8. Patterns / Muster

Patterns/Muster sind verschiedene Komponenten, welche du auf deiner Website verwenden kannst. 

1. Gestalte die Elemente mithilfe der

Stylingoptionen

Stylingoptionen  

2. Speichere deine Konfigurationen

Anhang


→ Anhand der unterstehenden Beispiele siehst du, wie die Patterns aussehen und wie sich die Stylingoptionen

auf die Patterns

darauf auswirken:

5

8.1 Slider

Der Slider zeigt in einem vordefinierten Intervall verschiedene Bilder an.

Expand
titleStyling-Beispiel Slider

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

Image Modified

5

8.2 Quote / Zitat

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

Expand
titleStyling-Beispiel Zitat

1. Highlights (quote marks) - Color

Image Modified

2. Highlights (quote lines) - Color

Image Modified

5-

8.3 Icons

Kleine Piktogramme:

Expand
titleStyling-Beispiel Icons

Image Removed

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
titleMaske "Copy Page"

Image Removed

Deutscher Inhalt der Seite "Anlässe" wird in die aktuelle Seite kopiert

-

Info
titleInformationen zum Kopiervorgang
Bei der Kopier-Funktion wird nicht die Seite an sich kopiert, sondern deren Inhalt/Layout in die Zielseite integriert. Befindet sich bereits Inhalt in der Zielseite, wird der kopierte Inhalt darunter angehängt. 

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
titleInformationen zum Content Type "Pagedesigner Parts"

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. 

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


Image Added

8.4 Socials

Piktogramme mit Verlinkung auf bekannte Social Media Plattformen:

Expand
titleStyling-Beispiel Socials

1. Social Icons - Color

Image Added

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
titleStyling-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":

Image Added 

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
titleStyling-Beispiel Toggler

1. Standard - Color
Image Added
2. Hover - Color
Image Added
3. Active - Color
Image Added

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

Expand
titleStyling-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)

Image Added