Eine vollbreite Bildergalerie in Divi erstellen
Bildergalerien mit voller Breite sehen auf vielen Webseiten einfach gut aus. Wie ihr eine solche vollbreite Bildergalerie in Divi erstellen könnt, zeige ich euch in diesem Webdesign-Beitrag. Ihr könnt sie ganz einfach nachbauen. Hierzu gehe ich Schritt für Schritt vor. Sollten dennoch Fragen offen bleiben, könnt ihr mir diese gerne in den Kommentaren stellen.
Eine vollbreite Bildergalerie in Divi erstellen – die Vorarbeiten
Wenn ihr dieser Anleitung folgen möchtet, solltet ihr natürlich das Divi-Theme von Elegantthemes installiert und aktiviert haben. Und Bilder brauchen wir natürlich. Für dieses Beispiel reichen 12 Bilder mit einer Größe von 1500 x 800 Pixel. Ich bereite die Bilder mit Adobe Photoshop vor, ihr könnt natürlich die Software eurer Wahl verwenden. Es könnten auch kleinere Bilder verwendet werden, aber ich empfehle diese Größe. Als nächstes müssen die Bilder noch in die Medienübersicht hochgeladen werden. Ich gehe davon aus, das ihr das beherrscht und erkläre das hier nicht noch. Wer hierzu noch Fragen hat, darf mir duiese aber auch sehr gerne stellen. Ich helfe gerne, wenn ich kann.
Eine Seite für die Galerie erstellen
Ich erstelle eine komplett neue Seite für die Galerie, ihr könnt das natürlich handhaben, wie ihr möchtet. Als erstes gehe ich im Backend auf „Seiten“, dann auf „Erstellen“. Ich gebe den Seitentitel an und nutze den Divi-Builder. Die linke Spalte „MIt dem Aufbau beginnen“ ist meine Wahl.
Der nächste Schritt ist das einfügen einer Zeile in die Sektion. Hier wählt ihr einfach das einspaltige Zeilenmodell. Direkt im Anschluss kommt die Aufforderung, ein Modul zu wählen, hier kommt natürlich dann die Bildergalerie zur Auswahl.
Bilder zur Galerie hinzufügen
Der nächste Schritt, ist die Ausweahl der Bilder für die Galerie. Wenn ihr die 12 Bilder bereits hochgeladen habt, müsst ihr sie nur noch in der Medienübersicht auswählen.
Wenn ihr an diesem Punkt die „Bildanzahl“ noch nicht auf 12 gestellt habt, dann erscheint die Anzeige der Standardgalerie, wie folgt.
Ihr stellt die „Bildanzahl im Galeriemodul nun auf 12 um, und wählt aus, welche Elemente angezeigt werden sollen. In diesem Fall stellen wir die Anzeige von „Titel und Bildunterschrift“ und „Nummerierung anzeigen“ aus.
Ihr könnt das Galerie-Modul nun erst einmal beenden und die Einstellungen speichern. Nachfolgend führen wir die Schritte aus, die dazu führen, das wir eine vollbreite Galerie in Divi erstellen.
Sektionseinstellungen und Zeileneinstellungen anpassen
Wir fangen mit den Sektionseinstellungen an. Hier stellen wir lediglich in den Zwischenraumeinstellungen alle Margin- und Padding-Werte auf 0px.
Im Anschluss schließt ihr die Sktionseinstellungen wieder, das war schon alles, was hier eingestellt werden muss. Kommen wir nun zu dem, was aus unserer Bildergalerie eine vollbreite Bildergalerie macht. Wier kümmern uns um die Zeileneinstellungen.
Ihr stellt den Spaltenabstand auf „JA“, den Spaltenabstand auf „1“, die Breite auf „100%“ und ganz wichtig, die maximale Breite (standardmäßig auf 1080p gestellt) ebenfalls auf 100%. Ihr könnt diese Einstellungen nun schließen, alles Speichern und unsere vollbreite Galerie ist fertig.
Das war es auch schon – die vollbreite Galerie
So sieht das ganze nun auf dem Tablet oder einem Smartphone aus:
Hier haben wir nun die Ansicht, die unsere vollbreite Galerie über die ganze Seite erstreckt. Ihr könnt die Galerie aber auch nur Sektions- oder Zeilenweit nutzen und somit noch Textelemente oder andere Dinge auf dieser Seite zeigen. Hier mal ein Beispiel mit einem Titeltext.
Habt ihr eingestellt, das die Bilder mit der Lightbox geöffnet werden können, dann habt ihr eine wirklich schöne Ansicht von Galerie und einzelnen Fotos.
Ich hoffe, ich konnte dem Einen oder Anderen mit diesem Beitrag ein wenig helfen. Wenn euch der Beitrag gefallen hat oder ihr noch Fragen habt, lasst mich das gerne in den Kommentaren wissen. Ansonsten bleibt mir nur, euch viel Spaß mit WordPress und Divi zu wünschen und viel Erfolg beim Gestalten eurer Seiten.
Mein Tipp zum Abschluss
Wenn ihr den Wunsch habt, in WordPress einzusteigen oder eure Kenntnisse grundlegend zu vertiefen, dem lege ich den Videokurs von Oliver Pfeil ans Herz. Hier lernt ihr ALLES was es zu WordPress zu wissen gibt, auf eine angenehme Art und ohne viel Schnick-Schnack.
