Lesefortschritt:

Seiten mit mehr als 6 Spalten im Divi-Builder bauen

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

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

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This