Mit Divi können Sie ganz einfach überall Bilder hinzufügen Ihr Blog. Alle Bilder unterstützen das progressive Laden und verfügen über vier verschiedene Animationsstile, die das Navigieren auf Ihrer Website unterhaltsam und ansprechend machen. Bildmodule können in jeder von Ihnen erstellten Spalte platziert werden und ihre Größe wird entsprechend angepasst.
So fügen Sie ein Bildmodul aus Divi hinzu
Bevor Sie Ihrer Seite ein Bildmodul hinzufügen können, müssen Sie zuerst zu Divi Builder wechseln. 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 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.
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 , Technologie 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.
Da das Hinzufügen eines Bildes zu einer Seite ein ziemlich einfacher 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.
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
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
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).
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!
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.
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.
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.
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.
[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?