StyleEdit 4 / Themes¶
Einleitung¶
Das StyleEdit 4 ist ein Bearbeitungswerkzeug zur gestalterischen Anpassung von Themes auf Honeygrid-Basis. Themes bieten, als Nachfolger von Templates, weitreichendere Design-Möglichkeiten.
Themeübersicht 'Meine Themes'¶
Auf der Seite Meine Themes findest du eine Übersicht über alle im Shop angelegten Themes. Die Theme-Übersicht kann über das StyleEdit 4 aufgerufen werden. Klicke hierzu auf das Symbol mit den drei Linien, in der linken, oberen Ecke.
Es wird mindestens ein Theme angezeigt, das im Shop standardmäßig mitgelieferte Honeygrid. Dieses Theme kann bearbeitet werden, es ist jedoch nicht möglich es zu löschen.
Achtung
Wir empfehlen das Original-Theme unverändert zu lassen und alle Änderungen innerhalb einer Kopie des Originals durchzuführen.
Achtung
Beim Duplizieren eines Themes entsteht eine Abhängigkeit zwischen dem ursprünglichen Theme und der Kopie (Child-Theme), die Kopie bezieht sich auf das Original, um von dort bestimmte Eigenschaften zu übernehmen.
Wenn das ursprüngliche Theme ebenfalls eine Kopie ist, ist die Löschen-Funktion nicht ausgegraut. Wird so ein ursprüngliches Theme (Parent-Theme) entfernt, verschwinden u.U. auch die Inhalte, auf die ein Child-Theme sich ggf. bezieht - dies führt zu Problemen mit dem Child-Theme.
Aus der Reihenfolge der Themes in der Übersicht lässt sich nicht ableiten, welches Child-Theme zu welchem Ursprungs-Theme gehört.
Wir empfehlen daher nur Kopien des Originals anzulegen, um ungewollte Abhängigkeiten zu vermeiden.
Über die Dropdown-Schaltfläche eines Themes stehen dir folgende Aktionen zur Verfügung:
- Aktivieren
- Bearbeiten
- Duplizieren
- Downloaden
- Löschen
Wird ein Theme aktiviert, wird es im Shop verwendet. Der Shop ist also nach außen mit allen Grafik-Einstellungen zu sehen, die im aktiven Theme vorgenomen worden sind.
Mit einem Klick auf Bearbeiten wird das StyleEdit 4 aufgerufen und das jeweilige Theme kann darin bearbeitet werden.
StyleEdit 4 aufrufen¶
Das StyleEdit 4 kann unter Inhalte > Template-Einstellungen aufgerufen werden:
Wird nur der Button Theme bearbeiten angezeigt, verwendet der Shop ein Theme, sodass im Dropdown Templateset (Theme)_im Regelfall der Eintrag Honeygrid (Theme) bzw. Malibu (Theme)_ o.ä. eingestellt ist.
Klicke auf Theme bearbeiten, um das StyleEdit 4 aufzurufen.
Erhältst du stattdessen die folgende Ansicht, verwendet der Shop die Vorgänger-Oberfläche auf Template-Basis Honeygrid (Template):
Klicke auf Neues Theme bearbeiten, um im Hintergrund an der neuen Oberfläche des Shops zu arbeiten, während dein bisheriges Template aktiv bleibt.
Der erste Aufruf¶
Beim ersten Aufruf wird nur ein Theme angezeigt, das aktive Honeygrid-Theme. Aktiv bedeutet, dass Änderungen direkt im Shop zu sehen sind.
Wir empfehlen daher eine Kopie des Themes anzulegen.
Klicke hierzu auf das nach unten weisende Dreieck der blauen Schaltfläche und wählen den Eintrag Duplizieren aus.
Das neue Theme wird mit dem Zusatz Kopie im Namen angezeigt.
Wähle hier, ebenfalls über das Dropdown in der blauen Schaltfläche, den Eintrag Bearbeiten aus. Das StyleEdit 4 wird gestartet, und die Kopie des aktiven Themes geladen.
Nach dem ersten Aufruf gelangst du beim Klick auf den Button Theme bearbeiten unter Inhalte > Template-Einstellungen direkt zum StyleEdit 4.
Aus dem StyleEdit 4 heraus gelangst du bei Bedarf zurück zur Seite Meine Themes. Klicke hierzu auf das Icon mit den drei Linien, in der linken, oberen Ecke oder dem daneben angezeigten Theme-Namen. Über den Button Beenden am unteren Ende des StyleEdits kannst du den Bearbeitungsmodus beenden und gelangst zurück zum Shop.
Hinweis
Beim nächsten Aufruf gelangst du direkt zum StyleEdit, es wird mit dem Style Honeygrid Preview geladen. Um deinen gewünschten Style zu bearbeiten, klicke auf den Namen in der Titelleiste des StyleEdits, um zurück auf die Seite Meine Themes zu gelangen.
Übernahme der Einstellungen des aktiven Template-Styles¶
Es ist über das StyleEdit 4 möglich die Einstellungen des bisher verwendeten Honeygrid-Templates in das aktuelle Theme zu importieren. Klicke hierzu auf das Symbol in der rechten, oberen Ecke des StyleEdit 4.
Wähle hier den Eintrag Einstellungen importieren aus, es öffnet sich ein neues Dialogfenster.
Öffne das Dropdown Vorlagenliste und wähle den Eintrag Honeygrid: Template_Style (Aktiv) aus.
Klicke auf den Button Einführen, um den Import vorzunehmen.
Aufbau des StyleEdit 4¶
Das StyleEdit lässt sich in vier Bestandteile unterteilen:
- Titelleiste
- Menüleiste
- Einstellungsbereich
- untere Schaltflächen
Titelleiste¶
Die Titelleiste verfügt von links nach rechts über die Einstellungen
- Theme-Übersicht / Theme Name: Aufruf der Seite Meine Themes
- Zurück zur Shop-Startseite: Ruft innerhalb des StyleEdits die Startseite des Shops auf
- Weitere Einstellungen: SCSS/CSS bearbeiten ermöglicht das Einfügen eigener Style-Definitionen über SCSS- oder CSS-Codes. Einstellungen importieren ermöglicht das Importieren von Einstellungen aus einem anderen Theme oder Style auf Basis des älteren Honeygrid-Templates
Menüleiste¶
Über die Menüleiste können die verschiedenen Arten von Einstellungen ausgewählt werden. Der jeweils aktive Menüeintrag wird blau hervorgehoben.
Einstellungsbereich¶
Im Einstellungsbereich werden die eigentlichen Einstellungen vorgenommen. Je nachdem, welcher Menüeintrag ausgewählt worden ist, stehen andere Einstellungen zur Verfügung.
untere Schaltflächen¶
Im unteren Bereich gibt es verschiedene Buttons:
- Speichern: speichert die im Theme vorgenommenen Änderungen ab
- Beenden: beendet das StyleEdit 4, sodass du zur Shop-Ansicht zurückkehrst
- Expertenmodus: wenn aktiviert, stehen unter Bereiche mehr Einstellungen zur Verfügung
- Vorschau: aktiviert den Vorschaumodus, sodass der Shop ohne Platzhalter für Widgets und Hervorhebung einzelner Bereiche dargestellt wird
Darunter befindet sich eine Leiste, in der die aktuelle Größe des angezeigten Shopbereichs aufgeführt wird und über die dessen Größe innerhalb des StyleEdits angepasst werden kann. Die Darstellung kann entsprechend der typischen Auflösung bestimmter Endgeräte umgestellt werden:
- Desktop
- Tablet Landscape
- Tablet Portrait
- Smartphone
Theme mit StyleEdit 4 bearbeiten¶
Menüs des StyleEdit 4¶
Das StyleEdit 4 ist in drei Menüs gegliedert, auf die verschiedene Arten von Einstellungen aufgeteilt sind:
- Grundlagen
- Bereiche
- Widgets
Grundlagen¶
Das Menü Grundlagen beinhaltet die Abschnitte Allgemein, Typografie, Hintergrund und Navigation Menü. Die Abschnitte lassen sich über einen Klick auf den Namen auf- und zuklappen.
Allgemein¶
Der Abschnitt Allgemein beinhaltet die Einstellungen Primärfarbe und Logo.
Die Primärfarbe wird an verschiedenen Stellen des Shops verwendet. Hierzu zählen
- Farbe von Links (ohne Hover)
- Hintergrundfarbe der aktiven Kategorie im vertikalen Kategorienmenü in der linken Spalte
- Hintergrundfarbe von Content-Seiten-Einträgen in der horizontalen Navigationsleiste
- Trennzeichen >> in der Breadcrumb
- Die Hintergrundfarbe der Artikelanzahl des kleinen Warenkorbs
Über die Einstellung Logo ist es möglich das Logo auf den Shopseiten zu ändern. Klicke auf Wählen bzw. die Vorschau-Ansicht, um die Bilddatei über den Dateimanager auszuwählen oder hochzuladen. Weitere Informationen hierzu findest du im Kapitel Dateimanager.
Über die Schaltfläche Löschen kann die Zuordnung des Logos entfernt werden.
Typografie¶
In diesem Abschnitt können die allgemeine Schriftart, -farbe und -größe festgelegt werden.
| Feldname | Beschreibung |
|---|---|
| Schriftart | Wähle hier wahlweise eine der voreingestellten Schriftarten über das Dropdown aus oder trage den Namen der gewünschten Schriftart direkt in das Feld neben dem Dropdown-Symbol ein. |
| Textfarbe | Wähle die gewünschte Textfarbe aus, indem du in das Feld bzw. Vorschau-Symbol klickst oder trage wahlweise den Farbcode direkt ein. |
| Textgröße | Trage in dieses Feld die Schriftgröße für allgemeine Texte ein. |
Achtung
Bei der Angabe der Schriftgröße muss standardmäßig eine Einheit mit angegeben werden. Typischerweise sind dies Pixel, z.B.: 15px
| Feldname | Beschreibung |
|---|---|
| Google Web Font Url | Wenn Google Web Fonts verwendet werden, muss eine URL zur der jeweiligen Schriftart bzw. den jeweiligen Schriftarten hinterlegt sein. Standardmäßig ist dies die Schriftart Roboto mit der URL: https://fonts.googleapis.com/css?family=Roboto:400,700,300,900 |
Hinweis
Bitte beachte, dass nach dem Speichern der Google Web Font Url das StyleEdit ggf. neu gestartet werden muss, bevor die neue Schriftart ausgewählt werden kann.
Hintergrund¶
Hier können Einstellungen für den Hintergrund vorgenommen werden. Es können wahlweise Hintergrundbilder oder -farben eingerichtet werden. Es können für letztere auch Farbverläufe eingestellt werden.
Es wird hierbei zwischen dem Hintergrund (der gesamten Seite) und dem Hintergrund des Containers (dem Hintergrund der angezeigten Inhalte im zentralen Bereich der Seite) unterschieden. Ein Beispiel anhand eines Honeygrid-Templates im Boxed Layout:
Die Hintergrundfarbe unter Hintergrund ist blau eingestellt, die Hintergrundfarbe unter Hintergrund des Containers rot.
Navigation Menü¶
In diesem Abschnitt kann die Darstellung der horizontalen Menüleiste (ohne Dropdown) festgelegt werden. Es stehen Einstellungen für die Hintergrundfarbe, wahlweise als Farbverlauf, die Link-Farbe oder ein Hintergrundbild zur Verfügung.
Bereiche¶
Das Menü Bereiche beinhaltet Einstellungen für die einzelnen Bereiche des Shops.
Hinweis
Die Einstellungen in diesem Menü hängen vom eingestellten Modus ab. Um weitere Abschnitte anzuzeigen, aktiviere im unteren Teil des StyleEdits den Expertenmodus.
Die enthaltenen Abschnitte werden durch einen Mausklick aufgerufen. Über einen Klick auf das ✖ gelangst du zurück in die Übersicht der Bereiche. Über einen Klick auf ← gelangst du aus dem Unterabschnitt zurück in der übergeordneten Abschnitt
Manche Abschnitte beinhalten mehr als eine Ebene mit Unterabschnitten.
Allgemein¶
Layout¶
Es stehen folgende Einstellungen zur Verfügung:
| Feldname | Beschreibung |
|---|---|
| Eingerahmter Shop | stellt den Shop eingerahmt dar, die Breite der einzelnen Bereiche wird auf die Breite des Hauptbereichs (Containers) reduziert. |
Hinweis
Wenn der Shop eingerahmt dargestellt wird, hat die Einstellung Kopfzeile fixiert keine Funktion, da die Kopfzeile als Teil des Containers nicht fixiert wird.
| Feldname | Beschreibung |
|---|---|
| Top-Navigation zentrieren | Richtet die Sekundärnavigationsleiste am zentralen Bereich (Container) aus |
| Kategorieleiste zentrieren | Richtet die horizontale Navigationsleiste am zentralen Bereich (Container) aus |
| Kategorien zentrieren | Richtet die Einträge in der horizontalen Navigationsleiste (Kategorien und Content-Seiten) zentriert aus |
| Kopfzeile fixiert | Fixiert die Kopfzeile am oberen Ende des Fensters, beim runterscrollen wird die Kopfzeile im Sticky-Modus (ohne Sekundärnavigation und horizontales Menü) dargestellt |
| Kopfzeile zentriert | Richtet die Inhalte der Kopfzeile (Logo, Suche, freigestaltbarer Bereich, kleiner Warenkorb) zentriert am zentralen Bereich (Container) aus |
| Slider zentrieren | Richtet den Teaser-Slider am zentralen Bereich (Container) aus |
| Footer zentrieren | Richtet die Inhalte des Footers am zentralen Bereich (Container) aus |
| Logo horizontal ausrichten | Zentriert das Logo im dafür vorgesehenen Bereich des Headers |
| Slider unter der Kopfzeile | verschiebt den Slider unter die Elemente der Kopfzeile |
| Maximalbreite | Maximale Breite des Containers |
Achtung
Dieser Wert hat maßgebliche Auswirkung auf die Darstellung des Honeygrids auf einzelnen Endgeräten. Er sollte keinesfalls erhöht und nur in Ausnahmefällen verringert werden
| Feldname | Beschreibung |
|---|---|
| Abstand oben | Abstand oberhalb des Shops im Pixeln |
| Abstand unten | Abstand unterhalb des Shops in Pixeln |
Farben¶
HInweis
Dieser Unterabschnitt steht nur im Expertenmodus zur Verfügung.
Hinweis
Hovern bzw. Mouseover bezeichnet das Platzieren des Mauszeigers über ein Element, ohne es anzuklicken
Die Hauptfarbe wird an verschiedenen Stellen des Shops verwendet. Hierzu zählen
- Farbe von Links (ohne Hover)
- Hintergrundfarbe der aktiven Kategorie im vertikalen Kategorienmenü in der linken Spalte
- Hintergrundfarbe von Content-Seiten-Einträgen in der horizontalen Navigationsleiste
- Trennzeichen >> in der Breadcrumb
- Die Hintergrundfarbe der Artikelanzahl des kleinen Warenkorbs
| Feldname | Beschreibung |
|---|---|
| Textfarbe | Wähle die gewünschgte Textfarbe aus, indem du in das Feld bzw. Vorschau-Symbol klickst oder trage wahlweise den Farbcode direkt ein. |
| Linkfarbe | Die Linkfarbe ist über den Platzhalter $brand-primary mit der Haupt- bzw. Primärfarbe vorbelegt. Wird dieser Platzhalter entfernt, kann hier ein eigener Farbcode hinterlegt bzw. über die Farbpalette ausgewählt werden. |
| Breadcrumb-Farbe | Hierüber kann die Link/Text-Farbe für die Breadcrumb festgelegt werden.  |
Hinweis
Die Trennzeichen >> verwenden die Hauptfarbe
| Feldname | Beschreibung |
|---|---|
| Schriftfarbe Keine Bewertungen Hinweis | Farbe des Hinweises Leider sind noch keine Bewertungen vorhanden. Seien Sie der Erste, der das Produkt bewertet., der auf der Artikeldetailseite angezeigt wird, wenn für den Artikel noch keine Kundenrezension geschrieben worden ist. Standardmäßig wird über den Platzhalter $text-color die Textfarbe verwendet. Dieser Platzahalter kann jedoch bei Bedarf entfernt und durch eine eigene Farbe ersetzt werden. |
Hintergrund¶
Hier können Einstellungen für den Hintergrund vorgenommen werden. Es können wahlweise Hintergrundbilder oder -farben eingerichtet werden. Es können für letztere auch Farbverläufe eingestellt werden.
Es wird hierbei zwischen dem Hintergrund (der gesamten Seite) und dem Hintergrund des Containers (dem Hintergrund der angezeigten Inhalte im zentralen Bereich der Seite) unterschieden. Ein Beispiel anhand eines Honeygrid-Templates im Boxed Layout:
Die Hintergrundfarbe unter Hintergrund ist blau eingestellt, die Hintergrundfarbe unter Hintergrund des Containers rot.
Schrift¶
Es stehen die folgenden Einstellungen zur Verfügung:
| Feldname | Beschreibung |
|---|---|
| Google-Webfonts-Url | URL zu Google Web Fonts, standardmäßig ist ein Verweis auf die Schriftart Roboto hinterlegt: https://fonts.googleapis.com/css?family=Roboto:400,700,300,900 |
| Schriftgröße | Allgemeine Schriftgröße für die im Shop verwendeten Texte. |
| Schriftgröße H1 | Schriftgröße für Überschriften erster Ordnung, z.B. Artikelname auf Artikelseite, Kategoriename auf Kategorieseite, usw. |
| Schriftgröße H2 | Schriftgröße für Überschriften zweiter Ordnung, z.B. Überschrift Kundenrezensionen auf der Artikelseite |
| Schriftgröße H3 | Schrfitgröße für Überschriften dritter Ordnung, z.B. Anzeige der Summe im Warenkorb |
| Schriftgröße H4 | Schriftgröße für Überschriften vierter Ordnung |
| Schriftgröße H5 | Schriftgröße für Überschriften fünfter Ordnung |
| Schriftgröße H6 | Schriftgröße für Überschriften sechster Ordnung |
| Überschriftenfarbe | Schriftfarbe der Überschriften, wird standardmäßig über den Platzhalter $text-color mit der Textfarbe belegt. Nach Entfernen des Platzhalters kann bei Bedarf eine eigene Farbe eingetragen werden. |
| Überschriftenstärke | Legt die Stäkre der Überschriften fest |
Hinweis
Bitte beachte, dass nach dem Speichern der Google Web Font Url das StyleEdit ggf. neu gestartet werden muss, bevor die neue Schriftart ausgewählt werden kann.
Abgerundete Ecken¶
Es stehen die folgenden Einstellungen zur Verfügung, um den Radius der im Honeygrid verwendeten Ecken anzupassen:
- Eckenradius normal, z.B. für das Warenkorb-Dropdown
- Eckenradius groß, z.B. für Sucheingabefeld im Header
- Eckenradius klein
- Eckenradius des eingerahmten Shops
- Eckenradius des horizontalen Kategoriemenüs
- Eckenradius der Warenkorb-Summenbox
Teaser-Slider¶
Hier kann an- und abgeschaltet werden, ob der Teaser-Slider für bestimmte Ausgabegeräte angezeigt werden soll.
Hinweis
Die Teaser-Slider-Bilder müssen weiterhin für alle Ausgabegrößen separat festgelegt werden
Page-Up-Button¶
| Feldname | Beschreibung |
|---|---|
| Schriftfarbe | Farbe des 'nach oben'-Symbols im Page-Up-Button, es wird standardmäßig die Hauptfarbe über den Platzhalter $brand-primary hinterlegt. Wird der Platzhalter entfernt, kann eine eigene Farbe eingestellt werden |
| Schriftfarbe Hover | Farbe des 'nach oben'-Symbols im Page-Up-Button, wenn der Mauszeiger darüber bewegt wird, es wird standardmäßig die Hauptfarbe über den Platzhalter $brand-primary hinterlegt. Wird der Platzhalter entfernt, kann eine eigene Farbe eingestellt werden |
| Hintergrundfarbe | Hintergrundfarbe des Page-Up-Buttons |
| Hintergrundfarbe Hover | Hintergrundfarbe des Page-Up-Buttons, wenn der Mauszeiger darüber bewegt wird |
| Button links ausrichten | Page-Up-Button wird in der linken unteren statt der rechten unteren Ecke angezeigt |
| Vertikaler Abstand | Abstand zum unteren Rand des Browserfensters |
Hinweis
Hovern bzw. Mouseover bezeichnet das Platzieren des Mauszeigers über ein Element, ohne es anzuklicken
Buttons¶
Hinweis
Es wird in den Einstellungen zwischen Primary-Button, Default-Button und Kaufen-Button unterschieden.
Primary-Buttons sind z.B. Filtern in der Filter-Box, Senden im Kontaktformular, Anmelden in der Newsletter-Box, Weiter im Bestellvorgang.
Default-Buttons sind z.B. Zurücksetzen in der Filter-Box, Zurück auf Content-Seiten oder im Bestell-Vorgang, Adresse ändern im Bestellvorgang, sowie die Schaltflächen zur Pagination (Kachelansicht, Listenansicht, Sortieren nach, ... pro Seite), etwa auf Kategorie-Seiten.
Kaufen-Buttons sind die Schaltflächen in den Warenkorb und zum Artikel.
| Feldname | Beschreibung |
|---|---|
| Abgerundete Ecken | Ecken-Radius der Schaltflächen im Shop, Angabe erfolgt zusammen mit einer Einheit, z.B.: 10px |
| Texttransformation | Ändert Groß- und Kleinschreibung der Beschriftung der Buttons |
| none: Text wird so ausgegeben, wie er im Shop (z.B. Inhalte > Texte anpassen) hinterlegt ist | |
| uppercase: Text wird in Großbuchstaben ausgegeben | |
| lowercase: Text wird in Kleinbuchstaben ausgegeben | |
| capitalize: Jedes Wort beginnt mit einem Großbuchstaben | |
| Farbe Primary-Button | Schriftfarbe für die Primary-Buttons, standardmäßig mit dem Platzhalter $btn-primary-color belegt, kann nachträglich geändert werden |
| Hintergrund Primary-Button | |
| Farbe | Hintergrundfarbe für die Primary-Buttons, standardmäßig nicht belegt |
| Bild einfügen | Legt ein Hintergrundbild für die Primary-Buttons fest |
| Farbverlauf einfügen | Legt einen Farbverlauf als Hintergrund der Primary-Buttons fest |
| Rahmenfarbe Primary-Button | Legt die Rahmenfarbe der Primary-Buttons fest, standardmäßig mit dem Platzhalter $btn-primary-border vorbelegt, kann nachträglich geändert werden |
| Farbe Default-Button | Schriftfarbe der Default-Buttons, standardmäßig mit dem Platzhalter $btn-default-color vorbelegt, kann nachträglich geändert werden |
| Hintergrund Default-Button | |
| Farbe | Hintergrundfarbe für die Default-Buttons, standardmäßig nicht belegt |
| Bild einfügen | Legt ein Hintergrundbild für die Default-Buttons fest |
| Farbverlauf einfügen | Legt einen Farbverlauf als Hintergrund der Default-Buttons fest |
| Rahmenfarbe Default-Button | Legt die Rahmenfarbe der Default-Buttons fest, standardmäßig mit dem Platzhalter $btn-default-border vorbelegt, kann nachträglich geändert werden |
| Farbe Kaufen-Button | Schriftfarbe der Kaufen-Buttons |
| Hintergrund Kaufen-Button | |
| Farbe | Hintergrundfarbe für die Kaufen-Buttons |
| Bild einfügen | Legt ein Hintergrundbild für die Kaufen-Buttons fest |
| Farbverlauf einfügen | Legt einen Farbverlauf als Hintergrund der Default-Buttons fest |
| Rahmenfarbe Kaufen-Button | Legt die Rahmenfarbe der Kaufen-Buttons fest, ist standardmäßig mit dem Wert darken($gx-btn-calltoaction-bg-color, 5%) vorbelegt, kann nachträglich geändert werden |
Trennlinien¶
Hier können die Farben der verschiedenen Trennlinien geändert werden:
- Linienfarbe Überschriften
- Rahmenfarbe Footer-Boxen
- Linienfarbe Überschriften im Checkout
- Rahmenfarbe Pagination
- Rahmenfarbe Produktlisten und Kacheln
- Farbe der Trennlinien Produktdetails-Box
Die Felder sind zum Teil mit Platzhaltern befüllt, diese können bei Bedarf durch eine eigene Farbangabe ersetzt werden.
Hinweise¶
Im Shop werden an verschiedenen Stellen farblich hervorgehobene Warnungen, Fehlermeldungen, allgemeine Hinweise und Informationen angezeigt. In diesem Abschnitt können die zugehörigen Schrift-, Rahmen und Hintergrundfarben angepasst werden. Für die Hintergründe können bei Bedarf auch Bilder und Farbverläufe eingestellt werden.
Die einzelnen Farbeinstellungen sind jeweils mit Platzhaltern für die Standardfarben befüllt, die bei Bedarf durch eigene Farbwerte ersetzt werden können.
QR-Codes¶
In diesem Abschnitt können Farbe und Hintergrundfarbe der im Shop verwendeten QR-Codes eingestellt werden.
Modal-Fenster¶
Modal-Fenster werden oberhalb der eigentlichen Shop-Oberfläche angezeigt und können verschiedene Aufgaben haben. Für sie kann in diesem Unterabschnitt eine Hintergrundfarbe, ein Hintergrundbild oder Farbverlauf als Hintergrund festgelegt werden.
Header¶
Varianten¶
Hier können die einzelnen Varianten des Headers ausgewählt werden. Im Honeygrid steht die Variante Standard zur Verfügung.
Achtung
Für die einzelnen Bestandteile des Headers (Logo, Suche, Freigestaltbarer Bereich, kleiner Warenkorb) wie auch den Header selbst gibt es eigene Höhen-Einstellungen. Diese Einstellungen sollten unbedingt gleichmäßig vorgenommen werden, d.h., wenn die Höhe des Logo-Bereichs von 80px um 40px auf 120px erhöht wird, muss auch im Unterabschnitt Allgemein die Höhe des Headers um diese 40px, von standardmäßig 150px auf 190px vergrößert werden, da es sonst zu einer Verschiebung der Inhalte kommt.
Standard¶
Allgemein
Im diesem Unterabschnitt kann der Hintergrund des Headers (Farbe, Farbverlauf oder Hintergrundbild) sowie dessen Höhe für die verschiedenen Größen (ohne Größeneinschränkung, Mobil, Sticky) festgelgt werden.
Hinweis
Sticky bezeichnet die reduzierte Form des Headers, die verwendet wird, wenn mit fixierter Kopfzeile nach unten gescrollt wird.
| Feldname | Beschreibung |
|---|---|
| Hintergrund | |
| Farbe | Hintergrundfarbe des Headers auf Desktop-Computern und Tablets |
| Bild einfügen | Hintergrundbild des Headers auf Desktop-Computern und Tablets |
| Farbverlauf einfügen | Farbverlauf als Hintergrund des Headers auf Desktop-Computern und Tablets |
| Hintergrund Mobil | |
| Farbe | Hintergrundfarbe des Headers auf Smartphones |
| Bild einfügen | Hintergrundbild des Headers auf Smartphones |
| Farbverlauf einfügen | Farbverlauf als Hintergrund des Headers auf Smartphones |
| Hintergrund Sticky | |
| Farbe | Hintergrundfarbe des Sticky Headers |
| Bild einfügen | Hintergrundbild des Sticky Headers |
| Farbverlauf einfügen | Farbverlauf als Hintergrund des Sticky Headers |
| Höhe | Höhe des Headers auf Desktop-Computern und Tablets |
| Höhe Mobil | Höhe des Headers auf Smartphones |
| Höhe Sticky | Höhe des Sticky Headers |
| Farbe des Menü-Icons Mobile | Farbe des Menü-Icons auf Smartphones |
Logo
Für das Logo können die folgenden Einstellungen vorgenommen werden:
| Feldname | Beschreibung |
|---|---|
| Logo im Header ausblenden | blendet den Logo-Bereich im Header aus (verringert die Zahl der verwendeten Grid-Spalten) |
| Grid-Spalten Klein | Anzahl der Grid-Spalten des Logo-Bereichs für kleine Darstellung, typischerweise Tablet im Portrait/Hoch-Format |
| Grid-Spalten Medium | Anzahl der Grid-Spalten des Logo-Bereichs für mittelgroße Darstellung, typischerweise Tablet im Landscape/Quer-Format |
| Grid-Spalten Groß | Anzahl der Grid-Spalten des Logo-Bereichs für große Darstellung, typischerweise Desktop-Computer |
| Logo Höhe | Höhe des Logo-Bereichs, Angabe standardmäßig in Pixeln z.B. 80px |
| Logo Max-Breite Mobil | maximale Breite des Logo-Bereichs in der Smartphone-Ansicht, Angabe standardmäßig in Pixeln z.B. 80px |
| Logo Höhe Sticky | Höhe des Logo-Bereichs im Sticky-Header, Angabe standardmäßig in Pixeln z.B. 60px |
Hinweis
Die grafische Oberfläche des Shops wird in der Breite in 12 sogenannte Grid-Spalten aufgeteilt. Für jede Größe (groß, medium, klein) gibt es eine eigene Einstellung. Die Summe aller Einstellungen einer Größe, die nicht ausgeblendet werden, muss 12 ergeben. Weitere Informationen hierzu sind im Kapitel Grid-Spalten aufgeführt.
Hinweis
Sticky bezeichnet die reduzierte Form des Headers, die verwendet wird, wenn mit fixierter Kopfzeile nach unten gescrollt wird.
Suche
| Feldname | Beschreibung |
|---|---|
| Suche in Top-Navigation anzeigen | aktiviert den Eintrag Suchen in der Sekundärnavigation |
| Suche im Header ausblenden | blendet den Such-Bereich im Header aus (verringert die Zahl der verwendeten Grid-Spalten) |
| Farbe des Suche-Icons Mobile | Farbe des Suchen-Icons auf Smartphones |
| Suche Höhe | Höhe des Such-Bereichs, Angabe standardmäßig in Pixeln z.B. 80px |
| Suche Höhe Sticky | Höhe des Such-Bereichs im Sticky-Header, Angabe standardmäßig in Pixeln z.B. 60px |
| vertikaler Abstand | Abstand des Suchfensters zur oberen und unteren Kante des Such-Bereichs, Angabe standardmäßig in Pixeln z.B. 22px |
| vertikaler Abstand Sticky | Abstand des Suchfensters zur oberen und unteren Kante des Such-Bereichs im Sticky-Header, Angabe standardmäßig in Pixeln z.B. 12px |
| vertikaler äußerer Abstand | Abstand des Such-Bereichs zur oberen und unteren Kantes des Headers |
| ertikaler äußerer Abstand Sticky | Abstand des Such-Bereichs zur oberen und unteren Kantes des Sticky-Headers |
| Grid-Spalten Klein | Anzahl der Grid-Spalten des Such-Bereichs für kleine Darstellung, typischerweise Tablet im Portrait/Hoch-Format |
| Grid-Spalten Medium | Anzahl der Grid-Spalten des Such-Bereichs für mittelgroße Darstellung, typischerweise Tablet im Landscape/Quer-Format |
| Grid-Spalten Groß | Anzahl der Grid-Spalten des Such-Bereichs für große Darstellung, typischerweise Desktop-Computer |
Hinweis
Sticky bezeichnet die reduzierte Form des Headers, die verwendet wird, wenn mit fixierter Kopfzeile nach unten gescrollt wird.
Hinweis
Die grafische Oberfläche des Shops wird in der Breite in 12 sogenannte Grid-Spalten aufgeteilt. Für jede Größe (groß, medium, klein) gibt es eine eigene Einstellung. Die Summe aller Einstellungen einer Größe, die nicht ausgeblendet werden, muss 12 ergeben. Weitere Informationen hierzu sind im Kapitel Grid-Spalten aufgeführt.
Freigestaltbarer Bereich
| Feldname | Beschreibung |
|---|---|
| Frei gestaltbaren Bereich im Header ausblenden | blendet den Bereich im Header aus (verringert die Zahl der verwendeten Grid-Spalten) |
| Höhe | Höhe des Bereichs, Angabe standardmäßig in Pixeln z.B. 80px |
| Höhe Sticky | Höhe des Bereichs im Sticky-Header, Angabe standardmäßig in Pixeln z.B. 60px |
| Grid-Spalten Klein | Anzahl der Grid-Spalten des Bereichs für kleine Darstellung, typischerweise Tablet im Portrait/Hoch-Format |
| Grid-Spalten Medium | Anzahl der Grid-Spalten des Bereichs für mittelgroße Darstellung, typischerweise Tablet im Landscape/Quer-Format |
| Grid-Spalten Groß | Anzahl der Grid-Spalten des Bereichs für große Darstellung, typischerweise Desktop-Computer |
Hinweis
Sticky bezeichnet die reduzierte Form des Headers, die verwendet wird, wenn mit fixierter Kopfzeile nach unten gescrollt wird.
Hinweis
Die grafische Oberfläche des Shops wird in der Breite in 12 sogenannte Grid-Spalten aufgeteilt. Für jede Größe (groß, medium, klein) gibt es eine eigene Einstellung. Die Summe aller Einstellungen einer Größe, die nicht ausgeblendet werden, muss 12 ergeben. Weitere Informationen hierzu sind im Kapitel Grid-Spalten aufgeführt.
Kleiner Warenkorb
| Feldname | Beschreibung |
|---|---|
| Warenkorb im Header ausblenden | blendet den Warenkorb-Bereich im Header aus (verringert die Zahl der verwendeten Grid-Spalten) |
| Farbe des Icons | Farbe des Warenkorb-Symbols |
| Farbe des Icons Sticky | Farbe des Warenkorb-Symbols im Sticky-Header |
| Farbe des Icons Mobile | Farbe des Warenkorb-Symbols in der mobilen Ansicht |
| Textfarbe | Farbe des Textes Ihr Warenkorb und des Betrags |
| Textfarbe Sticky | Farbe des Textes Ihr Warenkorb und des Betrags im Sticky-Header |
| Höhe | Höhe des Warenkorb-Bereichs im Header |
| Höhe Sticky | Höhe des Warenkorb-Bereichs im Sticky-Header |
| Vertikaler Abstand | Abstand des Warenkorb-Icons und Schriftzugs von der Oberkante und Unterkante des Warenkorb-Bereichs |
| Vertikaler Abstand Sticky | Abstand des Warenkorb-Icons und Schriftzugs von der Oberkante und Unterkante des Warenkorb-Bereichs im Sticky-Header |
| Vertikaler äußerer Abstand | Abstand des Warenkorb-Bereichs zu Ober- und Unterkante des umgebenden Headers |
| Vertikaler äußerer Abstand Sticky | Abstand des Warenkorb-Bereichs zu Ober- und Unterkante des umgebenden Sticky-Headers |
| Grid-Spalten Klein | Anzahl der Grid-Spalten des Warenkorb-Bereichs für kleine Darstellung, typischerweise Tablet im Portrait/Hoch-Format |
| Grid-Spalten Medium | Anzahl der Grid-Spalten des Warenkorb-Bereichs für mittelgroße Darstellung, typischerweise Tablet im Landscape/Quer-Format |
| Grid-Spalten Groß | Anzahl der Grid-Spalten des Warenkorb-Bereichs für große Darstellung, typischerweise Desktop-Computer |
Hinweis
Sticky bezeichnet die reduzierte Form des Headers, die verwendet wird, wenn mit fixierter Kopfzeile nach unten gescrollt wird.
Hinweis
Die grafische Oberfläche des Shops wird in der Breite in 12 sogenannte Grid-Spalten aufgeteilt. Für jede Größe (groß, medium, klein) gibt es eine eigene Einstellung. Die Summe aller Einstellungen einer Größe, die nicht ausgeblendet werden, muss 12 ergeben. Weitere Informationen hierzu sind im Kapitel Grid-Spalten aufgeführt.
Kategorien¶
Allgemein¶
| Feldname | Beschreibung |
|---|---|
| Höhe | Höhe des inneren Bereichs der horizontalen Navigationsleiste, ist mit dem Platzhalter $navbar-height vorbelegt |
| Höhe Sticky | Höhe des inneren Bereichs der horizontalen Navigationsleiste im Sticky-Header, ist standardmäßig mit 0 vorbelegt |
| Übergänge | sanfteres Einblenden des Mega-Dropdown, wenn der Mauszeiger über eine Kategorie mit Unterkategorien bewegt wird |
| Höhe außen | Höhe des äußeren Bereichs der horizontalen Navigationsleiste |
| Abstand unten | Unterer Abstand zur Kategorieleiste, ist mit dem Platzhalter $line-height-computed vorbelegt |
Hinweis
Sticky bezeichnet die reduzierte Form des Headers, die verwendet wird, wenn mit fixierter Kopfzeile nach unten gescrollt wird.
Menüpunkte¶
| Feldname | Beschreibung |
|---|---|
| horizontaler Abstand | linker Abstand der Einträge der Sekundärnavigation, vorbelegt mit floor(($grid-gutter-width/2)) |
| vertikaler Abstand | Abstand oberhalb und unterhalb der Einträge für Hauptkategorien |
| Hintergrund | |
| Farbe | Hintergrundfarbe der horizontalen Menüleiste (ohne Content-Einträge) |
| Bild einfügen | Hintergrundbild der horizontalen Menüleiste (ohne Content-Einträge) |
| Farbverlauf einfügen | Farbverlauf für den Hintergrund der horizontalen Menüleiste (ohne Content-Einträge) |
| Hintergrund außen | Hintergrundfarbe, die in der Fortführung der horizontalen Menüleiste links und rechts angezeigt wird |
| Schriftfarbe | Schriftfarbe der Hauptkategorien (ohne Unterkategorien und Content-Einträge) in der horizontalen Menüleiste |
| Schriftfarbe Custom | Schriftfarbe der Content-Einträge in der horizontalen Menüleiste |
| Schriftfarbe Hover | Schriftfarbe der Hauptkategorien (ohne Unterkategorien und Content-Einträge) in der horizontalen Menüleiste, beim Hovern mit dem Mauszeiger, ohne dass Unterkategorien aufgeklappt werden |
| Schriftfarbe Hover Custom | Schriftfarbe der Content-Einträge in der horizontalen Menüleiste, beim Hovern mit dem Mauszeiger |
| Schriftfarbe Aktiv | Schriftfarbe der Hauptkategorie in der horizontalen Menüleiste, die aktuell angezeit wird |
| Schriftfarbe Aktiv Custom | Schriftfarbe der Content-Seite in der horizontalen Menüleiste, die aktuell angezeigt wird |
| Texttransformation | Ändert Groß- und Kleinschreibung der Beschriftung der Hauptkategorie in der horizontalen Menüleistenone: |
| none: Text wird so ausgegeben, wie er im Shop als Kategoriename hinterlegt ist | |
| uppercase: Text wird in Großbuchstaben ausgegeben | |
| lowercase: Text wird in Kleinbuchstaben ausgegeben | |
| capitalize: Jedes Wort beginnt mit einem Großbuchstaben | |
| Schriftgröße | Schriftgröße der Hauptkategorien in der horizontalen und vertikalen Menüleiste |
| Hintergrund Hover | Hintergrundfabre der Hauptkategorien in der horlzontalen Menüleiste beim Hovern mit der Maus, vorbelegt mit darken($gx-cat-navbar-bg-color, 6.5%) |
| Hintergrund Aktiv | Hintergrundfarbe der aktuell angezeigten Hauptkategorie in der horizontalen Kategoriemeleiste, vorbelegt mit darken($gx-cat-navbar-bg-color, 6.5%) |
| Hintergrund Custom | Hintergrundfarbe der Content-Einträge in der horizontalen Menüleiste, vorbelegt mit $brand-primary |
| Hintergrund Hover Custom | Hintergrundfarbe der Content-Einträge in der horizontalen Menüleiste, beim Hovern mit der Maus, vorbelegt mit darken($gx-custom-bg-color, 10%) |
| Hintergrund Aktiv Custom | Hintergrundfarbe des Content-Eintrags in der horizontalen Menüleiste, der aktuell angezeit wird, vorbelegt mit darken($gx-custom-bg-color, 10%) |
Hinweis
Hovern bzw. Mouseover bezeichnet das Platzieren des Mauszeigers über ein Element, ohne es anzuklicken
Kategorien Mobil¶
| Feldname | Beschreibung |
|---|---|
| Mobil-Menü Höhe | Höhe des mobilen Menüs |
| Höhe | Höhe der Menü-Einträge |
| Vertikaler Abstand | Abstand des Namens zur oberen Kante des Menüeintrags |
| Heller Farbmodus | Umschalten zwischen hellem Farbmodus (weißer Hintergrund, dunkle Schrift) und dunklem Farbmodus (dunkler Hintergrund, weiße Schrift) |
| Icons anzeigen | Icons im mobilen Menü anzeigen ja/nein |
Mega-Dropdown¶
| Feldname | Beschreibung |
|---|---|
| Schriftgröße Überschriften | Schriftgröße der Einträge im Dropdown des Kategoriemenüs |
| Schriftfarbe | Schriftfarbe der Einträge im Dropdown des Kategoriemenüs, vorbelegt mit $text-color |
| Rahmenfarbe | Farbe der Rahmenelemente der Einträge im Dropdown des Kategoriemenüs |
| Block-Breite | Breite der Unterkategorie-Blöcke im Mega-Dropdown |
| Anzahl Blöcke | Anzahl der nebeneinander angezeigten Blöcke im Mega-Dropdown |
| Tab-Verschiebung | innerer Abstand der einzelnen Menüeinträge, vorbelegt mit 2px |
| Hintergrund | |
| Farbe | Hintergrundfarbe des Mega-Dropdowns |
| Bild einfügen | Hintergrundbild des Mega-Dropdowns |
| Farbverlauf einfügen | Verwenden eines Farbverlaufs für den Hintergrund des Mega-Dropdowns |
| Schriftfarbe Alle Anzeigen | Schriftfarbe des Buttons Alle Anzeigen, vorbelegt mit $text-color |
| Hintergrund Alle Anzeigen | |
| Farbe | Hintergrundfarbe des Buttons Alle Anzeigen, vorbelegt mit $gray-lighter |
| Bild einfügen | Hintergrundbild des Buttons Alle Anzeigen |
| Farbverlauf einfügen | Farbverlauf als Hintergrundbild des Buttons Alle Anzeigen |
Vertikales Kategoriemenü¶
| Feldname | Beschreibung |
|---|---|
| Schriftfarbe | Schriftfarbe des vertikalen Kategoriemenüs, mit $text-color vorbelegt |
| Schriftfarbe Hover | Schriftfarbe des vertikalen Kategoriemenüs beim Hovern, mit $text-color vorbelegt |
| Schriftfarbe Aktiv | Schriftfarbe der aktuell angezeigten Kategorie im vertikalen Kategoriemenü |
| Schriftfarbe geöffnet | Schriftfartbe der aufgeklappten Kategorien im vertikalen Kategoriemenü, vorbelegt mit $text-color |
| Hintergrund | |
| Farbe | Hintergrundfarbe des vertikalen Kategoriemenüs |
| Bild einfügen | Hintergrundbild des vertikalen Kategoriemenüs |
| Farbverlauf einfügen | Farbverlauf als Hintergrund im vertikalen Kategoriemenü |
| Hintergrund Hover | |
| Farbe | Hintergrundfarbe des Untermenüeintrags im vertikalen Kategoriemenü beim Hovern mit der Maus |
| Bild einfügen | Hintergrundbild des Menüeintrags im vertikalen Kategoriemenü beim Hovern mit der Maus |
| Farbverlauf einfügen | Farbverlauf als Hintergrund des Menüeintrags im vertikalen Kategoriemenü beim Hovern mit der Maus |
| Hintergrund Aktiv | |
| Farbe | Hintergrundfarbe der aktuell angezeigten Kategorie im vertikalen Kategoriemenü, vorbelegt mit $brand-primary |
| Bild einfügen | Hintergrundbild der aktuell angezeigten Kategorie im vertikalen Kategoriemenü |
| Farbverlauf einfügen | Farbverlauf als Hintergrund der angezeigten Kategorie im vertikalen Kategoriemenü |
| Hintergrund geöffnet | |
| Farbe | Hintergrundfarbe der aktuell aufgeklappten Hauptkategorie |
| Bild einfügen | Hintergrundbild der Hauptkategorien im vertikalen Kategoriemenü |
| Farbverlauf einfügen | Farbverlauf als Hintergrund der Hauptkategorien im vertikalen Kategoriemenü |
Hinweis
Hovern bzw. Mouseover bezeichnet das Platzieren des Mauszeigers über ein Element, ohne es anzuklicken
Sekundärnavigation¶
Allgemein¶
| Feldname | Beschreibung |
|---|---|
| Schriftgröße | Schriftgröße der Menüeinträge in der Sekundärnavigation, mit $font-size-small vorbelegt |
| Höhe | Höhe der Einträge der Sekundärnavigation |
| Höhe Sticky | Höhe der Einträge der Sekundärnavigation in der Sticky-Ansicht |
| Hintergrund | |
| Farbe | Hintergrundfarbe der Sekundärnavigationsleiste |
| Bild einfügen | Hintergrundbild der Sekundärnavigationsleiste |
| Farbverlauf einfügen | Farbverlauf als Hintergrund der Sekundärnavigationsleiste |
Hinweis
Sticky bezeichnet die reduzierte Form des Headers, die verwendet wird, wenn mit fixierter Kopfzeile nach unten gescrollt wird.
Hinweis
Hovern bezeichnet das Platzieren des Mauszeigers über ein Element, ohne es anzuklicken
Menüpunkte¶
| Feldname | Beschreibung |
|---|---|
| Schriftfarbe | Schriftfarbe der Menüeinträge in der Sekundärnavigation, abzüglich Gambio Admin-Button |
| Scriftfarbe Hover | Schriftfarbe der Menüeinträge in der Sekundärnavigation beim Hovern, abzüglich Gambio Admin-Button |
| Schriftfarbe Aktiv | Schriftfarbe der Menüeinträge in der Sekundärnavgiation, beim Ausklappen eines Dropdowns |
| Hintergrund | |
| Farbe | Hintergrundfarbe der Menüeinträge der Sekundärnavigation, abzüglich Gambio Admin-Button, mit transparent vorbelegt |
| Bild einfügen | Hintergrundbild der Menüeinträge der Sekundärnavigation |
| Farbverlauf einfügen | Farbverlauf als Hintergrund der Menüeinträge der Sekundärnavigation |
| Hintergrund Hover | |
| Farbe | Hintergrundfarbe der Menüeinträge der Sekundärnavigation beim Hovern mit der Maus, abzüglich Gambio Admin-Button |
| Bild einfügen | Hintergrundbild der Menüeinträge der Sekundärnavigation beim Hovern mit der Maus |
| Farbverlauf einfügen | Farbverlauf als Hintergrund der Menüeinträge der Sekundärnavigation beim Hovern mit der Maus |
| Hintergrund Aktiv | |
| Farbe | Hintergrundfarbe der Menüeinträge in der Sekundärnavgiation, beim Ausklappen eines Dropdowns |
| Bild einfügen | Hintergrundbild der Menüeinträge in der Sekundärnavgiation, beim Ausklappen eines Dropdowns |
| Farbverlauf einfügen | Farbverlauf als Hintergrund der Menüeinträge der Sekundärnavigation beim Ausklappen eines Dropdowns |
| Link Abstand | innerer Abstand des Textes nach oben und unten bzw. links und rechts zum Rand des Buttons, vorbelegt mit 6px 15px |
Hinweis
Hovern bezeichnet das Platzieren des Mauszeigers über ein Element, ohne es anzuklicken
Kategorien Mobil¶
Diese Einstellungen haben derzeit keine Funktion und werden in einer zukünftigen Version entfernt.
Spaltenaufteilung¶
Über den Bereich Spaltenaufteilung kann das Seitenverhältnis der einzelnen Bereiche im Shop festgelegt werden. Hierbei wird der Hauptbereich des Shops in 12 gleich breite Spalten unterteilt.
Achtung
Die Summe der Spalteneinstellungen für eine Größe (z.B. 'Gross (Desktops)') muss immer 12 ergeben, ansonsten kommt es zu Fehlern in der Darstellung.
Für die Desktop-Ansicht ist standardmäßig eine Aufteilung von 3 Spalten für den linken Teil der Seite und 9 Spalten für den mittleren Teil voreingestellt.
Bei der Einstellung der Unterkategorien wird die Anzahl der in einer Reihe angezeigten Kategorien wie folgt festgelegt:
12 / Gridspalten Unterkategorien = Anzahl der Unterkategorien pro Reihe
Footer¶
Varianten¶
Hier können die einzelnen Varianten des Footers ausgewählt werden. Im Honeygrid steht die Variante Standard zur Verfügung.
Standard¶
Footer Header
Der Footer Header ist die durchgehende Zeile oberhalb der Spalten des Footers.
| Feldname | Beschreibung |
|---|---|
| Mindesthöhe | minimale Höhe, die vom Footer Header in Anspruch genommen wird, auch wenn der Platz vom zugehörigen Inhalt nicht benötigt wird |
| Schriftfarbe | Schriftfarbe, die standardmäßig im Footer Header verwendet wird, vorbelegt mit _$gx-footer-color |
Hinweis
Der in diesem Bereich angezeigte Content hat eigene Farbeinstellungen, diese haben eine höhere Priorität als die Grundeinstellung des StyleEdits. Wir empfehlen die allgemeine Einstellung mit dem StyleEdit vorzunehmen und bei Bedarf nur Teile des Inhalts über den Content Manager bzw. CK-Editor anders einzufärben.
| Feldname | Beschreibung |
|---|---|
| Hintergrund | |
| Farbe | Hintergrundfarbe des Footer Headers, mit transparent vorbelegt |
| Bild einfügen | Hintergrundbild des Footer Headers |
| Farbverlauf einfügen | Farbverlauf als Hintergrund des Footer Headers |
Footer Body
| Feldname | Beschreibung |
|---|---|
| Mindesthöhe | minimale Höhe des Footer Bodys |
| Höhe | Höhe des Footer Bodys |
Hinweis
Die Höhe des Footers sollte die Mindesthöhe nicht unterschreiten
| Feldname | Beschreibung |
|---|---|
| Schriftfarbe | Schriftfarbe des Footers insgesamt, ohne Links |
| Linkfarbe Footer | Linkfarbe innerhalb des Footers, außer Footer Header |
| Linkfarbe Hover Footer | Linkfarbe innerhalb des Footers beim Hovern (darübergehen mit der Maus), außer Footer Header |
| Zeilenabstand Footer | Zeilenabstand von Absätzen innerhalb der Footer Spalten |
| Hintergrund | |
| Farbe | Hintergrundfarbe des Footers |
| Bild einfügen | Hintergrundbild des Footers |
| Farbverlauf einfügen | Farbverlauf als Hintergrund des Footers |
Hinweis
Hovern bzw. Mouseover bezeichnet das Platzieren des Mauszeigers über ein Element, ohne es anzuklicken
Footer Spalte N
Dieser Abschnitt beschreibt die Einstellungen für Footer Spalte 1 bis Footer Spalte 4.
| Feldname | Beschreibung |
|---|---|
| Spalte 1 ausblenden | blendet die Spalte innerhalb des Footers aus |
| Grid-Spalten Klein | Anzahl der Grid-Spalten für diese Spalte des Footers bei kleinen Ausgabegeräten (z.B. Smartphone) |
| Grid-Spalten Medium | Anzahl der Grid-Spalten für diese Spalte des Footers bei mittelgroßen Ausgabegeräten (z.B. Tablets) |
| Grid-Spalten Groß | Anzahl der Grid-Spalten für diese Spalte des Footers bei großen Ausgabegeräten (z.B. Desktop-Computern) |
Hinweis
Die grafische Oberfläche des Shops wird in der Breite in 12 sogenannte Grid-Spalten aufgeteilt. Für jede Größe (groß, medium, klein) gibt es eine eigene Einstellung. Die Summe aller Einstellungen einer Größe, die nicht ausgeblendet werden, muss 12 ergeben. Weitere Informationen hierzu sind im Kapitel Grid-Spalten aufgeführt.
Hierbei ist zu beachten, dass die Spalten des Footers auf kleineren Bildschirmen auch untereinander dargestellt werden. Es gilt
12 / Anzahl der Grid-Spalten = Anzahl der Footer-Spalten die nebeneinander angezeigt werden
Produkte¶
Artikelbild¶
| Feldname | Berschreibung |
|---|---|
| Höhe | Höhe des Artikelbildbereichs auf der Artikeldetailseite |
| Höhe Mobil | Höhe des Artikelbildbereichs in der mobilen Ansicht (Tablet und Smartphone) |
| Höhe Lightbox | Höhe des Artikelsbildbereichs in der Lightbox |
| Höhe Lightbox Mobil | Höhe des Artikelbildbereichs in der Lightbox in der mobilen Ansicht (Tablet) |
| Breite der Thumbnails | Breite des Artikelbildbereichs der kleinen Vorschaubilder |
| Breite der Thumbnails Mobil | Breite des Artikelbildbereichs der kleinen Vorschaubilder in der mobilen Ansicht |
| Hintergrund | |
| Farbe | Hintergrundfarbe des Artikelbildbereichs, vorbelegt mit transparent |
| Bild einfügen | Hintergrundbild des Artikelbildbereichs |
| Farbverlauf einfügen | Farbverlauf als Hintergrund des Artikelbildbereichs |
Hinweis
Der Artikelbildbereich legt fest, wie viel Platz dem jeweiligen Artikelbild zur Verfügung steht. Da bei der Änderung einer Dimension (Höhe oder Breite) die jeweils andere entsprechend skaliert wird, kann der Bildbereich nicht unbegrenzt vergrößert werden.
Produktliste¶
Produktlisten können sowohl Kategorien als auch andere Produktseiten sein, wie z.B. die Auflistung der Sonderangebote
| Feldname | Beschreibung |
|---|---|
| Hintergrund | |
| Farbe | Hintergrundfarbe des Produkts in der Produktliste  |
| Bild einfügen | Hintergrundbild des Produkts in der Produktliste |
| Farbverlauf einfügen | Farbverlauf als Hintergrund des Produkts in der Produktliste |
| Hintergrund der Galerie | |
| Farbe | Hintergrundfarbe des Galeriebereichs bei Artikellisten in gekachelter Ansicht |
| Bild einfügen | Hintergrundbild des Galeriebereichs bei Artikellisten in gekachelter Ansicht |
| Farbverlauf einfügen | Farbverlauf als Hintergrund des Galeriebereichs |
| Grid-Spalten Mobil | Anzahl der Spalten bei gekachelter Ansicht der Artikelliste, Smartphone-Ansicht |
| Grid-Spalten Klein | Anzahl der Spalten bei gekachelter Ansicht der Artikelliste, Tablet Portrait-Ansicht |
| Grid-Spalten Medium | Anzahl der Spalten bei gekachelter Ansicht der Artikelliste, Tablet Landscape-Ansicht |
| Grid-Spalten Groß | Anzahl der Spalten bei gekachelter Ansicht der Artikelliste, Desktop-Ansicht |
| Höhe des Produktnamens in der Kachel | Höhe des Bereichs der Produktkachel, in dem der Produktname angezeigt wird |
| Höhe des Preises in der Kachel | Höhe des Bereichs der Produktkachel, in dem der Preis angezeigt wird |
| Abstand zwischen Ribbons und Artikelbild | vertikaler Abstand, vorbelegt mit 0 |
| Höhe des Produktbildes Kachel | Höhe des Bildbereichs in der gekachelten Ansicht |
| Höhe des Produktbildes Kachel mobil | Höhe des Bildbereichs in der gekachelten Ansicht (Smartphone) |
| Höhe des Galeriebildes Flyover | Höhe des Bildbereichs in der Galerie der gekachelten Ansicht (Mouseover/Hover) |
| Breite der Galerie | Breite des Galeriebereichs der gekachelten Ansicht (Mouseover/Hover) |
| Lieferzeit in Kachel immer anzeigen | Lieferzeit wird durchgängig angezeigt, nicht nur beim Mouseover |
Hinweis
Hovern bzw. Flyover bezeichnet das Platzieren des Mauszeigers über ein Element, ohne es anzuklicken.
Produktdetails Box¶
| Feldname | Beschreibung |
|---|---|
| Hintergrund | |
| Farbe | Hintergrundfarbe der Produktdetailbox |
| Bild einfügen | Hintergrundbild der Produktdetailbox |
| Farbverlauf einfügen | Farbverlauf als Hintergrund der Produktdetailbox |
| Schriftfarbe | Schriftfarbe in der Produktdetailbox, vorbelegt mit $text-color |
| Hinweis Schriftfarbe | Schriftfarbe für Preis-, Steuer- und Versandkostenhinweis, vorbelegt mit $gray-light |
| Rahmenbreite | Breite des Rahmens um die Produktdetailbox, vorbelegt mit 0 |
| Rahmenstil | Stil des Rahmens um die Produktdetailbox, vorbelegt mit none |
| Rahmenfarbe | Farbe des Rahmens um die Produktdetailbox, vorbelegt mit transparent |
| Button Schriftfarbe | Schriftfarbe der Buttons unterhalb des Warenkorb-Buttons  |
| Button Schriftfarbe Hover | Schriftfarbe der Buttons unterhalb des Warenkorb-Buttons beim Mouseover/Hover, vorbelegt mit darken($gx-product-info-button-color, 10%) |
| Button Hintergrundfarbe | Hintergrundfarbe der Buttons unterhalb des Warenkorb-Buttons, vorbelegt mit transparent |
| Button Hintergrundfarbe Hover | Hintergrundfarbe der Buttons unterhalb des Warenkorb-Buttons beim Mouseover/Hover, vorbelegt mit transparent |
| Button Rahmenfarbe | Rahmenfarbe der Buttons unterhalb des Warenkorb-Buttons |
| Button Rahmenfarbe Hover | Rahmenfarbe der Buttons unterhalb des Warenkorb-Buttons beim Mouseover/Hover |
| Preisbox mitscrollen | soll die Produktdetailbox mitscrollen? |
Hinweis
Hovern bezeichnet das Platzieren des Mauszeigers über ein Element, ohne es anzuklicken.
Tabs¶
| Feldname | Beschreibung |
|---|---|
| Schriftfarbe | Schriftfarbe der Tab-Überschriften, außer aktiver Tab |
| Schriftfarbe aktiver Tab | Schriftfarbe der Überschrift des aktiven Tabs, vorbelegt mit $text-color |
| Rahmenfarbe | Farbe der unteren Abgrenzung der Tab-Überschriften, vorbelegt mit transparent |
| Rahmenfarbe aktiver Tab | Farbe der unteren Abgrenzung des aktiven Tabs |
| Rahmenfarbe Tab Container | Farbe der Abgrenzung zwischen Überschriften und Tabinhalten |
| Hintergrund | |
| Farbe | Hintergrundfarbe der Tab-Überschriften, außer aktiver Tab, vorbelegt mit transparent |
| Bild einfügen | Hintergrundbild der Tab-Überschriften, außer aktiver Tab |
| Farbverlauf einfügen | Farbverlauf als Hintergrund der Tab-Überschriften, außer aktiver Tab |
| Hintergrund aktiver Tab | |
| Farbe | Hintergrundfarbe der Überschrift des aktiven Tabs |
| Bild einfügen | Hintergrundbild der Überschrift des aktiven Tabs |
| Farbverlauf einfügen | Farbverlauf als Hintergrund der Überschrift des aktiven Tabs |
Ribbons¶
| Feldname | Beschreibung |
|---|---|
| Ribbon anzeigen | Ribbon wird für passende Artikel verwendet |
| Hintergrundfarbe | Hintergrundfarbe des Ribbons |
| Schriftfarbe | Schriftfarbe des Ribbons |
Checkout¶
Allgemein¶
| Feldname | Beschreibung |
|---|---|
| Überschriftenfarbe | Überschriftenfarbe der einzelnen Unterabschnitte innerhalb der Seiten des Checkouts, vorbelegt mit $brand-primary |
Warenkorb teilen¶
| Feldname | Beschreibung |
|---|---|
| Rahmenfarbe | Farbe der oberen und unteren Abgrenzung der Artikeltabelle des Warenkorbs |
| Schriftfarbe Tabellenkopf | Schriftfarbe der Tabellenüberschriften im Warenkorb |
| Schriftfarbe Tabelle | Schriftfarbe der Artikeltabelle des Warenkorbs, ohne Produktinformationen, vorbelegt mit $text-color |
| Schriftfarbe Produktinformationen | Schriftfarbe der Produktinformationen in der Artikeltabelle des Warenkorbs, vorbelegt mit $gray |
Warenkorb Zusammenfassungsbox¶
| Feldname | Beschreibung |
|---|---|
| Schriftfarbe | Schriftfarbe in der Zusammenfassungsbox, vorbelegt mit $text-color |
| Rahmenfarbe | Farbe der horizontalen Trennlinien der Warenkorb Zusammenfassungsbox |
| Hintergrund oben | |
| Farbe | Hintergrundfarbe des oberen Teils der Zusammenfassungsbox, vorbelegt mit $gx-panel-bg-color |
| Bild einfügen | Hintergrundbild des oberen Teils der Zusammenfassungsbox |
| Farbverlauf einfügen | Farbverlauf als Hintergrund des oberen Teils der Zusammenfassungsbox |
| Hintergrund unten | |
| Farbe | Hintergrundfarbe des unteren Teils der Zusammenfassungsbox |
| Bild einfügen | Hintergrundbild des unteren Teils der Zusammenfassungsbox |
| Farbverlauf einfügen | Farbverlauf als Hintergrund des unteren Teils der Zusammenfassungsbox |
Checkout Zusammenfassungstabelle¶
| Feldname | Beschreibung |
|---|---|
| Schriftfarbe | Schriftfarbe, vorbelegt mit $text-color |
| Schriftfarbe Header | Schriftfarbe des Headers der Zusammenfassungstabelle |
| Schriftfarbe Zusatzinformationen | Schriftfarbe der Zusatzinformationen, vorbelegt mit $gray |
| Rahmenfarbe | Farbe der horizontalen Trennlinien zwischen den einzelnen Einträgen der Zusammenfassungstabelle |
| Hintergrund | |
| Farbe | Hintergrundfarbe der Zusammenfassungstabelle |
| Bild einfügen | Hintergrundbild der Zusammenfassungstabelle |
| Farbverlauf einfügen | Farbverlauf als Hintergrund der Zusammenfassungstabelle |
Listenelemente¶
| Feldname | Beschreibung |
|---|---|
| Schriftfarbe | Schriftfarbe der Listenelemente, außer aktive Auswahl, vorbelegt mit $text-color |
| Schriftfarbe aktive Auswahl | Schriftfarbe des aktuell ausgewählten Listenelements, vorbelegt mit $text-color |
| Linkfarbe | Linkfarbe, außer aktive Auswahl, vorbelegt mit $brand-primary |
| Linkfarbe aktive Auswahl | Linkfarbe der aktiven Auswahl, vorbelegt mit $brand-primary |
| Rahmenfarbe | Rahmenfarbe der einzelnen Listeneinträge, ohne aktive Auswahl, vorbelegt mit $gray-lighter |
| Rahmenfarbe aktive Auswahl | Rahmenfarbe des aktuell ausgewählten Listenelements |
| Hintergrund | |
| Farbe | Hintergrundfarbe der Listenelemente, außer aktive Auswahl, vorbelegt mit transparent |
| Bild einfügen | Hintergrundbild der Listenelemente, außer aktive Auswahl |
| Farbverlauf einfügen | Farbverlauf als Hintergrund der Listenelemente, außer aktive Auswahl |
| Hintergrund aktive Auswahl | |
| Farbe | Hintergrundfarbe des aktuell ausgewählten Listenelements |
| Bild einfügen | Hintergrundbild des aktuell ausgewählten Listenelements |
| Farbverlauf einfügen | Farbverlauf als Hintergrund des aktuell ausgewählten Listenelements |
| Hintergrund Formular | |
| Farbe | Hintergrundfarbe von Formularen der Listeneinträge |
| Bild einfügen | Hintergrundbild von Formularen der Listeneinträge |
| Farbverlauf einfügen | Farbverlauf als Hintergrund von Formularen der Listeneinträge |
AGB und Widerruf-Checkboxen¶
| Feldname | Beschreibung |
|---|---|
| Textfarbe Checkboxen | Textfarbe der Checkbox-Beschreibung, außer angehakte Checkboxen, vorbelegt mit $alert-warning-text |
| Textfarbe Checkboxen Aktiv | Textfarbe der Checkbox-Beschreibung von angehakten Checkboxen, vorbelegt mit $alert-success-text |
| Rahmenfarbe Checkboxen | Rahmenfarbe des Blocks aus Checkbox und Beschreibung, außer angehakte Checkboxen, vorbelegt mit $alert-warning-border |
| Rahmenfarbe Checkboxen Aktiv | Rahmenfarbe des Blocks aus Checkbox und Beschreibung bei angehakten Checkboxen, vorbelegt mit $alert-success-border |
| Hintergrund Checkboxen | |
| Farbe | Hintergrundfarbe des Blocks aus Checkbox und Beschreibung, außer angehakte Checkboxen, vorbelegt mit $alert-warning-bg |
| Bild einfügen | Hintergrundbild des Blocks aus Checkbox und Beschreibung, außer angehakte Checkboxen |
| Farbverlauf einfügen | Farbverlauf als Hintergrund des Blocks aus Checkbox und Beschreibung, außer angehakte Checkboxen |
| Hintergrund Checkboxen Aktiv | |
| Farbe | Hintergrundfarbe des Blocks aus Checkbox und Beschreibung bei angehakten Checkboxen, vorbelegt mit $alert-success-bg |
| Bild einfügen | Hintergrundbild des Blocks aus Checkbox und Beschreibung bei angehakten Checkboxen |
| Farbverlauf einfügen | Farbverlauf als Hintergrund des Blocks aus Checkbox und Beschreibung bei angehakten Checkboxen |
Menüboxen¶
Kopfzeile¶
| Feldname | Beschreibung |
|---|---|
| Schriftfarbe | Schriftfarbe der Kopfzeile, vorbelegt mit $text-color |
| Hintergrund | |
| Farbe | Hintergrundfarbe der Kopfzeile |
| Bild einfügen | Hintergrundbild der Kopfzeile |
| Farbverlauf einfügen | Farbverlauf als Hintergrund der Kopfzeile |
Inhaltsbereich¶
| Feldname | Beschreibung |
|---|---|
| Hintergrund | |
| Farbe | Hintergrundfarbe des Inhaltsbereichs |
| Bild einfügen | Hintergrundbild des Inhaltsbereichs |
| Farbverlauf einfügen | Farbverlauf als Hintergrund des Inhaltsbereichs |
| Rahmenfarbe | Rahmenfarbe der Menübox |
Seiten mit Menüboxspalte¶
Die Anzeige der Menüboxen kann für die einzelnen Seiten bzw. Seitenarten des Shops an- und abgeschaltet werden. Aktiviere (Schalter blau) bzw. deaktiviere (Schalter grau) hierzu die gewünschten Einstellungen. Für folgende Seiten können die Menüboxen im Honeygrid aktiviert werden:
- Startseite
- Suchergebnis-Seite
- Contentmanager Seite
- Artikelseiten
- Kategorien und Produktlisten
- Warenkorb
- Merkzettel
- Checkout
- Kundenkontoseiten
- Kontoerstellung
- Newsletteranmeldung
Auswahl und Positionen¶
In diesem Bereich sind die Menüboxen des Shops aufgelistet. Durch Aktivieren (Schalter blau) und Deaktivieren (Schalter grau) der einzelnen Einstellungen kannst du die jeweiligen Menüboxen im Shop an- und abschalten.
Um die Reihenfolge der Menüboxen zu verändern, bewege den Mauszeiger über das Pfeilkreuz-Symbol, links neben dem Namen der Box, die du an eine andere Position verschieben möchtest. Mache einen Linksklick auf das Symbol und halte die Maustaste geprückt. Ziehe nun den Eintrag nach oben oder unten, um seine Reihenfolge zu ändern. Lasse die Maustaste wieder los, wenn er sich an der gewünschten Position befindet.
Cookie Consent Panel¶
General¶
| Feldname | Beschreibung |
|---|---|
| Background Color | Hintergrundfarbe von Cookie Consent-Panel und Cookie Einstellungen |
| Opacity | Undurchsichtigkeit, wie stark soll der Bereich hinter dem Panel durchscheinen? |
| Switchers Color | Aktuell keine Funktion, wird in der kommenden Version entfernt |
| Buttons Color | Hintergrundfarbe der Schalter und Schaltflächen, vorbelegt mit $brand-primary |
| Buttons Hover Color | Hover-Hintergrundfarbe der Schaltflächen, vorbelegt mit $brand-primary |
| Box Shadow | Schattenverlauf des Panels, vorbelegt mit 0 -8px 20px 0 rgba(0,0,0,.2) |
Hinweis
Diese Zeile verwendet CSS-Code als Eingabe. Beispiele und Erklärungen findest du z.B. auf den Seiten von selfhtml:
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/%C3%A4u%C3%9Fere_Gestaltung/box-shadow
https://wiki.selfhtml.org/wiki/Referenz:CSS/Eigenschaften/box-shadow
| Feldname | Beschreibung |
|---|---|
| Headline Font Size | Schriftgröße der Überschrift |
| Headline Font Family | Schriftart der Überschrift |
| Description Font Size | Schriftgröße des Beschreibungstextes des Cookie Consent-Panels |
| Description Font Family | Schriftart des Beschreibungstextes des Cookie Consent-Panels |
Hinweis
Hovern bzw. Mouseover bezeichnet das Platzieren des Mauszeigers über ein Element, ohne es anzuklicken
Widgets¶
Widgets sind in vorgesehenen Bereichen frei platzierbare Inhalte. Derzeit gibt es die folgenden Widgets:
Text¶
Text-Widgets erlauben das Platzieren von Texten. Über die Flaggen-Symbole kann die jeweilige Sprache ausgewählt werden die blaue Schaltfläche rechts oben erlaubt das Kopieren des aktuell angezeigten Textes in die Eingabefelder für die anderen Sprachen.
Der Inhaltsname legt den Namen des jeweiligen Textes fest, er wird auch im Content Manager verwendet.
Von links nach rechts stehen im Editor folgende Einstellungen zur Verfügung:
- Paragraph/Heading: legt fest, ob die aktuell ausgewählte(n) Zeile(n) ein Absatz (Paragraph) oder eine Überschrift erster bis dritter Ordnung (Heading 1 bis Heading 3) ist bzw. sind.
Hinweis
Eine einzelne Zeile kann durch Setzen des Cursors ausgewählt werden. Mehrere Zeilen durch Markieren der Textstellen. Hierbei werden immer ganze Zeilen ausgewählt.
- Bold (fett)
- Italic (kursiv)
- Link (es wird ein Eingabefenster für die Linkadresse angezeigt)
Hinweis
Die Einstellungen Bold, Italic und _Link _wirken sich nur auf markierte Textstellen aus.
- Unordered List (ausgewählte Zeile(n) als Aufzählung mit Bullet Points festlegen)
- Ordered List (ausgewählte Zeile(n) als Aufzählung mit arabischen Ziffern festlegen)
- Block Quote (ausgewählte Zeile(n) als Zitat festlegen)
- Undo (letzten Schritt rückgängig machen)
- Redo (zuletzt rückgängig gemachten Schritt nochmals ausführen)
Unter dem Editor wird die HTML ID ausgegeben. Sie wird zur eindeutigen Identifizierung des Inhalts innerhalb des HTML-Codes verwendet. Änderungen sind optional. Über das Feld Klassen erhält das Element auf HTML-Ebene eine sogenannte Klasse. Für mehrere Elemente mit der gleichen Klasse können z.B. über CSS-Code eigene Style-Einstellungen vorgenommen werden. Die Verwendung ist optional.
Bild¶
| Feldname | Beschreibung |
|---|---|
| Bild | Auswahl der Bilddatei |
| Name | Name des Bildes |
| Link | Link, der beim Klick auf das Bild aufgerufen werden soll |
| Target | Wo soll der Link aufgerufen werden? |
| Feldname | Beschreibung |
|---|---|
| Breite | Breite des Bildes in der eingestellten Einheit |
| Höhe | Höhe des Bildes in der eingestellten Einheit |
| Bild responsive anpassen | soll das Bild responsiv dargestellt werden? |
Hinweis
Durch Klick auf px, em oder % kann die jeweilige Größeneinheit eingestellt werden
| Feldname | Beschreibung |
|---|---|
| ID | HTML-ID des Widgets, zur Auszeichnung des Elements im Quellcode |
| Klassen | HTML-Klasse des Widgets, zur Auszeichnung des Elements im Quellcode |
Hinweis
IDs und Klassen werden auf HTML-Ebene verwendet. Änderungen sind optional.
Überschrift¶
Überschriften können frei platziert werden, ohne einem anderen Widget zugeordnet werden zu müssen.
| Feldname | Beschreibung |
|---|---|
| Inhalt | Text der Überschrift |
| ID | HTML-ID der Überschrift, Änderung optional |
| Type | Ordnung der Überschrift, Heading 1 bis Heading 6 |
| Feldname | Beschreibung |
|---|---|
| Schrift individuell anpassen | Aktiviert die Schrift-Einstellungen der Überschrift |
| Text Farbe | Schriftfarbe der Überschrift |
| Text Ausrichtung | Ausrichtung der Überschrift (Left: linksbündig, Center: zentriert, Right: rechtsbündig, Justify: Blocksatz, Initial: Standardwert, Inherit: Einstellung des übergeordneten Elements verwenden) |
| Schriftart | Schriftart der Überschrift |
| Schriftgröße | Schriftgröße der Überschrift in der eingestellten Einheit |
| Schriftstil | Schriftstil der Überschrift (normal, italic: kursive Darstellung entsprechend der Schriftart, oblique: kursive Darstellung auch ohne kursive Variante der Schriftart, initial: Standardwert, inherit: Einstellung des übergeordneten Elements) |
| Text unterstrichen | Überschrift wird unterstrichen dargestellt |
| Text in Großbuchstaben | Überschrift wird in Großbuchstaben dargestellt |
Hinweis
Aktiviere die Einstellung Schrift individuell anpassen, um Einstellungen vornehmen zu können
Hinweis
Durch Klick auf px, em oder % kann die jeweilige Größeneinheit eingestellt werden
Hinweis
IDs und Klassen werden auf HTML-Ebene verwendet. Änderungen sind optional.
Button¶
Buttons sind Schaltflächen, die mit einem Link versehen werden können.
| Feldname | Beschreibung |
|---|---|
| Inhalt | Beschriftung der Schaltfläche |
| Link | Link, der von der Schaltfläche aus aufgerufen werden soll |
| Target | Zielseite, in der der Link geöffnet werden soll |
| Klassen | HTML-Klasse der Schaltfläche |
| ID | HTML-ID der Schaltfläche |
Hinweis
IDs und Klassen werden auf HTML-Ebene verwendet. Änderungen sind optional.
Im Bereich Button Size wird die allgemeine Größe der Schaltfläche eingestellt. Unter Button Type kann die Schrift- und Hintergrundfarbe entsprechend der eingestellten Standardfarbschemata (Default, Primary, Success, Info, Warning, Danger) umgestellt werden.
HTML¶
HTML-Widgets erlauben das Platzieren von HTML-Codes. Über die Flaggen-Symbole kann die jeweilige Sprache ausgewählt werden die blaue Schaltfläche rechts oben erlaubt das Kopieren des aktuell angezeigten Textes in die Eingabefelder für die anderen Sprachen.
Der Inhaltsname legt den Namen des jeweiligen HTML-Codes fest, er wird auch im Content Manager verwendet.
Unter dem Editor wird die HTML ID ausgegeben. Sie wird zur eindeutigen Identifizierung des Inhalts innerhalb des HTML-Codes verwendet. Änderungen sind optional. Über das Feld Klassen erhält das Element auf HTML-Ebene eine sogenannte Klasse. Für mehrere Elemente mit der gleichen Klasse können z.B. über CSS-Code eigene Style-Einstellungen vorgenommen werden. Die Verwendung ist optional.
Trennzeichen¶
Das Trennzeichen-Widget platziert eine horizontale Trennlinie.
| Feldname | Beschreibung |
|---|---|
| ID | HTML-ID der Trennlinie |
| Margin | Äußerer Abstand zur Trennlinie in der eingestellten Einheit. Es können verschiedene Abstände (TOP: darüber, RIGHT: rechts, BOTTOM: darunter, LEFT: links) festgelegt werden |
| Feldname | Beschreibung |
|---|---|
| Breite | legt die Dicke der Grenzlinie in die verschiedenen Richtungen (TOP: darüber, RIGHT: rechts, BOTTOM: darunter, LEFT: links) in der eingestellten Einheit fest |
| Typ | Art der Trennlinie: solid (duchgängig), hidden (unsichtbar), dotted (gepunktet), dashed (gestrichelt), double (doppelt), groove (gerillt), ridge (kammförmig), inset (eingefügt, hintergründig), outset (hervorgehoben, vordergründig), initial (Standardwert), inherit (Wert des übergeordneten Elements) |
| Farbe | Farbe der Trennlinie |
Hinweis
Durch Klick auf px, em oder % kann die jeweilige Größeneinheit eingestellt werden
Hinweis
IDs und Klassen werden auf HTML-Ebene verwendet. Änderungen sind optional.
Produkt¶
Über das Produkt-Widget kann eine einzelne Artikel-Kachel platziert werden.
Unter Allgemein können ID und Klasse der Artikelkachel festgelegt werden.
Hinweis
IDs und Klassen werden auf HTML-Ebene verwendet. Änderungen sind optional.
Unter Produkt kann der Artikel für die Artikelkachel ausgewählt werden. Im Feld Produkt wählen kann hierzu ein Suchbegriff eingegeben und der Artikel aus den in einem Dropdown angezeigten Werten ausgewählt werden.
Produktliste¶
Über das Produktlisten-Widget kann eine Liste von Artikeln platziert werden.
Unter Allgemein können ID und Klasse der Artikelliste festgelegt werden.
Hinweis
IDs und Klassen werden auf HTML-Ebene verwendet. Änderungen sind optional.
| Feldname | Beschreibung |
|---|---|
| Darstellung | Soll die Produktliste als Liste oder als Slider angezeigt werden? |
| Max. angezeigte Artikel | begrenzt die Anzahl der maximal angezeigten Artikel |
| Artikel zufällig anzeigen | Reihenfolge der Artikel ist zufallsgeneriert |
Unter Produkt können die Artikel für die Liste ausgewählt werden. Über Artikelauswahl kann wahlweise eine der vordefinierten Auflistungen des Shops (Kategorien, Angebote, empfohlene Artikel, Ankündigungen, neue Artikel) oder eine eigene Liste ausgewählt werden.
Bei Kategorien und eigenen Listen kann über das Feld Kategorie wählen bzw. Produkt wählen nach Kategorien oder Artikeln gesucht und die Ergebnisse aus einem Dropdown ausgewählt werden.
Bei der eigenen Liste können Artikel durch Ziehen und Halten des Pfeilkreuz-Symbols nach oben oder unten verschoben werden, um deren Reihenfolge zu ändern. Über das X kann ein Artikel aus der eigenen Liste entfernt werden.
Vornehmen von Einstellungen¶
Farbeinstellungen¶
Um eine Farbe zu ändern, klicke wahlweise auf den im hellgrauen Feld angezeigten Farbwert oder die quadratische Farbanzeige. Es öffnet sich der Dialog mit einer Farbpalette.
Die einzelnen Bereichen sind von oben nach unten und links nach rechts wie folgt
- Farbauswahl: über das große Feld kann die gewünschte Farbe ausgewählt werden
- Farbskala: wählt den Bereich des Farbspektrums aus, der in der Farbauswahl angezeigt wird
- Transparenz: legt den Alpha-Wert der Farbe fest, von durchsichtig bis voll deckend
- Vorschaufenster: stelt den ausgewählten Farbwert in einer Vorschau dar
- Hex-Wert: Eingabefeld mit Farbwert in hexadezimaler Schreibweise
- R: Rot-Anteil der Farbe, von 0 bis 255
- G: Grün-Anteil der Farbe, von 0 bis 255
- B: Blau-Anteil der Farbe, von 0 bis 255
- A: Alpha-Wert / Deckkraft der Farbe, von 0 bis 1
Farbverlaufeinstellungen¶
Über die Einstellung Farbverlauf anzeigen werden die Einstellungen zum Anlegen eines Farbverlaufs angezeigt. Bei einem Farbverlauf findet ein Übergang von einer zu einer anderen Farbe statt.
| Feldname | Beschreibung |
|---|---|
| 1 Farbe | Ausgangsfarbe des Farbverlaufs |
| 2 Farbe | Zielfarbe des Farbverlaufs |
| Typ | Typ des Farbverlaufs (linear oder radial) |
| Winkel | Winkel des Farbverlaufs bei Typ linear |
Hinweis
Wenn ein Feld für eine Farbeinstellung leer ist, lässt sich die Farbpalette nicht über einen Mausklick aufrufen. Hier hilft es, einfach einen beliebigen Farbwert, z.B. #000000 oder #FFFFFF in das Feld einzutragen und in einen beliebigen Bereich des Shops zu klicken. Das StyleEdit aktualisiert dann die Einstellung und es erscheint die kleine, quadratische Vorschau-Box.
Der lineare Farbverlauf findet über die Länge einer unsichtbaren Linie statt, die von einer Kante bzw. Ecke des Elements zu einer anderen läuft. Die Linie verläuft hierbei in einem Winkel, der sich in 45 Grad-Schritten einstellen lässt. Hierbei kann man sich an einer Kompassrose orientieren:
Im Beispiel sieht man, dass der Verlauf an einer (gedachten) Linie von unten links nach oben rechts ausgerichtet ist.
Hinweis
Im Dropdown Winkel ist üblicherweise ein Wert von 0deg voreingestellt. Angezeigt wird jedoch beim ersten Einrichten ein Verlauf mit 90deg.
Bei einem radialen Farbverlauf geht dieser vom Mittelpunkt des jeweiligen Elements nach außen. Gut zu erkennen ist, dass der Verlauf sich gleichmäßig über die gesamte Distanz von Mittelpunkt zum äußersten Rand aufteilt. Bei einem Element mit unterschiedlichen Kantenlängen entsteht hierbei entsprechend eine "Ei-Form" statt einer Kugel.
Bildeinstellungen¶
Über den Button Wählen oder einen Klick auf das Vorschau-Fenster wird der Dateimanager aufgerufen. Hierüber kann ein Bild hochgeladen und/oder ausgewählt werden. Weitere Informationen hierzu findest du im Kapitel Bilder einbinden.
Das Vorschau-Fenster hat eine Hover-Funktion, um Bereiche anzuzeigen, die außerhalb der Vorschau liegen. Bewege hierzu den Mauszeiger über das Vorschau-Fenster.
Über Löschen kann das Bild wieder aus der Auswahl entfernt werden.
Hintergrundbildeinstellungen¶
Hintergrundbilder können wie reguläre Bilder eingerichtet werden. Es gibt jedoch zusätzliche Einstellungsmöglichkeiten.
| Feldname | Beschreibung |
|---|---|
| Position | relative Position, an der das Bild angezeigt wird (left top: links oben, left center: links mittig, left bottom: links unten, right top: rechts oben, right center: rechts mittig, right bottom: rechts unten, center top: mitte oben, center center: mittig, center bottom: mitte unten) |
| Verankerung | soll das Hintergrundbild mitscrollen (scroll) oder fixiert (fixed) dargestellt werden? |
| Wiederholung | soll das Hintergrundbild wiederholt werden? (repeat: Wiederholen in horizontale und vertikale Richtung; repeat-x: wiederholen in horizontale Richtung; repeat-y: wiederholen in vertikale Richtung; space: wiederholt das Bild in beide Richtungen, so oft es hineinpasst, mit Abständen; round: wiederholt das Bild in beide Richtungen, so oft es hinein passt, passt die Bildgröße an; initial: verwendet die Standard-Einstellung; inherit: verwendet die Einstellung des übergeordneten Elements) |
| Größe | soll die Größe des Hintergrundbilds angepasst werden? (auto: Anzeige in Originalgröße; cover: vergrößern zur Abdeckung des gesamten Bereichs; contain: vergrößern, sodass das gesamte Bild sichtbar bleibt; initial: verwendet die Standard-Einstellung; inherit: verwendet die Einstellung des übergeordneten Elements) |
Widgets¶
Das Honeygrid-Theme verfügt über mehrere Bereiche, in denen Widgets platziert werden können. Sie werden mit gestrichelten Linien dargestellt. Der äußere Bereich dieser Boxen ist die sogenannte Sektion. Sie beinhaltet mindestens eine Spalte, in der Widgets platziert werden können.
Bewegt man den Mauszeiger über die Sektion, werden von links nach rechts die Symbole für Bearbeiten, Verschieben und Löschen angezeigt. Beim Bearbeiten gibt es verschiedene Einstellungen:
Unter Aufteilung kann festgelegt werden, wie viele Spalten die Sektion enthalten soll und wie diese verteilt sind. Unter Inhalt können die Container bei Bedarf zentriert werden. Zudem kann der Container unter Responsive auf verschiedenen Endgeräten ausgeblendet werden.
Schlussendlich kann der Sektion eine ID und eine Klasse zugeordnet werden.
Hinweis
IDs und Klassen werden auf HTML-Ebene verwendet. Änderungen sind optional.
Für jede Spalte können über das Bleistift-Symbol ebenfalls Einstellungen vorgenommen werden. Hierzu zählen das Ausblenden der Spalte auf bestimmten Endgeräten, das Festlegen eines Hintergrunds und eines Rahmens.
| Feldname | Beschreibung |
|---|---|
| Breite | legt die Dicke der Grenzlinie in die verschiedenen Richtungen (TOP: darüber, RIGHT: rechts, BOTTOM: darunter, LEFT: links) in der eingestellten Einheit fest |
| Typ | Art der Trennlinie: solid (duchgängig), hidden (unsichtbar), dotted (gepunktet), dashed (gestrichelt), double (doppelt), groove (gerillt), ridge (kammförmig), inset (eingefügt, hintergründig), outset (hervorgehoben, vordergründig), initial (Standardwert), inherit (Wert des übergeordneten Elements) |
| Farbe | Farbe der Trennlinie |
Hinweis
Durch Klick auf px, em oder % kann die jeweilige Größeneinheit eingestellt werden
Schlussendlich können auch hier ID und Klasse eingetragen werden.
Hinweis
IDs und Klassen werden auf HTML-Ebene verwendet. Änderungen sind optional.
Um ein Widget zu platzieren, klicke es mit der linken Maustaste an, halte diese gedrückt und ziehe es auf die gewünschte Spalte. Lasse die Maustaste wieder los, um das Widget einzubinden.
Sind die Widgets platziert, können diese mit einem Klick auf das Bleistift-Symbol bearbeitet werden. Zudem stehen von links nach rechts die Optionen Kopieren, Verschieben und Löschen zur Verfügung.
Unterhalb der angezeigten Sektionen kann über einen Klick auf das in der Abbildung hervorgehobene Plus-Zeichen eine weitere Sektion hinzugefügt werden. Innerhalb der Spalten wird mit einem Klick auf das entsprechende Plus der Widget-Bereich des StyleEdits aufgerufen.
Bereiche und Einstellungen für das Malibu Theme¶
Das Malibu-Theme basiert auf dem Honeygrid-Theme, daher ist der Aufbau des StyleEdit 4 mit seinen Einstellungen größtenteils identisch. Es gibt jedoch einzelne Bereiche die anders aufgeteilt sind. Zudem sind verschiedene Varianten für bestimmte Komponenten des Malibus (z.B. Header, Footer, Produktdetailseite) mit zusätzlichen Optionen hinzugekommen, die für das Honeygrid nicht zur Verfügung stehen.
Unterschiede in bestehenden Menüs¶
Einzelne Bereiche sind im StyleEdit 4 bei der Bearbeitung des Malibus anders aufgeteilt als es beim Honeygrid der Fall ist.
Allgemein¶
Header¶
Footer¶
Produkte¶
Neu hinzugekommene Menüs¶
Durch die weiterreichenden Einstellungsmöglichkeiten sind in den einzelnen Bereichen verschiedene Optionen hinzugekommen.
Header¶
Hinweis
Die Einstellungsmöglichkeiten für den Header ändern sich mit der Auswahl der Header-Variante.
Die nachfolgend für Header 1 gezeigten Aufteilungen und Einstellungen sind analog für die Variante Header 2 .
| Feldname | Beschreibung |
|---|---|
| Höhe | Höhe des inneren Bereichs der horizontalen Navigationsleiste, ist mit dem Platzhalter $navbar-height vorbelegt |
| Höhe Sticky | Höhe des inneren Bereichs der horizontalen Navigationsleiste im Sticky-Header, ist standardmäßig mit 0 vorbelegt |
| Übergänge | sanfteres Einblenden des Mega-Dropdown, wenn der Mauszeiger über eine Kategorie mit Unterkategorien bewegt wird |
| Höhe außen | Höhe des äußeren Bereichs der horizontalen Navigationsleiste |
| Abstand unten | Unterer Abstand zur Kategorieleiste, ist mit dem Platzhalter $line-height-computed vorbelegt |
Hinweis
Sticky bezeichnet die reduzierte Form des Headers, die verwendet wird, wenn mit fixierter Kopfzeile nach unten gescrollt wird.
| Feldname | Beschreibung |
|---|---|
| horizontaler Abstand | linker Abstand der Einträge der Sekundärnavigation, vorbelegt mit floor(($grid-gutter-width/2)) |
| vertikaler Abstand | Abstand oberhalb und unterhalb der Einträge für Hauptkategorien |
| Hintergrund | |
| Farbe | Hintergrundfarbe der horizontalen Menüleiste (ohne Content-Einträge), vorbelegt mit transparent |
| Bild einfügen | Hintergrundbild der horizontalen Menüleiste (ohne Content-Einträge) |
| Farbverlauf einfügen | Farbverlauf für den Hintergrund der horizontalen Menüleiste (ohne Content-Einträge) |
| Hintergrund außen | Hintergrundfarbe, die in der Fortführung der horizontalen Menüleiste links und rechts angezeigt wird |
Hinweis
Die hier eingestellte Farbe verläuft auf der Breite der kompletten Kategorieleiste. Sie ist auch in der Mitte der Leiste zu sehen, wenn die Einstellung Farbe unter Hintergrund auf transparent gesetzt ist.
| Feldname | Beschreibung |
|---|---|
| Schriftfarbe | Schriftfarbe der Hauptkategorien (ohne Unterkategorien und Content-Einträge) in der horizontalen Menüleiste |
| Schriftfarbe Custom | Schriftfarbe der Content-Einträge in der horizontalen Menüleiste |
| Schriftfarbe Hover | Schriftfarbe der Hauptkategorien (ohne Unterkategorien und Content-Einträge) in der horizontalen Menüleiste, beim Hovern mit dem Mauszeiger, ohne dass Unterkategorien aufgeklappt werden, vorbelegt mit $brand-primary |
| Schriftfarbe Hover Custom | Schriftfarbe der Content-Einträge in der horizontalen Menüleiste, beim Hovern mit dem Mauszeiger |
| Schriftfarbe Aktiv | Schriftfarbe der Hauptkategorie in der horizontalen Menüleiste, die aktuell angezeigt wird |
| Schriftfarbe Aktiv Custom | Schriftfarbe der Content-Seite in der horizontalen Menüleiste, die aktuell angezeigt wird |
| Texttransformation | Ändert Groß- und Kleinschreibung der Beschriftung der Hauptkategorie in der horizontalen Menüleiste |
| none: Text wird so ausgegeben, wie er im Shop als Kategoriename hinterlegt ist | |
| uppercase: Text wird in Großbuchstaben ausgegeben | |
| lowercase: Text wird in Kleinbuchstaben ausgegeben | |
| capitalize: Jedes Wort beginnt mit einem Großbuchstaben | |
| Schriftgröße | Schriftgröße der Hauptkategorien in der horizontalen und vertikalen Menüleiste |
| Hintergrund Hover | Hintergrundfarbe der Hauptkategorien in der horlzontalen Menüleiste beim Hovern mit der Maus |
| Hintergrund Aktiv | Hintergrundfarbe der aktuell angezeigten Hauptkategorie in der horizontalen Kategorieleiste |
| Hintergrund Custom | Hintergrundfarbe der Content-Einträge in der horizontalen Menüleiste, vorbelegt mit $gx-brand-secondary |
| Hintergrund Hover Custom | Hintergrundfarbe der Content-Einträge in der horizontalen Menüleiste, beim Hovern mit der Maus, vorbelegt mit lighten($gx-custom-bg-color, 10%) |
| Hintergrund Aktiv Custom | Hintergrundfarbe des Content-Eintrags in der horizontalen Menüleiste, der aktuell angezeigt wird, vorbelegt mit lighten($gx-custom-bg-color, 10%) |
Hinweis
Hovern bzw. Mouseover bezeichnet das Platzieren des Mauszeigers über ein Element, ohne es anzuklicken
| Feldname | Beschreibung |
|---|---|
| Mobil-Menü Höhe | Höhe des mobilen Menüs |
| Höhe | Höhe der Menü-Einträge |
| Vertikaler Abstand | Abstand des Namens zur oberen Kante des Menüeintrags |
| Icons anzeigen | Icons im mobilen Menü anzeigen ja/nein |
| Feldname | Beschreibung |
|---|---|
| Schriftgröße Überschriften | Schriftgröße der Einträge im Dropdown des Kategoriemenüs |
| Schriftfarbe | Schriftfarbe der Einträge im Dropdown des Kategoriemenüs, vorbelegt mit $text-color |
| Rahmenfarbe | Farbe der Rahmenelemente der Einträge im Dropdown des Kategoriemenüs |
| Block-Breite | Breite der Unterkategorie-Blöcke im Mega-Dropdown |
| Anzahl Blöcke | Anzahl der nebeneinander angezeigten Blöcke im Mega-Dropdown |
| Tab-Verschiebung | innerer Abstand der einzelnen Menüeinträge, vorbelegt mit 2px |
| Hintergrund | |
| Farbe | Hintergrundfarbe des Mega-Dropdowns |
| Bild einfügen | Hintergrundbild des Mega-Dropdowns |
| Farbverlauf einfügen | Verwenden eines Farbverlaufs für den Hintergrund des Mega-Dropdowns |
| Schriftfarbe Alle Anzeigen | Schriftfarbe des Buttons Alle Anzeigen, vorbelegt mit $text-color |
| Hintergrund Alle Anzeigen | |
| Farbe | Hintergrundfarbe des Buttons Alle Anzeigen, vorbelegt mit $gray-lighter |
| Bild einfügen | Hintergrundbild des Buttons Alle Anzeigen |
| Farbverlauf einfügen | Farbverlauf als Hintergrundbild des Buttons Alle Anzeigen |
| Feldname | Beschreibung |
|---|---|
| Schriftfarbe | Schriftfarbe des vertikalen Kategoriemenüs, mit $text-color vorbelegt |
| Schriftfarbe Hover | Schriftfarbe des vertikalen Kategoriemenüs beim Hovern, mit $text-color vorbelegt |
| Schriftfarbe Aktiv | Schriftfarbe der aktuell angezeigten Kategorie im vertikalen Kategoriemenü |
| Schriftfarbe geöffnet | Schriftfartbe der aufgeklappten Kategorien im vertikalen Kategoriemenü, vorbelegt mit $text-color |
| Hintergrund | |
| Farbe | Hintergrundfarbe des vertikalen Kategoriemenüs  |
| Bild einfügen | Hintergrundbild des vertikalen Kategoriemenüs |
| Farbverlauf einfügen | Farbverlauf als Hintergrund im vertikalen Kategoriemenü |
| Hintergrund Hover | |
| Farbe | Hintergrundfarbe des Untermenüeintrags im vertikalen Kategoriemenü beim Hovern mit der Maus |
| Bild einfügen | Hintergrundbild des Menüeintrags im vertikalen Kategoriemenü beim Hovern mit der Maus |
| Farbverlauf einfügen | Farbverlauf als Hintergrund des Menüeintrags im vertikalen Kategoriemenü beim Hovern mit der Maus |
| Hintergrund Aktiv | |
| Farbe | Hintergrundfarbe der aktuell angezeigten Kategorie im vertikalen Kategoriemenü, vorbelegt mit $brand-primary |
| Bild einfügen | Hintergrundbild der aktuell angezeigten Kategorie im vertikalen Kategoriemenü |
| Farbverlauf einfügen | Farbverlauf als Hintergrund der angezeigten Kategorie im vertikalen Kategoriemenü |
| Hintergrund geöffnet | |
| Farbe | Hintergrundfarbe der aktuell aufgeklappten Hauptkategorie  |
| Bild einfügen | Hintergrundbild der Hauptkategorien im vertikalen Kategoriemenü |
| Farbverlauf einfügen | Farbverlauf als Hintergrund der Hauptkategorien im vertikalen Kategoriemenü |
Hinweis
Hovern bzw. Mouseover bezeichnet das Platzieren des Mauszeigers über ein Element, ohne es anzuklicken
| Feldname | Beschreibung |
|---|---|
| Kategorie-Spalte ausblenden | blendet die Anzeige der Kategorien als zusätzlichen Bereich im Header ein bzw. aus |
| Höhe | Höhe der Kategoriespalte im Header |
| Höhe Sticky | Höhe der Kategoriespalte im Sticky Header |
| Warenkorb Vertikaler Abstand | Abstand der Kategorieeinträge nach oben und unten |
| Warenkorb Vertikaler Abstand Sticky | Abstand der Kategorieeinträge nach oben und unten im Sticky Header |
| Warenkorb Vertikaler äußerer Abstand | äußerer Abstand der Kategorieeinträge nach oben und unten |
| Warenkorb Vertikaler äußerer Abstand Sticky | äußerer Abstand der Kategorieeinträge nach oben und unten im Sticky Header |
| Grid-Spalten Klein | Anzahl der Grid-Spalten des Kategoriespalten-Bereichs für kleine Darstellung, typischerweise Tablet im Portrait/Hoch-Format |
| Grid-Spalten Medium | Anzahl der Grid-Spalten des Kategoriespalten-Bereichs für mittelgroße Darstellung, typischerweise Tablet im Landscape/Quer-Format |
| Grid-Spalten Groß | Anzahl der Grid-Spalten des Kategoriespalten-Bereichs für große Darstellung, typischerweise Desktop-Computer |
Hinweis
Sticky bezeichnet die reduzierte Form des Headers, die verwendet wird, wenn mit fixierter Kopfzeile nach unten gescrollt wird.
Hinweis
Die grafische Oberfläche des Shops wird in der Breite in 12 sogenannte Grid-Spalten aufgeteilt. Für jede Größe (groß, medium, klein) gibt es eine eigene Einstellung. Die Summe aller Einstellungen einer Größe, die nicht ausgeblendet werden, muss 12 ergeben. Weitere Informationen hierzu sind im Kapitel Grid-Spalten aufgeführt.
| Feldname | Beschreibung |
|---|---|
| Schriftgröße | Schriftgröße der Menüeinträge in der Sekundärnavigation, mit $font-size-small vorbelegt |
| Höhe | Höhe der Einträge der Sekundärnavigation |
| Höhe Sticky | Höhe der Einträge der Sekundärnavigation in der Sticky-Ansicht |
| Hintergrund | |
| Farbe | Hintergrundfarbe der Sekundärnavigationsleiste |
| Bild einfügen | Hintergrundbild der Sekundärnavigationsleiste |
| Farbverlauf einfügen | Farbverlauf als Hintergrund der Sekundärnavigationsleiste |
Hinweis
Sticky bezeichnet die reduzierte Form des Headers, die verwendet wird, wenn mit fixierter Kopfzeile nach unten gescrollt wird.
| Feldname | Beschreibung |
|---|---|
| Schriftfarbe | Schriftfarbe der Menüeinträge in der Sekundärnavigation, abzüglich Gambio Admin-Button |
| Scriftfarbe Hover | Schriftfarbe der Menüeinträge in der Sekundärnavigation beim Hovern, abzüglich Gambio Admin-Button |
| Schriftfarbe Aktiv | Schriftfarbe der Menüeinträge in der Sekundärnavgiation, beim Ausklappen eines Dropdowns |
| Hintergrund | |
| Farbe | Hintergrundfarbe der Menüeinträge der Sekundärnavigation, abzüglich Gambio Admin-Button, mit transparent vorbelegt |
| Bild einfügen | Hintergrundbild der Menüeinträge der Sekundärnavigation |
| Farbverlauf einfügen | Farbverlauf als Hintergrund der Menüeinträge der Sekundärnavigation |
| Hintergrund Hover | |
| Farbe | Hintergrundfarbe der Menüeinträge der Sekundärnavigation beim Hovern mit der Maus, abzüglich Gambio Admin-Button |
| Bild einfügen | Hintergrundbild der Menüeinträge der Sekundärnavigation beim Hovern mit der Maus |
| Farbverlauf einfügen | Farbverlauf als Hintergrund der Menüeinträge der Sekundärnavigation beim Hovern mit der Maus |
| Hintergrund Aktiv | |
| Farbe | Hintergrundfarbe der Menüeinträge in der Sekundärnavgiation, beim Ausklappen eines Dropdowns |
| Bild einfügen | Hintergrundbild der Menüeinträge in der Sekundärnavgiation, beim Ausklappen eines Dropdowns |
| Farbverlauf einfügen | Farbverlauf als Hintergrund der Menüeinträge der Sekundärnavigation beim Ausklappen eines Dropdowns |
| Link Abstand | innerer Abstand des Textes nach oben und unten bzw. links und rechts zum Rand des Buttons, vorbelegt mit 11px 15px |
Hinweis
Hovern bzw. Mouseover bezeichnet das Platzieren des Mauszeigers über ein Element, ohne es anzuklicken
| Feldname | Beschreibung |
|---|---|
| Sekundär-Spalte ausblenden | Blendet die Sekundär-Spalte zur Verwendung im Header aus, dies verringert die Anzahl der verwendeten Grid-Spalten. |
| Schriftgröße | Schriftgröße der verwendeten Icons, vorbelegt mit $font-size-small |
| Höhe | Höhe der Sekundär-Spalte |
| Höhe Sticky | Höhe der Sekundär-Spalte im Sticky-Header |
| Vertikaler Abstand | Abstand der einzelnen Icons nach oben und unten, vorbelegt mit 0 |
| Vertikaler Abstand Sticky | Abstand der einzelnen Icons nach oben und unten im Sticky-Header, vorbelegt mit 0 |
| Vertikaler äußerer Abstand | Äußerer Abstand der einzelnen Icons, vorbelegt mit 0 |
| Vertikaler äußerer Abstand Sticky | Äußerer Abstand der einzelnen Icons im Sticky-Header, vorbelegt mit 0 |
| Grid-Spalten Klein | Anzahl der Grid-Spalten des Sekundär-Spalten-Bereichs für kleine Darstellung, typischerweise Tablet im Portrait/Hoch-Format |
| Grid-Spalten Medium | Anzahl der Grid-Spalten des Sekundär-Spalten-Bereichs für mittelgroße Darstellung, typischerweise Tablet im Landscape/Quer-Format |
| Grid-Spalten Groß | Anzahl der Grid-Spalten des Sekundär-Spalten-Bereichs für große Darstellung, typischerweise Desktop-Computer |
Hinweis
Sticky bezeichnet die reduzierte Form des Headers, die verwendet wird, wenn mit fixierter Kopfzeile nach unten gescrollt wird.
Hinweis
Die grafische Oberfläche des Shops wird in der Breite in 12 sogenannte Grid-Spalten aufgeteilt. Für jede Größe (groß, medium, klein) gibt es eine eigene Einstellung. Die Summe aller Einstellungen einer Größe, die nicht ausgeblendet werden, muss 12 ergeben. Weitere Informationen hierzu sind im Kapitel Grid-Spalten aufgeführt.
| Feldname | Beschreibung |
|---|---|
| Schriftfarbe | Schriftfarbe der Icons in der Sekundär-Spalte |
| Scriftfarbe Hover | Schriftfarbe der Icons in der Sekundär-Spalte beim Hovern |
| Schriftfarbe Aktiv | Schriftfarbe der Icons in der Sekundär-Spalte, nach dem Anklicken |
| Hintergrund | |
| Farbe | Hintergrundfarbe der Icons der Sekundär-Spalte, mit transparent vorbelegt |
| Bild einfügen | Hintergrundbild der Icons der Sekundär-Spalte |
| Farbverlauf einfügen | Farbverlauf als Hintergrund der Icons der Sekundär-Spalte |
| Hintergrund Hover | |
| Farbe | Hintergrundfarbe der Icons der Sekundär-Spalte beim Hovern mit der Maus |
| Bild einfügen | Hintergrundbild der Icons der Sekundär-Spalte beim Hovern mit der Maus |
| Farbverlauf einfügen | Farbverlauf als Hintergrund der Icons der Sekundär-Spalte beim Hovern mit der Maus |
| Hintergrund Aktiv | |
| Farbe | Hintergrundfarbe der Icons in der Sekundär-Spalte, beim Anklicken |
| Bild einfügen | Hintergrundbild der Icons in der Sekundär-Spalte, beim Anklicken |
| Farbverlauf einfügen | Farbverlauf als Hintergrund der Icons der Sekundär-Spalte beim Anklicken |
| Link Abstand | innerer Abstand des Icons nach oben und unten bzw. links und rechts zum Rand des Buttons, vorbelegt mit 25px 10px |
Hinweis
Hovern bzw. Mouseover bezeichnet das Platzieren des Mauszeigers über ein Element, ohne es anzuklicken
Footers¶
| Feldname | Beschreibung |
|---|---|
| Footer wrappen | Richtet die Footer-Spalten an den äußeren Abmessungen des Footer Headers aus |
Layout¶
Unter Bereiche / Layout / Varianten kann das Layout des Themes umgestellt werden. Es stehen die folgenden Varianten zur Verfügung:
- Full Screen
- Boxed
- Hero
Teaser-Slider¶
Es stehen folgende Varianten für den Teaser-Slider zur Auswahl:
- Klassisch
- Boxed
- Full width
Produktseite¶
Es können die folgenden Varianten für die Produktseite gewählt werden:
- Klassisch
- Links ausrichten
Hinweis
Die Einstellungen für die Produktseite ändern sich mit der Auswahl der Produktseiten-Variante
| Feldname | Beschreibung |
|---|---|
| Hintergrund | |
| Farbe | Hintergrundfarbe der Produkt-Detailbox / Preisbox  |
| Bild einfügen | Hintergrundbild der Produkt-Detailbox / Preisbox |
| Farbverlauf einfügen | Farbverlauf als Hintergrund der Produkt-Detailbox / Preisbox |
| Schriftfarbe | Schriftfarbe der Produkt-Detailbox / Preisbox, vorbelegt mit $text-color |
| Hinweis Schriftfarbe | Schriftfarbe des Preis-, Steuer- und Versandkostenhinweises, vorbelegt mit $gray-light |
| Rahmebreite | Breite des Rahmens um die Produkt-Detailbox / Preisbox, vorbelegt mit 0 |
| Rahmenstil | Stil des Rahmens um die Produkt-Detailbox / Preisbox. Mögliche Auswahlwerte: solid (duchgängig), hidden (unsichtbar), dotted (gepunktet), dashed (gestrichelt), double (doppelt), groove (gerillt), ridge (kammförmig), inset (eingefügt, hintergründig), outset (hervorgehoben, vordergründig), initial (Standardwert), inherit (Wert des übergeordneten Elements), vorbelegt mit none |
| Rahmenfarbe | Farbe des Rahmens um die Produkt-Detailbox / Preisbox, vorbelegt mit transparent |
| Mengenfeld ausblenden | Ausblenden des Mengeneingabefelds |
| Feldname | Beschreibung |
|---|---|
| Hintergrund | |
| Farbe | Hintergrundfarbe der Produkt-Detailbox / Preisbox |
| Bild einfügen | Hintergrundbild der Produkt-Detailbox / Preisbox |
| Farbverlauf einfügen | Farbverlauf als Hintergrund der Produkt-Detailbox / Preisbox |
| Schriftfarbe | Schriftfarbe in der Produkt-Detailbox / Preisbox, vorbelegt mit $text-color |
| Hinweis Schriftfarbe | Schriftfarbe für Preis-, Steuer- und Versandkostenhinweis, vorbelegt mit $gray-light |
| Rahmenbreite | Breite des Rahmens um die Produkt-Detailbox / Preisbox, vorbelegt mit 0 |
| Rahmenstil | Stil des Rahmens um die Produkt-Detailbox / Preisbox, vorbelegt mit none |
| Rahmenfarbe | Farbe des Rahmens um die Produkt-Detailbox / Preisbox, vorbelegt mit transparent |
| Button Schriftfarbe | Schriftfarbe der Buttons unterhalb des Warenkorb-Buttons |
| Button Schriftfarbe Hover | Schriftfarbe der Buttons unterhalb des Warenkorb-Buttons beim Mouseover/Hover, vorbelegt mit darken($gx-product-info-button-color, 10%) |
| Button Hintergrundfarbe | Hintergrundfarbe der Buttons unterhalb des Warenkorb-Buttons, vorbelegt mit transparent |
| Button Hintergrundfarbe Hover | Hintergrundfarbe der Buttons unterhalb des Warenkorb-Buttons beim Mouseover/Hover, vorbelegt mit transparent |
| Button Rahmenfarbe | Rahmenfarbe der Buttons unterhalb des Warenkorb-Buttons |
| Button Rahmenfarbe Hover | Rahmenfarbe der Buttons unterhalb des Warenkorb-Buttons beim Mouseover/Hover |
| Preisbox mitscrollen | soll die Produktdetailbox mitscrollen? |
Hinweis
Hovern bzw. Mouseover bezeichnet das Platzieren des Mauszeigers über ein Element, ohne es anzuklicken