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 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]

Mit Divi können Sie ganz einfach Bilder in Ihr Blog einfügen. Alle Bilder unterstützen das progressive Laden und werden mit verschiedenen 4-Animationsstilen geliefert, mit denen das Surfen auf Ihrer Website Spaß macht und ansprechend ist. Bildmodule können in jede von Ihnen erstellte Spalte eingefügt werden und ihre Größe wird angepasst, um zu passen.

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

Sobald 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 der Zeilen hinzugefügt werden. Wenn Sie eine neue Seite beginnen, vergessen Sie nicht, Ihrer Seite zuerst eine Zeile hinzuzufügen.

Divi Modul image.png

Suchen Sie das Image-Modul in der Liste der Module und klicken Sie darauf, um es Ihrer Seite hinzuzufügen. Die Liste der Module ist durchsuchbar, dh Sie können auch das Wort "Bild" eingeben und dann die Eingabetaste drücken, um das Bildmodul 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: Überlappende Bilder hinzufügen, um Dienste auf einer Service-Seite zu veranschaulichen

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 Bilds zu einer Seite ein ziemlich einfacher und unkomplizierter Vorgang ist, füge ich einen benutzerdefinierten Stil hinzu, um meine Bilder so zu positionieren, dass sie sich überlappen und einen Stapeleffekt erzeugen.

Lassen Sie uns beginnen.

Verwenden Sie den visuellen Konstruktor, um einen Standardabschnitt mit einem 1 / 4 1 / 4 1 / 2-Layout hinzuzufügen. Fügen Sie dann einen Textbaustein in die rechte 1 / 2-Spalte Ihrer Zeile ein. Geben Sie eine Überschrift und eine Beschreibung des Dienstes ein.

Fügen Sie dann ein Bildmodul zur 1 / 4-Spalte ganz links hinzu.

füge image divi builder.png hinzu

Aktualisieren Sie die Einstellungen des Image-Moduls wie folgt:

Inhaltsoptionen

Bild-URL: [Geben Sie die URL ein oder laden Sie das Bild mit den Abmessungen 500 × 625 herunter]

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 der zweiten Spalte 1 / 4 (oder der mittleren Spalte) hinzu und aktualisieren Sie die Bildeinstellungen wie folgt:

Inhaltsoptionen

Bild-URL: [Geben Sie die URL ein oder laden Sie das Bild mit den Abmessungen 500 × 625 herunter]

Design-Optionen

Benutzerdefinierter Rand: Oben 100px, -60px Links

Optionen Avancées

Animation: Von rechts nach links

Beginnen Sie mit der Bewerbung Ihres Blogs

Laden Sie Dutzende von Logos, Bannern, Website-Vorlagen und vielen anderen Marketing-Tools herunter, um Ihren WordPress-Blog zu vermarkten. [Empfohlen]

ü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 Struktur der Spalte in ein 1 / 2 1 / 4 1 / 4-Spaltenlayout (das Gegenteil des vorherigen).

wähle einen Abschnitt divi.jpg

Ziehen Sie dann den Textbaustein mit der Überschrift und der Leistungsbeschreibung in die Spalte 1 / 2 ganz links. Stellen Sie sicher, dass Sie beide Bildmodule ziehen, um jede 1 / 4-Spalte (jetzt rechts) zu füllen.

Da es sich bei den Image-Modulen um Duplikate handelt, müssen die neuen Images für diesen bestimmten Servicebereich heruntergeladen werden. Außerdem haben Module immer benutzerdefinierte Randeinstellungen als 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: [Geben Sie die URL ein oder laden Sie das Bild mit den Abmessungen 500 × 625 herunter]

Design-Optionen

Benutzerdefinierter Rand: -60px Links (nur)

Registerkarte Erweitert

Animation: Von rechts nach links

Aktualisieren Sie abschließend die Image-Einstellungen für das Image-Modul der zentralen 1 / 4-Spalte mit den folgenden Elementen:

Inhaltsoptionen

Bild-URL: [Geben Sie die URL ein oder laden Sie das Bild mit den Abmessungen 500 × 625 herunter]

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

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.

Abschnitt Bild Divi Bereich contents.png

URL des Bildes

Geben Sie hier eine gültige Bild-URL ein oder wählen Sie ein Bild aus der WordPress-Medienbibliothek aus und laden Sie es 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 das Originalformat sein. Die Höhe des Bildes wird durch das Seitenverhältnis Ihres Originalbildes bestimmt.

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]

Öffnen Sie im Viewer

Sie können hier 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. Dies ist eine hervorragende Funktion für Portfolios.

Link-URL

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

Öffnen der URL

Hier können Sie wä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 Bezeichnungen im Modulblock der Divi Builder-Benutzeroberfläche angezeigt.

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

Option Design Modul Bild Divi.png

Bildüberlagerung

Wenn diese Option aktiviert ist, werden eine Farbe und ein Überlagerungssymbol angezeigt, wenn sich ein Besucher über dem Bild befindet.

Überlagerung des Farbsymbols

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.

Löschen Sie den Raum unter dem Bild

Diese Option wirkt sich nur auf Bilder aus, wenn sie das letzte Modul 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 einrahmen kann.

Ausrichten des Bildes

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

Fokussiere das Bild immer auf das Handy

Oft machen kleine Bilder auf Mobilgeräten mehr Spaß, wenn sie zentriert sind. Wenn die Spalten ausfallen, werden links oder rechts ausgerichtete Bilder in kleineren Spalten verwaist, wenn die Spalten ausfallen und eine Breite von 100% erreichen. Aktivieren Sie diese Spalte mit erzwungenen Bildern, um sie in der Mitte der Spalte auf Mobilgeräten auszurichten, ohne die Ausrichtung des Bildes auf Desktops zu beeinträchtigen.

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.

Grenzstil

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.

Maximale Breite des Bildes

Standardmäßig ist die maximale Breite des Bildes auf 100% eingestellt. Dies bedeutet, dass das Bild in seiner natürlichen Breite angezeigt wird, sofern die Breite des Bildes nicht die Breite der übergeordneten Spalte überschreitet. In diesem Fall ist das Bild auf 100% der Spaltenbreite beschränkt. 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. Zum Beispiel 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 mit ihrer ursprünglichen Breite angezeigt. Sie können jedoch festlegen, dass das Bild die gesamte Breite der übergeordneten Spalte ausfüllt, 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 eingefügt wird. Sie können einer der vier Seiten des Moduls benutzerdefinierte Randwerte hinzufügen. Entfernen Sie den hinzugefügten Wert 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 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.

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]

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

Animation

Verwenden Sie dieses Dropdown-Menü, um die Animation für das verzögerte Laden Ihres Bildes festzulegen. Sie können wählen, ob 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 Module auf verschiedenen Geräten verwenden oder das mobile Design vereinfachen möchten, indem Sie bestimmte Elemente der Seite entfernen.

Alternativer Text des Bildes

Alternativer Text bietet alle erforderlichen Informationen, wenn das Bild nicht geladen wird, nicht richtig angezeigt wird oder in einer anderen Situation, in der ein Benutzer das Bild nicht sehen kann. Es ermöglicht auch, dass das Bild von den Suchmaschinen gelesen und erkannt wird.

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
10 Aktien
Aktie4
tweet1
Registrieren5