Das Teilen einer Sammlung von Bildern auf Divi ist immer eine großartige Möglichkeit, Benutzer visuell an Ihren Inhalten zu beteiligen. Mit dem Galerie-Modul von Divi können Sie Galerien überall auf Ihrer Website erstellen und organisieren. Das Galeriemodul von Divi Builder ist im Raster- und Schiebereglerformat verfügbar und unterstützt große Galerien mit Paginierung.

So fügen Sie Ihrer Seite ein Galerie-Modul hinzu

Bevor Sie Ihrer Seite ein Galeriemodul hinzufügen können, müssen Sie zuerst in den Divi Builder springen. Einmal die Divi-Thema auf Ihrer Website installiert ist, werden Sie eine Schaltfläche bemerken Verwenden Sie Divi Builder über dem Post-Editor, wenn Sie eine neue Seite erstellen. Klicken Sie auf diese Schaltfläche, um Divi Builder zu aktivieren und auf alle Divi Builder-Module zuzugreifen. Klicken Sie dann auf die Schaltfläche Verwenden Sie Visual Builder um den Generator im visuellen Modus zu starten. Sie können auch auf die Schaltfläche klicken Verwenden Sie Visual Builder Wenn Sie Ihre Website im Vordergrund durchsuchen, wenn Sie mit Ihrem WordPress-Dashboard verbunden sind.

Nachdem Sie Visual Builder eingegeben haben, können Sie auf die graue Plus-Schaltfläche klicken, um Ihrer Seite ein neues Modul hinzuzufügen. Neue Module können nur innerhalb von Zeilen hinzugefügt werden. Wenn Sie eine neue Seite starten, denken Sie daran, Ihrer Seite zuerst eine Zeile hinzuzufügen. Wir haben großartige Tutorials zur Verwendung der Elemente von Linien und Abschnitte von Divi.

Suchen Sie das Galeriemodul in der Liste der Module und klicken Sie darauf, um es Ihrer Seite hinzuzufügen. Die Liste der Module ist durchsuchbar. Sie können also auch das Wort "Galerie" eingeben und dann auf die Eingabetaste klicken, um das Galeriemodul automatisch zu finden und hinzuzufügen! Sobald das Modul hinzugefügt wurde, werden Sie von der Moduloptionsliste begrüßt. Diese Optionen sind in drei Hauptgruppen unterteilt: Inhalt , Technologie et fortgeschritten .

Beispiel für einen Anwendungsfall: Hinzufügen einer Bildergalerie in voller Breite, um das Foto zu präsentieren.

Das Hinzufügen einer Galerie zu Ihrer Fotoseite ist eine großartige Möglichkeit fördern Ihre Arbeit und erhöhen Sie Ihre Glaubwürdigkeit bei Kunden. In diesem Beispiel zeige ich Ihnen, wie Sie mit dem Galeriemodul eine Bildergalerie mit einem Rasterlayout hinzufügen können, das sich über die gesamte Breite der Seite erstreckt. Die Bilder haben keinen Abstand zwischen sich, was ihr eine praktische und ästhetische Präsentation verleiht.

Und vergessen wir nicht, dass jedes Bild ein Popup öffnet, um durch die größeren Versionen der Bilder in der Galerie zu blättern.

Fügen Sie mit Visual Builder einen neuen Abschnitt unter dem Kopfzeilenabschnitt mit einer Zeile voller Breite oder voller Breite (1 Spalte) hinzu. Fügen Sie dann das Galerie-Modul zur Zeile hinzu.

Aktualisieren Sie die Einstellungen des Galerie-Moduls wie folgt:

Inhaltsoptionen

Galeriebilder: Klicken Sie auf die aktualisierte Galerie und wählen Sie die Bilder aus, die Sie in die Galerie aufnehmen möchten. Anzahl der Bilder: 12 Titel und Beschriftung anzeigen: NEIN Paginierung anzeigen: NEIN

Design-Optionen

Layout: Raster Miniaturansicht: Querformat Zoom-Symbol Farbe: #ffffff Farbe des Hover-Hover: rgba (0,0,0,0.48) Hover-Symbolauswahl: Standard

Einstellungen speichern

Jetzt müssen Sie nur noch den gesamten Raum um die Bilder herum entfernen. Gehen Sie zurück und wählen Sie die Zeileneinstellungen. Aktualisieren Sie auf der Registerkarte Design Folgendes:

Machen Sie diese Zeile in voller Breite: JA
Verwenden Sie die benutzerdefinierte Rinnenbreite: JA
Dachrinnenbreite: 1

Es ist wichtig zu beachten, dass der numerische Wert "1" für die Rinnenbreite wirklich Null ist (überhaupt keine Breite).

Einstellungen speichern

Das ist es!

Inhaltsoptionen des Galeriemoduls

Auf der Registerkarte Inhalt finden Sie den gesamten Inhalt des Moduls, z. B. Text, Bilder und Symbole. All das steuert was erscheint in Ihrem Modul immer auf dieser Registerkarte.

Bilder der Galerie

Klicken Sie auf die Schaltfläche Aktualisieren Tag die Galerie um die WordPress-Multimedia-Bibliothek zu starten, in der Sie die Bilder auswählen können, die Sie in Ihrer Galerie anzeigen möchten.

Anzahl der Bilder

Legen Sie die Anzahl der Bilder fest, die pro Seite angezeigt werden sollen. Wenn Ihre Galerie mehr Bilder enthält, als auf jeder Seite zulässig sind, wird die Paginierung unter den Bildern angezeigt.

Titel und Bildunterschrift anzeigen:

Wenn ein Bildtitel oder eine Bildunterschrift hinzugefügt wurde, werden diese unter dem Bild in der Galerie angezeigt. Wenn Sie diese Textelemente deaktivieren möchten, können Sie dies mit dieser Option tun.

Paginierung anzeigen

Wenn Ihre Galerie mehr Bilder enthält, als auf jeder Seite zulässig sind, wird die Paginierung unter den Bildern angezeigt. Wenn Sie Paging entfernen möchten, können Sie diese Einstellung deaktivieren.

Admin Label

Dadurch wird die Modulbezeichnung im Konstruktor zur einfachen Identifizierung geändert. Wenn Sie die WireFrame-Ansicht in Visual Builder verwenden, werden diese Beschriftungen im Modulblock der Divi Builder-Oberfläche angezeigt.

Galeriemodul-Design-Optionen

Auf der Registerkarte Design finden Sie alle Stiloptionen für das Modul, z. B. Schriftarten, Farben, Größe und Abstand. Auf dieser Registerkarte können Sie das Erscheinungsbild Ihres Moduls ändern. Jedes Divi-Modul verfügt über eine lange Liste von Designeinstellungen, mit denen Sie Änderungen vornehmen können.

Bereitstellung

Standardmäßig werden Galerien als Bildraster angezeigt. Sie können Ihre Galerie auch als Bildschieberegler anzeigen.

Miniaturbildausrichtung

Sie können wählen, ob die Bilder aus Ihrer Galerie im Hoch- oder Querformat angezeigt werden sollen. Wenn Sie den Modus ändern, müssen Sie möglicherweise regeneriere deine Thumbnails .

Zoom-Farbsymbol

Wenn Sie mit der Maus über ein Element im Galerie-Pod fahren, wird ein Überlagerungssymbol angezeigt. Sie können die von diesem Symbol verwendete Farbe mithilfe des Farbwählers in dieser Einstellung anpassen.

Bewegen Sie den Mauszeiger über die Farbe

Wenn Sie mit der Maus über ein Element im Galerie-Pod fahren, wird oben im Bild und unter dem Titel und dem Symbol des Portfolio-Titels eine Überlagerungsfarbe angezeigt. Standardmäßig wird eine halbtransparente weiße Farbe verwendet. Wenn Sie eine andere Farbe verwenden möchten, können Sie die Farbe mit dem Farbwähler in dieser Einstellung anpassen

Überflug Selector Icon (Hover)

Hier können Sie ein benutzerdefiniertes Symbol auswählen, das angezeigt wird, wenn ein Besucher mit der Maus über Galerieelemente im Modul fährt.

Textfarbe

Hier können Sie wählen, ob Ihr Text hell oder dunkel sein soll. Wenn Sie auf einem dunklen Hintergrund arbeiten, sollte Ihr Text hell sein. Wenn Ihr Hintergrund hell ist, sollte Ihr Text dunkel sein.

Titel Schriftart

Sie können die Schriftart Ihres Titeltextes ändern, indem Sie die gewünschte Schriftart aus dem Dropdown-Menü auswählen. Divi wird mit Dutzenden großartiger Schriftarten geliefert, die von Google Fonts unterstützt werden. Standardmäßig verwendet Divi die Schriftart Open Sans für den gesamten Text auf Ihrer Seite. Sie können den Stil Ihres Textes auch mit Fett, Kursiv, Großbuchstaben und Unterstreichungsoptionen anpassen.

Schriftgröße des Titels

Hier können Sie die Größe Ihres Titeltextes anpassen. Sie können den Bereichsregler ziehen, um die Größe Ihres Texts zu erhöhen oder zu verringern, oder den gewünschten Wert für die Textgröße direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten. Dies bedeutet, dass Sie je nach Größenwert "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Titel Textfarbe

Standardmäßig werden alle Textfarben in Divi in ​​Weiß oder Dunkelgrau angezeigt. Wenn Sie die Textfarbe Ihres Titels ändern möchten, wählen Sie mit dieser Option die gewünschte Farbe aus der Farbauswahl.

Abstand der Titelbriefe

Der Buchstabenabstand beeinflusst den Abstand zwischen den einzelnen Buchstaben. Wenn Sie den Abstand zwischen den einzelnen Buchstaben in Ihrem Titeltext vergrößern möchten, passen Sie den Abstand mit dem Bereichsschieberegler an oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts neben dem Schieberegler ein. Die Eingabefelder unterstützen verschiedene Maßeinheiten, dh Sie können je nach Größenwert "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Höhe der Titelzeile

Die Zeilenhöhe wirkt sich auf den Abstand zwischen den einzelnen Zeilen Ihres Titeltextes aus. Wenn Sie den Abstand zwischen den einzelnen Zeilen vergrößern möchten, passen Sie den Abstand mit dem Bereichsregler an oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld ein befindet sich rechts vom Cursor. Die Eingabefelder unterstützen verschiedene Maßeinheiten, dh Sie können je nach Größenwert "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Legende Schriftart

Sie können die Schriftart Ihres Beschriftungstextes ändern, indem Sie die gewünschte Schriftart aus dem Dropdown-Menü auswählen. Divi wird mit Dutzenden großartiger Schriftarten geliefert, die von Google Fonts unterstützt werden. Standardmäßig verwendet Divi die Schriftart Open Sans für den gesamten Text auf Ihrer Seite. Sie können den Stil Ihres Textes auch mit Fett, Kursiv, Großbuchstaben und Unterstreichungsoptionen anpassen.

Beschriftungsschriftgröße

Hier können Sie die Größe Ihres Beschriftungstextes anpassen. Sie können den Bereichsregler ziehen, um die Größe Ihres Texts zu erhöhen oder zu verringern, oder den gewünschten Wert für die Textgröße direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen verschiedene Maßeinheiten, dh Sie können je nach Größenwert "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Legende Textfarbe

Standardmäßig werden alle Textfarben in Divi in ​​Weiß oder Dunkelgrau angezeigt. Wenn Sie die Farbe Ihres Beschriftungstextes ändern möchten, wählen Sie mit dieser Option die gewünschte Farbe aus der Farbauswahl.

Abstand der Buchstaben der Legende

Der Buchstabenabstand beeinflusst den Abstand zwischen den einzelnen Buchstaben. Wenn Sie den Abstand zwischen den einzelnen Buchstaben in Ihrem Beschriftungstext vergrößern möchten, verwenden Sie den Bereichsregler, um den Abstand anzupassen, oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts neben dem Schieberegler ein. Die Eingabefelder unterstützen verschiedene Maßeinheiten, dh Sie können je nach Größenwert "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Höhe der Linie der Legende

Die Zeilenhöhe wirkt sich auf den Abstand zwischen den einzelnen Zeilen des Beschriftungstextes aus. Wenn Sie den Abstand zwischen den einzelnen Zeilen vergrößern möchten, verwenden Sie den Bereichsregler, um den Abstand anzupassen, oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld ein rechts vom Cursor. Die Eingabefelder unterstützen verschiedene Maßeinheiten, dh Sie können je nach Größenwert "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Benutze den Rand

Wenn Sie diese Option aktivieren, wird ein Rand um Ihr Modul gelegt. Dieser Rahmen kann mithilfe der folgenden bedingten Parameter angepasst werden.

Farbe der Grenze

Diese Option wirkt sich auf die Farbe Ihres Rahmens aus. Wählen Sie im Farbwähler eine benutzerdefinierte Farbe aus, um sie auf Ihren Rand anzuwenden.

Breite der Grenze

Standardmäßig sind die Ränder 1 Pixel breit. Sie können diesen Wert erhöhen, indem Sie den Bereichsregler ziehen oder einen benutzerdefinierten Wert in das Eingabefeld rechts neben dem Schieberegler eingeben. Benutzerdefinierte Maßeinheiten werden unterstützt. Dies bedeutet, dass Sie die Standardeinheit von "px" in etwas anderes wie em, vh, vw usw. ändern können.

Border Style

Rahmen unterstützen acht verschiedene Stile: fest, gepunktet, gepunktet, doppelt, Rille, Grat, Überlagerung und Start. Wählen Sie den gewünschten Stil aus dem Dropdown-Menü aus, um ihn auf Ihren Rahmen anzuwenden.

Erweiterte Optionen für das Galerie-Modul

Auf der Registerkarte "Erweitert" finden Sie Optionen, die erfahrene Webdesigner möglicherweise als nützlich erachten, z. B. benutzerdefinierte CSS- und HTML-Attribute. Hier können Sie benutzerdefiniertes CSS auf jedes der vielen Elemente des Moduls anwenden. Sie können dem Modul auch benutzerdefinierte CSS-Klassen und -IDs zuweisen, mit denen Sie das Modul in der style.css-Datei Ihres untergeordneten Themas anpassen können.

CSS-ID

Geben Sie eine optionale CSS-ID ein, die für dieses Modul verwendet werden soll. Eine ID kann verwendet werden, um einen benutzerdefinierten CSS-Stil zu erstellen oder um auf bestimmte Abschnitte Ihrer Seite zu verlinken.

CSS-Klasse

Geben Sie die optionalen CSS-Klassen ein, die für dieses Modul verwendet werden sollen. Eine CSS-Klasse kann zum Erstellen eines benutzerdefinierten CSS-Stils verwendet werden. Sie können mehrere Klassen hinzufügen, die durch ein Leerzeichen getrennt sind. Diese Klassen können in Ihrem untergeordneten Divi-Design oder im benutzerdefinierten CSS-Stylesheet verwendet werden, das Sie Ihrer Seite oder Ihrer Website mithilfe der Divi-Designoptionen oder der Einstellungen auf der Divi Builder-Seite hinzufügen.

Benutzerdefiniertes CSS

Benutzerdefiniertes CSS kann auch auf das Modul und alle Interna des Moduls angewendet werden. Im Abschnitt Benutzerdefiniertes CSS finden Sie ein Textfeld, in dem Sie jedem Element benutzerdefinierte CSS-Stylesheets direkt hinzufügen können. CSS-Einträge in diesen Einstellungen sind bereits in Stil-Tags eingeschlossen. Geben Sie einfach die durch Semikolons getrennten CSS-Regeln ein.

Sichtbarkeit

Mit dieser Option können Sie die Geräte steuern, auf denen Ihr Modul angezeigt wird. Sie können Ihr Modul auf Tablets, Smartphones oder Desktops einzeln deaktivieren. Dies ist nützlich, wenn Sie verschiedene Mods auf verschiedenen Geräten verwenden möchten oder wenn Sie das mobile Design vereinfachen möchten, indem Sie bestimmte Elemente von der Seite entfernen.

[vc_row center_row=“yes“][vc_column width=“1/2″][vcex_button target=“blank“ layout=“expanded“ align=“center“ font_family=“Raleway“ font_weight=“700″ style=“flat“ custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DIVI THEMA HERUNTERLADEN [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=“https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials“ target=“blank“ layout=“expanded“ align=“center“ font_family = „Raleway“ font_weight=“700″ style=“flat“ custom_background=“#c4226e“ custom_hover_background=“#8d184f“ custom_color=“#ffffff“ custom_hover_color=“#ffffff“ icon_right=“fa fa-download“]LADEN SIE HERUNTER TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Andere Divi Tutorials

• 5 Websites, die Divi Restaurant Thema verwenden
• Wie man Text auf einem Divi WooCommerce Produkt hinzufügt
• So ändern Sie die Menüfarbe zwischen Divi-Seiten
• So personalisieren Sie die Gitter eines Blogs mit Divi
• Wie die Rolle Divi-Editor auf Wordpress verwenden
• So erstellen Sie einen Divi-Schieberegler im Vollbildmodus
• So ändern Sie die Farbe von Menüs zwischen Divi-Seiten
• Funktionen, die Sie wahrscheinlich nicht über Divi kennen
• Wie man Divi Builder auf WordPress benutzt
• Wie benutzt man das Divi Video-Scroll-Modul?
• Wie benutze ich das Divi Builder Flip Modul?
• So fügen Sie ein Testimonial-Modul in Divi Builder hinzu
• Wie benutzt man das Divi-Textmodul?
• So erstellen Sie einen Schieberegler auf Divi
• So bearbeiten Sie eine Divi-Benutzerrolle
• Wie benutzt man das Divi Social Media Modul?
• So verwenden Sie das Shop-Modul zum Thema WordPress Divi
• So verwenden Sie das Divi-Sidebar-Modul
• Wie benutzt man das Divi Preistabellen Modul?
• Wie verwende ich das Titelmodul von Divi-Publikationen?
• So fügen Sie ein Video-Modul von Divi hinzu
• Wie man das Artikelnavigationsmodul benutzt
• Wie benutzt man das Divi-Suchmodul?
• So verwenden Sie das Divi-Wallet-Modul
• Wie man das Personenmodul im Divi Builder benutzt
• Wie man das Geldbörsenmodul mit Divi-Filter verwendet
• So verwenden Sie das Schiebermodul mit voller Breite
• Wie benutzt man das Divi Builder Image Modul?
• So verwenden Sie das vollständige Navigationsmodul von Divi Builder
• So verwenden Sie das Bildergalerie-Modul
• So verwenden Sie das Divi Builder Kartenmodul mit voller Breite
• So verwenden Sie das Divi Full Width Portfolio-Modul
• So verwenden Sie das Divi-Header-Modul in voller Breite
• Wie benutze ich das Divi Counter Modul?
• So verwenden Sie den Artikel-Schieberegler in Divi Builder
• Wie benutze ich das Divi Email Optin Modul?