Beispiele für das Widget Viererbox

Mit der Viererbox kannst du, wie der Name schon verspricht, vier Themenboxen nebeneinander individuell gestalten und bekommst damit noch mehr Möglichkeiten in der Contentpflege/-gestaltung.
High Fidelity
Finde den Qualitätsstandard für Audio-Wiedergabegeräte in unserem Shop



Jetzt entdecken >>>
Run Run Run
Laufen hält jung und macht fit! Finde noch heute die passenden Schuhe bei uns



Jetzt entdecken >>>
Wintersportgeräte
Egal ob Ski, Snowboards oder Glides, bei uns findest du das passende Gerät



Jetzt entdecken >>>
Schönheit Tanzen
Tanz, Modern Dance oder Tanztheater - Lass dich von unseren Experten beraten



Jetzt entdecken >>>
Das Viererbox Widget
Hier haben wir euch mal ein weiteres, nicht ganz so verrücktes Beispiel des Viererbox Widgets gebaut. Dies soll euch kurz die Variationsfähigkeit des Widgets aufzeigen und für was ihr es ungefähr einsetzen könnt.
Viererbox Beispiel (ohne individuelle Farben)
High Fidelity
Finde den Qualitätsstandard für Audio-Wiedergabegeräte in unserem Shop



Jetzt entdecken >>>
Run Run Run
Laufen hält jung und macht fit! Finde noch heute die passenden Schuhe bei uns



Jetzt entdecken >>>
Wintersportgeräte
Egal ob Ski, Snowboards oder Glides, bei uns findest du das passende Gerät



Jetzt entdecken >>>
Schönheit Tanzen
Tanz, Modern Dance oder Tanztheater - Lass dich von unseren Experten beraten



Jetzt entdecken >>>
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.

Viererbox Beispiel Boxed
Viererbox 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.
Viererbox Beispiel mit Abstand links/rechts
Viererbox 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"?
Viererbox 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.
Viererbox 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

Ihr könnt neben Bildmaterial natürlich auch Textfelder in der Viererbox 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.

Viererbox Beispiel Textfelder
Textfeld 1
Textfeld 2
Textfeld 3
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
Viererbox Beispiel - Link-Darstellung "Button"
Textfeld 1
Textfeld 2
Textfeld 3
Button
Textfeld 1
Textfeld 2
Textfeld 3
Button
Textfeld 1
Textfeld 2
Textfeld 3
Button
Textfeld 1
Textfeld 2
Textfeld 3
Button
Link-Darstellung "Button": ihr könnt gesetzte Links als Button darstellen lassen. Der Link-Text bestimmt hier den textlichen Inhalt des Button
Viererbox Beispiel - Link-Darstellung "Link"
Textfeld 1
Textfeld 2
Textfeld 3
Link
Textfeld 1
Textfeld 2
Textfeld 3
Link
Textfeld 1
Textfeld 2
Textfeld 3
Link
Textfeld 1
Textfeld 2
Textfeld 3
Link
Link-Darstellung "Link": die zweite Darstellungsmöglichkeit ist die Einstellung "Link". Hier wird die Verlinkung als ganz einfacher Textlink angezeigt.
BOX Einstellungen - individuelle Farben
Mit den "individuellen Farben" hast du immer die Möglichkeit, deine Elemente farblich abzuheben und zu individualisieren. Im Falle des Viererbox Widgets gibt es nur eine Einstellung: Hintergrundfarbe.

Die Hintergrundfarbe bezieht sich hierbei auf die Box, wo die Textfelder enthalten sind, also direkt unter dem Bild. Hier kannst mit unserem eingebauten Tool deine gewünschte Farbe auswählen und somit einfach und schnell Akzente setzen.
Theme-Switcher