Divi: So erstellen Sie benutzerdefinierte Bildüberlagerungen

Möchten Sie erfahren, wie Sie benutzerdefinierte Bild-Overlays mit entwerfen Divi ?

Bild-Overlays gibt es im Webdesign schon lange. Sie eignen sich perfekt zum Mitmachen Besucher durch Offenlegung Inhalt Zusätzliche und gestalterische Elemente, wenn Sie mit der Maus über das Bild fahren. 

In diesem Tutorial zeigen wir Ihnen, wie Sie benutzerdefinierte Bild-Overlays in entwerfen Divi. Diese Überlagerungen ändern sich und zeigen Elemente an, wenn Sie mit der Maus über das Bild fahren. 

Es werden keine Plugins benötigt.

Lassen Sie uns beginnen!

Übersicht

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

Erstellen Sie eine neue Seite mit Divi Builder

Gehen Sie im WordPress-Dashboard zu Seiten> Neu hinzufügen um eine neue Seite zu erstellen.

Geben Sie ihm einen für Sie sinnvollen Titel und klicken Sie darauf Verwenden Sie die Divi Baumeister

klicken Sie dann auf Beginnen Sie mit dem Bauen (Von Grund auf neu erstellen)

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

Erstellen benutzerdefinierter Bildüberlagerungen in Divi

Gestalten Sie Abschnitt, Zeile und Spalten

Erstellen Sie zunächst eine dreispaltige Zeile im Standardabschnitt.

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

• Hintergrund: #3a0ca3

Öffnen Sie als Nächstes die Einstellungen der Spalte 1 und aktualisieren Sie Folgendes:

• CSS-Klasse: et-overlay-container

• Horizontaler Überlauf: Ausgeblendet
• Vertikaler Überlauf: Ausgeblendet

Bild hinzufügen

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

Laden Sie ein Bild hoch, das eher einem Porträt als einer Landschaft ähnelt. Stellen Sie sicher, dass es breit genug ist, um die gesamte Spaltenbreite bei allen Browsergrößen abzudecken.

HINWEIS: Sie können Bilder im Querformat verwenden, aber möglicherweise müssen Sie die Positionierung der Overlay-Elemente entsprechend anpassen, damit sie sich nicht überlappen.

Unter der Registerkarte Design, aktualisieren Sie Folgendes:

• Rand (unten): 0px

Unter der Registerkarte Fortgeschrittener, fügen Sie die folgende CSS-Klasse hinzu:

• CSS-Klasse: et-overlay-image

Hinzufügen von Bildüberlagerungsfarbe mit einem „Teiler“-Modul

Um die Bildüberlagerungsfarbe zu erstellen, verwenden wir ein Teilermodul.

Fügen Sie zuerst ein Divider-Modul unter dem Bild hinzu.

Positionieren Sie dann das Trennzeichen absolut so, dass es über dem Bild platziert wird:

• Position: Absolut

Unter der Registerkarte Inhalt, aktualisieren Sie Folgendes:

• Teiler anzeigen: NEIN

• Hintergrundfarbe: rgba(247,37,133,0.8)

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

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

Wenn das Design vorhanden ist, fügen Sie dem Splitter die folgende CSS-Klasse hinzu:

• Et-Overlay-Artikel

HINWEIS: Diese Klasse sollte allen Overlay-Designelementen hinzugefügt werden, die Sie nur beim Hover anzeigen möchten. Wenn Sie nicht möchten, dass das Element anfänglich ausgeblendet wird, lassen Sie es weg.

Um Ihnen zu helfen, den Überblick über Designelemente/Module zu behalten, öffnen Sie die Ebenen modal und beschriften Sie das Modul Divider („Overlay Color“).

Overlay-Kopfzeilentext hinzugefügt

Fügen Sie unter dem Teilermodul ein neues Textmodul hinzu. Dies dient als Overlay-Kopfzeilentext, der beim Hover über dem Bild angezeigt wird.

Aktualisieren Sie die Inhalt mit einem H2-Titel:

<h2>Coaching</h2>

Aktualisieren Sie als Nächstes die Bezeichnung des Textmoduls für zukünftige Referenzzwecke.

Unter der Registerkarte Design, aktualisieren Sie Folgendes:

• Textausrichtung: Zentriert
• Textfarbe: Hell

• Schriftart: Cormorant Garamond
• Schriftdicke: fett
• Textgröße: 40px

• Breite: 100 %
• Maximale Breite: 85 %

Unter der Registerkarte Fortgeschrittener, aktualisieren Sie die Position wie folgt:

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

HINWEIS: Je nach Seitenverhältnis des Bildes muss der vertikale Versatz möglicherweise angepasst werden. Beispielsweise kann ein Bild im Querformat weniger Versatz erfordern

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

• CSS-Klasse: et-overlay-item movedown

Neben Klasse „and-overlay-item“, fügen wir eine zusätzliche Klasse hinzu "sich abwärts bewegen" um das benutzerdefinierte CSS zu verwenden, um die Kopfzeile beim Schweben leicht nach unten zu verschieben.

Erstellen des überlagerten Textkörpers

Um die Textüberlagerung zu erstellen, können wir das Textmodul duplizieren, das für die Kopfzeilenüberlagerung verwendet wird. Ändern Sie vor dem Aktualisieren der doppelten Parameter die Bezeichnung in „Overlay Body“.

Öffnen Sie die Texteinstellungen des neuen Textmoduls und aktualisieren Sie die Inhalt des Hauptteils mit ein paar Sätzen Absatztext.

Unter der Registerkarte Fortgeschrittener, ändern Sie die absolute Position des Moduls in die Mitte.

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

• CSS-Klasse: et-overlay-item

Erstellen der Overlay-Schaltfläche

Die letzte Überlagerung auf diesem Bild ist die Schaltfläche. Um die Schaltfläche zu erstellen, fügen Sie ein neues Schaltflächenmodul unter dem zweiten Textmodul hinzu.

Bevor Sie das Design ändern, aktualisieren Sie die Position der Schaltfläche wie folgt:

• Position: absolut
• Vertikaler Versatz: 10 %

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

In der Registerkarte Fortgeschrittener, aktualisieren Sie die CSS-Klasse und fügen Sie dem Hauptelement wie folgt ein benutzerdefiniertes CSS-Snippet hinzu:

• CSS-Klasse: et-overlay-item moveup

• Haupt-CSS-Element:

min-width: 15em;

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

Aktualisieren Sie als Nächstes die folgenden Designeinstellungen:

• Tastenausrichtung: zentriert
• Benutzerdefinierte Stile für Schaltfläche verwenden: JA
• Schaltflächentextgröße: 14px
• Hintergrundfarbe: #4361ee

• Rahmenbreite der Schaltfläche: 0 Pixel
• Tastenabstand: 0,1 em
• Schriftdicke: fett
• Schaltflächen-Schriftstil: TT
• Polsterung: 0,8em (oben und unten), 0px (links und rechts)

Hinzufügen von benutzerdefiniertem CSS mit dem Code-Modul

Fügen Sie unterhalb 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 nachvollziehen können, wo Sie das CSS an Ihre Bedürfnisse anpassen können.

Duplizieren Sie die Spalte für mehr Design

Öffnen Sie die Modalebene, löschen Sie zuerst die beiden leeren Spalten.

Duplizieren Sie dann die Spalte mit dem Bildüberlagerungsdesign zweimal. Sie sollten insgesamt drei Säulen mit identischem Design haben.

Erstellen eines Bildüberlagerungsdesigns Nr. 2

Für dieses nächste Design platzieren wir die Schaltfläche in der Mitte des Bildes (immer sichtbar). Als Nächstes verschieben wir den Kopf- und Textkörper von oben und unten im Bild in die Ansicht.

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

Öffnen Sie die Overlay-Body-Textmodul-Einstellungen in Spalte 2 und aktualisieren Sie die Position:

• Ort: unten in der Mitte
• Vertikaler Versatz: 5 %

Aktualisieren Sie als Nächstes die CSS-Klasse mit Folgendem:

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

Passen Sie die Position der Schaltfläche und die CSS-Klasse an

Öffnen Sie als Nächstes die Schaltflächeneinstellungen in Spalte 2 und aktualisieren Sie die folgende Positionsposition:

• Ort: Zentrum

Entfernen Sie als Nächstes die CSS-Klasse, da die Schaltfläche immer sichtbar bleiben soll.

Öffnen Sie die Einstellungen des Teilermoduls (Überlagerungsfarbe) und ändern Sie den Hintergrund wie folgt:

• Hintergrund: rgba(67,97,238,0.8)

Öffnen Sie dann die Schaltflächeneinstellungen und ändern Sie die Hintergrundfarbe:

• Hintergrundfarbe: #f72585

CSS-Bild und -Klasse anpassen

Öffnen Sie dann die Bildeinstellungen und laden Sie ein neues Bild hoch (falls gewünscht).

Fügen Sie dem Bild dann 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 das Bild vergrößert und beim Hover einen Zoom-in-Effekt erzeugt.

Erstellen eines Bildüberlagerungsdesigns Nr. 3

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

Passen Sie den Overlay-Textinhalt und die CSS-Klasse an

Beginnen Sie mit dem Öffnen der Overlay-Textmoduleinstellungen in Spalte 3. Fügen Sie als Nächstes die Überschrift H2 über dem Absatztext hinzu. Jetzt befinden sich beide in einem Modul.

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

Button-Offset und CSS-Klasse anpassen

Öffnen Sie die Einstellungen des Schaltflächenmoduls und aktualisieren Sie den vertikalen Positionsversatz:

• Vertikaler Versatz: 5 %

Overlay-Header entfernen

Entfernen Sie als Nächstes das Overlay Header Text-Modul.

Überlagerungsfarbe und CSS-Klasse anpassen

Öffnen Sie die Einstellungen des Teilermoduls (Überlagerungsfarbe) und aktualisieren Sie den Hintergrund wie folgt:

• Farbverlauf linker Hintergrund: rgba(67,97,238,0.8)
• Verlaufsfarbe rechter Hintergrund: rgba(247,37,133,0.8)
• Ausgangsposition: 25%
• Endposition: 75%

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

Passen Sie die CSS-Klasse des Bildes an

Schließlich fügen wir dem Hauptbild eine zusätzliche CSS-Klasse („et-rotate“) hinzu, die das Bild beim Hover in der Größe ändert und 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

Da wir den Rand bereits mit einem unteren Rand von 0px aktualisiert haben, können wir diesen Rand auf alle Module ausdehnen.

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

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

Entfernen Sie doppelte Codemodule

Achten Sie darauf, die zusätzlichen Codemodule zu entfernen, die von der ersten Spaltenduplizierung übernommen wurden. Du solltest nur einen haben. Sie können dies ganz einfach über die Modalschichten tun.

Endergebnisse

Nachdem unsere drei Designs nun fertig sind, werfen wir einen Blick auf die Endergebnisse unserer Bildüberlagerungsdesigns.

Laden Sie DIVI jetzt herunter!!!

Und hier ist das Design auf dem Handy. Overlay-Hover-Effekte gelten nur auf dem Desktop. Daher sind Overlays auf Mobilgeräten weiterhin sichtbar.

Laden Sie DIVI jetzt herunter!!!

Zusammenfassung

Das Erstellen benutzerdefinierter Bildüberlagerungen macht tatsächlich viel Spaß. Es gibt unzählige Designs, die Sie mit dem Divi Builder visuell testen können. 

Wir hoffen, dass dieses Tutorial Sie für Ihre nächsten Divi-Projekte inspirieren wird. Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.

Sie können sich auch beraten lassen unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.

Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.

...