So fügen Sie Bildmarkierungen mit den Transformationsoptionen von Divi hinzu

Bildmarker sind eine großartige Möglichkeit, die Besonderheiten eines Produkts hervorzuheben. In diesem Beitrag zeigen wir Ihnen, wie Sie mit einem Textbaustein und einem vertikalen Teiler Bildmarkierungen erstellen. Dank der Transformationseinstellungen innerhalb der Spalten kann ein Bildmarker überall dort platziert werden, wo er benötigt wird. Um Ihnen zu zeigen, wie vielseitig diese Technik ist, zeigen wir Ihnen zwei unterschiedliche Gestaltungsbeispiele. Sie können die JSON-Datei auch kostenlos herunterladen!

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Beispiel 1

Desktop

Handy, Mobiltelefon

Beispiel #2

Desktop

Handy, Mobiltelefon

Laden Sie das Bildmarker-Layout KOSTENLOS herunter

Um das kostenlose Bildmarker-Layout in die Hände zu bekommen, müssen Sie es zunächst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Abonnieren Sie unseren Youtube-Kanal

Beispiel 1 neu erstellen

Beginnen wir mit der Nachbildung des ersten Designbeispiels!

Neuen Abschnitt hinzufügen

Fügen Sie der Seite, an der Sie gerade arbeiten, einen neuen Abschnitt hinzu. Passen Sie vor dem Hinzufügen einer Zeile zuerst die Abschnittseinstellungen an.

Hintergrund

Fügen Sie einen Farbverlauf und dann ein Bild mit einem Bildschirmmischmodus hinzu.

• Hintergrund: Farbverlauf + Bild
• Verlaufsfarbe 1: Weiß #ffffff
• Verlaufsfarbe 2: Mittelgrau #666666
• Steigungsstartposition: 22%
• Hintergrundbild-Mischung: Bildschirm

Abstand

Entfernen Sie als nächstes die standardmäßige obere und untere Auffüllung des Abschnitts.

• Polsterung oben und unten: 0vw

Sichtweite

Vervollständigen Sie die Abschnittseinstellungen, indem Sie die Überläufe des Abschnitts ausblenden.

• Vertikaler und horizontaler Überlauf: Ausgeblendet

Zeile 1 hinzufügen

Fügen Sie nun eine neue Zeile mit drei Spalten hinzu.

Passen Sie die Zeileneinstellungen an, bevor Sie Module hinzufügen.

Größe

Passen Sie zunächst die Größe der Zeile an.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%

Benutzerdefinierte CSS

Fügen Sie als Nächstes eine einzelne Zeile CSS-Code zum Hauptelement der Zeile hinzu. Dadurch können die Spalten auch auf kleineren Bildschirmgrößen nebeneinander angezeigt werden.

• Hauptelement-CSS: display: flex;

display: flex;

Spalte 1

Transformieren Übersetzen

Wenden Sie einen benutzerdefinierten Transformationsübersetzungseffekt auf die erste Spalte an, um die Spalte neu zu positionieren. Dieser Schritt ist sinnvoll, wenn Sie die Bildmarkierungsmodule später zum Beitrag hinzufügen. Wenn Sie diese Technik für ein anderes Design verwenden, müssen Sie diese Werte entsprechend ändern.

• Transformieren Übersetzen: x-Achse 2vw, y-Achse 16vw

Z-Index

Fügen Sie der Registerkarte Sichtbarkeit einen höheren z-Indexwert hinzu.

• Z-Index: 10

Spalte 2

Transformieren Übersetzen

Wenden Sie einen Transformationsübersetzungseffekt auf die zweite Spalte an.

• Transformieren Übersetzen: x-Achse -11vw, y-Achse 6vw

Z-Index

Erhöhen Sie den z-Indexwert.

• Z-Index: 10

Spalte 3

Transformieren Übersetzen

Ändern Sie die Transformationswerte der dritten Spalte.

• Transformieren Übersetzen: x-Achse -11vw, y-Achse 8vw

Z-Index

Und ändern Sie den z-Indexwert.

• Z-Index: 10

Zeile 2 hinzufügen

Bevor Sie Module zur ersten Zeile hinzufügen, fügen Sie eine neue einspaltige Zeile hinzu. Tun Sie dies, bevor Sie die Bildmarkierungen hinzufügen, damit Sie beim Entwerfen sehen können, was auf dem Bildschirm passiert.

Größe

Ändern Sie die Größeneinstellungen der Zeile.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%

Bildmodul hinzufügen

Fügen Sie als nächstes ein Bildmodul hinzu.

Größe

Erzwingen Sie die volle Breite des Bildmoduls, um sicherzustellen, dass das Design auf allen Bildschirmgrößen reagiert.

• Volle Breite erzwingen: Ja

Abstand

Fügen Sie dann links und rechts einen Abstand hinzu, um das Bild zu verkleinern.

• Linke und rechte Polsterung: 10vw

3 Textmodule hinzufügen

Kehren Sie nun zur ersten 3-spaltigen Zeile zurück und fügen Sie 3 Textmodule hinzu.

Verwenden Sie die Drahtmodellansicht für einen einfacheren Zugriff.

Fügen Sie der ersten Spalte ein Textmodul hinzu, klonen Sie es zweimal und ziehen Sie die Duplikate in die anderen Spalten.

Beginnen Sie mit der Bearbeitung des Textbausteins in Spalte 1. Geben Sie einen beliebigen Inhalt ein und ändern Sie die Einstellungen wie folgt.

Hintergrund

Fügen Sie einen schwarzen Hintergrund hinzu.

• Hintergrundfarbe: Schwarz #000000

Text

Stylen Sie den Text.

• Textschriftart: Aldrich
• Textfarbe: Weiß #ffffff
• Textausrichtung: Zentriert
• Textgröße:
  • Desktop: 1.2vw
  • Tablet: 2vw
  • Telefon: 2.4vw
• Schriftstärke der Überschrift: Fett

Größe

Passen Sie die Größe des Textmoduls an.

• Breite:
  • Desktop: 17vw
  • Tablet: 23vw
  • Telefon: 30vw
• Modulausrichtung: Mitte

Abstand

Fügen Sie obere und untere Polsterung hinzu.

• Obere und untere Polsterung: 0,9vw

Grenze

Ändern Sie die Randeinstellungen.

• Abgerundete Ecken: 14px an allen Ecken
• Unten Stile: Unterer Rand
• Breite des unteren Rands: 4px
• Farbe des unteren Rands: Rot #E02B20

Box Schatten

Wenden Sie einen Kastenschatten an.

• Boxschatten: Dritte Option

Textstile erweitern

Um Zeit zu sparen, verwenden Sie die Option Stil erweitern, um die anderen Textmodule im Abschnitt zu formatieren.

• Klicken Sie zunächst auf die drei Punkte am rechten Rand des Textbausteins und wählen Sie „Textstile erweitern“.
• Klicken Sie dann im Popup-Fenster auf „Durchgehend“ und wählen Sie „Dieser Abschnitt“, wenn das Menü herunterfällt.
• Ändern Sie den Inhalt in jedem Textbaustein.

Fügen Sie 3 Trennmodule hinzu

Fügen Sie unter dem Textbaustein in Spalte 1 eine Trennlinie hinzu. Klonen Sie sie dann zweimal und ziehen Sie die Duplikate in die anderen Spalten.

Öffnen Sie das Trennmodul in Spalte 1 und nehmen Sie einige Änderungen vor.

Leitung

Machen Sie den Teiler schwarz.

• Linienfarbe: Schwarz #000000

Größe

Passen Sie die Dicke des Teilers an.

• Teilergewicht: 3px
• Breite: 20vw
• Modulausrichtung: Mitte

Abstand

Passen Sie den oberen Rand an.

• Oberer Rand: 7vw

Verwandeln

Fügen Sie einen Transformationsdreheffekt hinzu, um den Teiler vertikal zu machen.

• Transform Rotate: Erste Option bei 90 Grad

Trennereinstellungen erweitern

Sparen Sie Zeit und verwenden Sie die Option Stile erweitern.

• Klicken Sie zunächst auf die drei Punkte auf der rechten Seite des Teilermoduls und wählen Sie „Teilerstile erweitern“.
• Klicken Sie dann im Popup-Fenster auf „Durchgehend“ und wählen Sie im Dropdown-Menü „Dieser Abschnitt“.

Das Design sollte nun so aussehen:

Zeile 3 hinzufügen

Fügen Sie dem Abschnitt eine dritte Zeile mit der folgenden Spaltenstruktur hinzu:

Passen Sie nun die Zeileneinstellungen entsprechend an, bevor Sie Module hinzufügen.

Größe

Ändern Sie die Größeneinstellungen.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%

Spalte 1

Verwandeln

Wenden Sie einen Transformationsübersetzungseffekt auf die erste Spalte an.

• Transformieren Übersetzen: y-Achse -8vw

Z-Index

Passen Sie auch den z-Indexwert an.

• Z-Index: 10

Spalte 2

Verwandeln

Positionieren Sie die zweite Spalte mit einigen benutzerdefinierten Transformationsübersetzungseinstellungen neu.

• Transformieren Übersetzen: x-Achse -17vw, y-Achse -14vw

Z-Index

Passen Sie den z-Indexwert an.

• Z-Index: 10

2 Trennwände hinzufügen

Fügen Sie zwei Teiler hinzu, einen in jeder Spalte.

Trenner-Stile erweitern

Nachdem Sie die Teiler hinzugefügt haben, verwenden Sie die vorherigen Teiler, um die Stile auf die neuen zu erweitern.

• Klicken Sie zunächst auf die drei Punkte im Teilermodul in der ersten Zeile oben und wählen Sie „Teilerstile erweitern“.
• Wählen Sie dann im Popup "Über diese Seite".

Jetzt werden wir einige Änderungen am Teiler in der ersten Spalte unserer dritten Zeile vornehmen.

Größe

Entfernen Sie den Rand.

• Oberer Rand: Standard

Z-Index

Ändern Sie auch den Z-Index.

• Z-Index: -2

2 Textmodule hinzufügen

Fügen Sie jeder Spalte ein Textmodul hinzu.

Textstile erweitern

Erweitern Sie nach dem Hinzufügen der neuen Textbausteine ​​die Textstile aus dem Textbaustein in der ersten Zeile.

• Klicken Sie zunächst auf die drei Punkte im ersten Textbaustein in der obersten Zeile und wählen Sie „Textstile erweitern“.
• Wählen Sie dann im Popup "Über diese Seite".

Ändern Sie nun den Text so, dass er dem Design entspricht. Fügen Sie außerdem beiden Textbausteinen in der dritten Zeile etwas oberen Rand hinzu.

Abstand

• Oberer Rand: 7vw

Beispiel 2 neu erstellen

Auf zum nächsten Beispiel!

Neuen Abschnitt hinzufügen

Fügen Sie der Seite, an der Sie gerade arbeiten, einen neuen Abschnitt hinzu. Passen Sie die Abschnittseinstellungen an, bevor Sie eine Zeile hinzufügen.

Sichtweite

Blenden Sie die Überläufe des Abschnitts in den Sichtbarkeitseinstellungen aus.

• Horizontaler und vertikaler Überlauf: Ausgeblendet

Zeile 1 hinzufügen

Fügen Sie nun eine Zeile mit fünf Spalten hinzu. Passen Sie die Zeileneinstellungen wie folgt an, bevor Sie Module hinzufügen.

Größe

Ändern Sie zunächst die Größeneinstellungen.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%

Abstand

Passen Sie dann den Abstand an.

• Linke und rechte Polsterung: 19.5vw

Benutzerdefinierte CSS

Lassen Sie die Spalten nebeneinander erscheinen, indem Sie dem Hauptelement der Zeile eine Zeile CSS-Code hinzufügen.

• Hauptelement-CSS: display: flex;

display: flex;

Alle Spalteneinstellungen

Nehmen Sie dann einige Änderungen an jeder der Spalten vor.

Benutzerdefinierte CSS

• Hauptelement: Breite: 20% !wichtig;

width: 20% !important;

Z-Index

Passen Sie auch den z-Indexwert an.

• Z-Index: 10

5 Textmodule hinzufügen

Fügen Sie jeder Spalte ein Textmodul hinzu.

Fügen Sie dem Inhaltsfeld relevante Inhalte hinzu und fahren Sie fort, indem Sie die Textmoduleinstellungen des Textmoduls in Spalte 1 ändern.

Hintergrund

Fügen Sie eine Hintergrundfarbe hinzu.

• Hintergrundfarbe: Grün #2f7713

Text

Stylen Sie den Inhalt wie folgt.

• Textschriftart: Allerta
• Textausrichtung: Mitte
• Textfarbe: Weiß #ffffff
• Textgröße:
  • Desktop: 1.3vw
  • Tablet: 2vw
  • Telefon: 2.4vw
• Textzeilenhöhe: 2.9em

Größe

Passen Sie die Größe an.

• Breite:
  • Desktop: 6vw
  • Tablet: 8vw
  • Telefon: 9vw
• Modulausrichtung: Mitte

Abstand

Passen Sie den Abstand an, um das Modul in ein Quadrat zu verwandeln.

• Unterer Rand: -2vw
• Obere und untere Polsterung: 1vw
• Linke und rechte Polsterung: 1vw

Grenze

Drehen Sie das Textmodul in den Rahmeneinstellungen in einen Kreis.

• Abgerundete Ecken: 50vw alle vier Seiten

Box Schatten

Wählen Sie auch einen Boxschatten aus.

• Boxschatten: Dritte Option

Textstile erweitern

Verwenden Sie die Option Stile erweitern, um die Einstellungen aller Textmodule in der Zeile anzupassen.

• Klicken Sie zunächst auf die Punkte rechts neben dem Textmodul und wählen Sie „Textstile erweitern“.
• Klicken Sie dann im Popup auf „Durchgehend“ und wählen Sie „Diese Seite“.
• Ändern Sie schließlich den Text im Inhaltsfeld jedes Moduls.

Das Design sollte nun so aussehen.

Textmodul 2

Machen Sie den zweiten Kreis gelb.

• Hintergrundfarbe: Gelb #f2e200

Textmodul 3

Machen Sie den dritten Kreis orange.

• Hintergrundfarbe: Orange #f2b100

Textmodul 4

Machen Sie den vierten Kreis orange-rot.

• Hintergrundfarbe: Orange Rot

Textmodul 5

Machen Sie das fünfte Modul lila.

• Hintergrundfarbe: Lila #8e008c

Fügen Sie 5 Trennmodule hinzu

Fügen Sie nun unter jedem Textmodul ein Trennmodul hinzu.

Passen Sie die Einstellungen am ersten Teiler entsprechend an.

Leitung

Gib dem Teiler eine Farbe.

• Linienfarbe: Grün #2f7713

Größe

Passen Sie die Breite an.

• Teilerbreite: 4px
• Breite: 13vw

Abstand

Fügen Sie einen Wert für den oberen Rand hinzu.

• Oberer Rand:
  • Desktop: 7vw
  • Tablet + Telefon: 5vw

Verwandeln

Drehen Sie den Teiler, um ihn vertikal zu machen.

• Transformieren Drehen: 90 Grad in der ersten Option

Teilereinstellungen erweitern

Verwenden Sie die Option Stile erweitern, um die anderen Teiler zu stylen.

• Klicken Sie zunächst auf die Punkte rechts neben dem Teilermodul und wählen Sie „Teilerstile erweitern“.
• Klicken Sie dann im Popup auf „Durchgehend“ und wählen Sie „Dieser Abschnitt“.

Passen Sie die Farben an

Teiler 2

Machen Sie den zweiten Teiler gelb.

• Linienfarbe: Gelb #f2e200

Teiler 3

Machen Sie den dritten Teiler orange.

• Linienfarbe: Orange #f2b100

Teiler 4

Machen Sie den vierten Teiler orange-rot.

• Linienfarbe: Orange Rot #ef4a21

Teiler 5

Machen Sie den fünften Teiler lila.

• Linienfarbe: Lila #8e008c

Zeile 2 hinzufügen

Fügen Sie eine neue einspaltige Zeile hinzu.

Passen Sie die Zeileneinstellungen an, bevor Sie das Bildmodul hinzufügen.

Größe

Passen Sie zuerst die Größe an.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%

Sichtweite

Dann die Sichtbarkeit.

• Horizontaler und vertikaler Überlauf: Sichtbar

Bildmodul hinzufügen

Fügen Sie ein Bildmodul hinzu und laden Sie das Saftbild hoch.

Größe

Volle Breite für das Bild erzwingen.

• Volle Breite erzwingen: Ja

Zeilenabstand

Es ist Zeit für den letzten Schliff. Öffnen Sie die Einstellungen für Zeile 1 erneut und fügen Sie einen oberen und unteren Rand hinzu.

• Oberer Rand: 7vw
• Unterer Rand:
  • Desktop: -24vw
  • Tablet: -31vw
  • Telefon: -35vw

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Beispiel 1

Desktop

Handy, Mobiltelefon

Beispiel #2

Desktop

Handy, Mobiltelefon

Das ist ein Wrap!

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie zwei verschiedene Bildmarker-Designs erstellen. Wir haben die Spaltenoptionen verwendet, um die Textspalten und Teiler zusammenzuhalten. Wir hoffen, dass diese Designs Sie dazu inspirieren, Ihre eigenen Bildmarker-Designs zu erstellen. Denken Sie daran, die Transformationsübersetzungsoptionen in den Spalten zu verwenden, um die einzelnen Bildmarkierungen besser steuern zu können. Wenn Sie Fragen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen!