Springe zum Hauptinhalt

Divi Tutorial: Wie man das Image Modul in Divi Builder benutzt

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.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]

Divi macht es einfach, Bilder überall in Ihrem Blog hinzuzufügen. Alle Bilder unterstützen das progressive Laden und verfügen über 4 verschiedene Animationsstile, mit denen das Surfen auf Ihrer Website Spaß macht und ansprechend ist. Bildmodule können in jeder von Ihnen erstellten Spalte platziert werden und ihre Größe wird angepasst.

Bildmodul divi.png

So fügen Sie ein Bildmodul aus Divi hinzu

Bevor Sie Ihrer Seite ein Bildmodul hinzufügen können, müssen Sie zunächst in Divi Builder springen. Sobald das 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.

Divi Builder

Nachdem Sie den Visual Builder aktiviert haben, können Sie auf die graue 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.

Divi Modul image.png

Suchen Sie das Bildmodul in der Liste der Module und klicken Sie darauf, um es Ihrer Seite hinzuzufügen. Die Liste der Mods ist durchsuchbar. Sie können also auch das Wort "Bild" eingeben und dann auf die Eingabetaste klicken, um den Bild-Mod 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 , Konzeption et fortgeschritten .

Beispiel für einen Anwendungsfall: Hinzufügen überlappender Bilder zur Veranschaulichung von Diensten auf einer Diensteseite

Es gibt unzählige Möglichkeiten, das Bildmodul zu verwenden. In diesem Beispiel zeige ich Ihnen, wie Sie einer Serviceseite für eine Website für kleine Unternehmen Bilder hinzufügen. Hier werde ich die Bilder hinzufügen. Jeder rote Kreis repräsentiert ein Bild.

füge ein Modul image divi builder.jpg hinzu

Da das Hinzufügen eines Bildes zu einer Seite ein ziemlich unkomplizierter und unkomplizierter Vorgang ist, werde ich einige benutzerdefinierte Stile hinzufügen, um meine Bilder so zu positionieren, dass sie sich überlappen und einen Stapeleffekt erzeugen.

Lassen Sie uns beginnen.

Verwenden Sie den Visual Builder, um einen Standardabschnitt mit einem 1/4 1/4 1/2 Layout hinzuzufügen. Fügen Sie dann ein Textmodul in die rechte Spalte 1/2 Ihrer Zeile ein. Geben Sie eine Kopfzeile und eine Beschreibung für den Dienst ein.

Fügen Sie dann ein Bildmodul ganz links in die 1/4 Spalte ein.

füge image divi builder.png hinzu

Aktualisieren Sie die Einstellungen des Image-Moduls wie folgt:

Inhaltsoptionen

Bild-URL: [URL eingeben oder Bild mit den Abmessungen 500 × 625 herunterladen]

Design-Optionen

Benutzerdefinierter Rand: left -60px

Optionen Avancées

Animation: Von links nach rechts

Animation divi image.png

Einstellungen speichern

Fügen Sie ein weiteres Bildmodul in die zweite 1/4 Spalte (oder mittlere Spalte) ein und aktualisieren Sie die Bildeinstellungen wie folgt:

Inhaltsoptionen

Bild-URL: [URL eingeben oder Bild mit den Abmessungen 500 × 625 herunterladen]

Design-Optionen

Benutzerdefinierter Rand: Oben 100px, -60px Links

Optionen Avancées

Animation: Von rechts nach links

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]

überlappendes Bild divi.png

Einstellungen speichern

Dies kümmert sich um den ersten Abschnitt. Jetzt können wir für den nächsten Serviceabschnitt den Abschnitt duplizieren, den wir gerade für den ersten Serviceabschnitt erstellt haben. Ändern Sie nach dem Duplizieren des Abschnitts die Spaltenstruktur in ein 1/2 1/4 1/4 Spaltenlayout (das Gegenteil des vorherigen).

wähle einen Abschnitt divi.jpg

Ziehen Sie dann das Textmodul mit der Überschrift und der Beschreibung des Dienstes in die Spalte 1/2 ganz links. Stellen Sie sicher, dass Sie die beiden Bildmodule schieben, um jede 1/4 Spalte (jetzt rechts) zu füllen.

Da die Bildmodule Duplikate sind, müssen wir die neuen Bilder für diesen bestimmten Serviceabschnitt hochladen. Außerdem haben Module immer benutzerdefinierte Randeinstellungen wie die ersten beiden erstellten Bildmodule. Lassen Sie uns das ändern.

Aktualisieren Sie beginnend mit dem Bildmodul in der rechten 1 / 4-Spalte die folgenden Bildeinstellungen:

Inhaltsoptionen

Bild-URL: [URL eingeben oder Bild mit den Abmessungen 500 × 625 herunterladen]

Design-Optionen

Benutzerdefinierter Rand: -60px Links (nur)

Registerkarte Erweitert

Animation: Von rechts nach links

Aktualisieren Sie abschließend die Bildeinstellungen für das Bildmodul der 1/4 mittleren Spalte wie folgt:

Inhaltsoptionen

Bild-URL: [URL eingeben oder Bild mit den Abmessungen 500 × 625 herunterladen]

Design-Optionen

Benutzerdefinierter Rand: 100px nach oben, -60px nach rechts

Registerkarte Erweitert

Animation: Von links nach rechts

Einstellungen speichern

Jetzt schau dir die Seite an!

Beispiel für Service-Seite divi.jpg

Inhaltsoptionen für Bildmodule

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.

Abschnitt Bild Divi Bereich contents.png

Bild URL

Platzieren Sie hier eine gültige Bild-URL oder wählen Sie ein Bild aus / laden Sie es über die WordPress-Medienbibliothek hoch. Bilder werden in ihren Spalten immer linksbündig angezeigt und decken die gesamte Breite Ihrer Spalte ab. Ihr Bild wird jedoch niemals größer als seine ursprüngliche Größe sein. Die Höhe des Bildes wird durch das Seitenverhältnis Ihres Originalbildes bestimmt.

Öffnen Sie im Viewer

Hier können Sie auswählen, ob Ihr Bild in einem Viewer geöffnet werden soll, wenn Sie darauf klicken. Wenn diese Option aktiviert ist, "zoomt" Ihr Bild auf seine maximale Größe, wenn Sie in ein modales Fenster klicken. Es ist eine großartige Funktion für Brieftaschen.

Link-URL

Fügen Sie in dieses Feld eine gültige Web-URL ein, um Ihr Bild in einen Link zu verwandeln. Wenn Sie dieses Feld leer lassen, bleibt Ihr Bild nur als statisches Element.

URL öffnen

Hier können Sie auswählen, ob Ihr Link in einem neuen Fenster geöffnet werden soll.

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.

Bildmodul-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.

Option Design Modul Bild Divi.png

Bildüberlagerung

Wenn diese Option aktiviert ist, werden eine Farbe und ein Überlagerungssymbol angezeigt, wenn ein Besucher über das Bild fährt.

Farbsymbol-Overlay

Hier können Sie eine benutzerdefinierte Farbe für das Überlagerungssymbol festlegen

Überlagerungsfarbe abdecken

Hier können Sie eine benutzerdefinierte Farbe für die Überlagerung definieren.

Überflug-Symbol

Hier können Sie ein benutzerdefiniertes Symbol für die Überlagerung definieren.

Entfernen Sie den Platz unter dem Bild

Diese Option wirkt sich nur auf Bilder aus, wenn sie das letzte Modul in einer Spalte sind. Wenn diese Option aktiviert ist, wird der Abstand zwischen dem unteren Rand des Bildes und dem nächsten Abschnitt entfernt, sodass das Bild den oberen Rand des nächsten Abschnitts der Seite umrahmen kann.

Bildausrichtung

Hier wählen Sie die Richtung, in die Ihr Bild in der Spalte schwebt. Sie können das Bild nach links oder rechts schweben lassen oder zentriert halten.

Zentrieren Sie das Bild immer auf dem Handy

Oft sind kleine Bilder auf mobilen Geräten für das Auge angenehmer, wenn sie zentriert sind. Wenn die Spalten ausfallen, werden Bilder, die in kleineren Spalten nach links oder rechts ausgerichtet sind, verwaist, wenn die Spalten ausfallen und eine Breite von 100% erreichen. Aktivieren dieser Spalte mit erzwungenen Bildern, um sie auf Mobilgeräten an der Mitte der Spalte auszurichten, ohne die Bildausrichtung auf Desktops zu beeinträchtigen.

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.

Grenzstil

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.

Maximale Bildbreite

Standardmäßig ist die maximale Bildbreite auf 100% eingestellt. Dies bedeutet, dass das Bild in seiner natürlichen Breite angezeigt wird, es sei denn, die Breite des Bildes überschreitet die Breite der übergeordneten Spalte. In diesem Fall wird das Bild auf 100% der Spaltenbreite begrenzt. Wenn Sie die maximale Breite des Bildes weiter einschränken möchten, können Sie dies tun, indem Sie hier den gewünschten Wert für die maximale Breite eingeben. Beispielsweise würde ein Wert von 50% die Breite des Bildes auf 50% der Breite der übergeordneten Spalte begrenzen.

Erzwinge die volle Breite

Standardmäßig werden Bilder in ihrer ursprünglichen Breite angezeigt. Sie können jedoch festlegen, dass das Bild die gesamte Breite der übergeordneten Spalte überspannt, indem Sie diese Option aktivieren.

Benutzerdefinierter Rand

Der Rand ist der Abstand, der an der Außenseite Ihres Moduls, zwischen dem Modul und dem nächsten Element darüber, darunter oder links und rechts davon hinzugefügt wird. Sie können jeder der vier Seiten des Moduls benutzerdefinierte Randwerte hinzufügen. Entfernen Sie den Mehrwert aus dem Eingabefeld, um den benutzerdefinierten Rand zu entfernen. Standardmäßig werden diese Werte in Pixel gemessen. Sie können jedoch benutzerdefinierte Maßeinheiten in die Eingabefelder eingeben.

Erweiterte Bildmoduloptionen

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.

Abschnitt Erweitertes Modul image.png

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.

Animation

Verwenden Sie dieses Dropdown-Menü, um die Animation zum verzögerten Laden Ihres Bildes festzulegen. Sie können festlegen, dass Ihr Bild von rechts, links, unten oder oben angezeigt wird.

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.

Alternativer Bildtext

Der Alternativtext enthält alle erforderlichen Informationen, wenn das Bild nicht geladen wird, korrekt angezeigt wird oder wenn ein Benutzer das Bild nicht sehen kann. Außerdem kann das Bild von Suchmaschinen gelesen und erkannt werden.

Andere Divi Tutorials

Dieser Artikel enthält Kommentare 0

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
8 Aktien
Aktie
tweet1
Registrieren7