Bootstrap bringt sogenannte CSS-Pr\u00e4prozessoren wie SCSS mit sich. Diese beschleunigen den Entwicklungsprozess von Stylings ungemein, da hier Variablen f\u00fcr einzelne Konfigurationswerte definiert werden k\u00f6nnen. Soll zum Beispiel eine Farbe an vielen Stellen verwendet werden, wird einmal eine Variable am Anfang des SCSS definiert (z.B Hauptfarbe = gelb) und im weiteren Verlauf in die Definitionen neuer Elemente nur noch die Variable geschrieben (z.B. Men\u00fcleiste = Hauptfarbe).<\/p>\n
So wird erreicht, dass eine Definition, die an vielen Stellen benutzt wird, nur ein einziges Mal ge\u00e4ndert werden muss, um alle Elemente anzupassen. Auch wir nutzen an vielen Stellen diese Variablen, um das Honeygrid-Template f\u00fcr euch flexibel gestaltbar zu machen. Mit dem StyleEdit 3 ver\u00e4ndert ihr die im Template definierten Variablen auf die Werte, die ihr eingebt.<\/p>\n
Wie die Variablen f\u00fcr eigene Styles genutzt werden k\u00f6nnen, bzw. wie sie manuell \u00fcberschrieben oder ver\u00e4ndert werden, soll hier aber erstmal nicht Thema sein, kann aber gerne in einem weiteren Artikel ausf\u00fchrlicher thematisiert werden.<\/p>\n
StyleEdit 3: Wichtige Begriffe<\/h2>\n
Bevor es richtig losgeht, hier noch eine kleine Liste mit wichtigen Begriffen oder Variablen, die sich im StyleEdit 3 finden:<\/p>\n
- \n
- Hauptfarbe:<\/strong> Diese Farbe ist im Prinzip das Erkennungsmerkmal eures Shops. Standardm\u00e4\u00dfig ist die Option mit unserem \u201cGambio-Blau\u201d belegt, der Hauptfarbe unseres Corporate Designs. W\u00e4hlt hier f\u00fcr euch eine Farbe, die passend f\u00fcr euren Shop, beziehungsweise euer Unternehmen ist. Dies kann zum Beispiel die Hauptfarbe eures Logos sein oder eine Farbe, die gut zu den Produkten passt, die ihr anbieten wollt. Sollte euch im StyleEdit 3 die Variable $brand-primary unterkommen, so ist damit die Farbe gemeint, die ihr unter Allgemein > Farben > Hauptfarbe gew\u00e4hlt habt. Allgemein l\u00e4sst sich sagen, dass es sich hierbei um eine Farbe handelt, die im Shop dazu genutzt wird, wichtige Aktionen oder Elemente optisch hervorzuheben.<\/li>\n
- Textfarbe:<\/strong> Wie der Name der Option schon sagt, handelt es sich hier um die Farbe, welche f\u00fcr alle Texte im Shop verwendet wird. Im StyleEdit 3 wird diese Farbe mit der Variable $text-color angesprochen.<\/li>\n
- Linkfarbe:<\/strong> Diese Farbe wird f\u00fcr alle in Texten befindlichen Links verwendet. In der Regel ist das die Hauptfarbe des Shops, es sei denn ihr habt dies anders konfiguriert. Wollt ihr die Linkfarbe an sp\u00e4terer Stelle im StyleEdit 3 noch einmal ver\u00e4ndern, k\u00f6nnt ihr das mit der Variable $link-color tun.<\/li>\n
- Primary:<\/strong> Seht ihr diese Bezeichnung irgendwo im StyleEdit 3, handelt es sich meistens um ein Element, dass mit der Hauptfarbe des Shops gestylt wird. Beispiel hierf\u00fcr ist der sp\u00e4ter beschriebene Primary-Button.<\/li>\n
- Default:<\/strong> In der Regel findet ihr die Bezeichnung Default (zu deutsch: Standard) im StyleEdit 3 an Stellen, die sich oft wiederholen und einem Standard-Styling unterliegen, damit diese Elemente einheitlich aussehen. Ein gutes Beispiel ist der Default-Button, welcher f\u00fcr Aktionen verwendet wird, die nicht wichtig sind, zum Beispiel ein Button zum Schlie\u00dfen eines Informations-PopUps.<\/li>\n
- Sticky:<\/strong> Sticky bedeutet eigentlich nichts anderes als klebrig oder klebend. In unserem Fall bedeutet das, dass ein Element beim Runterscrollen am oberen Seitenrand h\u00e4ngen bleibt und weiterhin angezeigt wird. Mit diesem Verhalten k\u00f6nnen dem Kunden wichtige Navigations- oder Informationselemente angezeigt werden, ohne dass er erst nach oben scrollen muss, was die Benutzerfreundlichkeit des Shops erh\u00f6ht. Mit den Optionen, die \u201cSticky\u201d beinhalten, werden Elemente konfiguriert, die in der Leiste angezeigt werden, die erscheint, wenn man im Shop nach unten scrollt. In der Regel handelt es sich bei den Optionen um Gr\u00f6\u00dfenangaben, damit die betreffenden Elemente, zum Beispiel das Logo, auf eine passende Gr\u00f6\u00dfe skaliert werden k\u00f6nnen, wenn sie in der festehenden Leiste angezeigt werden sollen.<\/li>\n<\/ul>\n
Ist das Verhalten der feststehenden Leiste nicht gew\u00fcnscht, kann unter Header > Allgemein > H\u00f6he Sticky die H\u00f6he auf 0 gesetzt werden. Dann wird beim Scrollen der Header ausgeblendet und erst wieder angezeigt, wenn zum Seitenanfang gescrollt wird.<\/p>\n
Inhalte passgenau anzeigen: Das Grid-System<\/h2>\n
Das Grid-System ist ein Hauptbestandteil der Bootstrap-Bibliothek und bringt etwas mit, was einige vielleicht schon aus dem Print-Design kennen: Mit dem Grid-System wird die Webseite in zw\u00f6lf Spalten unterteilt. Diese Spalten sind je nach verwendetem Endger\u00e4t bzw. der Aufl\u00f6sung unterschiedlich breit.<\/p>\n
![\"Gambio](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/tutorial_grid_12_col_full.jpg\")
<\/a>Abb 1: Startseite in voller Breite mit angedeutetem Grid-System<\/p><\/div>\n
![\"Gambio](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/tutorial_grid_12_col_left.jpg\")
<\/a>Abb 2: Seite mit aktivierter linker Spalte und angedeutetem Grid-System<\/p><\/div>\n
Mit diesen Spalten lassen sich Bereiche f\u00fcr bestimmte Inhalte definieren, so dass diese sich bei einem Wechsel der Aufl\u00f6sung oder des Endger\u00e4ts auf die passende Gr\u00f6\u00dfe anpassen.<\/p>\n
Optimale Darstellung auf allen Displaygr\u00f6\u00dfen<\/h3>\n
Grunds\u00e4tzlich gibt es in Bootstrap vier so genannte Breakpoints, also Punkte an denen sich die Darstellung der Webseite \u00e4ndert. Diese werden wie folgt bezeichnet:<\/p>\n
- \n
- screen-xs:<\/strong> sehr kleine Displays, wie die von Smartphones<\/li>\n
- screen-sm:<\/strong> kleine Displays, wie Tablets im Hochformat (auch Portrait-Modus genannt)<\/li>\n
- screen-md:<\/strong> mittelgro\u00dfe Displays, wie Tablets im Querformat (Landscape-Modus), Laptops, kleinere Monitore<\/li>\n
- screen-lg:<\/strong> gro\u00dfe Displays, wie Monitore oder Hochaufl\u00f6sende Displays von Laptops<\/li>\n<\/ul>\n
Im StyleEdit werden allerdings andere Begriffe verwendet, die weniger technisch sind und die Verwendung ein wenig vereinfachen sollen. In der Regel lauten die Bezeichnungen im StyleEdit wie folgt:<\/p>\n
- \n
- Gridspalten mobil:<\/strong> sehr kleine Displays, z.B. Smartphones. Wird nicht \u00fcberall verwendet\/ben\u00f6tigt, da f\u00fcr die mobile Darstellung zumeist ein eigenes Layout verwendet wird, das unabh\u00e4ngig von der restlichen Spaltenaufteilung ist.<\/li>\n
- Gridspalten klein:<\/strong> kleine Displays, wie Tablets im Portrait-Modus<\/li>\n
- Gridspalten mittel:<\/strong> mittelgro\u00dfe Displays, wie Tablets im Landscape-Modus oder Laptops<\/li>\n
- Gridspalten gro\u00df:<\/strong> gro\u00dfe Displays, wie Monitore oder Hochaufl\u00f6sende Displays von Laptops<\/li>\n<\/ul>\n
F\u00fcr die Darstellung auf Smartphones greift normalerweise eine extra angepasste Darstellung, sodass diese hier nicht extra konfiguriert werden muss.<\/p>\n
Wichtig:
\n<\/b>Bei der Verwendung der Gridspalten muss immer darauf geachtet werden, dass maximal zw\u00f6lf Spalten zur Verf\u00fcgung stehen. Wenn mehrere Elemente in einer Reihe platziert werden sollen, d\u00fcrfen die zw\u00f6lf Spalten nicht \u00fcberschritten werden, da sonst das letzte Element in die n\u00e4chste Reihe rutscht und unter den anderen Elementen angezeigt wird.<\/div>\nWeitere Informationen zu den Gridspalten von Bootstrap findet ihr hier<\/a>.<\/p>\n
Wie kann ich das Grid System f\u00fcr mein Design nutzen? Ein Anwendungsbeispiel<\/h3>\n
Ein globales Beispiel f\u00fcr die Verwendung von Gridspalten im Honeygrid-Template findet sich im StyleEdit unter dem Men\u00fcpunkt \u201cSpaltenaufteilung\u201d. Hier l\u00e4sst sich zum Beispiel einstellen, wie viel Platz die linke Men\u00fcspalte bekommen soll und wie breit der Inhaltsbereich des Shops dann noch sein darf.<\/p>\n
![\"Gambio](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/tutorial_grid_12_col_left_highlighted.jpg\")
<\/a>Abb 3: Seite mit aktiver linker Spalte und angedeuteter Spaltenaufteilung zwischen linker Spalte und Hauptspalte<\/p><\/div>\n
Soll nun zum Beispiel das linke Men\u00fc auf gro\u00dfen Computer-Displays ein Drittel der Seite einnehmen, wird das im StyleEdit 3 wie folgt konfiguriert:<\/p>\n
- \n
- Spaltenaufteilung > Gro\u00df (Desktops) > Links Grid-Spalten Gro\u00df: 4<\/li>\n
- Spaltenaufteilung > Gro\u00df (Desktops) > Hauptspalte-Grid-Spalten Gro\u00df: 8<\/li>\n<\/ul>\n
Es werden sich nun vermutlich einige Fragen, woher diese Zahlen kommen. Das hat mit der Aufteilung der Seite in zw\u00f6lf Spalten zu tun. Ihr stellt dort in den Optionen ein, wie viele Spalten breit das jeweilige Element sein darf. Da wir erreichen wollten, dass das linke Men\u00fc ein Drittel der Seite einnimmt, m\u00fcssen wir hier also einstellen, dass die linke Spalte vier Grid-Spalten breit sein darf, da vier ein Drittel von zw\u00f6lf sind.<\/p>\n
![\"Gambio](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/tutorial_grid_12_col_left_highlighted_edited.jpg\")
<\/a>Abb 4: Seite mit aktiver linker Spalte und angedeuteter Spaltenaufteilung zwischen linker Spalte und Hauptspalte nach unserer \u00c4nderung<\/p><\/div>\n
Zu beachten ist, dass auch die restlichen Elemente neu eingestellt werden m\u00fcssen, wenn ein Bereich verstellt wird, damit die zw\u00f6lf Spalten nicht \u00fcberschritten werden. Aus diesem Grund muss der Wert f\u00fcr die Hauptspalte in unserem Beispiel auch angepasst werden, damit dieser nur die verbleibenden zwei drittel (also acht Spalten) Breite einnimmt, da es sonst zu Fehldarstellungen kommt.<\/p>\n
Wollt ihr das auch f\u00fcr die anderen beiden Breakpoints so einstellen, kann f\u00fcr die jeweiligen Optionen analog wie oben beschrieben vorgegangen werden.<\/p>\n
Hinweis:<\/b>
\nDie Option \u201cSpaltenaufteilung > Gro\u00df (Desktops) > Rechts Grid-Spalten Gro\u00df\u201d ist f\u00fcr eine optional verf\u00fcgbare rechte Spalte im Shop vorgesehen, die allerdings individuell angepasst werden muss, da diese nicht zum Standardumfang des Honeygrid-Templates geh\u00f6rt.<\/div>\nSeitenelemente mit dem StyleEdit 3 bearbeiten<\/h2>\n
Das Honeygrid-Template ist in unterschiedliche Elemente unterteilt, die die Bearbeitung und Gestaltung vereinfachen sollen. Hier sollen nun die wichtigsten n\u00e4her betrachtet und erkl\u00e4rt werden.<\/p>\n
Logo, Suche, Warenkorb: Der Header<\/h3>\n
Beim Header handelt es sich um den Kopfbereich der Seite. Hier wird unter anderem das Logo des Shops, die Suche und der kleine Warenkorb angezeigt. In unserem Testshop 1<\/a> sieht der Header folgenderma\u00dfen aus:<\/p>\n
![\"Beispiel](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/tutorial_header.jpg\")
<\/a>Abb1: Beispielscreenshot des Headers aus Testshop 1.<\/p><\/div>\n
Wie sich auf dem Bild erkennen l\u00e4sst, kann der Header grob in drei Teile unterteilt werden:<\/p>\n
- \n
- Sekund\u00e4rnavigation<\/b>: Alle Elemente in \u00a0der obersten, hier grauen Zeile werden als Sekund\u00e4rnavigation bezeichnet. Hier finden sich in der Regel Elemente, die zus\u00e4tzliche Informationen bereitstellen, die Sprache oder W\u00e4hrung des Shops \u00e4ndern oder das Ein- und Ausloggen erm\u00f6glichen.<\/li>\n
- Mittelzeile:<\/b> In der mittleren Zeile werden wichtige Informationen des Shops angezeigt. Hier findet sich das Logo, die Artikelsuche, ein \u00fcber den Content Manager frei gestaltbarer Bereich und der kleine Warenkorb.<\/li>\n
- Horizontale Kategorienavigation: <\/b>In dieser Zeile finden sich alle Hauptkategorien, die ihr unter Artikel\/Kategorien angelegt habt. Dar\u00fcber hinaus gibt es die M\u00f6glichkeit mit dem Content Manager Links zu platzieren, die besonders hervorgehoben werden sollen.<\/li>\n<\/ul>\n
Schnellere \u00dcbersicht \u00fcber Unterkategorien: Das Mega-Dropdown<\/h3>\n
Beim Hovern \u00fcber einer der Hauptkategorien (wenn Unterkategorien enthalten sind) \u00f6ffnet sich ein Men\u00fc, \u00a0das Mega-Dropdown genannt wird. Hier werden alle Unterkategorien und, falls so konfiguriert, deren Kindkategorien angezeigt, sodass das Mega-Dropdown ein zentrales Navigationselement des Shops darstellt.<\/p>\n
![\"Horizontales](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/tutorial_mega_dropdown.jpg\")
<\/a>Abb 2: Horizontales Kategoriemen\u00fc mit ausgeklapptem Megadropdown<\/p><\/div>\n
Tipp:<\/b> Sollen extrem viele Unterkategorien zum Einsatz kommen, bietet es sich allerdings an, auf das vertikale Kategorie-Men\u00fc auszuweichen, welches in der linken Seitenspalte angezeigt werden kann, da dies in der Regel \u00fcbersichtlicher ist.<\/div>\nBlock-Breite, Anzahl Bl\u00f6cke, Tab-Verschiebung: Das Mega-Dropdown individualsieren<\/h3>\n
Hierbei handelt es sich um Optionen zur Gestaltung und Aufteilung der einzelnen Kategorien und ihrer Unterkategorien im Mega-Dropdown.<\/p>\n
- \n
- Block-Breite<\/b>: Eine Kategorie mit ihren Unterkategorien, die im Mega-Dropdown angezeigt wird, wird als Block bezeichnet. Mit der Block-Breite l\u00e4sst sich die Breite eines solchen Blocks innerhalb des Mega-Dropdowns bestimmen. Hierbei muss allerdings darauf geachtet werden, wie viele Bl\u00f6cke pro Zeile angezeigt werden sollen, da es sonst mangels Platz zu Fehldarstellungen kommen kann.<\/li>\n
- Anzahl Bl\u00f6cke:<\/strong> Hiermit kann die Anzahl der Kategorie-Bl\u00f6cke pro Zeile konfiguriert werden, um so eine bessere Verteilung und Lesbarkeit zu erreichen.<\/li>\n
- Tab-Verschiebung:<\/strong> Gibt an, wie weit die Unterkategorien eines Kategorie-Blocks einger\u00fcckt werden sollen. Kann verwendet werden, um besser zu visualisieren, dass es sich bei der aufgelisteten Kategorie um eine Unterkategorie handelt. Soll keine Einr\u00fcckung stattfinden, kann der Wert auf 0 gesetzt werden<\/li>\n<\/ul>\n
Mehr Infos f\u00fcr den Kunden: die linke Spalte<\/h3>\n
Die linke Spalte kann im Shop dazu genutzt werden, zus\u00e4tzliche Informationen mit Hilfe der Men\u00fcboxen und dem vertikalen Kategorie-Men\u00fc anzuzeigen. Welche Boxen an welcher Position in der linken Spalte angezeigt werden sollen, kann auch im StyleEdit 3 konfiguriert werden. Dar\u00fcber hinaus kann eingestellt werden, auf welchen Seiten die linke Spalte angezeigt werden soll.<\/p>\n
![\"Gambio](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/tutorial_left_col.jpg\")
<\/a>Abb 3: Ausschnitt des Shops mit linker Spalte (rot markiert)<\/p><\/div>\n
Zusatzoption rechte Spalte<\/h3>\n
Die rechte Spalte ist ein optionales Angebot zur Gestaltung des Shops. Hier k\u00f6nnen analog zur linken Spalte zus\u00e4tzliche Informationen angezeigt werden. Da Shoplayouts mit linker, rechter und Hauptspalte allerdings nicht mehr zeitgem\u00e4\u00df sind und schnell \u00fcberfrachtet wirken k\u00f6nnen, ist die Verwendung nicht generell zu empfehlen. Au\u00dferdem muss die Verwendung der rechten Spalte zum Gro\u00dfteil individuell umgesetzt werden, da diese nur konzeptionell vorgesehen ist.<\/p>\n
Hier geht es ans Eingemachte: Die Hauptspalte<\/h3>\n
Die Hauptspalte ist der Inhaltsbereich eures Shops. Hier werden die Artikel angezeigt, also das, was einen Shop letztlich ausmacht. Die Hauptspalte kann, je nachdem, wie ihr sie konfiguriert habt, \u00fcber die gesamte Breite gehen oder teilt sich den Platz mit der linken Spalte, sofern diese aktiviert ist.<\/p>\n
![\"Gambio](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/tutorial_main_col.jpg\")
<\/a>Abb 4: Verschiedene Darstellungsformen der Hauptspalte, einmal ohne und einmal mit linker Spalte (Hauptspalte rot markiert)<\/p><\/div>\n
Last but not least: der Footer<\/h3>\n
Der Footer ist das abschlie\u00dfende Element einer Webseite \/ eines Onlineshops und befindet sich direkt am Ende jeder Seite. Ihr habt hier die M\u00f6glichkeit zus\u00e4tzliche Information zu euch, euren Gesch\u00e4ftsbedingungen, euren Versand- und Zahlungsarten oder \u00c4hnlichem zu platzieren. Um ein wenig mehr Gestaltungsspielraum zu haben, wird der Footer im Honeygrid in zwei Bereiche unterteilt, den Footer-Header und den Footer-Body.<\/p>\n
![\"Gambio](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/tutorial_footer_complete.jpg\")
<\/a>Abb 5: Beispielhafte Darstellung des kompletten Footers<\/p><\/div>\n
Der Footer-Header<\/h3>\n
Der Footer Header kann von euch mit beliebigem Content bef\u00fcllt werden. Dies ist \u00fcber den Content Manager m\u00f6glich. In unserem Beispiel ist hier eine Anmeldung zum Newsletter platziert, damit dieser leicht hervorgehoben ist, sich dem Kunden aber nicht allzusehr aufdr\u00e4ngt.<\/p>\n
Sollte der Footer-Header nicht ben\u00f6tigt werden, kann dieser ausgeblendet werden, indem ihr den passenden Content Manager Eintrag deaktiviert.<\/p>\n
![\"Gambio](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/tutorial_footer_head.jpg\")
<\/a>Abb 6: Beispiel eines Footer-Headers<\/p><\/div>\n
Der Footer-Body<\/h3>\n
Der Footer-Body gibt euch genug Platz dem Kunden zus\u00e4tzliche Informationen zu euch und eurem Shop zu pr\u00e4sentieren. Standardm\u00e4\u00dfig ist dieser in vier Spalten aufgeteilt. In der ersten Spalte findet sich die aus dem EyeCandy bekannte \u201cMehr \u00fcber\u201d-Box, welche alle Contents verlinkt, die im Contentmanager die Position \u201ccontent\u201d erhalten haben. Hierdurch habt ihr es einfacher, die wichtigsten Informationen zu eurem Shop, wie die Allgemeinen Gesch\u00e4ftsbedingungen, euer Impressum oder Hinweise zum Widerrufsrecht, zu platzieren, da ihr nur die betreffenden Contents mit dem richtigen Inhalt bef\u00fcllen m\u00fcsst.<\/p>\n
Die anderen drei Spalten k\u00f6nnen von euch mit beliebigen Content bef\u00fcllt werden. Dies ist m\u00f6glich mit den betreffenden Eintr\u00e4gen im Content Manager. Hier lassen sich zum Beispiel Informationen zu Zahlungsarten und Versand-Methoden oder Verlinkungen zu Social Media Kan\u00e4len platzieren.<\/p>\n
Sollten bestimmte Spalten nicht ben\u00f6tigt werden, sind diese einfach per StyleEdit 3 ausblendbar. Denkt hier nur daran, dass dann bei den \u00fcbrigen Spalten die Aufteilung der Grid-Spalten neu eingestellt werden muss, damit es nicht zu Fehldarstellungen kommt.<\/p>\n
![\"Gambio](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/tutorial_footer_body.jpg\")
<\/a>Abb 7: M\u00f6gliche Darstellung des Footer-Bodies mit vier gleich gro\u00dfen Spalten<\/p><\/div>\n
Artikeldarstellung im Shop: Kacheln oder Liste<\/h2>\n
Das Honeygrid-Template bringt von Haus aus zwei Ansichtsformen f\u00fcr die Artikelauflistung mit. Diese werden Kachel- bzw. Listenansicht genannt.<\/p>\n
In der Kachelansicht werden nur die wichtigsten Informationen zu einem Artikel angezeigt, so dass hier Platz gespart wird und mehrere Artikel pro Zeile angezeigt werden k\u00f6nnen.<\/p>\n
Die Listenansicht dient dazu, dem Kunden schon direkt in der Artikelauflistung einen kurzen \u00dcberblick \u00fcber die wesentlichen Merkmale des Artikels geben zu k\u00f6nnen. Auch die Anzeige von Artikelattributen ist hier m\u00f6glich und der Kunde hat die M\u00f6glichkeit, den Artikel direkt in den Warenkorb zu legen, wenn dieser nicht erst noch per Eigenschaften, Attributen oder GX-Customizer konfiguriert werden muss.<\/p>\n
Bewegung in der Produktdarstellung: Swiper, Slider, Teaser-Slider<\/h2>\n
Ein Swiper, oder auch Slider, ist ein Element, in dem Bilder oder andere HTML-Elemente dargestellt werden k\u00f6nnen, die anschlie\u00dfend entweder automatisch oder durch manuelles Klicken auf einen Button in eine bestimmte Richtung bewegt werden.<\/p>\n
Bekanntestes Beispiel f\u00fcr ein solches Element ist der gro\u00dfe Teaser-Slider auf der Startseite, dessen Bilder automatisch weiter gescrollt werden.<\/p>\n
Aber nicht nur daf\u00fcr lassen sich Slider verwenden: Auf der Startseite habt ihr die M\u00f6glichkeit, Artikel in der Kachelansicht als Slider darzustellen und auf der Produktdetailseite werden die Thumbnails der Artikelbilder als Slider dargestellt, sobald genug Bilder hochgeladen worden sind.<\/p>\n
Technisch handelt es sich also im Grunde um die gleichen Dinge, im Shop selbst werden sie allerdings je nach Verwendungszweck anders genannt:<\/p>\n
- \n
- Teaser-Slider:<\/b> Wie vorher bereits erw\u00e4hnt, handelt es sich hierbei um ein Element, das Bilder beinhaltet, die automatisch nach links oder rechts gescrollt werden. Dieser kann auf der Startseite, auf Content- oder Produktseiten platziert werden, um auf Aktionen oder Sonderangebote hinzuweisen.\n
![\"Gambio](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/tutorial_teaser_slider.jpg\")
<\/a>Abb 8: Teaser-Slider auf der Startseite<\/p><\/div><\/li>\n
- Slider oder auch Swiper:<\/b> Zwei Begriffe, die eigentlich das gleiche meinen. Hiermit sind immer zwei Sachen gemeint: Die Elemente auf der Startseite, mit denen sich Artikelkacheln horizontal scrollen lassen oder die Elemente, die die Thumbnails auf der Produktdetailseite beinhalten, so dass diese, je nach Ansicht, horizontal oder vertikal durchgescrollt werden k\u00f6nnen.\n
![\"Gambio](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/tutorial_article_swiper.jpg\")
<\/a>Abb 9: Der Slider kann verschiedene Funktionen einnehmen. Hier f\u00fcr Artikel auf der Startseite\u2026<\/p><\/div>\n
![\"Gambio](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/tutorial_thumbnail_swiper_horizontal.jpg\")
<\/a>Abb 10: \u2026 hier f\u00fcr die Thumbnails in horizontaler Darstellung\u2026<\/p><\/div>\n
![\"Gambio](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/tutorial_thumbnail_swiper_vertical.jpg\")
<\/a>Abb 11: \u2026 oder f\u00fcr die Thumbnails in vertikaler Darstellung<\/p><\/div>\n
<\/li>\n<\/ul>\n
Wenn am Ende alles gut wird: der Checkout<\/h2>\n
Mit dem Begriff Checkout bezeichnen wir alle Seiten des Bestell- und Bezahlprozesses, die durchlaufen werden, nachdem ein Kunde im Warenkorb auf den Button \u201cKasse\u201d geklickt hat. Folgende Seiten w\u00e4ren hier zu nennen:<\/p>\n
- \n
- Checkout-Shipping:<\/b> Auf dieser Seite hat der Kunde die M\u00f6glichkeit, seine Lieferanschrift anzugeben und zu w\u00e4hlen welche Versandmethode er nehmen m\u00f6chte<\/li>\n
- Checkout-Payment:<\/b> Auf dieser Seite hat der Kunde die M\u00f6glichkeit, seine Rechnungsadresse anzugeben, sollte diese von der Lieferanschrift abweichen, und zu w\u00e4hlen, auf welche Art und Weise er zahlen m\u00f6chte. Dar\u00fcber hinaus k\u00f6nnen hier auch noch Anmerkungen zu Bestellungen angegeben und euer Widerrufsrecht und eure AGB best\u00e4tigt werden, sofern ihr dies so konfiguriert habt.<\/li>\n
- Checkout-Confirmation:<\/b> Auf dieser Seite werden alle wichtigen Informationen zur Bestellung des Kunden noch einmal angegeben, damit dieser vor dem Klick auf den Button \u201cKostenpflichtig bestellen\u201d sichergehen kann, dass alle Daten korrekt sind.<\/li>\n
- Checkout-Success:<\/b> Auf diese Seite wird der Kunde geleitet, wenn der Bestellprozess erfolgreich durchlaufen worden ist. Hier wird eine Erfolgsmeldung angezeigt, sowie die M\u00f6glichkeit f\u00fcr den Kunden geboten, sich die Details zu seiner Bestellung auszudrucken. Ist das Gutscheinsystem aktiv und verf\u00fcgt der Kunde noch \u00fcber Guthaben, dann wird ihm hier die M\u00f6glichkeit angeboten, sein Guthaben an andere weiterzuschicken. Hat der Kunde als Gast den Checkout durchlaufen, wird ihm hier eine M\u00f6glichkeit geboten, seinen Einkauf per Knopfdruck zu beenden, wodurch seine Session aus dem Shop entfernt wird.<\/li>\n<\/ul>\n
Das Design von Versand- und Zahlungsoptionen anpassen<\/h3>\n
Die Listenelemente befinden sich im Checkout auf den Seiten Checkout-Shipping und Checkout-Payment. Die jeweiligen Optionen zu Versand- und Zahlungsmethoden werden als solche bezeichnet und k\u00f6nnen im StyleEdit 3 mit den dazugeh\u00f6rigen Optionen gestaltet werden.<\/p>\n
![\"Gambio](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/tutorial_payment_method_list.jpg\")
<\/a>Abb 12: Beispielhafte Darstellung der Listenelemente<\/p><\/div>\n
Immer bereit f\u00fcr den Klick: die Buttons<\/h2>\n
Buttons finden sich viele im Shop. Durch ihr unterschiedliches Aussehen und ihre unterschiedlichen Funktionen haben sie auch unterschiedliche Bezeichnungen.<\/p>\n
Sie lassen sich in drei Gruppen unterteilen:<\/p>\n
- \n
- Primary Button<\/b>: Dies ist ein Button, der eine Aktion ausl\u00f6st, die unbedingt erw\u00fcnscht ist. Zum Beispiel der \u201cKasse\u201d-Button im Warenkorb. Er dient als Hervorhebung f\u00fcr wichtige oder gew\u00fcnschte Aktionen. Der Button wird immer in der Hauptfarbe eures Shops angezeigt und gestaltet.\n
![\"Gambio](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/tutorial_btn_primary.jpg\")
<\/a>Abb 13: Beispiel eines Primary Buttons<\/p><\/div><\/li>\n
- Default Button<\/b>: Button f\u00fcr Standard-Aktionen, die nicht besonders hervorgehoben werden m\u00fcssen. Wird zum Beispiel zum Schlie\u00dfen eines Informations-PopUps verwendet.\n
![\"Gambio](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/tutorial_btn_default.jpg\")
<\/a>Abb 14: Beispiel eines Default Button<\/p><\/div><\/li>\n
- In den Warenkorb<\/b>: Eine der wichtigsten Aktionen in einem Onlineshop. Buttons mit diesem Styling haben immer die Funktion, den Artikel in den Warenkorb zu legen. Dies ist aus der Artikelauflistung in der Listenansicht oder auf der Artikel-Detailseite m\u00f6glich. Ausnahme bilden hier die Artikel, die Eigenschaften oder Attribute haben. Da diese noch auf der Artikeldetailseite konfiguriert werden m\u00fcssen, nimmt der Button auf der Listenansicht die Funktion einer Weiterleitung auf die Artikeldetailseite ein.\n
![\"Gambio](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/tutorial_add_to_cart.jpg\")
<\/a>Abb 15: Beispiel eines In den Warenkorb Buttons<\/p><\/div><\/li>\n<\/ul>\n
Alle diese Buttons k\u00f6nnen im StyleEdit 3 \u00fcber Allgemein > Buttons optisch an die eigenen Bed\u00fcrfnisse angepasst werden.<\/p>\n
War da nicht noch was? Die Hinweise<\/h2>\n
Hinweismeldungen werden immer dann im Shop angezeigt, wenn etwa eine Aktion mit einem Fehler geendet ist, eine Aktion erfolgreich war oder wenn es f\u00fcr den Kunden wichtige Informationen zu seinen gew\u00e4hlten Artikeln gibt. Im Shop unterscheiden wir hier zwischen vier verschiedenen Hinweismeldungen:<\/p>\n
- \n
- Fehler<\/b>: Wenn zum Beispiel eine ung\u00fcltige Eigenschaftenkombination oder eine nicht vorgesehene Artikelmenge in den Warenkorb gelegt werden soll, wird dem Kunden ein Fehler-Hinweis angezeigt.\n
![\"Gambio](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/tutorial_alert_error.jpg\")
<\/a>Abb 16: Beispiel f\u00fcr einen Fehler-Hinweis<\/p><\/div><\/li>\n
- Warnung<\/b>: Diese Meldung wird dem Kunden zum Beispiel dann angezeigt, wenn er ein Produkt in den Warenkorb gelegt hat, das nicht mehr vorr\u00e4tig aber trotzdem noch bestellbar ist.\n
![\"Gambio](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/tutorial_alert_warning.jpg\")
<\/a>Abb 17: Beispiel f\u00fcr einen Warnungs-Hinweis<\/p><\/div><\/li>\n
- Erfolg<\/b>: Nach dem erfolgreichen Abschluss einer Bestellung wird dem Kunden dieser Erfolgshinweis angezeigt.\n
![\"Gambio](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/tutorial_alert_success.jpg\")
<\/a>Abb 18: Beispiel f\u00fcr einen Erfolgs-Hinweis<\/p><\/div><\/li>\n
- Info<\/b>: Diese Meldung wird dem Kunden zur reinen Information angezeigt, zum Beispiel dann, wenn er den Warenkorb aufruft, ohne dass sich Artikel darin befinden, oder um den Kunden w\u00e4hrend des Checkouts darauf hinzuweisen, dass er seine Daten noch einmal pr\u00fcfen sollte, bevor er die Bestellung abschlie\u00dft.\n
![\"Gambio](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/tutorial_alert_info.jpg\")
<\/a>Abb 19: Beispiel f\u00fcr einen Info-Hinweis<\/p><\/div><\/li>\n<\/ul>\n
Alle diese Hinweismeldungen k\u00f6nnen im StyleEdit 3 nach eigenen W\u00fcnschen optisch angepasst werden. Die dazu passenden Optionen findet ihr unter Allgemeines > Hinweise.<\/p>\n
Kleine Fl\u00e4che, gro\u00dfe Wirkung: die Ribbons<\/h2>\n
Ribbons sind kleine Hinweisfelder, die im Honeygrid dazu verwendet werden, Besonderheiten von Artikeln aufzuzeigen. Gibt es zu einem Artikel beispielsweise ein Sonderangebot, dann wird dies mit einem passenden Ribbon mit dem Prozentwert, um den der Preis reduziert ist, oben rechts in der Artikelkachel bzw. oben links in der Artikel-Listenansicht angezeigt. Folgende Ribbons gibt es:<\/p>\n
- \n
- Bald<\/b>: Das Bald-Ribbon wird angezeigt, wenn ihr Artikelank\u00fcndigungen richtig in eurem Shop konfiguriert habt und der betreffende Artikel ein Erscheinungsdatum in der Zukunft hat.<\/li>\n
- Neu<\/b>: Das Neu-Ribbon erhalten alle Artikel, die gerade von euch hinzugef\u00fcgt worden sind, bzw. in dem Zeitraum liegen, den ihr unter Shop Einstellungen > Maximum Werte > Zeitraum (Tage) f\u00fcr neue Artikel eingetragen habt.<\/li>\n
- Top: <\/b>Das Top-Ribbon erhalten alle Artikel, die die Option \u201cTop\u201d unter Artikel > Artikel\/Kategorie aktiviert haben, beziehungsweise alle Artikel, die in der obersten Kategorie \u201cTop\u201d liegen.<\/li>\n
- Angebot:<\/strong> Alle Artikel mit einem hinterlegten Sonderangebot erhalten das Angebots-Ribbon. In diesem wird der Prozentwert angezeigt, um wie viel der Artikel reduziert worden ist.<\/li>\n
- Hersteller <\/b>(Sonderfall): Wird in der Listenansicht und der Artikeldetailseite angezeigt, wenn ihr einen Hersteller konfiguriert und diesem einen Artikel zugewiesen habt. Dieses Ribbon zeigt immer das Hersteller-Logo an, welches ihr unter Artikel > Hersteller angelegt habt.<\/li>\n<\/ul>\n
![\"Gambio](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/tutorial_ribbons.jpg\")
<\/a>Abb 20: Beispielhafte Darstellung der Ribbons in der Kachelansicht<\/p><\/div>\n
F\u00fcr alle Schandtaten zu haben: Eigenes CSS einspielen<\/h2>\n
Mit der M\u00f6glichkeit eigenes CSS \u00fcber den StyleEdit 3 einzuf\u00fcgen habt ihr die volle Styling-Kontrolle \u00fcber das Template. Alle \u00c4nderungen, die ihr hier macht, werden updatesicher abgespeichert, das hei\u00dft sie werden von einem Update nicht \u00fcberschrieben. Sie sollten aber dennoch nach jedem Update einmal auf korrekte Funktion hin \u00fcberpr\u00fcft werden.<\/p>\n
![\"StyleEdit](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/tutorial_own_css_modal.jpg\")
<\/a>Abb 21: Fenster zum Eingeben von eigenem CSS ohne Inhalt.<\/p><\/div>\n
Ihr habt hier aber nicht nur die M\u00f6glichkeit, per CSS Elemente zu ver\u00e4ndern. Ihr k\u00f6nnt an dieser Stelle auch SCSS verwenden, was euch die M\u00f6glichkeit bietet, unsere Variablen und die Variablen von Bootstrap zu \u00fcberschreiben oder eigene zu definieren, um noch flexibler bei der Gestaltung eures Shops zu sein.<\/p>\n
Eine weitere M\u00f6glichkeit ist die Verwendung von Mixins<\/a>. Mixins sind kleine, vorgefertigte Stylingbl\u00f6cke, die mit Variablen beeinflusst und angepasst werden k\u00f6nnen. Sie werden beim Erstellen des finalen CSS dann in richtigen CSS-Code umgewandelt und ersparen einem so das wiederholte Tippen der immer gleichen Styling-Anweisungen, wodurch sich erheblich Zeit sparen l\u00e4sst.<\/p>\n
Das Eingabefenster f\u00fcr das eigene CSS erreicht ihr, wenn ihr in die Bearbeitung eures Styles wechselt, auf den Namen eures Styles klickt und aus dem sich \u00f6ffnenden Dropdown die Option \u201cEigenes CSS\u201d ausw\u00e4hlt.<\/p>\n
![\"StyleEdit](\"https:\/\/www.gambio.de\/blog\/wp-content\/uploads\/tutorial_own_css.jpg\")
<\/a>Abb 22: So erreicht ihr das Fenster zum Eingeben von eigenem CSS.<\/p><\/div>\n
Viel weiter m\u00f6chte ich an dieser Stelle mit der Beschreibung des eigenen CSS nicht gehen, da dies den Rahmen dieses Artikels erheblich sprengen w\u00fcrde. Bei Interesse wird hier aber gerne ein weiterer Artikel mit diesem Thema folgen.<\/p>\n
To be continued…<\/h2>\n
Hiermit m\u00f6chte ich diesen ersten Artikel zum Thema StyleEdit 3 beenden. Wie hat er euch gefallen? Konntet ihr mit den Erkl\u00e4rungen etwas anfangen oder fehlte noch etwas? Lasst es mich gerne wissen, dann schaue ich, die noch fehlenden Begriffe in einem weiteren Artikel zu erkl\u00e4ren. \ud83d\ude09<\/p>\n
Schaut auf jeden Fall mal wieder rein, da noch weitere Tutorials zum Thema StyleEdit 3 geplant sind, die mit expliziten Fallbeispielen dabei helfen sollen, das Beste aus eurem Shop herauszuholen. \ud83d\ude42<\/p>\n
Noch nicht genug Input? Hier geht’s zu Teil 2 der Tutorialreihe<\/a>.<\/p>\n
\n - Neu<\/b>: Das Neu-Ribbon erhalten alle Artikel, die gerade von euch hinzugef\u00fcgt worden sind, bzw. in dem Zeitraum liegen, den ihr unter Shop Einstellungen > Maximum Werte > Zeitraum (Tage) f\u00fcr neue Artikel eingetragen habt.<\/li>\n
- Warnung<\/b>: Diese Meldung wird dem Kunden zum Beispiel dann angezeigt, wenn er ein Produkt in den Warenkorb gelegt hat, das nicht mehr vorr\u00e4tig aber trotzdem noch bestellbar ist.\n
- Default Button<\/b>: Button f\u00fcr Standard-Aktionen, die nicht besonders hervorgehoben werden m\u00fcssen. Wird zum Beispiel zum Schlie\u00dfen eines Informations-PopUps verwendet.\n
- Checkout-Payment:<\/b> Auf dieser Seite hat der Kunde die M\u00f6glichkeit, seine Rechnungsadresse anzugeben, sollte diese von der Lieferanschrift abweichen, und zu w\u00e4hlen, auf welche Art und Weise er zahlen m\u00f6chte. Dar\u00fcber hinaus k\u00f6nnen hier auch noch Anmerkungen zu Bestellungen angegeben und euer Widerrufsrecht und eure AGB best\u00e4tigt werden, sofern ihr dies so konfiguriert habt.<\/li>\n
- Slider oder auch Swiper:<\/b> Zwei Begriffe, die eigentlich das gleiche meinen. Hiermit sind immer zwei Sachen gemeint: Die Elemente auf der Startseite, mit denen sich Artikelkacheln horizontal scrollen lassen oder die Elemente, die die Thumbnails auf der Produktdetailseite beinhalten, so dass diese, je nach Ansicht, horizontal oder vertikal durchgescrollt werden k\u00f6nnen.\n
- Anzahl Bl\u00f6cke:<\/strong> Hiermit kann die Anzahl der Kategorie-Bl\u00f6cke pro Zeile konfiguriert werden, um so eine bessere Verteilung und Lesbarkeit zu erreichen.<\/li>\n
- Mittelzeile:<\/b> In der mittleren Zeile werden wichtige Informationen des Shops angezeigt. Hier findet sich das Logo, die Artikelsuche, ein \u00fcber den Content Manager frei gestaltbarer Bereich und der kleine Warenkorb.<\/li>\n
- Sekund\u00e4rnavigation<\/b>: Alle Elemente in \u00a0der obersten, hier grauen Zeile werden als Sekund\u00e4rnavigation bezeichnet. Hier finden sich in der Regel Elemente, die zus\u00e4tzliche Informationen bereitstellen, die Sprache oder W\u00e4hrung des Shops \u00e4ndern oder das Ein- und Ausloggen erm\u00f6glichen.<\/li>\n
- Gridspalten klein:<\/strong> kleine Displays, wie Tablets im Portrait-Modus<\/li>\n
- screen-sm:<\/strong> kleine Displays, wie Tablets im Hochformat (auch Portrait-Modus genannt)<\/li>\n
- Textfarbe:<\/strong> Wie der Name der Option schon sagt, handelt es sich hier um die Farbe, welche f\u00fcr alle Texte im Shop verwendet wird. Im StyleEdit 3 wird diese Farbe mit der Variable $text-color angesprochen.<\/li>\n