Mit der Dreierbox kannst du, wie der Name schon verspricht, drei Themenboxen nebeneinander individuell gestalten und bekommst damit noch mehr Möglichkeiten in der Contentpflege/-gestaltung.
Kontrollierter Anbau
Unsere Anbauprodukte unterliegen einer stetigen Kontrolle, Überprüfung und Begutachtung
Beste Auswahl an Produkten
Erleben Sie eine riesige Auswahl an verschiedensten Produkten in unserem einzigartigen und liebevollen Onlineshop
Keine Zusatzstoffe
Wir achten sehr darauf, dass unsere Produkte ohne Verwendung von Zusatzstoffen verarbeitet werden
Das Dreierbox Widget
Hier zeigen wir euch einfach mal 2 Beispiele für das Dreierbox Widget, damit ihr eine ungefähre Vorstellung davon bekommt. Im weiteren Verlauf werden wir euch die einzelnen Einstellungsmöglichkeiten zeigen.
Dreierbox Beispiel (Text unter dem Bild)
Vegane Produkte

Keine tierischen Inhaltsstoffe, keine Tierversuche!
Bewusster Leben durch vegane Ernährung: finde in unserem Onlineshop die passenden Produkte..
Jetzt testen

Welche Farben passen zu Ihrem Hauttyp? Finde es heraus mit unserer aktuellen Umfrage und erhalte einen 5-Euro Gutschein auf deine nächste Bestellung!
Aromatherapie

Fruchtig-Frisch Düfte: Lindere Krankheitsbeschwerden oder steigere dein Wohlbefinden mit unserer einzigartigen Auswahl an ätherischen Ölen.
Dreierbox Beispiel (Text auf dem Bild)
Vegane Produkte
Keine tierischen Inhaltsstoffe, keine Tierversuche!
Bewusster Leben durch vegane Ernährung: finde in unserem Onlineshop die passenden Produkte.
Jetzt testen
Welche Farben passen zu Ihrem Hauttyp? Finde es heraus mit unserer aktuellen Umfrage und erhalte einen 5-Euro Gutschein auf deine nächste Bestellung!
Aromatherapie
Fruchtig-Frisch Düfte: Lindere Krankheitsbeschwerden oder steigere dein Wohlbefinden mit unserer einzigartigen Auswahl an ätherischen Ölen.

Globale Einstellungen - Überschrift
Ihr habt in diesem Widget natürlich auch die Möglichkeit, eine Überschrift zu setzen und diese zusätzliche durch Schriftindividualisierungen zu verändern:


Globale Einstellungen - Anzeige-Modus

Im Widget könnt ihr aus 2 verschiedenen Anzeige-Modi wählen: Boxed oder Full-Size Fluid.


Im Modus Boxed wird der Inhalt bzw. das Widget nur über die Content-Breite angezeigt. Im Modus Full-Size Fluid hingegen wird der Bildslider über die komplette Anzeigebreite angezeigt.


Hinweis: Wir haben das Bildmaterial aus Platzgründen von der Höhe reduziert.

Dreierbox Beispiel Boxed
Dreierbox Beispiel Full-Size Fluid

Globale Einstellungen - Kein Abstand links/rechts

Diese Einstellung kann genutzt werden, wenn die Boxen nach links und rechts keinen Abstand zueinander und zum Rand der Anzeige haben sollen. Dadurch entsteht ein nahtloser Übergang.

Dreierbox Beispiel mit Abstand links/rechts
Dreierbox Beispiel kein Abstand links/rechts

BOX Einstellungen - Bild + Bildgröße

Im oberen Bereich der jeweiligen "BOX"-Reiter befinden sich zwei Einstellung, welche das Bildmaterial betreffen: 



  1. Bildmaterial hinterlegen/auswählen
  2. Bildgröße: "Volle Größe" oder "Ausschnitt"

Was ist der Unterschied zwischen den Einstellungen "Volle Größe" und "Ausschnitt"?


Dreierbox Bildgröße = Volle Größe

"Volle Größe": hierbei wird das Bildmaterial nicht abgeschnitten, sondern das Seitenverhältnis kann selbst bestimmt werden. Hier sollte darauf geachtet werden, dass das verwendete Bildmaterial in allen Boxen das gleiche Seitenverhältnis aufweisen.

Dreierbox Bildgröße = Ausschnitt

"Ausschnitt": hier wird, wie der Name schon verrät, nur der Ausschnitt des Bildes angezeigt. Dadurch kann man auch Bilder mit unterschiedlichem Seitenverhältnissen verwenden, ohne das die Boxen danach unterschiedliche Höhen aufweisen. Dadurch kann es aber passieren, dass Teile des Bildmaterial abgeschnitten werden.


BOX Einstellungen - Textfeld 1 - 3 + Textposition

Ihr könnt neben Bildmaterial natürlich auch Textfelder in der Dreierbox verwenden. Es gibt genau drei Textfelder, die ihr nutzen könnt. Ihr habt auch hier wieder die Möglichkeit, jedes einzelne Textfeld mit einer individuelle Schriftkonfiguration auszustatten.

Damit könnt ihr den einzelnen Boxen mehr Inhalt geben und somit den Kunden besser zu Themen leiten.

Zusätzlich könnt ihr auch noch die Textposition bestimmen. Hier könnt ihr auswählen zwischen "Auf dem Bild" und "Unter dem Bild". Wie das aussieht, seht ihr in den folgenden Beispielen:

Dreierbox Beispiel Textfelder "Auf dem Bild"
Textfeld 1
Textfeld 2
Textfeld 3
Textfeld 1
Textfeld 2
Textfeld 3
Textfeld 1
Textfeld 2
Textfeld 3
Dreierbox Beispiel Textfelder "Unter dem Bild"
Textfeld 1
Textfeld 2
Textfeld 3
Textfeld 1
Textfeld 2
Textfeld 3
Textfeld 1
Textfeld 2
Textfeld 3

BOX Einstellungen - Transparenz

Es gibt noch eine weitere Einstellung, welche im Zusammenspiel mit der textposition steht: "Transparenz"

Die Einstellung "Transparenz" funktioniert, wenn sich die Textposition "Auf dem Bild" befindet. Hier wird, zur besseren Lesbarkeit des Textes, eine halbtransparente Box erzeugt, welche sich hinter den Text legt.

Hier ein Beispiel:

Dreierbox Beispiel Textfelder "Auf dem Bild" + Transparenz
Textfeld 1
Textfeld 2
Textfeld 3
Textfeld 1
Textfeld 2
Textfeld 3
Textfeld 1
Textfeld 2
Textfeld 3

BOX Einstellungen - Linksetzung

Auch bei der Dreierbox habt ihr die Möglichkeit, die einzelnen Boxen zu verlinken. Folgende Optionen/Einstellungen gibt es:

  1. Ganze Box klickbar
  2. Link-Darstellung: Button oder Link
  3. Link-Text
  4. Link-URL

 

Es gibt auch hier verschiedene Kombinationen. Gucken wir uns diese mal etwas genauer an.

"Ganze Box klickbar": wenn ihr mit eurem Cursor über die einzelnen Boxen geht, werdet ihr sehen, dass die gesetzten Links das jeweilige Element komplett umschließen

Dreierbox Beispiel - Link-Darstellung "Button"
Textfeld 1
Textfeld 2
Textfeld 3
Textfeld 1
Textfeld 2
Textfeld 3
Textfeld 1
Textfeld 2
Textfeld 3

Link-Darstellung "Button": ihr könnt gesetzte Links als Button darstellen lassen. Der Link-Text bestimmt hier den textlichen Inhalt des Button

Dreierbox Beispiel - Link-Darstellung "Link"
Textfeld 1
Textfeld 2
Textfeld 3
Textfeld 1
Textfeld 2
Textfeld 3
Textfeld 1
Textfeld 2
Textfeld 3

Link-Darstellung "Link": die zweite Darstellungsmöglichkeit ist die Einstellung "Link". Hier wird die Verlinkung als ganz einfacher Textlink angezeigt.


Natürlich sind die Darstellungsvarianten der Linksetzungen auch mit der Einstellung Textposition "Unter dem Bild" möglich. Das ganze sieht dann wie folgt aus:

Dreierbox Beispiel - Link-Darstellung "Button" mit Text unter Bild
Textfeld 1
Textfeld 2
Textfeld 3
Textfeld 1
Textfeld 2
Textfeld 3
Textfeld 1
Textfeld 2
Textfeld 3
Dreierbox Beispiel - Link-Darstellung "Link" mit Text unter Bild
Textfeld 1
Textfeld 2
Textfeld 3
Textfeld 1
Textfeld 2
Textfeld 3
Textfeld 1
Textfeld 2
Textfeld 3
Theme-Switcher