Lesefortschritt:

Seiten mit mehr als 6 Spalten im Divi-Builder bauen

12. Juni 2024 | CSS-Stylesheet, Divi-Theme

Trick # 352 | Dieser Beitrag beinhaltet 1159 Wörter. – Geschätzte Lesezeit: ca. 6 Minuten.

Wieviele Spalten benötigen Sie auf Ihrer Divi-Website? 4, 5 oder 6? Der Builder bietet von Haus aus etwa alle Spalten-Variationen, welche das Herz begehrt. Doch bei 6 ist Ende Gelände. Ausser Sie greifen zu unserem heutigen Trick. Dann können es gerne auch 7, 8 oder 9 Spalten – allenfalls sogar deren 12 sein.

Im Divi-Theme können Sie standardmässig 1- bis maximal 6-spaltige Zeilen anlegen. Hier ein 6-Spalten-Design:

1

2

3

4

5

6

Doch da geht noch mehr. 7-, 8-, 9-, 10-, 11-  oder 12-spaltige Designs lassen sich einrichten. Dafür benötigen Sie einen kleinen Block CSS-Code für das CSS-Stylesheet Ihrer Website. Sie können diesen unter Design/Customizer/Zusätzliches CSS einfügen:

.twelve-columns .et_pb_module {width: 8.33%; float: left;}
.eleven-columns .et_pb_module {width: 9.09%; float: left;}
.ten-columns .et_pb_module {width: 10%; float: left;}
.nine-columns .et_pb_module {width: 11.11%; float: left;}
.eight-columns .et_pb_module {width: 12.5%; float: left;}
.seven-columns .et_pb_module {width: 14.28%; float: left;}

Nun fügen Sie eine einspaltige Zeile hinzu. Bearbeiten Sie die Zeile, wechseln Sie auf den Tab «Erweitert», dann auf «CSS-ID und Klassen» und fügen Sie den gewünschten Klassennamen aus dem CSS-Code ins Textfeld «CSS-Klasse» ein. Für ein 10-spaltiges Design etwa «ten-columns», für ein achtspaltiges «eight-columns».

Nun fügen Sie die passende Anzahl Module untereinenader in die Divi-Zeile ein. Also 8 Module bei einem 8-Spalten-Design, 9 für 9-spaltige Ansichten usw.

Voilà das war’s auch schon: Wir haben hier ein Muster für eine 10-Spalten-Ansicht parat:

1

2

3

4

5

6

7

8

9

10

Recht einfach. Oder?

Werbung

Content zentriert im Browserfenster anzeigen

Einen Websiteinhalt - sei es nun ein Bild, Text oder ein anderes Element - können Sie ganz einfach vertikal und horizontal zentriert im Browserfenster anzeigen. Bei Bedarf werden Sie sogar den Scrollbalken los, falls Sie dieser stört.
Keine Inhalte gefunden.

Werbung

 

Pin It on Pinterest

Share This
Überblick über den Datenschutz

Diese Website verwendet Cookies, damit wir Ihnen die bestmögliche Benutzererfahrung bieten können. Cookie-Informationen werden in Ihrem Browser gespeichert und dienen dazu, Sie wiederzuerkennen, wenn Sie auf unsere Website zurückkehren, und unserem Team zu helfen, zu verstehen, welche Bereiche der Website Sie am interessantesten und nützlichsten finden.