Ändern der Spaltenanzahl im Divi Gallery-Modul an verschiedenen Haltepunkten

Das Divi-Galerie-Modul ermöglicht es Ihnen, schöne Bildergalerien in einem ansprechenden Raster-Layout zu erstellen. Die Galerie gilt als responsive, da sie die Größe Ihrer Bilder skaliert und die Anzahl der Spalten im Raster an unterschiedliche Browserbreiten anpasst.

Standardmäßig verfügt das Galeriemodul über drei Haltepunkte (Punkte, an denen sich der Stil bei bestimmten Browserbreiten ändert), die die Anzahl der Spalten im Raster anpassen. Ihre Bildergalerie wird auf dem Desktop in vier Spalten angezeigt und dann auf dem Tablet in drei Spalten, auf kleinen Tablets (und großen Telefonen) in zwei Spalten und auf Telefonen in eine Spalte unterteilt.

Diese Standardeinstellung funktioniert normalerweise in den meisten Fällen, aber manchmal benötigen Sie möglicherweise mehr Kontrolle über die Anzahl der Spalten, die auf bestimmten Browserbreiten angezeigt werden. Aus diesem Grund zeige ich Ihnen in diesem Tutorial, wie Sie die Anzahl der im Divi Gallery-Modul angezeigten Spalten nicht nur für den Desktop, sondern auch für drei zusätzliche Browser-Breakpoints vervollständigen.

Vorgeschmack

Hier ist ein kleiner Vorgeschmack auf das, was wir in diesem Tutorial erstellen werden. Beachten Sie die unterschiedliche Anzahl von Spalten für die Bildergalerie bei unterschiedlichen Browserbreiten.

Vorbereiten Ihrer Designelemente

Abonnieren Sie unseren Youtube-Kanal

Für dieses Tutorial muss das Divi-Theme installiert und aktiv sein. Sie benötigen außerdem 12 Bilder, die Ihrer Medienbibliothek hinzugefügt wurden, um sie für den Aufbau der Bildergalerie zu verwenden. Für ein Divi-Galerie-Modul, das ein Raster-Layout verwendet, sollte die Größe Ihrer Bilder etwa 1500 x 800 Pixel betragen, wenn Sie planen, dass Ihre Bilder in der Lightbox-Anzeige geöffnet werden, damit sie den Bildschirm auf den meisten Desktops gut ausfüllen.

Implementieren des benutzerdefinierten Abstands für das Divi Gallery-Modul

Einrichten einer neuen Seite

Erstellen Sie zunächst eine neue Seite, geben Sie Ihrer Seite einen Titel und stellen Sie den Divi Builder bereit. Wählen Sie die Option „Build from Scratch“ und veröffentlichen Sie dann Ihre Seite. Klicken Sie dann auf , um auf dem Frontend zu bauen.

Erstellen der Bildergalerie

Wenn der Divi Builder bereitgestellt ist, erstellen Sie einen neuen regulären Abschnitt mit einer einspaltigen Zeile und fügen Sie der Zeile ein Divi Gallery-Modul hinzu.

Divi füllt das Galeriemodul mit einigen Bildern aus Ihrer Mediengalerie in einer Rasteranzeige wie der folgenden:

Klicken Sie in den Einstellungen des Galeriemoduls auf das graue Plus-Symbol, um der Galerie 12 Bilder hinzuzufügen.

Aktualisieren Sie dann die Einstellungen des Divi Gallery-Moduls wie folgt:

Anzahl der Bilder: 12
Titel und Bildunterschrift anzeigen: NEIN
Paginierung anzeigen: NEIN

Passen Sie die Zeileneinstellungen an, um eine Galerie in voller Breite ohne Bundstegbreite zu erstellen

Damit unsere neue Spaltenstruktur funktioniert, müssen wir vor allem den Standardabstand / -rand zwischen unseren Bildern in der Galerie entfernen. Dazu müssen wir lediglich die Bundstegbreite auf 1 setzen. Optional können Sie die Zeile auch auf volle Breite setzen, damit die Bildergalerie die volle Breite des Browsers umfasst. Öffnen Sie dazu die Zeileneinstellungen und aktualisieren Sie Folgendes:

Machen Sie diese Zeile in voller Breite: JA
Dachrinnenbreite: 1

Wenn Sie den Abstand zwischen den Bildern in der Galerie hinzufügen möchten, schlage ich vor, diese Methode zu verwenden, da wir die Bundstegbreite auf 1 setzen müssen.

Wie die Galerie standardmäßig auf verschiedene Browserbreiten reagiert

Wie bereits erwähnt, zeigt das Divi-Galeriemodul Ihre Bildergalerie standardmäßig in vier Spalten auf dem Desktop an und teilt sie dann auf dem Tablet in drei Spalten, auf kleinen Tablets (und großen Telefonen) in zwei Spalten und auf Telefonen in eine Spalte auf.

Wir werden dies jedoch ändern, um eine benutzerdefinierte Anzahl von Spalten an bestimmten Breakpoints mit einigen benutzerdefinierten CSS-Schnipseln hinzuzufügen.

Festlegen einer bestimmten Anzahl von Spalten für alle Browsergrößen

Wenn Sie die Anzahl der in der Galerie angezeigten Spalten so ändern möchten, dass die Anzahl der Spalten bei allen Browsergrößen gleich bleibt, können Sie dies auf einfache Weise tun. Dies kann hilfreich sein, wenn Sie Ihre Galerie nur in einer Spalte, zwei Spalten oder drei Spalten anzeigen möchten. Auf diese Weise können Sie wirklich große Bilder auf dem Desktop und kleinere Bilder auf dem Handy haben, während die Spaltennummer gleich bleibt. Vier oder mehr Spalten werden wahrscheinlich nicht funktionieren, da die Bilder für Telefondisplays zu klein sind.

Angenommen, Sie möchten drei Spalten in allen Browsergrößen anzeigen. Öffnen Sie dazu die Einstellungen Ihres Divi-Galeriemoduls und fügen Sie das folgende benutzerdefinierte CSS zum Galerieelement hinzu:

width: 33.33% !important;
margin: 0 !important;
clear: none !important;

Jetzt behält Ihre Galerie die dreispaltige Struktur in allen Browsergrößen bei.

Wenn Sie ein 2-Spalten-Layout für alle Browsergrößen wünschen, müssen Sie nur den Wert der width-Eigenschaft auf 50 % ändern.

Wenn Sie ein 1-Spalten-Layout wünschen, aktualisieren Sie einfach die Breite auf 100 %.

Das ist es.

Wenn Sie jedoch mehr Kontrolle über die Anzahl der Spalten an bestimmten Breakpoints haben möchten, lesen Sie weiter.

Ändern der Spaltenanzahl für bestimmte Haltepunkte

Wenn Sie die vollständige Kontrolle über die Anzahl der angezeigten Spalten erlangen möchten, wenn der Browser bestimmte Breakpoints erreicht, können wir einige CSS-Schnipsel mit Medienabfragen verwenden, die auf bestimmte Browserbreiten abzielen.

Fügen Sie die CSS-Klasse zum Divi Gallery-Modul hinzu

Bevor wir das benutzerdefinierte CSS hinzufügen, müssen wir unserem Galeriemodul zunächst eine benutzerdefinierte CSS-Klasse zuweisen, damit wir auf diese bestimmte Klasse in unserem CSS verweisen können. Dadurch wird sichergestellt, dass unser CSS nur auf dieses spezielle Galeriemodul angewendet wird. Öffnen Sie dazu die Einstellungen des Galeriemoduls und fügen Sie die folgende CSS-Klasse unter der Registerkarte "Erweitert" hinzu:

CSS-Klasse: col-width

Vergessen Sie nicht, das benutzerdefinierte CSS zu entfernen, das dem Galerieelement im vorherigen Abschnitt dieses Artikels hinzugefügt wurde, wenn Sie es hinzugefügt haben.

Speichern Sie anschließend Ihre Einstellungen.

Benutzerdefiniertes CSS zu den Seiteneinstellungen hinzufügen

Nachdem Sie Ihre CSS-Klasse eingerichtet haben, können Sie das benutzerdefinierte CSS hinzufügen. Öffnen Sie die Seiteneinstellungen, indem Sie auf das Zahnradsymbol in der Seiteneinstellungsleiste unten auf der Seite klicken (oder Sie können die Tastenkombination „o“ verwenden).

Fügen Sie dann das folgende benutzerdefinierte CSS unter der Registerkarte "Erweitert" hinzu.

/** 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;
}
}

Dieses CSS fügt bestimmten Breakpoints wie folgt eine benutzerdefinierte Anzahl von Spalten hinzu:

Desktop: 6 Spalten
Tablet: 4 Spalten
Kleines Tablet und großes Telefon: 3 Spalten
Telefon: 2 Spalten

CSS verstehen und anpassen

Wenn Sie sich das CSS ansehen, werden Sie feststellen, dass es in vier separate Medienabfragen unterteilt ist. Die Top-Medienabfrage fügt Desktop-Browsern (Browser mit einer Mindestbreite von 981 Pixeln) ein Styling hinzu. Die zweite Medienabfrage fügt Browsern in der Größe eines Tablets ein Styling hinzu usw.

Innerhalb jeder Medienabfrage ist das wichtigste CSS, das Sie nicht verwenden sollten, die width-Eigenschaft. Dies bezeichnet die Größe jedes Galerieelements und legt auch die Spaltenbreite für die Galerie fest.

Beispielsweise legt die Top-Medienabfrage für Desktop die Breite des Galerieelements auf 16,66 % fest.

Dies entspricht einem Sechstel der Gesamtbreite seines Containers (oder seiner Reihe). Daher zeigt die Galerie auf dem Desktop ein sechsspaltiges Layout an.

Um die Anzahl der Spalten für den Desktop anzupassen, müssen Sie lediglich die width-Eigenschaft auf einen anderen Wert ändern. Hier ist eine Liste mit Breitenprozentsätzen, die Sie ausprobieren können.

12 Spalten: 8,33%
10 Spalten: 10%
8 Spalten: 12,5%
6 Spalten: 16,66%
5 Spalten: 20%
4 Spalten: 25%
3 Spalten: 33,33 %
2 Spalten: 50%
1 Spalte: 100 %

Endergebnis

Hier ist das Endergebnis zu den verschiedenen Browserbreiten.

Desktop (6 Spalten)

Tablet (4 Spalten)

Kleines Tablet und großes Telefon (3 Spalten)

Telefon (2 Spalten)

Abschließende Gedanken

Ich hoffe, dieses Tutorial war hilfreich für diejenigen unter Ihnen, die mehr Kontrolle über die Anzahl der Spalten erlangen möchten, die Ihre Galerie auf bestimmten Geräten oder Haltepunkten anzeigt. Mit diesem Setup können Sie eine beliebige Anzahl von Spalten für jede Browserbreite hinzufügen, um Galerieanzeigen mit Blick auf den Benutzer zu erstellen.

Die Haltepunkte, die ich im benutzerdefinierten CSS verwendet habe, sind die Haltepunkte, die Divi bereits verwendet. Weitere Informationen zu diesem Konzept finden Sie in unserem Beitrag zur Feinabstimmung Ihrer Designs mit Medienabfragen.

Bis zum nächsten Mal freue ich mich, von Ihnen in den Kommentaren zu hören.

Danke schön!