In diesem Handbuch erklären wir dir, wie du mit dem neuen Shop-Theme und Page Builder arbeitest. Außerdem zeigen wir dir Videos mit visuellen Erklärungen.

1. Einführung

Spezifikationen

Mit dem neuen Header & Footer Builder können Webshop-Besitzer ihren Header und Footer selbst gestalten. Dieses Handout hilft Nutzern bei den ersten Schritten und bietet eine Übersicht der wichtigsten Funktionen.

2. Shop-Theme-Einstellungen (Stileinstellungen für dein Theme)

Gehe im CMS zu: „CMS / Layout / Shop-Theme → Shop-Theme einstellen“.

Hier stellst du das allgemeine Design/Corporate Design deines Webshops ein.

Klicke auf „Neues Shop-Theme hinzufügen“ (grüner Button oben rechts).

2.1 Farbnamen

• Es sind mindestens 2 und maximal 9 Farben einstellbar. Aus diesen Farben werden jeweils zwei weitere Nuancen erstellt, sodass du letztendlich 27 Farben zur Auswahl hast.

• Klicke auf die Farbe, wähle im Farbmenü den Hex-Code aus und gib diesen ein.

Klicke hinter jeder Farbe einzeln auf „Speichern“ (Disketten-Symbol).

• Diese Farben können anschließend für Buttons, Text, Hintergründe und andere Elemente ausgewählt und verwendet werden, bei denen die Farbe einstellbar ist.

2.2 Schriftarten (Fonts)

• Stelle die primäre und sekundäre Schriftart ein.

• Du kannst aus den Schriftarten wählen, die in der Liste erscheinen.

• Klicke hinter jeder Schriftart auf „Speichern“ (Disketten-Symbol).

Die primäre Schriftart ist die Basisschriftart und wird für den Fließtext sowie in den (Navigations-)Menüs verwendet. Die sekundäre Schriftart wird für Überschriften genutzt.

2.3 Ecken

Du kannst aus voreingestellten Werten wählen.

Button-Ecken

Passe die Abrundung von Schaltflächen an, indem du den „Radius “ wählst. Dies ist die Rundung der Ecke. Damit bestimmst du, ob Buttons eckig, leicht abgerundet oder komplett rund wirken. Klicke auf „Shop-Theme speichern“, wenn du fertig bist.

Rahmen-Ecken

Dies funktioniert genauso wie bei den Button-Ecken. Kleiner Tipp: Wähle für beide den gleichen Wert, das sorgt für ein konsistentes Design der Buttons und Rahmen. Klicke auf „Speichern“, wenn du fertig bist.

3. Footer Builder

Der Footer kann über das CMS-Menü bearbeitet werden:
Layout / Footer → Scrolle auf der Seite nach unten (die Felder kannst du ansonsten leer lassen) → Klicke auf Shop-Element anpassen

3.1 Vorschau & Geräte

Oben im Editor stehen drei Anzeigeoptionen zur Verfügung:

• Desktop

• Tablet

• Mobil

Zusätzlich:

• „Preview-Button“ (Quadrat mit Pfeil) → hier siehst du, wie dein Header aussieht.

• „Export changes“ → verwende dies nur, wenn du mit der Bearbeitung fertig bist (Version speichern).

Im linken Menü findest du verschiedene Elemente, die du auf die rechte Seite ziehen kannst. Es erscheint ein grüner Balken, der anzeigt, wohin das Element gezogen werden muss. Sobald du das Element an die richtige Stelle gezogen hast, wird es dort angezeigt.

Um immer wieder zum Hauptmenü zurückzukehren, klicke auf das Plus-Symbol.

3.2 Elementoptionen

Wenn du ein Element auswählst, sind dies die verfügbaren Aktionen:

• Löschen (Mülleimer)

• Kopieren (Kopier-Icon)

• Verschieben (Pfeil-Icon in alle Richtungen)

• „Untergeordnetes Element auswählen“ (eine Ebene höher)

3.3 Footer USP

Element mit Alleinstellungsmerkmalen – Footer USP

• Ziehe den Balken nach rechts, bis ein grüner Strich erscheint.

Anschließend kannst du die Footer USPs gestalten.

1. Wenn du „Mobil“ wählst, wird der Footer USP als Swiper angezeigt.

2. Klicke auf „Alle Slides anzeigen“, um alle USPs einzublenden.

3.4 Footer Versandarten

Je nachdem, welche „Box“/welchen Rahmen/welchen Container du wählst, werden dir im linken Menü unterschiedliche Optionen angezeigt.

Hier werden die Versandarten und Zahlungsmethoden hinzugefügt. Du kannst die Bilder nach Belieben hinzufügen oder entfernen. Die Reihenfolge kannst du per Drag-and-Drop ändern.

3.5 Footer-Menü

Im Footer werden 5 Spalten hinzugefügt. Durch Klicken auf ein Zahnrad-Symbol kannst du den Text pro Spalte ändern. Links fügst du hinzu, indem du auf den Menüpunkt klickst und unter Href den Link einträgst. Zusätzliche Spalten fügst du durch Kopieren hinzu.

3.6 Mobiles Footer-Menü

Mobile Variante des Menüs. Wähle die mobile Ansicht.

Dies arbeitet mit Akkordeons für eine kompakte Darstellung.

3.7 Footer-Disclaimer

• Frei konfigurierbarer Text.
• Perfekt für Rechtstexte, Copyright oder Bedingungen.

• Durch Auswahl des richtigen Containers kannst du einen Link hinzufügen, der dann extern auf z. B. Facebook verweist.

4. Header Builder

Der Header kann über das CMS-Menü bearbeitet werden:
Layout / Header → Scrolle auf der Seite nach unten (die Felder kannst du ansonsten leer lassen) –> Klicke auf — Shop-Element erstellen.

4.1 Vorschau & Geräte

Oben im Editor stehen drei Anzeigeoptionen zur Verfügung:

• Desktop

• Tablet

• Mobil

Zusätzlich:

• „Preview-Button“ (Quadrat mit Pfeil) → hier siehst du, wie dein Header aussieht.

• „Export changes“ → verwende dies nur, wenn du mit der Bearbeitung fertig bist (Version speichern).

5. Header-Elemente (Blöcke hinzufügen)

Im linken Menü findest du verschiedene Elemente, die du auf die rechte Seite ziehen kannst. Es erscheint ein grüner Balken, der anzeigt, wohin das Element gezogen werden muss. Sobald du das Element an die richtige Stelle gezogen hast, wird es dort angezeigt.

Um immer wieder zum Hauptmenü zurückzukehren, klicke auf das Plus-Symbol.

5.1 Elementoptionen

Wenn du ein Element auswählst, sind dies die verfügbaren Aktionen:

• Löschen (Mülleimer)

• Kopieren (Kopier-Icon)

• Verschieben (Pfeil-Icon in alle Richtungen)

• „Untergeordnetes Element auswählen“ (eine Ebene höher)

5.2 USP-Leiste

Es gibt zwei Varianten:

1. Desktop-Ansicht –> Leiste

2. Mobile Ansicht –> Swiper mobile (dies ist ein Slider)

Je nachdem, in welcher Ansicht du dich befindest (Desktop oder Mobil), wird die entsprechende Variante der USP-Leiste angezeigt.

Desktop-Ansicht

Icon anpassen (das Element, wie z. B. ein Sternchen oder Herzchen, das vor dem USP-Text steht)

1. Klicke auf das Icon.

2. Im linken Menü erscheint die Icon-Bibliothek.

3. Klicke auf das gewünschte Icon.

Um ein „anderes“ Icon von Font Awesome hinzuzufügen, klicke auf Icon name:

1. Gehe zu https://fontawesome.com/icons

2. Suche nach dem gewünschten Icon (auf Englisch).

3. Kopiere den Titel des Icons und füge ihn ein.

Um dein eigenes Icon hinzuzufügen, klicke auf das „Zahnrad“:

1. Klicke auf das „Zahnrad“.
2. Entferne ….. USP.
3. Wähle ein anderes USP-Layout.
4. Ersetze das Standardbild durch das Icon-Bild.

Text anpassen

1. Klicke auf den Text, den du anpassen möchtest.

2. Passe den Text an.

3. Die Farbe kann nach Belieben im linken Menü angepasst werden.

Farbe der USP-Leiste anpassen

1. Klicke auf das Verschieben-Icon in der USP-Leiste.

2. Klicke im linken Menü auf Style.

3. Klicke auf die gewünschte Farbe.

Mobile Ansicht

Klicke auf den Text (USP 1) + klicke anschließend auf das Zahnrad dieses Fensters. Klicke im linken Menü auf „Show all slides“, um alle USPs anzuzeigen und anzupassen.

• Slides per view: wie viele USPs pro Slide im Bild erscheinen.

• Space between slides: der Abstand zwischen den USPs.

• Show navigation: es werden Pfeile an beiden Seiten des USPs hinzugefügt, damit der Kunde manuell swipen kann.

• Show bullets: unter den USPs erscheinen Bullets. Die Anzahl der hinzugefügten USPs entspricht der Anzahl der Bullets.

• Loop: hiermit sorgst du dafür, dass nach dem letzten Slide wieder der erste Slide angezeigt wird.

• Autoplay: der Swiper startet automatisch.

• Delay: die Zeit, die der USP im Bild bleibt, bevor der nächste USP angezeigt wird. Die Angabe erfolgt in Millisekunden. 2 Sekunden = 2.000 Millisekunden.

Icon anpassen

1. Klicke auf das Icon.

2. Im linken Menü erscheint die Icon-Bibliothek.

3. Klicke auf das gewünschte Icon.

Um ein benutzerdefiniertes Icon hinzuzufügen, klicke auf Icon name:

1. Gehe zu https://fontawesome.com/icons

2. Suche nach dem gewünschten Icon (auf Englisch).
3. Kopiere den Titel des Icons und füge ihn ein.

Um dein eigenes Icon hinzuzufügen, klicke auf das „Zahnrad“:

1. Klicke auf das „Zahnrad“.
2. Entferne ….. USP.
3. Wähle ein anderes USP-Layout.
4. Ersetze das Standardbild durch das Icon-Bild.

Text anpassen

1. Klicke auf den Text, den du anpassen möchtest.

2. Passe den Text an.

3. Die Farbe kann nach Belieben im linken Menü angepasst werden.

Farbe der USP-Leiste anpassen

1. Klicke auf das Verschieben-Icon in der USP-Leiste.

2. Klicke im linken Menü auf Style.
3. Klicke auf die gewünschte Farbe.

5.3 Standard-Navigationsleiste

Dies ist die Standard-Menüleiste oben auf der Seite. Sie enthält ein Logo, ein Standard-Dropdown-Menü sowie die Icons für dein Konto und den Warenkorb.

• Ziehe den Block namens „Standard-Navigationsleiste“ aus dem linken Menü auf die rechte Seite. Platziere ihn unter der USP-Leiste.

Dropdowns hinzufügen

1. Klicke auf das Dropdown-Menü-Item in der Standard-Navigationsleiste im rechten Bildschirm.
2. Klicke auf das Zahnrad-Icon.
3. Wähle den gewünschten Menüpunkt:

1. Add menu item: einzelner Menüpunkt (Link zu einer Seite).
2. Add item with dropdown: Menüpunkt mit einem Ausklappmenü.
3. Add item with search dropdown: Menüpunkt, mit dem man auf deiner Website suchen kann.
4. Add item with mega search: für diese Navigationsleiste nicht relevant.

4. Du fügst das Item hinzu, indem du auf das grüne Plus-Symbol klickst. Das Item wird dann automatisch im rechten Bildschirm angezeigt.

Menüpunkte bearbeiten

Menüpunkt

1. Klicke auf den Text im rechten Bildschirm, den du ändern möchtest, und passe ihn an.

2. Füge im linken Menü unter Href den Link ein, zu dem das Menü führen soll.

Item with dropdown

1. Klicke auf den Text im rechten Bildschirm, den du ändern möchtest, und passe ihn an.
2. Klicke auf das Zahnrad.
3. Klicke im linken Menü auf „Show dropdown menu“.
4. Klicke im rechten Bildschirm auf das Dropdown-Item und passe den Text an.
5. Füge im linken Menü unter Href den Link ein, zu dem das Menü führen soll.
6. Wiederhole dies für jeden Dropdown-Punkt.
7. Um einen weiteren Punkt zum Dropdown hinzuzufügen, klicke auf das Zahnrad und anschließend im linken Menü auf „Add menuitem“.

Add item with search dropdown

1. Dieser befindet sich standardmäßig in der Standard-Navigationsleiste (Lupe).

Anzeige pro Gerät

Hier stellst du ein, auf welchem Gerät die Navigationsleiste sichtbar ist. Dies passt du an, indem du auf das gewünschte Item im rechten Bildschirm klickst. Im linken Menü klickst du unter „Anzeige pro Gerät“, um das Menü mit dem Schalter ein- oder auszuschalten.

5.4 Megamenü

Dies ist das seitenbreite Menü, das unter deinem Menü ausklappt. Geeignet für größere oder visuelle Menüs.

Ziehe den Block namens „Navigationsleiste mit Megamenü“ aus dem linken Menü auf die rechte Seite. Platziere ihn unter der USP-Leiste.

Megamenü hinzufügen

1. Klicke auf das Megamenü-Item in der Navigationsleiste im rechten Bildschirm.
2. Klicke auf das Zahnrad-Icon.
3. Klicke auf Megamenü anzeigen im linken Bildschirm. Die Dropdown-Optionen werden nun im rechten Bildschirm angezeigt.
4. Klicke auf den Text im rechten Bildschirm, den du ändern möchtest, und passe ihn an.
5. Füge im linken Menü unter Link den Link ein, zu dem das Menü führen soll.

Bild hinzufügen

1. Kopiere einen Block mit Bild-Link.
2. Klicke auf das erscheinende Bild.
3. Klik in het linkermenu 
   • auf Bild-URL: Link eingeben.
   • auf Bildbeschreibung: Alt-Text eingeben.
   • auf Link: Link eingeben.
   • auf Ziel: Wähle das Target – Blank/Self.

5.5 Mobile Ansicht bearbeiten

Öffne das mobile Menü über das Zahnrad im Megamenü.

Klicke auf „Edit panel“ und passe die Optionen nach Bedarf an.

5.6 Elements (allgemeine Elemente)

Spalten
Spalten sind die Basis. Hier kannst du Elemente hinzufügen.

1. Klicke auf „Spalten-Layout wählen“ im rechten Bildschirm.

2. Im linken Bildschirm kannst du die Anzahl der Spalten unter „Spalten-Layout“ wählen.

3. Unter „Spalten-Abstand“ stellst du den Leerraum zwischen den Spalten ein. 1 = wenig Abstand, 5 = viel Abstand.

Jetzt ist es an der Zeit, Elemente zu den Spalten hinzuzufügen. Klicke auf das Plus-Symbol.

Text
Ziehe „Text“ in eine Spalte, um Text hinzuzufügen.

Icon
Füge ein Icon in der Spalte hinzu.

Interaktives Bild
Hiermit fügst du ein Bild zur Spalte hinzu. Wenn man auf der Website mit der Maus über das Bild fährt, zoomt das Bild leicht heran.

Du fügst dem Bild einen Link hinzu, indem du auf das Bild klickst und auf den Pfeil nach oben klickst. Im linken Menü kannst du unter Href einen Link hinzufügen.

Du kannst unter dem Bild noch Text, Buttons und Icons hinzufügen. Diese kannst du aus dem linken Menü einfügen.

Link: Hiermit fügst du einer Spalte einen klickbaren Link hinzu.

Swiper: Füge mehrere Bilder hinzu, die swipebar sind. In den Blöcken kannst du auch Bewertungen, Karten oder USPs hinzufügen. Fügst du eine Bewertung oder einen USP hinzu? Dann kannst du im Block in der Spalte wählen, welches Layout du für deine Bewertung möchtest.

Akkordeon: Hiermit fügst du ausklappbare Elemente hinzu. Dies ist zum Beispiel praktisch für deine FAQ.

Box: Hiermit fügst du einen Block hinzu. Innerhalb dieses Blocks kannst du mehrere Elemente hinzufügen, die jedoch innerhalb desselben Blocks bleiben.

Paragraph: Hiermit fügst du einen abgegrenzten Textabschnitt hinzu.

Bild: Hiermit fügst du ein Bild hinzu.

Button: Hiermit fügst du eine einzelne Schaltfläche hinzu.

Dropdown: Hiermit fügst du einen Button mit einem Dropdown hinzu. Klicke auf den Button im rechten Bildschirm und anschließend auf das Zahnrad. Im linken Menü klickst du auf „Show dropdown menu“, um die Menüpunkte anzuzeigen und ändern zu können.

Menü (Liste): Hier kannst du einen Textabschnitt mit einem Link darunter hinzufügen. So baust du ein Menü auf.

<>Offcanvas: Hiermit fügst du einen Button hinzu. Wenn man auf den Button klickt, klappt ein Seitenmenü auf. Durch Klicken auf das Zahnrad kannst du im linken Menü auf „Open panel“ klicken, um die Items zu ändern.

6. OPTIONAL Tipps für Shop-Besitzer (Basis)

• Erstelle ein Design zuerst auf einem Gerät (zum Beispiel Desktop) und passe es erst danach pro Gerät an.

• Halte Farben und Schriftarten über das Shop-Theme konsistent mit deiner Markenidentität.

• Nutze den Preview-Button, um Änderungen zuerst zu prüfen.

• Speichere erst mit „Diese Version veröffentlichen“, wenn du sicher bist, dass alles fertig ist.

• Nutze das Megamenü vor allem für größere Sortimente oder viele Produktkategorien.

7. Die Videos

ELS Einführung

Footer

Header USP

Header-Navigationsleiste (Navbar)