So erstellen Sie mit Divi Builder eine Überlagerung von Bildern

Bildüberlagerungen sind eine der besten Möglichkeiten, Besucher zu motivieren, indem Sie Ihren Besuchern zusätzliche Informationen anzeigen. Normalerweise geschieht dies, wenn die Maus über ein Element oder Bild schwebt. Da dies sehr beliebt ist, haben Sie möglicherweise bereits viele WordPress-Plugins bemerkt, die Ihnen dabei helfen, dies zu erreichen. Wenn du Divi wie mich liebst, fragen Sie sich vielleicht, wie es mit Divi geht? Das werden wir heute behandeln.

In diesem Tutorial zeigen wir Ihnen, wie Sie in Divi Builder benutzerdefinierte Bildüberlagerungen entwerfen. Diese Überlagerungen schalten Elemente um und zeigen sie an, wenn Sie mit der Maus darüber fahren. Was Sie vielleicht interessant finden, ist, dass Sie das Design nur mit den in Divi integrierten Optionen besser steuern können. Möglicherweise verwenden wir CSS-Code, wodurch die Dinge noch besser aussehen.

Erwartetes Ergebnis

Hier ist ein kurzer Blick darauf, was Sie am Ende dieses Tutorials erhalten könnten.

Erforderliche Komponenten vor dem Start

Bevor Sie in das Lernprogramm springen, müssen Sie einige Anforderungen erfüllen, die erforderlich sind, um dieses Lernprogramm reproduzieren zu können. Sie benötigen daher:

• Installieren und aktivieren Sie Divi
• Erstellen Sie eine neue Seite in WordPress und verwenden Sie den Divi Builder im Frontend
• Wählen Sie die Option "Von Grund auf neu erstellen".

Wenn Sie danach eine leere Seite haben, können Sie loslegen.

Erstellen von benutzerdefinierten Bildüberlagerungen in Divi

Erstellen des Abschnitts, der Zeile und der Spalten

Wir beginnen mit der Auswahl einer dreispaltigen Zeile im Standardabschnitt.

Öffnen Sie die Abschnittseinstellungen und verwenden Sie die folgende Hintergrundfarbe:

• Hintergrundfarbe: # 3a0ca3

Wechseln Sie anschließend zu den Einstellungen für Spalte 1 und ändern Sie die folgenden Optionen:

• CSS-Klasse: et-overflow-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 werden, der das Bild über den Spaltencontainer hinaus skaliert.

Hinzufügen des Bildes

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

Laden Sie ein Bild hoch, das sich in einem Porträt befindet. Ich verwende eine, die ungefähr 1280 x 1920 Pixel groß ist. Stellen Sie sicher, dass es breit genug ist, um die gesamte Breite der Spalte bei allen Browsergrößen zu überspannen.

Ändern 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-Bild

Auswählen der Bildüberlagerungsfarbe mithilfe eines Teilermoduls

Um die Bildüberlagerungsfarbe zu erstellen, verwenden wir ein Teilermodul. Die Idee ist, eine Abdeckung über dem Bild zu erstellen, indem der Teiler in voller Höhe und Breite definiert wird, der die Spalte abdeckt, damit er perfekt über das Bild passt. Nach dem Einstellen können Sie die Hintergrundfarbe des Teilermoduls anpassen, um die gewünschte Überlagerungsfarbe zu erhalten.

Fügen wir also zuerst ein Teilermodul unter dem Bild hinzu.

Positionieren Sie dann den Teiler als absolut, sodass er über dem Bild angezeigt wird:

• Position: Absolut

Aktualisieren Sie auf der Registerkarte "Inhalt" Folgendes:

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

Ändern Sie dann die Höhe und Breite des Teilers:

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

Fügen Sie dem Teiler nach Definition des Designs die folgende CSS-Klasse hinzu:

• Et-overlay-item

Warnung: Diese Klasse sollte allen Overlay-Designkomponenten hinzugefügt werden, die nur beim Hover angezeigt werden sollen. Wenn Sie nicht möchten, dass das Element zunächst ausgeblendet wird, verwenden Sie es nicht.

Optional können Sie den in eine Überlagerung verwandelten Teiler mit einem eindeutig identifizierbaren Namen kennzeichnen. Das kann aus der Ebene gemacht werden und Sie können "Überlagerung" verwenden.

Hinzufügen des Überlagerungstextes

Fügen Sie unter dem Teilermodul ein neues Textmodul hinzu. Dies wird als Überlagerungstext verwendet und beim Hover oben im Bild angezeigt.

Ändern Sie den Inhalt mit einer H2-Überschrift:

<h2>Happiness</h2>

Sie können auch die Bezeichnung des Textmoduls ändern, um später darauf verweisen zu können.

Ändern Sie unter den Einstellungen für das Textdesign Folgendes:

• Textausrichtung: Mitte
• Textfarbe: Licht

• Überschrift 2 Schriftart: Kormoran Garamond
• Überschrift 2 Schriftgröße: Fett
• Überschrift 2 Textgröße: 40px

• Breite: 100%
• Maximale Breite: 85%

Ändern Sie auf der Registerkarte "Erweitert" die Position wie folgt:

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

Warnung: Der vertikale Versatz muss möglicherweise an die Größe des Seitenverhältnisses des Bildes angepasst werden.

Fügen Sie dann dem Textmodul die folgenden CSS-Klassen hinzu:

• CSS-Klasse: Et-Overlay-Element nach unten verschieben

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

Erstellen des Überlagerungstextes

Um den Überlagerungstext zu erstellen, können wir das für die Überlagerungsüberschrift verwendete Textmodul duplizieren. Bevor Sie die Einstellungen ändern, geben Sie diesem Modul eine andere Bezeichnung. Dieses Mal verwenden wir "Overlay Body".

Öffnen Sie die Texteinstellungen für das neue Textmodul und aktualisieren Sie den Textinhalt 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 dieser beim Schweben bewegt (nur angezeigt), aktualisieren Sie die CSS-Klasse so, dass sie nur Folgendes enthält:

• CSS-Klasse: Et-Overlay-Element

Erstellen der Überlagerungsschaltfläche

Das letzte Überlagerungselement in diesem Bild ist die Schaltfläche. Fügen Sie zum Erstellen der Schaltfläche ein neues Schaltflächenmodul unter dem Textmodul "Textkörper" hinzu.

Bevor Sie das Design aktualisieren, ändern Sie 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 einen Ausschnitt aus benutzerdefiniertem CSS wie folgt hinzu:

• CSS-Klasse: Et-Overlay-Element nach oben verschieben
• Hauptelement CSS: min-width: 15em

Beachten Sie, dass hier der Schaltfläche eine zusätzliche Klasse hinzugefügt wurde, um sie beim Hover leicht nach oben zu verschieben. Dies ergänzt die Abwärtsbewegung des Überschriftentextes beim Schweben.

Aktualisieren Sie dann die folgenden Designeinstellungen:

• Tastenausrichtung: Mitte
• Textgröße der Schaltfläche: 14px
• Schaltfläche Hintergrundfarbe: # 4361ee
• Schaltfläche Rahmenbreite: 0px
• Tastenbuchstabenabstand: 0.1em
• Gewicht der Tastenschrift: Fett
• Tastenschriftart: TT
• Polsterung: 0,8 em oben, 0,8 em unten, 0 Pixel links, 0 Pixel rechts

Ergänzung mit benutzerdefiniertem Codemodul

Bevor Sie zur anderen Version wechseln, fügen Sie etwas CSS hinzu, um den Hover-Effekt hinzuzufügen. Fügen Sie dazu unter der Schaltfläche ein Codemodul hinzu.

Fügen Sie dann das folgende CSS in den Code-Inhalt 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 enthält einige Kommentare, damit Sie verstehen, wo Sie das CSS nach Bedarf anpassen können.

Duplizieren der Spalte für andere Abschnitte

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

Ich lasse Sie entscheiden, welche Farben Sie auf die Spalten 2 und 3 anwenden. Lassen Sie uns nicht sehen, was das Endergebnis ist.

Endgültige Ergebnisse

Nachdem unsere drei Entwürfe vollständig sind (ich hoffe, Sie haben das Design für die beiden verbleibenden Spalten geändert), sehen wir uns die endgültigen Ergebnisse unserer Entwürfe an.

Zusammenfassung

Das Erstellen einer Bildüberlagerung ist mit Zwei tatsächlich möglich. Es gibt unzählige Designs, die Sie mit dem Divi Builder visuell erstellen können, und es ist nur eine geringe Menge an benutzerdefiniertem CSS erforderlich, um einige Hover-Effekte anzuwenden.