So entwerfen Sie benutzerdefinierte Bildüberlagerungen in Divi

Bild-Overlays gibt es im Webdesign schon lange. Sie eignen sich hervorragend, um Besucher zu begeistern, indem sie zusätzliche Inhalte und Designelemente anzeigen, wenn sie mit der Maus über das Bild fahren. Da dies eine so beliebte Designfunktion ist, gibt es viele Plugins, die sich der Erstellung von Bildüberlagerungen widmen. Abhängig vom Plugin können sie jedoch ziemlich einschränkend sein oder für das, was Sie möglicherweise benötigen, etwas übertrieben sein. Deshalb hilft es, das Know-how zu haben, diese selbst in Divi zu bauen.

In diesem Tutorial zeigen wir Ihnen, wie Sie benutzerdefinierte Bildüberlagerungen in Divi entwerfen. Diese Überlagerungen ändern und zeigen Elemente an, wenn Sie mit der Maus über das Bild fahren. Das Beste daran ist, dass Sie mit den integrierten Designoptionen von Divi die vollständige Kontrolle über das Design Ihrer Bildüberlagerungen haben. Und mit ein paar benutzerdefinierten CSS-Schnipseln können Sie einige wunderschöne Bild-Overlays erstellen, um Ihre Website auf die nächste Stufe zu heben. Es ist kein Plugin erforderlich.

Lass uns anfangen!

Vorgeschmack

Hier ist ein kurzer Blick auf das Design, das wir in diesem Tutorial erstellen werden.

Laden Sie das Divi Image Overlays Layout KOSTENLOS herunter

Um die Designs aus diesem Tutorial in die Hände zu bekommen, müssen Sie es zuerst ü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!

Um das Abschnittslayout in Ihre Divi-Bibliothek zu importieren, navigieren Sie zur Divi-Bibliothek.

Klicken Sie auf die Schaltfläche Importieren.

Wählen Sie im Portabilitäts-Popup die Registerkarte Import und wählen Sie die Download-Datei von Ihrem Computer.

Klicken Sie dann auf die Schaltfläche Importieren.

Sobald dies erledigt ist, wird das Abschnittslayout im Divi Builder verfügbar sein.

Kommen wir zum Tutorial, ja?

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie Folgendes tun:

1. Falls noch nicht geschehen, installieren und aktivieren Sie das Divi-Theme.
2. Erstellen Sie eine neue Seite in WordPress und verwenden Sie den Divi Builder, um die Seite im Frontend zu bearbeiten (visueller Builder).
3. Wählen Sie die Option „Von Grund auf neu erstellen“.

Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.

Erstellen von benutzerdefinierten Bildüberlagerungen in Divi

Erstellen des Abschnitts, der Zeile und der Spalten

Erstellen Sie zunächst eine dreispaltige Zeile im Standardabschnitt.

Öffnen Sie die Abschnittseinstellungen und fügen Sie die folgende Hintergrundfarbe hinzu:

• Hintergrundfarbe: #3a0ca3

Öffnen Sie als Nächstes die Einstellungen für Spalte 1 und aktualisieren Sie Folgendes:

• CSS-Klasse: et-overlay-container
• Horizontaler Überlauf: Versteckt
• Vertikaler Überlauf: Versteckt

Die CSS-Klasse wird benötigt, um die Hover-Effekte der Overlay-Elemente auszulösen, die wir erstellen werden. Der versteckte Überlauf ist erforderlich, da wir einen Hover-Effekt haben, der das Bild über den Spaltencontainer hinaus skaliert.

Bild hinzufügen

Nun, da der Abschnitt, die Zeile und die Spalte fertig sind, fügen Sie ein neues Bildmodul zu Spalte 1 hinzu. Dies wird das Hauptbild hinter unseren Overlay-Designs sein.

Laden Sie ein Bild hoch, das eher ein Porträt als eine Landschaft ist. Ich verwende eine, die ungefähr 800px x 1050px groß ist. Stellen Sie sicher, dass es breit genug ist, um die gesamte Breite der Spalte in allen Browsergrößen zu umfassen.

(HINWEIS: Sie können Bilder im Querformat verwenden, müssen jedoch möglicherweise die Positionierung der Überlagerungselemente entsprechend anpassen, damit sie sich nicht überlappen.)

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

• Rand: 0px unten

Fügen Sie auf der Registerkarte "Erweitert" die folgende CSS-Klasse hinzu:

• CSS-Klasse: et-overlay-image

Hinzufügen der Bildüberlagerungsfarbe mit einem Teilermodul

Um die Bildüberlagerungsfarbe zu erstellen, verwenden wir ein Teilermodul. Die Idee besteht darin, eine Abdeckung über dem Bild zu erstellen, indem der Trenner die gesamte Höhe und Breite der Spalte überspannt, sodass er perfekt über dem Bild sitzt. Sobald Sie sich in Position befinden, können Sie die Hintergrundfarbe des Teilermoduls anpassen, um die gewünschte Überlagerungsfarbe zu erhalten.

Fügen Sie zunächst ein Trennmodul unter dem Bild hinzu.

Positionieren Sie dann den Teiler als absolut, so dass er über dem Bild sitzt:

• Position: Absolut

Aktualisieren Sie auf der Registerkarte "Inhalt" Folgendes:

• Teiler anzeigen: NEIN
• Hintergrundfarbe: rgba(247,37,133,0,8)

Aktualisieren Sie dann die Höhe und Breite des Teilers:

• Breite: 100%
• Höhe: 100%

Sobald das Design an Ort und Stelle ist, fügen Sie dem Trenner die folgende CSS-Klasse hinzu:

• et-overlay-element

(HINWEIS: Diese Klasse sollte allen Overlay-Design-Elementen hinzugefügt werden, die nur beim Bewegen der Maus angezeigt werden sollen. Wenn das Element zunächst nicht ausgeblendet werden soll, lassen Sie es weg.)

Um den Überblick über die Designelemente/Module zu behalten, öffnen Sie die Ebenen modal und beschriften Sie das Trennmodul („Überlagerungsfarbe“).

Hinzufügen des Overlay-Überschriftstextes

Fügen Sie unter dem Trennmodul ein neues Textmodul hinzu. Dies dient als Überlagerungsüberschriftstext, der beim Bewegen des Mauszeigers oben im Bild angezeigt wird.

Aktualisieren Sie den Inhalt mit einer H2-Überschrift:

<h2>Coaching</h2>

Aktualisieren Sie dann die Beschriftung des Textbausteins für eine spätere Referenzierung.

Aktualisieren Sie unter den Textdesign-Einstellungen Folgendes:

• Textausrichtung: Mitte
• Textfarbe: Hell

• Überschrift 2 Schriftart: Kormoran Garamond
• Überschrift 2 Schriftstärke: Fett
• Überschrift 2 Textgröße: 40px

• Breite: 100%
• Max-Breite: 85%

Aktualisieren Sie die Position auf der Registerkarte "Erweitert" wie folgt:

• Position: Absolut
• Ort: oben Mitte
• Vertikaler Versatz: 10%

(HINWEIS: Der vertikale Versatz muss möglicherweise je nach Größe des Seitenverhältnisses des Bildes angepasst werden. Zum Beispiel benötigt ein Bild im Querformat möglicherweise einen geringeren Versatz.)

Als nächstes fügen Sie dem Textmodul die folgenden CSS-Klassen hinzu:

• CSS-Klasse: et-overlay-item nach unten verschieben

Zusätzlich zur „et-overlay-item“-Klasse fügen wir eine zusätzliche „move-down“-Klasse hinzu, um benutzerdefiniertes CSS zu verwenden, um die Überschrift beim Hover leicht nach unten zu verschieben.

Erstellen des Overlay-Haupttextes

Um den Überlagerungstext zu erstellen, können wir das für die Überlagerungsüberschrift verwendete Textmodul duplizieren. Bevor wir die Einstellungen für das Duplikat aktualisieren, ändern Sie das Label in „Overlay Body“.

Öffnen Sie die Texteinstellungen für den neuen Textbaustein und aktualisieren Sie den Fließtext mit einigen Sätzen Absatztext.

Ändern Sie auf der Registerkarte "Erweitert" die absolute Position des Moduls in die Mitte.

Da wir nicht möchten, dass sich diese beim Hover bewegt (nur erscheint), aktualisieren Sie die CSS-Klasse so, dass sie nur Folgendes enthält:

• CSS-Klasse: et-overlay-item

Erstellen der Overlay-Schaltfläche

Das letzte Overlay-Element in diesem Bild ist die Schaltfläche. Um die Schaltfläche zu erstellen, fügen Sie ein neues Schaltflächenmodul unter dem Textbaustein „Textkörper“ hinzu.

Aktualisieren Sie vor dem Ändern des Designs die Position der Schaltfläche wie folgt:

• Position: absolut
• Vertikaler Versatz: 10%

Jetzt sollte die Schaltfläche im unteren Bereich des Bildes zentriert sein.

Aktualisieren Sie auf der Registerkarte "Erweitert" die CSS-Klasse und fügen Sie dem Hauptelement wie folgt ein benutzerdefiniertes CSS-Snippet hinzu:

• CSS-Klasse: et-overlay-item move-up
• Hauptelement-CSS:

  min-width: 15em

Beachten Sie, dass der Schaltfläche eine zusätzliche Klasse hinzugefügt wurde, um sie beim Hovern leicht nach oben zu bewegen. Dies soll die Abwärtsbewegung des Überschrifttextes beim Schweben ergänzen.

Aktualisieren Sie dann die folgenden Designeinstellungen:

• Tastenausrichtung: Mitte
• Schaltflächentextgröße: 14px
• Schaltfläche Hintergrundfarbe: #4361ee
• Schaltfläche Rahmenbreite: 0px
• Tasten-Buchstaben-Abstand: 0.1em
• Schriftstärke der Schaltfläche: Fett
• Schaltflächenschriftart: TT
• Polsterung: 0.8em oben, 0.8em unten, 0px links, 0px rechts

Hinzufügen des benutzerdefinierten CSS mit dem Codemodul

Bevor wir einige andere Versionen dieses Overlay-Designs erstellen, fügen wir das benutzerdefinierte CSS hinzu, das für die Overlay-Hover-Effekte benötigt wird. Fügen Sie dazu unter der Schaltfläche ein Codemodul hinzu.

Fügen Sie dann das folgende CSS in den Codeinhalt ein. Vergessen Sie nicht, den Code in die erforderlichen Skript-Tags einzuschließen.

<style>
 @media all and (min-width: 981px) {
  
  .et-fb-root-ancestor .et-overlay-item {
    opacity: 1; /*shows hidden overlay items when using the visual Divi Builder*/
  }
  .et-overlay-item {
    opacity: 0; /*hides overlay items by default*/
    margin-bottom: 0px;
  }
  .et-overlay-item, .et-overlay-image {
    transition: all 400ms !important; /*sets transition speed of all overlay items*/
  }
  .et-overlay-container:hover .et-overlay-item {
    opacity: 1; /*reveals hidden overlay items on hover*/
  }
  .et-overlay-container:hover .et-overlay-image {
    /*add new styles here to change image on hover*/
  }
  .et-overlay-container:hover .et-overlay-image.et-scale {
    transform: scale(1.2); /*adjust scale of image here*/
  }
  .et-overlay-container:hover .et-overlay-image.et-rotate {
    transform: scale(1.4)
    rotateZ(10deg)!important; /*adjust rotation of image and scale needed for rotation here*/
  }  
  .et-overlay-container:hover .et-overlay-item.move-up {
    margin-bottom: 15% !important; /*adjust how far you want the overlay item to move up*/
  }
  .et-overlay-container:hover .et-overlay-item.move-down {
    margin-top: 10%; /*adjust how far you want the overlay item to move down*/
  }

}
</style>

Der Code ist kommentiert, damit Sie verstehen, wo Sie das CSS nach Bedarf anpassen können.

Duplizieren der Spalte für mehr Designs

Obwohl wir bereits zwei zusätzliche leere Spalten haben, mit denen wir arbeiten können, ist es einfacher, alle Module und das Design innerhalb der ersten Spalte in eine neue Spalte zu übertragen, indem die gesamte Spalte dupliziert wird. Öffnen Sie dazu die Ebenen modal, löschen Sie die beiden leeren Spalten und duplizieren Sie dann die Spalte mit dem Bildüberlagerungsdesign zweimal. Sie sollten insgesamt drei Spalten mit identischen Designs haben.

Erstellen eines Bild-Overlay-Designs #2

Nachdem wir nun alle Designelemente in jeder der Spalten platziert haben, können wir das Design optimieren, um zusätzliche Bildüberlagerungen zu erstellen. Für dieses nächste Design platzieren wir die Schaltfläche in der Mitte des Bildes (immer sichtbar). Dann verschieben wir die Überschrift und den Fließtext vom oberen und unteren Rand des Bildes in die Ansicht.

Passen Sie die Position des Textkörpers und die CSS-Klasse an

Öffnen Sie die Einstellungen für das Overlay-Body-Text-Modul in Spalte 2 und aktualisieren Sie die Position:

• Ort: Unten Mitte
• Vertikaler Versatz: 5%

Aktualisieren Sie dann die CSS-Klasse wie folgt:

• CSS-Klasse: et-overlay-item move-up

Schaltflächenposition und CSS-Klasse anpassen

Öffnen Sie als Nächstes die Einstellungen für die Schaltfläche in Spalte 2 und aktualisieren Sie die folgende Positionsposition:

• Ort: Zentrum Zentrum

Nehmen Sie dann die CSS-Klasse heraus, da wir die Schaltfläche immer sichtbar halten möchten.

Öffnen Sie die Einstellungen für das Trennmodul (Overlay-Farbe) und ändern Sie den Hintergrund wie folgt:

• Hintergrundfarbe: rgba(67,97,238,0,8)

Öffnen Sie dann die Einstellungen für die Schaltfläche und ändern Sie die Hintergrundfarbe:

• Schaltflächenhintergrundfarbe: #f72585

Bild- und CSS-Klasse anpassen

Als nächstes öffnen Sie die Einstellungen für das Bild und laden ein neues Bild hoch (wenn Sie möchten).

Fügen Sie dann dem Image die folgende CSS-Klasse hinzu:

• CSS-Klasse: et-overlay-image et-scale

Beachten Sie, dass es zusätzlich zur Klasse „et-overlay-image“ eine zusätzliche Klasse namens „et-scale“ gibt, die bewirkt, dass das Bild vergrößert wird, wodurch beim Hover ein Zoom-Effekt erzeugt wird.

Erstellen eines Bild-Overlay-Designs #3

Jetzt ist es an der Zeit, das dritte Bild-Overlay-Design in Spalte 3 zu erstellen.

Passen Sie den Inhalt des Overlay-Textkörpers und die CSS-Klasse an

Öffnen Sie zunächst die Einstellungen für das Overlay-Body-Text-Modul in Spalte 3 und fügen Sie die H2-Überschrift über dem Absatztext ein. Jetzt befinden sich die beiden in einem Modul anstelle von zwei.

Nehmen Sie dann die CSS-Klasse heraus, damit der Text über dem Bild sichtbar bleibt.

Anpassen des Schaltflächenversatzes und der CSS-Klasse

Öffnen Sie die Einstellungen für das Tastenmodul und aktualisieren Sie den vertikalen Versatz der Position:

• Vertikaler Versatz: 5%

Overlay-Überschrift löschen

Löschen Sie als Nächstes das Textmodul für die Überlagerungsüberschrift.

Overlay-Farbe und CSS-Klasse anpassen

Öffnen Sie die Einstellungen für das Trennmodul (Overlay-Farbe) und aktualisieren Sie den Hintergrund wie folgt:

• Hintergrundfarbe links: rgba(67,97,238,0.8)
• Hintergrundfarbe rechts: rgba(247,37,133,0.8)
• Startposition: 25%
• Endposition: 75%

Und da wir die Verlaufsüberlagerung jederzeit sichtbar halten möchten, entfernen Sie die CSS-Klasse.

Bild-CSS-Klasse anpassen

Schließlich werden wir dem Hauptbild eine zusätzliche CSS-Klasse ("et-rotate") hinzufügen, die das Bild beim Schweben sowohl skaliert als auch dreht.

• CSS-Klasse: et-overlay-image et-rotate

Letzter Schliff

Bevor wir unsere endgültigen Ergebnisse überprüfen, müssen wir einige Anpassungen vornehmen.

Entfernen Sie den standardmäßigen unteren Rand für alle Module

Standardmäßig hat jedes Modul einen unteren Rand von 30px aufgrund der standardmäßigen Bundstegbreite (3) in den Zeileneinstellungen. Dies kann die Positionierung der Module in unserem Overlay-Design durcheinander bringen. Um sie herauszunehmen, öffnen Sie die Bildmoduleinstellungen für eines der Bilder im Design. Da wir den Rand bereits mit einem unteren Rand von 0px aktualisiert haben, können wir diesen Rand auf alle Module erweitern.

Klicken Sie mit der rechten Maustaste auf die Randeinstellung und wählen Sie „Rand erweitern“.

Wählen Sie dann aus, den Rand auf Alle Module auf der Seite zu erweitern.

Doppelte Codemodule löschen

Achten Sie darauf, zusätzliche Codemodule zu löschen, die beim Duplizieren der ersten Spalte übernommen wurden. Du solltest nur einen haben. Sie können dies ganz einfach über die Ebenen-Modal tun.

Endgültige Ergebnisse

Nachdem unsere drei Designs nun fertig sind, sehen wir uns die Endergebnisse unserer Bildüberlagerungsdesigns an.

Und hier ist das Design auf dem Handy. Die Overlay-Hover-Effekte gelten nur für den Desktop über die benutzerdefinierte CSS-Medienabfrage im Codemodul. Daher sind die Overlays immer auf dem Handy sichtbar.

Abschließende Gedanken

Das Erstellen benutzerdefinierter Bild-Overlays macht tatsächlich viel Spaß. Es gibt unzählige Designs, die Sie mit dem Divi-Builder visuell testen können, und es ist nur wenig benutzerdefiniertes CSS erforderlich, um die Hover-Effekte anzuwenden. Auch die Hover-Effekte für die Overlay-Elemente erfordern benutzerdefiniertes CSS. Sie können dennoch die integrierten Hover-Optionen nutzen, um jedes der Overlay-Elemente einzeln anzusprechen.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!