Boilerplate-Seite für Widgets
Hier kommen alle Widgets hin, damit man sich den Code kopieren kann
Headerbanner
Dieses Widget kommt an den Anfang von Kategorieseiten und Landingpages. Primär soll mit dem Parameter banner-header medium gearbeitet werden, damit man ein durchgehen visuelle Stabilität hat.
▼▼ WIDGET-ANSICHT ▼▼
Code:
<div class="banner-header medium no-margin" style="background-image: url('https://gartenzaun24.de/media/image/5c/b6/d3/doppelstabmatten-zaunset-656.jpg')"> </div>
Optionen (fett im Code hervorgehoben):
- Option Klasse banner-header (Höhe): Ein Wert muss angegeben sein.
small » 200 Pixel hoch
medium » 300 Pixel hoch
large » 500 Pixel hoch - Option background-image (Bild):
hier muss der Pfad zum Bild (relativ/absolut) angegeben werden
Headline
Dieses Widget kommt an den Anfang von Kategorieseiten und Landingpages direkt unter den Banner. Primär soll mit dem Parameter headline green gearbeitet werden, damit man ein durchgehende visuelle Stabilität hat.
▼▼ WIDGET-ANSICHT ▼▼
Meine tolle Headline
Code:
<h1 class="headline green no-margin">Meine tolle Headline</h1>
Optionen (fett im Code hervorgehoben):
- Option Klasse headline (Farbe): Ein Wert muss angegeben sein.
green » hellgrüner Balken mit dunkelgrünen Rändern oben und unten sowie weisser Schrift
grey » hellgrauer Balken mit dunkelgrauen Rändern oben und unten sowie weisser Schrift
Content-Box (2-teilig)
Dises Widget stellt zwei Content-Bereiche zur Verfügung und zentriert die Inhalte vertikal. Am Breakpoint Mobile werden die beiden Content-Bereiche untereinander dargestellt. Meist sollte links ein Bild und rechts Inhalt eingesetzt werden. Im Beispiel ist das Widget als Verzweigung in eine Unterkategorie mitsamt Icon und eines CTA konfiguriert.
▼▼ WIDGET-ANSICHT ▼▼
Meine tolle Headline
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Code:
<div class="flex-container content-box grey">
<div class="flex-item-one-half">
<img src="https://www.gartenzaun24.de/media/image/fc/90/ba/sichtschutzzaun-system-wpc-classic_800x800.jpg" />
</div>
<div class="flex-item-one-half base-padding text-center">
<img class="element-center" src="https://www.gartenzaun24.de/media/image/WPC.png" />
<h3>Meine tolle Headline</h3>
<p class="spacer-bottom">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p><a href="#image-content-box" class="cta-button white-outline">Zum Produkt »</a></p>
</div>
</div>
Optionen (fett im Code hervorgehoben):
- Option Klasse content-box (Farbe): Ein Wert muss angegeben sein.
grey » mittelgrauer Hintergrund mit hellgrauen Rändern sowie weisser Schrift
green » mittelgrüner Hintergrund mit hellgrünen Rändern sowie weisser Schrift - Option Aufteilung content-box:
flex-item-one-half | flex-item-one-half » Box wird 1:1 aufgeteilt
flex-item-one-third | flex-item-two-third » Box wird 1:2 aufgeteilt
flex-item-two-third | flex-item-one-third » Box wird 2:1 aufgeteilt
