Lesefortschritt:

Bilder-Special – Trick #4: Lückenloses Bildergitter im Divi-Theme erstellen

9. März 2023 | CSS-Stylesheet, Divi-Theme, Mediathek

Dieser Beitrag beinhaltet 1006 Wörter. – Geschätzte Lesezeit: ca. 6 Minuten.

Mit dem Bildmodul des Divi-Themes lässt sich auch eine hübsche Bilderreihe erstellen. Eine Mini-Galerie quasi. Ein wenig Handarbeit braucht’s allerdings noch. Schwierig wird’s indes nicht.

Zunächst erstellen wir zwei Divizeilen mit jeweils drei Spalten. In jede Spalte kommt ein Bildmodul. Das sieht etwa so aus:

Ohne Zutun zeigt sich dieses Bildergitter aber noch nicht eben hübsch auf der Live-Website:

Mit ein wenig Handarbeit lassen sich aber die unschönen Lücken schliessen: Vergeben Sie den beiden Divizeilen einen CSS-Klassennamen. Wir schlagen «bildergitter_randlos» vor. Diesen Namen können einfügen, wenn Sie die Divi-Zeile bearbeiten, in den Tab «Erweitert» wechseln, dort auf «CSS-ID & Klassen» klicken und den Namen (eben: bildergitter_randlos) im Feld «CSS-Klassen» eintragen.

Nun müssen Sie noch die Anweisungen für diese Klasse hinterlegen. Am besten kopieren Sie folgenden Code in das CSS-Stylesheet Ihrer Website – unter Design/Customizer/Zusätzliches CSS:

.bildergitter_randlos {
   padding: 0px;    
   width: 100%;
   }
.bildergitter_randlos .et_pb_column {
   margin: 0px !important;
   }

Und schon sieht das Bildergitter von oben wie folgt aus:

Übrigens: Die Bilder wurden auf der Insel Jersey aufgenommen. Als Reiseziel empfehlenswert.

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