Springe zum Hauptinhalt

Divi Tutorial: Wie man das Image Gallery Modul benutzt

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 600.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

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

Galeriebeispiel divi.png

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

Bevor Sie Ihrer Seite ein Galerie-Modul hinzufügen können, müssen Sie zuerst in den Divi Builder springen. Sobald das Divi-Design auf Ihrer Website installiert ist, werden Sie eine Schaltfläche bemerken Verwenden Sie Divi Builder jedes Mal, wenn Sie eine neue Seite erstellen, über dem Publisher. 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.

Divi Builder

Nachdem Sie Visual Builder aufgerufen haben, können Sie auf das graue Plus-Symbol klicken, um Ihrer Seite ein neues Modul hinzuzufügen. Neue Module können nur innerhalb der Zeilen hinzugefügt werden. Wenn Sie eine neue Seite beginnen, vergessen Sie nicht, Ihrer Seite zuerst eine Zeile hinzuzufügen. Wir haben großartige Tutorials zur Verwendung der Elemente von Linien und erhebliche Abschnitte von Divi.

Bildergalerie divi.png

Suchen Sie das Galerie-Modul in der Liste der Module und klicken Sie darauf, um es Ihrer Seite hinzuzufügen. Die Liste der Module ist durchsuchbar, das heißt, Sie können auch das Wort "gallery" eingeben und dann die Eingabetaste drücken, um das Galerie-Modul zu suchen und automatisch hinzuzufügen! Sobald das Modul hinzugefügt wurde, werden Sie von der Liste der Optionen des Moduls begrüßt. Diese Optionen sind in drei Hauptgruppen unterteilt: Inhalt , Konzeption et fortgeschritten .

Anwendungsbeispiel: Hinzufügen einer Bildergalerie in voller Breite zur Präsentation des Fotos.

Das Hinzufügen einer Galerie zu Ihrer Fotoseite ist eine großartige Möglichkeit, Ihre Arbeit zu fördern und Ihre Glaubwürdigkeit bei Kunden zu erhöhen. In diesem Beispiel zeige ich Ihnen, wie Sie mit dem Galerie-Modul eine Bildergalerie mit einem Rasterlayout hinzufügen können, das die gesamte Breite der Seite ausfüllt. Die Bilder haben keinen Raum dazwischen, was eine praktische und ästhetische Präsentation ermöglicht.

Erstellen einer Bildergalerie divi.jpg

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

Leuchtkasten divi gallery.gif

Fügen Sie in 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 in die Zeile ein.

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 Bildunterschrift anzeigen: NO Paginierung anzeigen: NO

Design-Optionen

Layout: Raster Ausrichtung der Miniaturansichten: Querformat Zoom-Symbol Farbe: #ffffff Farbe der Rollover-Überführung: rgba (0,0,0,0.48) Auswahl der Hover-Symbole: Standard

Divi WordPress Tutorial Inhalt section.png

Einstellungen speichern

Jetzt müssen Sie nur noch den gesamten Raum um die Bilder entfernen. Gehen Sie zurück und wählen Sie die Linienparameter aus. Aktualisieren Sie auf der Registerkarte Entwurf die folgenden Elemente:

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

Es ist wichtig, sich daran zu erinnern, dass der numerische Wert "1" für die Rinnenbreite tatsächlich Null ist (überhaupt keine Breite).

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Konfiguration der Lücke der goutière.png

Einstellungen speichern

Das ist alles!

Inhaltsoptionen des Galeriemoduls

In der Registerkarte Inhalt finden Sie alle Inhaltselemente des Moduls, wie z. B. Text, Bilder und Symbole. All das kontrolliert was erscheint in Ihrem Modul immer auf dieser Registerkarte.

divi modul galerie content.png

Bilder der Galerie

Klicken Sie auf die Schaltfläche Make 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 unter den Bildern eine Paginierung angezeigt.

Titel und Bildunterschrift anzeigen:

Wenn ein Titel 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 unter den Bildern eine Paginierung angezeigt. Wenn Sie die Paginierung löschen 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 Bezeichnungen im Modulblock der Divi Builder-Benutzeroberfläche angezeigt.

Galeriemodul-Design-Optionen

Auf der Registerkarte Design finden Sie alle Stiloptionen des Moduls, z. B. Schriftarten, Farben, Größen und Abstände. Auf dieser Registerkarte können Sie das Erscheinungsbild Ihres Moduls ändern. Jedes Divi-Modul verfügt über eine lange Liste von Konstruktionsparametern, mit denen Sie alles ändern können.

Galeriemodul zone design.png

Bereitstellung

Standardmäßig werden die Galerien als Raster von Bildern angezeigt. Sie können Ihre Galerie auch als Bildschieberegler anzeigen.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Miniaturbildausrichtung

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

Zoom-Farbsymbol

Wenn Sie den Mauszeiger über ein Element im Galerie-Modul bewegen, wird ein Überlagerungssymbol angezeigt. Sie können die von diesem Symbol verwendete Farbe mit der Farbauswahl in dieser Einstellung anpassen.

Farbüberlagerungs-Overlay (Hover)

Wenn Sie den Mauszeiger über ein Element im Galerie-Modul bewegen, wird oben im Bild und unter dem Text- und Titelsymbol des Portfolios 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 über die Elemente der Galerie im Modul fliegt.

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 klar sein. Wenn Ihr Hintergrund klar ist, muss Ihr Text dunkel sein.

Titel Schriftart

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

Titel Schriftgröße

Hier können Sie die Größe Ihres Titeltextes anpassen. Sie können den Bereichsschieberegler ziehen, um den Text zu vergrößern oder zu verkleinern, oder den Wert der gewünschten Textgröße direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Titel Textfarbe

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

Abstand der Titelbriefe

Der Abstand der Buchstaben wirkt sich auf den Abstand zwischen den Buchstaben aus. Wenn Sie den Abstand zwischen den einzelnen Buchstaben in Ihrem Titeltext 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 Regler ein. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Höhe der Titelzeile

Die Zeilenhöhe wirkt sich auf den Abstand zwischen den einzelnen Zeilen Ihres Titeltexts 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 befindet sich rechts vom Cursor. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Legende Schriftart

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

Schriftgröße der Legende

Hier können Sie die Größe Ihres Untertiteltextes anpassen. Sie können den Bereichsschieberegler ziehen, um den Text zu vergrößern oder zu verkleinern, oder den Wert der gewünschten Textgröße direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Textfarbe der Legende

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

Abstand der Buchstaben Legenden divi.png

Abstand der Buchstaben der Legende

Der Abstand der Buchstaben wirkt sich auf den Abstand zwischen den Buchstaben aus. 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 Regler ein. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Höhe der Linie der Legende

Die Zeilenhöhe wirkt sich auf den Abstand zwischen den einzelnen Zeilen des Legendentexts 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. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Benutze den Rand

Wenn Sie diese Option aktivieren, wird Ihr Modul mit einem Rahmen versehen. Dieser Rahmen kann mit den folgenden bedingten Parametern 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 haben die Ränder eine Breite von 1-Pixeln. Sie können diesen Wert erhöhen, indem Sie den Bereichsregler ziehen oder einen benutzerdefinierten Wert in das Eingabefeld rechts neben dem Regler eingeben. Benutzerdefinierte Maßeinheiten werden unterstützt, dh Sie können die Standardeinheit von "px" in eine andere Einheit ändern, z. B. em, vh, vw usw.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Border Style

Rahmen unterstützen acht verschiedene Stile: Solide, Gepunktete, Gepunktete, Doppelte, Groove, Crest, Inlay und Start. Wählen Sie den gewünschten Stil aus dem Dropdown-Menü aus, um ihn auf Ihren Rand anzuwenden.

Erweiterte Optionen für das Galerie-Modul

Auf der Registerkarte Erweitert finden Sie Optionen, die für erfahrene Webdesigner hilfreich sein könnten, z. B. benutzerdefinierte CSS- und HTML-Attribute. Hier können Sie benutzerdefiniertes CSS auf eines der vielen Elemente des Moduls anwenden. Sie können dem Modul auch benutzerdefinierte Klassen und CSS-IDs zuweisen, mit denen Sie das Modul in der Datei style.css Ihres untergeordneten Themas anpassen können.

Erweiterte Option divi.png Galeriemodul

CSS-ID

Geben Sie eine optionale CSS-ID ein, die für dieses Modul verwendet werden soll. Eine ID kann zum Erstellen eines benutzerdefinierten CSS-Stils oder zum Erstellen von Links zu bestimmten Abschnitten Ihrer Seite verwendet werden.

CSS-Klasse

Geben Sie die optionalen CSS-Klassen ein, die für dieses Modul verwendet werden sollen. Mit einer CSS-Klasse kann ein benutzerdefinierter CSS-Stil erstellt werden. Sie können mehrere Klassen hinzufügen, die durch ein Leerzeichen getrennt sind. Diese Klassen können in Ihrem untergeordneten Divi-Design oder in dem benutzerdefinierten CSS-Stylesheet verwendet werden, das Sie Ihrer Seite oder Website mithilfe von Divi-Designoptionen oder Divi Builder-Seiteneinstellungen hinzufügen.

Benutzerdefiniertes CSS

Benutzerdefiniertes CSS kann auch auf das Modul und eines der internen Elemente des Moduls angewendet werden. Im Abschnitt Benutzerdefiniertes CSS finden Sie ein Textfeld, in dem Sie jedem Element direkt benutzerdefinierte CSS-Stylesheets hinzufügen können. Die CSS-Einträge in diesen Parametern sind bereits in die Style-Tags eingeschlossen. Geben Sie einfach die durch Semikolon 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 Module auf verschiedenen Geräten verwenden oder das mobile Design vereinfachen möchten, indem Sie bestimmte Elemente der Seite entfernen.

Andere Divi Tutorials

Dieser Artikel enthält Kommentare 4
  1. Hallo, ich finde deine Artikel sehr interessant.
    Ich habe nach Ihren Ratschlägen eine Galerie unter Divi erstellt und alles funktioniert gut, außer dass ich nicht weiß, wie ich den rechten Mausklick entfernen kann, um die Aufnahme unter meinen Bildern zu verhindern. Hast du die Lösung, danke im Voraus. herzlich

    1. Guten Abend Bernard,

      Um den Rechtsklick zu blockieren, müssen Sie ein Plugin installieren. Ich lade Sie ein, das Verzeichnis von WordPress zu durchsuchen.

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
6 Aktien
Aktie2
tweet
Registrieren4