Erlebniswelten
Last updated
Last updated
Mit der Installation eines Theme erhalten Sie neuen Block-Kategorien und Erlebniswelten Elemente. Alle beginnen mit: Coolbax + Name des Theme und erweitern die Möglichkeiten einer individuellen Gestaltung der Seiten.
Block-Elemente, welche durch das Plugin hinzugekommen sind, erkennen Sie an dem grünen Icon in der rechten oberen Ecke.
Die nachfolgende Anleitung kann auch für den Tausch von Block-Elemente genutzt werden!
Um noch vielfältiger Ihre Erlebniswelten zu gestalten, erhalten Sie die Einkaufswelten Elemente: Spalten und Layout hinzu. Sobald diese Elemente auf eine Erlebniswelt gezogen werden, werden standardmäßig die Bereiche mit einem Block-Element: Text gefüllt.
Sollten Sie ein anderes Block-Element vorziehen, gehen Sie mit der Mouse über das Element. Das Element wird markiert und in der rechten Ecke wird das Bearbeitungssymbol (Zahnrad) und das Wechselsymbol (Pfeile) eingeblendet.
Klicken Sie auf das Wechselsymbol und wählen, im darauffolgenden Fenster das Block-Element aus, welches Sie stattdessen verwenden möchten.
Auch hier sind die Coolbax Block-Elemente mit dem grünen Icon in der rechten oberen Ecke gekennzeichnet.
Inhalte und Einstellungen von Block-Elementen können in den Kategorien und Produkt Einstellungen unter: Layout individuell angepasst und verändert werden!
Dieses Block-Element vergrößert das Bild, wenn die Mouse über dem Element ist. Verlässt die Mouse das Element geht das Bild in seine ursprüngliche Größe zurück.
Anzeigemodus
Bestimmen Sie, wie das Bild im Block dargestellt werden soll (Standard, Füllen, Beibehalten).
Standard: passt sich das Bild bis zu seiner Größe an den Bereich an | Füllen: wird der Bereich mit dem Bild komplett gefüllt | Strecken: wird das Bild auf die Größe des Bereiches gestreckt.
Vertikale Ausrichtung
Einstellung gilt beim Anzeigemodus Standard und Strecken. Geben Sie hier an, ob das Bild sich an der oberen oder an der unteren Kante ausrichten soll, oder ob es mittig angezeigt werden soll.
Zoom Faktor*
Bestimmen Sie, um wie viel Prozent das Produktbild vergrößert werden soll.
Link zu
Hier können Sie angeben wohin verlinkt werden soll.
Link in neuem Tab öffnen
Der Link wird, bei Aktivierung, in einem neuen Tab geöffnet
*Bleiben Sie im positiven Bereich (z. B. 1.2), wird das Bild vergrößert. Verwenden Sie einen negativen Wert (z. B. -1.2) verkleinert sich das Bild um die Prozentzahl
In diesem Block-Element können ein Banner mit einem Text einfügen. Der Text wird als Zeile über dem Bild dargestellt. Sie können u. a. die Position der Zeile sowie einige Farbanpassungen vornehmen.
Anzeigemodus
Bestimmen Sie, wie das Bild im Block dargestellt werden soll (Standard, Füllen, Beibehalten).
Standard: passt sich das Bild bis zu seiner Größe an den Bereich an | Füllen: wird der Bereich mit dem Bild komplett gefüllt | Strecken: wird das Bild auf die Größe des Bereiches gestreckt.
Vertikale Ausrichtung
Einstellung gilt beim Anzeigemodus Standard und Strecken. Geben Sie hier an, ob das Bild sich an der oberen oder an der unteren Kante ausrichten soll, oder ob es mittig angezeigt werden soll.
Link zu
Hier können Sie angeben wohin verlinkt werden soll.
Link in neuem Tab öffnen
Der Link wird, bei Aktivierung, in einem neuen Tab geöffnet.
Text
Text welcher auf dem Banner erscheinen soll
Schriftart*
Welche Schriftart soll genutzt werden (Schriftart für Text oder Schriftart für Überschriften)
Text Ausrichtung
Soll der Text linksbündig, zentriert oder rechtsbündig positioniert werden
Schriftgröße
Wie groß sollen die Buchstaben dargestellt werden (Angaben in Pixel)
Schriftstärke
Definieren Sie die Schriftstärke (dünn, normal oder fett) für den Text
Schriftfarbe (Text)
Diese Einstellung ändert die Schriftfarbe für den Text.
Auf dem Smartphone (Portrait) ausblenden
Soll die Zeile mit dem Text auf Smartphone-Größe (hochkant) ausgeblendet werden
Position
Soll die Zeile oben oder unter vom Bildrand dargestellt werden.
Definieren Sie den Abstand zwischen Schrift und Zeilenende
Definieren Sie den Abstand zwischen Zeile und Bild
Hintergrundfarbe
Geben Sie der Zeile eine Hintergrundfarbe
*Die Schriftart für Text bzw. Schriftart für Überschriften stellen Sie in den Theme Einstellungen > Typografie & Farben >Typografie fest
Für den Innen- und Außenabstand können Sie bis zu 4 Werte angeben. Diese werden im Uhrzeigersinn ausgeführt.
1 Wert: 10px = oben, rechts, unten und links wird ein Abstand von 10 Pixel eingefügt
2 Werte: 10px 5px = oben und unten bekommen einen Abstand von 10 Pixel eingefügt, Rechts und links erhalten 5 Pixel Abstand.
3 Werte: 10px 5px 20px= oben wird einen Abstand von 10 Pixel, rechts und links einen Abstand von 5 Pixel und unten 20 Pixel eingefügt.
4 Werte: 10px 5px 20px 15px = oben wird einen Abstand von 10 Pixel, rechts einen Abstand von 5 Pixel, unten ein Abstand von 20 Pixel und links ein Abstand von 15 Pixel eingefügt.
Ähnlich wie im Bild Teaser können Sie auch hier einen Text auf das Bild hinterlegen. In diesem Fall wird der Text in einem rechteckigen Overlay mittig zum Bild ausgerichtet dargestellt. Sie können auch hier u. a. die Position des Overlay sowie einige Farbanpassungen vornehmen.
Anzeigemodus
Bestimmen Sie, wie das Bild im Block dargestellt werden soll (Standard, Füllen, Beibehalten).
Standard: passt sich das Bild bis zu seiner Größe an den Bereich an | Füllen: wird der Bereich mit dem Bild komplett gefüllt | Strecken: wird das Bild auf die Größe des Bereiches gestreckt.
Vertikale Ausrichtung
Einstellung gilt beim Anzeigemodus Standard und Strecken. Geben Sie hier an, ob das Bild sich an der oberen oder an der unteren Kante ausrichten soll, oder ob es mittig angezeigt werden soll.
Link zu*
Hier können Sie angeben wohin verlinkt werden soll.
Link in neuem Tab öffnen
Der Link wird, bei Aktivierung, in einem neuen Tab geöffnet.
Headline
Headline welche auf dem Banner erscheinen soll
Text
Text welcher auf dem Banner (unter der Headline) erscheinen soll
Button
Button welcher auf dem Banner (unter der Text) erscheinen soll
Wird ein Button verwendet, ist der Link nur im Bereich des Buttons aktiv. Wird kein Button verwendet (Feld bleibt leer) wird der gesamte Bildbereich verlinkt
Schriftart
Welche Schriftart soll genutzt werden (Schriftart für Text oder Schriftart für Überschriften)
Text Ausrichtung
Soll der Text linksbündig, zentriert oder rechtsbündig positioniert werden
Schriftgröße
Wie groß sollen die Buchstaben dargestellt werden (Angaben in Pixel)
Schriftstärke
Definieren Sie die Schriftstärke (dünn, normal oder fett) für den Text
Schriftfarbe (Headline)
Diese Einstellung ändert die Schriftfarbe für die Headline.
Schriftfarbe (Text)
Diese Einstellung ändert die Schriftfarbe für den Text.
Bestimmen Sie das Aussehen des Buttons.
Größe (Button)
Bestimmen Sie die Größe des Buttons
Auf dem Smartphone (Portrait) ausblenden
Soll das Overlay mit dem Text auf Smartphone-Größe (hochkant) ausgeblendet werden
Breite
Wie viel Platz soll das Overlay auf dem Bild einnehmen? (Angaben in Prozent empfohlen)
Definieren Sie den Abstand zwischen Schrift und Overlay
Definieren Sie den Abstand zwischen Zeile und Bild
Hintergrundfarbe
Geben Sie der Zeile eine Hintergrundfarbe
*Die Schriftart für Text bzw. Schriftart für Überschriften stellen Sie in den Theme Einstellungen > Typografie & Farben >Typografie fest
Der Button kann verschiedene Varianten darstellen. Welche zur Verfügung stehen, finden Sie im Auswahlfeld. Wie diese in der Darstellung aussehen, finden Sie im Handbuch unter: Theme Einstellungen > Button Style auswählen. Die Farben für die Buttons haben Sie in den Theme Einstellungen unter: Typografie & Farben > Buttons eingestellt
Für den Innen- und Außenabstand können Sie bis zu 4 Werte angeben. Diese werden im Uhrzeigersinn ausgeführt.
1 Wert: 10px = oben, rechts, unten und links wird ein Abstand von 10 Pixel eingefügt
2 Werte: 10px 5px = oben und unten bekommen einen Abstand von 10 Pixel eingefügt, Rechts und links erhalten 5 Pixel Abstand.
3 Werte: 10px 5px 20px= oben wird einen Abstand von 10 Pixel, rechts und links einen Abstand von 5 Pixel und unten 20 Pixel eingefügt.
4 Werte: 10px 5px 20px 15px = oben wird einen Abstand von 10 Pixel, rechts einen Abstand von 5 Pixel, unten ein Abstand von 20 Pixel und links ein Abstand von 15 Pixel eingefügt.
In diesem Block-Element wird der Text, wie beim Bild Message, in einem Overlay dargestellt. In diesem Fall geht das Overlay vom oberen bis unteren Bildschirmrand. Die Breite kann prozentual angepasst werden. Sie können auch hier u. a. die Position des Overlay sowie einige Farbanpassungen vornehmen.
Anzeigemodus
Bestimmen Sie, wie das Bild im Block dargestellt werden soll (Standard, Füllen, Beibehalten).
Standard: passt sich das Bild bis zu seiner Größe an den Bereich an | Füllen: wird der Bereich mit dem Bild komplett gefüllt | Strecken: wird das Bild auf die Größe des Bereiches gestreckt.
Vertikale Ausrichtung
Einstellung gilt beim Anzeigemodus Standard und Strecken. Geben Sie hier an, ob das Bild sich an der oberen oder an der unteren Kante ausrichten soll, oder ob es mittig angezeigt werden soll.
Link zu
Hier können Sie angeben wohin verlinkt werden soll.
Link in neuem Tab öffnen
Der Link wird, bei Aktivierung, in einem neuen Tab geöffnet.
Headline
Headline welche auf dem Banner erscheinen soll
Text
Text welcher auf dem Banner (unter der Headline) erscheinen soll
Button
Button welcher auf dem Banner (unter der Text) erscheinen soll
Wird ein Button verwendet, ist der Link nur im Bereich des Buttons aktiv. Wird kein Button verwendet (Feld bleibt leer) wird der gesamte Bildbereich verlinkt
Schriftart*
Welche Schriftart soll genutzt werden (Schriftart für Text oder Schriftart für Überschriften)
Text Ausrichtung
Soll der Text linksbündig, zentriert oder rechtsbündig positioniert werden
Schriftgröße
Wie groß sollen die Buchstaben dargestellt werden (Angaben in Pixel)
Schriftstärke
Definieren Sie die Schriftstärke (dünn, normal oder fett) für den Text
Schriftfarbe (Headline)
Diese Einstellung ändert die Schriftfarbe für die Headline.
Schriftfarbe (Text)
Diese Einstellung ändert die Schriftfarbe für den Text.
Bestimmen Sie das Aussehen des Buttons
Größe (Button)
Bestimmen Sie die Größe des Buttons
Auf dem Smartphone (Portrait) ausblenden
Soll das Overlay mit dem Text auf Smartphone-Größe (hochkant) ausgeblendet werden
Position
Soll das Overlay links oder rechts vom Bildrand positioniert werden?
Breite
Wie viel Platz soll das Overlay auf dem Bild einnehmen? (Angaben in Prozent)
Definieren Sie den Abstand zwischen Schrift und Overlay
Definieren Sie den Abstand zwischen Zeile und Bild
Hintergrundfarbe
Geben Sie der Zeile eine Hintergrundfarbe
*Die Schriftart für Text bzw. Schriftart für Überschriften stellen Sie in den Theme Einstellungen > Typografie & Farben >Typografie fest
Der Button kann verschiedene Varianten darstellen. Welche zur Verfügung stehen, finden Sie im Auswahlfeld. Wie diese in der Darstellung aussehen, finden Sie im Handbuch unter: Theme Einstellungen > Button Style auswählen. Die Farben für die Buttons haben Sie in den Theme Einstellungen unter: Typografie & Farben > Buttons eingestellt
Für den Innen- und Außenabstand können Sie bis zu 4 Werte angeben. Diese werden im Uhrzeigersinn ausgeführt.
1 Wert: 10px = oben, rechts, unten und links wird ein Abstand von 10 Pixel eingefügt
2 Wert: 10px 5px = oben und unten bekommen einen Abstand von 10 Pixel eingefügt, Rechts und links erhalten 5 Pixel Abstand.
3 Wert: 10px 5px 20px= oben wird einen Abstand von 10 Pixel, rechts und links einen Abstand von 5 Pixel und unten 20 Pixel eingefügt.
4 Wert: 10px 5px 20px 15px = oben wird einen Abstand von 10 Pixel, rechts einen Abstand von 5 Pixel, unten ein Abstand von 20 Pixel und links ein Abstand von 15 Pixel eingefügt.
Sie haben die Möglichkeit eine Kontakt Box auf den Seiten ihres Shops anzuzeigen. Allgemeine oder spezielle (z. B. zu speziellen Hotline Nummern) Kontaktdaten können individuell hinterlegt werden.
Von wo sollen die Inhalte geladen werden?
Headline*
Wie soll der Inhalt für die Headline sein
Anschrift*
Möglichkeit zur Hinterlegung einer Adresse
Öffnungszeiten*
Möglichkeit zur Hinterlegung von Öffnungszeiten
Telefon, Mobil, Fax*
Möglichkeit zur Hinterlegung einer Telefon, Mobil und/oder Fax Nummer
E-Mail*
Möglichkeit zur Hinterlegung einer E-Mail Adresse
Google Maps Link (Link zum Teilen)*
Möglichkeit auf Google Maps zu verlinken
*Diese Einstellungen sind nur bei der Einstellung: Display Mode = Daten individuell eingeben verfügbar
Sie haben zwei Möglichkeiten die Kontaktbox mit Inhalt zu füllen:
Daten individuell eingeben: Bei dieser Auswahl werden die Eingabefelder unter der Auswahl eingeblendet und können ausgefüllt werden. Vorteil: Sie können für bestimmte Seiten z. B. unterschiedliche Service Nummern oder Adresse hinterlegen.
Daten global aus den Theme Einstellungen holen: Hier wird der Inhalt aus den Theme Einstellungen: Produkt Kategorie > Sidebar Kontakt Box geholt. Vorteil: Sie können Änderungen bei Service Nummern oder Adressen global an einer Stelle ändern und müssen nicht jede Shop Seite einzeln durchgehen.
Für besonderen Service oder Eigenschaften Ihres Unternehmens oder Produkte können Sie sogenannte USP verwenden. Sie werden mit einem Icon und einer Headline ausgeliefert. Eine Erklärung unter dem Icon und der Headline ist möglich.
Tragen Sie den Namen des Icons ein
Position
Position des Icons zur Headline
Headline
Inhalt der Headline
Text
Inhalt der Erklärung (optional)
Für jedes USP können Sie in eigenes Icon wählen. Gehen Sie auf: Theme Einstellungen > Icon auswählen, suchen sich dort ein passendes Icon aus und kopieren den Namen des Icons. Diesen fügen Sie anschließend in das Feld: Icon ein.
Icon Größe
Angabe der Schriftgröße des Icons (in Pixel)
Icon Farbe
Angabe der Farbe des Icons
Schriftart
Hier können Sie die Schriftart des Textes ändern. Die Headline behält die Einstellung aus den Theme Einstellungen: Typografie & Farben > Schriftart.
Schriftgröße
Definition der Schriftgröße für den Text (in Pixel) Headline ist vordefiniert.
Schriftstärke
Definition der Strichstärke für den Text? Headline ist vordefiniert.
Schriftfarbe (Headline)
Auswahl der Schriftfarbe für die Headline
Schriftfarbe (Text)
Auswahl der Schriftfarbe für den Text
Hintergrundfarbe (Container)
Auswahl der Hintergrundfarbe für den Container
Rahmenfarbe (Container)
Auswahl der Rahmenfarbe für den Container
Innenabstand (Container)
Definieren Sie den Abstand zwischen Schrift und Container
Mit diesem Block Element können Sie ein Produkte aus dem Shop, über die gesamte Zeile ausgeben lassen.
Produkt
Auswahl des Produkts aus dem Shop
Layout-Typ
Dieser gibt an, wie das Produkt präsentiert werden soll (Standard, Großes Bild, Minimaler Inhalt)
Anzeigemodus
Bestimmen Sie, wie das Bild im Block dargestellt werden soll (Standard, Füllen, Beibehalten)
Vertikale Ausrichtung
Einstellung gilt beim Anzeigemodus Beinhalten und legt fest, wie die Bilder innerhalb des Slider-Elements platziert werden soll. Bei kleineren Bildern werden entsprechende freie Flächen angezeigt.
Mit diesem Block Element können Sie zwei Produkte aus dem Shop nebeneinander ausgeben lassen.
Produkt
Auswahl des Produkts aus dem Shop
Layout-Typ
Dieser gibt an, wie das Produkt präsentiert werden soll (Standard, Großes Bild, Minimaler Inhalt)
Anzeigemodus
Bestimmen Sie, wie das Bild im Block dargestellt werden soll (Standard, Füllen, Beibehalten)
Vertikale Ausrichtung
Einstellung gilt beim Anzeigemodus Beinhalten und legt fest, wie die Bilder innerhalb des Slider-Elements platziert werden soll. Bei kleineren Bildern werden entsprechende freie Flächen angezeigt.
Spalten helfen Ihnen Block-Elemente nebeneinander anzuordnen. Hierfür stehen Ihnen unterschiedliche Möglichkeiten an Spaltenanzahl und Spaltenaufteilung zur Verfügung.
Die Spalte zieht sich über die gesamte Bereite der Einkaufswelt.
Es gibt drei unterschiedliche Aufteilungen für die Ausführung von 2 Spalten. Die Angaben in Prozente zeigen an, wie viel Platz die jeweiligen Spalten einnehmen.
Es gibt vier unterschiedliche Aufteilungen für die Ausführung von 3 Spalten. Die Angaben in Prozente zeigen an, wie viel Platz die jeweiligen Spalten einnehmen.
Bei der 4 Spalten Aufteilung haben alle Spalten eine Breite von 25%.
Bei der 6 Spalten Aufteilung haben alle Spalten eine Breite von 16,6%.
Layouts ermöglichen es Ihnen Elemente unabhängig von dem Zeilenprinzip anzuordnen. Hierfür stehen Ihnen mehrere Raster-Layouts zur Verfügung.
Das Layout One verfügt über 3 Elemente in unterschiedlichen Proportionen. Das Layout steht ebenfalls spiegelverkehrt genutzt werden (mit umgedreht gekennzeichnet).
Das Layout Two verfügt über 3 Elemente in unterschiedlichen Proportionen. Das Layout steht ebenfalls spiegelverkehrt genutzt werden (mit umgedreht gekennzeichnet).
Das Layout Three verfügt über 4 Elemente in unterschiedlichen Proportionen. Das Layout steht ebenfalls spiegelverkehrt genutzt werden (mit umgedreht gekennzeichnet).
Das Layout Four verfügt über 4 Elemente in unterschiedlichen Proportionen. Das Layout steht ebenfalls spiegelverkehrt genutzt werden (mit umgedreht gekennzeichnet).
Das Layout Five verfügt über 3 Elemente in unterschiedlichen Proportionen. Das Layout steht ebenfalls spiegelverkehrt genutzt werden (mit umgedreht gekennzeichnet).