Trick # 219 | Dieser Beitrag beinhaltet 775 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.
Drei Bilder nebeneinander stellen? Das kann jede und jeder. Hübsch wäre ein stylisher Staffelungslook, bei welchem etwa Bild 1 und 3 auf einer Linie erscheinen und Bild 2 leicht versetzt ist. Das lösen Sie mit diesem Trick im Nu.
Zunächst bauen wir im Divi-Builder eine neue Zeile mit 3 Spalten. In jede Spalte setzen wir ein Bildmodul. Etwa so:
Auf der Website sieht das dann so aus:
Nun ja: Von Staffelung ist da noch nicht viel zu sehen. Das kommt jetzt mit ein paar Zeilen CSS-Code. Zunächst müssen Sie jedoch allen Bildmodulen eine CSS-Klasse vergeben:
- Bearbeiten Sie hierfür das erste Bildmodul, wechseln Sie in den Tab «Erweitert», klicken Sie auf «CSS-ID und Klasse» und danach auf «CSS-Klassen». In diesem Textfeld fügen Sie den Klassennamen «bildstaffel_oben» ein.
- Wiederholen Sie die Schritte mit dem Bildmodul in der dritten Spalte.
- Beim Modul in der zweiten Spalte gehen Sie genau gleich vor, vergeben aber dort den Klassennamen «bildstaffel_unten».
Nun zum CSS-Code – Sie finden ihn gleich im Anschluss. Kopieren Sie ihn und fügen Sie diesen dann in das CSS-Stylesheet Ihrer Website ein – unter Design/Customizer/Zusätzliches CSS:
.bildstaffel_oben {
margin-bottom: 50px;
}
.bildstaffel_unten {
margin-top: 50px;
}Nun präsentiert sich die obige Bilderreihe so:
Die Pixelwerte im CSS-Code sollten Sie allenfalls anpassen, damit es hübsch ausschaut.
Werbung
Werbung
