Test
column-bg (...eigene Hintergründe für einzelne Spalten)
Die hier vorgestellte Methode ermöglicht es, einzelne Spalten in Spaltenelementen mit eigenen Hintergründen zu versehen, die vorher per CSS festgelegt wurden (s. Anleitung Fullwidth-Backgrounds).
HowToDo
Zur Formatierung der Spalte wird ein html-Widget mit folgendem Inhalt innerhalb der Spalte eingesetzt:
<p class="hide">
formatiere diese Spalte: column-bg bg-img1 font-white
</p>
<div class="column-bg bg-img1 font-white">
</div>
Darin bedeuten:
- "column-bg" der Trigger, der die Formatierung auslöst
- "bg-img1" die Klasse des im CSS definierten Hintergrundes
- "font-white" die Anweisung für die Schriftfarbe
Für weiteren Spalten wird analog vorgegangen. Abstände können entweder mit Abstandselementen oder mit transparenten Bildern in Bildelementen angelegt werden. letztere werden auch in mobilen Ansichten dagestellt (skaliert).
Beispiel:
Skripte
formatiere diese Spalte: column-bg bg-img1 font-white
Lorem ipsum
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
formatiere diese Spalte: column-bg bg-img2 font-white parallax-bg
Lorem ipsum
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
formatiere diese Spalte: column-bg bg-img1 font-white
Lorem ipsum
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
formatiere diese Spalte: column-bg bg-img2 font-white parallax-bg
Lorem ipsum
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
upper element even
Skripte
Für die Ausführung des Widgets müssen folgende Skripte im head-Bereich der Webseite vorhanden sein:
<link type="text/css" media="all" href="https://redesign-berlin.limacity.de/__css/hide.css" rel="stylesheet" />
<link type="text/css" media="all" href="https://redesign-berlin.limacity.de/__widgets/fullwidth-animations/column-bg.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://redesign-berlin.lima-city.de/__widgets/fullwidthanimations/column-bg.js" type="text/javascript"></script>
Anmerkung: Es ist möglich, die Spaltenreihenfolge für ein Spaltenelement in der mobilen Ansicht umzudrehen, indem ein Widget mit folgendem Inhalt unter das Spaltenelement gelegt wird:
<p class="hide">
upper element even
</p>
<div class="create_even">
</div>
Anleitung
