DIVI MODUL – GALERIE MIT 3 ODER WENIGER SPALTEN

Mit dem Divi Gallery-Modul kann man einfache Bildergalerien in einem responsiven Rasterlayout erstellen. Die Galerie ist einfach aber reaktionsschnell, da sie die Größe Ihrer Bilder automatissch skaliert und die Anzahl der Spalten im Raster an die verschiedenen Browserbreiten anpasst.

Dabei gibt es Standardmäßig 3 Breakpionts (Punkte,bei an denen sich der Stil bei bestimmten Browserbreiten ändert), um die Anzahl der Spalten im Raster und damit die optimale Darstellung anzupassen. Die  Bildergalerie wird in vier Spalten auf dem Desktop angezeigt und dann in drei Spalten auf den meisten Tablets, zwei Spalten auf kleinen Tablets (und großen Smartphones) und eine Spalte auf dem Telefon aufgeteilt.

Diese Standardeinstellung funktioniert in den allermeisten Fällen. Manchmal möchte man jedoch mehr Kontrolle über die Anzahl der Spalten haben, die bei bestimmten Browserbreiten angezeigt werden. Deshalb schauen wir uns in diesem Tutorial an, wie wir die Anzahl der Spalten nach eigenen Wünschen beeinflussen können.

Vorbereiten der Gestaltungselemente

Wie benötigen 12 Bilder, die der Medienbibliothek hinzugefügt wurden, um die Bildergalerie zu erstellen. Bei einem Divi-Galerie-Modul mit einem Raster-Layout sollte die Größe Ihrer Bilder etwa 1500 x 800 Pixel betragen, wenn man die Bilder in der Lightbox-Ansicht zu öffnen möchte. So füllen sie auf den meisten Desktops den Bildschirm gut aus.

Methode 2: Arbeiten mit Media-Queries

Mit diesen Media Queries kann man die Spaltenaufteilung für die Gallery je nach Fensterbreite des Browsers anpassen. 

** Desktop **/
@media (min-width: 981px){
.col-width .et_pb_gallery_item {
width: 16.66% !important; /*six columns*/
clear: none !important;
}
}
 
/** Tablet **/
@media (max-width: 980px){
.col-width .et_pb_gallery_item {
width: 25% !important; /*four columns*/
clear: none !important;
}
}
 
/** Small Tablet and Large Phone **/
@media (max-width: 767px){
.col-width .et_pb_gallery_item {
width: 33.33% !important; /*three columns*/
clear: none !important;
}
}
 
/** Phone **/
@media (max-width: 479px){
.col-width .et_pb_gallery_item {
width: 50% !important; /*two columns*/
clear: none !important;
}
}