[ad_1]
Im Gegensatz zu seinem Konkurrenten Elementor hat der Divi Builder kein natives Element (Modul) zur Erstellung einer gemauerten Bildergalerie (lies: Elementor vs. Divi). Es gibt nur ein Galeriemodul, mit dem du in Divi Builder eine einfache Bildergalerie erstellen kannst. Es gibt zwei Möglichkeiten, eine gemauerte Bildergalerie in Divi Builder zu erstellen: den schwierigeren und den einfacheren Weg. Bei der schwierigeren Methode musst du JavaScript und CSS hinzufügen, während du bei der einfacheren Methode nicht mit Code hantieren musst. In diesem Beispiel zeigen wir dir, wie du mit Hilfe von Divi Supreme eine gemauerte Galerie in Divi auf die einfachere Art erstellen kannst.
Divi Supreme ist ein Divi-Plugin mit vielen Funktionen. Mit ihm kannst du nicht nur eine Masonry-Galerie erstellen, sondern auch weitere kreative Elemente zu deiner Divi-Seite hinzufügen, wie z. B. einen Inhalts-Toggle, eine Startbewertung (du kannst sogar eine dynamische Sternebewertung erstellen), einen Bild-Hotspot, eine Lottie-Animation und so weiter. Divi Supreme ist auch eine Lösung, um ein Popup in Divi zu erstellen.
Wie man eine Masonry-Bildergalerie in Divi mit Divi Supreme erstellt
Divi Supreme ist eines der beliebtesten Divi-Plugins, das als Freemium-Plugin veröffentlicht wird. Das Modul zur Erstellung einer gemauerten Bildergalerie – das Supreme Masonry Gallery Modul – ist jedoch nur in der Pro-Version verfügbar. Du musst also die Pro-Version verwenden, um mit dem Plugin eine Mauergalerie erstellen zu können. Wenn du zuerst die kostenlose Version ausprobieren möchtest, kannst du sie auf der Plugin-Verzeichnis von WordPress herunterladen.. Für die Pro-Version kannst du es auf der Seite Divi-Marktplatz.
Stelle zunächst sicher, dass du die Pro-Version von Divi Supreme installiert hast. Sobald du bereit bist, bearbeitest du mit dem Divi Builder eine Seite, zu der du die gemauerte Bildergalerie hinzufügen möchtest. Füge im Divi Builder-Editor ein neues Modul hinzu, indem du auf die graue Plus-Schaltfläche klickst und auswählst Supreme Masonry Gallery.
Füge die Bilder, die du der Galerie hinzufügen möchtest, durch Klicken auf den Plus-Button in der Galerie Block unter dem Inhalt Registerkarte im Einstellungsfenster. Da du eine gemauerte Galerie erstellen willst, kannst du Bilder mit verschiedenen Größen (Abmessungen) auswählen.
Du kannst die Einstellungen Block unter dem Inhalt Registerkarte, um Overlay und Leuchtkasten zu aktivieren. Es gibt zwei weitere Optionen, die du hier aktivieren kannst: Horizontale Anordnung und Zoom bei Hover.
Wenn du einen Link hinzufügen möchtest, kannst du die Link Block. Um die Hintergrundfarbe einzustellen, kannst du die Hintergrund Block.
Die Galerie aufpeppen
Sobald du mit den Grundeinstellungen der Galerie fertig bist Inhalt Registerkarte, kannst du zur Registerkarte Entwurf Registerkarte, um die Galerie weiter zu gestalten. Es gibt neun Blöcke, die du hier öffnen kannst:
Du kannst diesen Block öffnen, um die Anzahl der Spalten pro Zeile sowie den Abstand zwischen den Spalten festzulegen.
Wenn du das Overlay auf dem Inhalt Auf der Registerkarte Inhalt kannst du diesen Block öffnen, um die Typografie (Schriftfamilie, Schriftgröße, Schriftart usw.) und die Textfarbe der Textkomponenten der Bilder (Beschreibung, Titel und Bildunterschrift) festzulegen.
Du kannst diesen Block öffnen, um den Rahmen der Bilder in der Galerie festzulegen. Das kann der Radius, die Größe, der Stil oder die Farbe des Rahmens sein.
Du kannst diesen Block öffnen, um die Größe der Galerie einzustellen.
Du kannst diesen Block öffnen, um den Abstand der Galerie festzulegen (Margin und Padding)
Du kannst diesen Block öffnen, um den Rahmen der Galerie festzulegen. Von der Rahmengröße, dem Rahmenradius, der Rahmenfarbe bis hin zum Rahmenstil.
Du kannst diesen Block öffnen, um CSS-Filter auf die Bilder in der Galerie anzuwenden. Es gibt acht Filtertypen, die du anwenden kannst: Farbton, Sättigung, Helligkeit, Kontrast, Invertieren, Sepia, Deckkraft, Weichzeichnen.
Divi verfügt über eine integrierte CSS-Transformationsfunktion. Du kannst diesen Block öffnen, um die CSS-Transformation auf deine Galerie anzuwenden. In diesem Artikel erfährst du mehr darüber, wie du die CSS-Transformation in Divi anwenden kannst.
Du kannst diesen Block öffnen, um eine Eingangsanimation auf deine Galerie anzuwenden.
Übrigens, hier ist ein Beispiel für eine gemauerte Bildergalerie, die mit Divi Supreme erstellt wurde:
[ad_2]
