So erstellen Sie eine Bildüberlagerung mit Split-Text-Shutter-Animationsdesigns in Divi

Bild-Overlays sind nach wie vor ein beliebtes Design-Asset bei der Anzeige von Bildern auf Ihrer Website. Sie bieten nicht nur eine kreative Möglichkeit, Bilder zu präsentieren, sondern können auch das Betrachten von Bildern für Besucher unterhaltsamer und ansprechender machen, insbesondere wenn Sie benutzerdefinierte Animationen hinzufügen, wenn Sie mit der Maus darauf zeigen oder auf das Bild klicken.

In diesem Tutorial zeigen wir Ihnen, wie Sie in Divi eine Bildüberlagerung mit Split-Text-Shutter-Animation erstellen. Zuerst zeigen wir Ihnen, wie Sie die benutzerdefinierte Bildüberlagerung mit geteilten Textblenden erstellen. Dann zeigen wir Ihnen, wie Sie die integrierten Transformationsoptionen von Divi verwenden können, um die drei völlig einzigartigen Animationsdesigns für Bild-Overlay-Shutter-Animationen zu erstellen. Wir zeigen Ihnen sogar ein paar weitere Beispieldesigns, um diese kreativen Säfte zum Fließen zu bringen.

Lass uns einsteigen und loslegen!

Vorgeschmack

Hier ist ein kurzer Blick auf die Bild-Overlay-Designs aus diesem Tutorial.

Und hier ist ein Codepen, der das gleiche Design demonstriert, das in diesem Tutorial verwendet wird.

Laden Sie das Layout KOSTENLOS herunter

Um die Animationsdesigns für geteilte Textverschlüsse mit Bildüberlagerungen aus diesem Tutorial in die Hände zu bekommen, müssen Sie sie 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.

Teil 1: Erstellen der Bildüberlagerung mit geteilten Textverschlüssen

In diesem ersten Teil des Tutorials werden wir die Ersteinrichtung der Bildüberlagerung mit den geteilten Textblenden erstellen. Sobald dies erledigt ist, können wir später Animationen zu den Fensterläden hinzufügen.

Die Reihe

Fügen Sie zunächst eine zweispaltige Zeile zum regulären Abschnitt hinzu.

Öffnen Sie vor dem Hinzufügen von Modulen die Zeileneinstellungen und aktualisieren Sie die Bundstegbreite:

• Dachrinnenbreite: 2

Aktualisieren der Spalte

Die Spalte ist der Hauptcontainer, der unser Bild und die Shutter-Overlay-Elemente enthält. Es wird auch das Hauptziel sein, das die Verschlussanimation beim Schweben einleitet. Mit anderen Worten, wenn sich der Cursor innerhalb der Spalte bewegt, wird die Animation der untergeordneten Elemente (der Fensterläden) eingeschaltet, und wenn sich der Cursor außerhalb der Spalte bewegt, wird die Animation ausgeschaltet.

Um unsere Spalte als „Shutter-Spalte“ zu kennzeichnen und später „bei Hover“ zu animieren, fügen Sie der Spalte die folgenden CSS-Klassen hinzu:

• CSS-Klasse: Shutter-Column on-hover

Aktualisieren Sie dann die Überläufe auf ausgeblendet, damit wir die transformierten Elemente nicht sehen, sobald sie während der Animation über den Spaltencontainer hinausgehen.

• Horizontaler Überlauf: Versteckt
• Vertikaler Überlauf: Versteckt

Hinzufügen des Hauptbilds

Fügen Sie in Spalte 1 ein Bildmodul hinzu. Dies wird als das Hauptbild dienen, das wir hinter dem Verschluss-Overlay sitzen werden.

Laden Sie ein Bild in das Bildmodul hoch.

Stellen Sie dann die Ausrichtung des Bildes auf die Mitte ein.

Erstellen des oberen Verschlusses mit geteiltem Text

Nachdem unser Bild nun vorhanden ist, fügen wir den oberen Verschluss mithilfe eines Textmoduls hinzu. Fügen Sie unter dem Bild ein neues Textmodul hinzu.

Aktualisieren Sie den Inhalt des Textmoduls, indem Sie dem Textbereich den Text „divi“ hinzufügen.

Aktualisieren Sie auf der Registerkarte Design den Textstil wie folgt:

• Textschriftart: Poppins
• Schriftstärke des Textes: Schwer
• Textschriftart: TT
• Text Textfarbe: #ffffff
• Text Textgröße: 200px (Desktop), 30vw (Tablet und Telefon)
• Text-Buchstaben-Abstand: -0.03em
• Textzeilenhöhe: 0em
• Textausrichtung: Mitte

Aktualisieren Sie als Nächstes die Größen- und Abstandsoptionen:

• Breite: 100%
• Höhe: 50%
• Rand: 0px unten

Aktualisieren Sie auf der Registerkarte Erweitert Folgendes:

• CSS-Klasse: top-shutter

Wir verwenden die CSS-Klasse, um die Transformationsanimation später mit unserem Code ein- und auszuschalten.

Fügen Sie dann dieses benutzerdefinierte CSS zum Hauptelement hinzu:

display:flex;
align-items:flex-end;
justify-content:center;

Dieser Code verwendet Flex, um sicherzustellen, dass der Text am unteren Rand des Moduls vertikal ausgerichtet ist. Da der Text eine Zeilenhöhe von 0 hat, wird der Text als geteilt dargestellt und zeigt nur die obere Hälfte.

Um unseren oberen Verschluss zu positionieren, müssen wir zuerst den Überlauf des Textes ausblenden und ihm dann eine absolute Position wie folgt zuweisen:

• Horizontaler Überlauf: Versteckt
• Vertikaler Überlauf: Versteckt
• Position: Absolut

Dadurch wird der Verschluss über die obere Bildhälfte bewegt.

Erstellen des unteren Verschlusses mit passendem geteiltem Text

Nachdem wir nun unseren oberen Verschluss fertiggestellt haben, können wir die Erstellung des unteren Verschlusses durch Duplizieren des Textmoduls für den oberen Verschluss starten.

Öffnen Sie dann das duplizierte Textmodul und aktualisieren Sie Folgendes:

• CSS-Klasse: top-shutter

Aktualisieren Sie das Hauptelement-CSS, indem Sie „flex-end“ durch „flex-start“ für die Eigenschaft align-items ersetzen. Hier ist das letzte CSS:

display:flex;
align-items:flex-start;
justify-content:center;

Bei „flex-start“ wird der Text oben im Modul vertikal ausgerichtet. Und da der Text eine Zeilenhöhe von 0 hat, wird der Text geteilt dargestellt und zeigt nur die untere Hälfte.

Aktualisieren Sie dann die absolute Position mit einem vertikalen Offset wie folgt:

• Vertikaler Versatz: 50%

Dadurch sitzt das Shutter-Textmodul über der unteren Bildhälfte.

Der geteilte Text auf beiden Fensterläden sollte nun perfekt aufeinander abgestimmt sein.

An dieser Stelle haben wir erfolgreich das Setup für unser Split-Text-Shutter-Bild-Overlay erstellt. Diese besteht aus der Verschlussspalte als Container, dem Hauptbild, dem oberen Verschluss, der in der oberen Bildhälfte sitzt, und dem unteren Verschluss, der in der unteren Bildhälfte sitzt.

Wir werden dies als eine Art Startvorlage für die nächsten Beispiele verwenden, die die Animationen des Verschlusseffekts mit Transformationseigenschaften enthalten.

Teil 2: Der Code

Um die Funktionalität der Shutter-Animation hinzuzufügen, benötigen wir einige CSS- und JS-Schnipsel mit einem Code-Modul.

Fügen Sie der Seite ein neues Codemodul hinzu. Wir können es der rechten Spalte des allerersten oberen Abschnitts hinzufügen, den wir für unseren ersten Overlay-Build verwendet haben.

Das CSS

Fügen Sie das folgende CSS in das Codefeld ein und stellen Sie sicher, dass es mit den erforderlichen Style- Tags umschlossen ist:

  /* transition duration of shutter animation */
  .top-shutter,
  .bottom-shutter {
    transition: transform 1s;
  }
  /* disables all transform options created in
  Divi Builder for both shutters */
  .divi-transform-none .top-shutter,
  .divi-transform-none .bottom-shutter {
    transform: none;
  }
  .on-click {
    cursor:pointer;
  }

Dieses CSS ist wirklich einfach. Alles, was es tut, ist transform: none auf die Fensterläden innerhalb der Säule mit der Klasse „divi-transform-none“ anzuwenden. Diese Klasse wird mit JS ein- und ausgeschaltet, um die Animation zu erstellen. Der Übergang: transform 1s setzt einfach die Dauer des Übergangs (oder der Animation) auf 1 Sekunde.

Die JS

Fügen Sie nach dem CSS die folgende JQuery zum Codefeld hinzu und stellen Sie sicher, dass Sie sie mit den erforderlichen Skript- Tags umschließen:

(function ($) {
  $(document).ready(function () {
    /*
  Toggle shutter transform animation on hover.
  To work, Divi Column with shutters must include
  these CSS Classes: "shutter-column on-hover divi-transform-none".
  */
    $ShutterColumnToHover = $(".shutter-column.on-hover");

    $ShutterColumnToHover.hover(function () {
      $(this).toggleClass("divi-transform-none");
    });

    /*
  Toggle shutter transform animation on click.
  To work, Divi Column with shutters must include
  these CSS Classes: "shutter-column on-click divi-transform-none".
  */
    $ShutterColumnToClick = $(".shutter-column.on-click");

    $ShutterColumnToClick.on("click", function (e) {
      $(this).toggleClass("divi-transform-none");
      e.stopPropagation();
    });

    $(document).on("click", function (e) {
      if ($(e.target).is(".shutter-column.on-click") === false) {
        $ShutterColumnToClick.addClass("divi-transform-none");
      }
    });
  });
})(jQuery);

Der erste Teil des Codes fügt die Funktionalität hinzu, die die Shutter-Transformations-Animationen beim Hover umschaltet, wenn eine Spalte die Klassen "Shutter-Column on-Hover divi-transform-none" hat.

    $ShutterColumnToHover = $(".shutter-column.on-hover");

    $ShutterColumnToHover.hover(function () {
      $(this).toggleClass("divi-transform-none");
    });

Der zweite Teil des Codes fügt die Funktionalität hinzu, die die Animationen der Shutter-Transformation beim Klicken umschaltet, wenn eine Spalte die Klassen „Shutter-Column on-Click divi-transform-none“ hat.

    $ShutterColumnToClick = $(".shutter-column.on-click");

    $ShutterColumnToClick.on("click", function (e) {
      $(this).toggleClass("divi-transform-none");
      e.stopPropagation();
    });

    $(document).on("click", function (e) {
      if ($(e.target).is(".shutter-column.on-click") === false) {
        $ShutterColumnToClick.addClass("divi-transform-none");
      }
    });

Teil 3: Split-Text-Shutter-Animationsdesigns

Entwurf Nr. 1

Um unser erstes Shutter-Animationsdesign zu erstellen, werden wir den Designprozess beschleunigen, indem wir den ersten Abschnitt duplizieren. Dadurch erhalten wir einen neuen Abschnitt mit einer vorgefertigten Bildüberlagerung, in der die geteilten Textverschlüsse einsatzbereit sind.

Transform-Eigenschaften zum oberen Verschluss hinzufügen

Wenn Sie CSS verwenden, um etwas mit Transformationseigenschaften zu animieren, hat das Element normalerweise anfangs keinen Transformationsstil, und dann wird der Transformationsstil angewendet, wenn der Benutzer den Mauszeiger auf das Element bewegt oder darauf klickt. In Divi werden wir den Prozess umdrehen und zunächst den Transformationsstil mit dem Divi Builder zum Element hinzufügen. Auf diese Weise können wir die integrierten Transformationsoptionen verwenden, während wir das Design visuell bearbeiten. Sobald wir mit dem Hinzufügen aller Transformationsdesignelemente fertig sind, können wir sie zunächst deaktivieren (mit einer CSS-Klasse) und sie dann ein- und ausschalten, wenn der Benutzer mit dem Overlay interagiert.

Um das Transformationsdesign zum oberen Verschluss hinzuzufügen, öffnen Sie die Einstellungen des Textmoduls für den oberen Verschluss und aktualisieren Sie Folgendes:

• Transformationsskala (X und Y): 150%
• Transformieren Y-Achse verschieben: -101%
• Ursprung der Transformation: oben Mitte

Wenn Sie es richtig gemacht haben, ist der obere Verschluss nicht mehr sichtbar, was wir wollen, da das gesamte Hauptbild nach dem Animationsübergang belichtet werden soll.

Transform-Eigenschaften zum unteren Verschluss hinzufügen

Aktualisieren Sie für den unteren Verschluss die folgenden Transformationsentwurfsoptionen:

• Transformationsskala (X und Y): 150%
• Transformieren Y-Achse verschieben: 101%
• Ursprung der Transformation: unten Mitte

Fügen Sie eine Klasse hinzu, um die Transformationsdesigns zunächst zu deaktivieren

Wie ich bereits erwähnt habe, können wir, sobald wir die für unsere Shutter-Animation benötigten Transformationsdesigns hinzugefügt haben, diese Transformationsdesigns zunächst deaktivieren, indem wir eine CSS-Klasse hinzufügen.

Aufgrund des zuvor hinzugefügten benutzerdefinierten CSS-Codes wird das Design ohne Transformationsdesigns angezeigt.

Fügen Sie On-Click-Funktionalität mit einer einzigen Klasse hinzu

Um dieselbe Animation beim Klicken statt beim Schweben ausgelöst zu bekommen, müssen wir nur eine einzelne Klasse in der Spalte ersetzen.

Zuerst duplizieren Sie Spalte 1 mit unserem ersten funktionierenden Beispiel beim Hover. Löschen Sie dann die leere Spalte. Jetzt sollten Sie zwei identische Spalten mit denselben Klassen und Inhalten haben.

Öffnen Sie die Einstellungen für Spalte 2 und ersetzen Sie die Klasse „On-Hover“ durch die Klasse „On-Click“. So sollten die letzten drei Klassen aussehen:

• CSS-Klasse: Shutter-Column on-click divi-transform-none

Ergebnis

Umkehren der Shutter-Animation bei Hover

Wenn Sie möchten, dass das Hauptbild zunächst unverdeckt angezeigt wird und dann beim Bewegen der Maus über das Bild das Overlay hinzufügt (die umgekehrte Funktionsweise jetzt), können Sie die Klasse „divi-transform-none“ in der für den Verschluss verwendeten Spalte entfernen . Dadurch erhalten Sie den folgenden Effekt.

Entwurf #2

Um die zweite Verschlussanimation zu erstellen, können wir den vorherigen Abschnitt mit unserer ersten Verschlussanimation duplizieren.

Fensterläden aktualisieren

Verwenden Sie dann Multiselect, um die Textmodule für den oberen und unteren Verschluss auszuwählen. Öffnen Sie dann die Elementeinstellungen für beide und aktualisieren Sie Folgendes:

• Hintergrund: #ffffff
• Text Textfarbe: #000000
• Mischmodus: Bildschirm

Ergebnis

Entwurf #3

Um das Überlagerungsdesign für das dritte Verschlussanimationsbild zu erstellen, duplizieren Sie den vorherigen Abschnitt.

Neues Bild hinzufügen

Aktualisieren Sie dann das Image-Modul mit einem neuen Image.

Fensterläden aktualisieren

Verwenden Sie Multiselect, um sowohl die Textmodule für den oberen Verschluss als auch für den unteren Verschluss auszuwählen und öffnen Sie die Elementeinstellungen für beide, um Folgendes zu aktualisieren:

• Inhalt des Körpers: d

• Hintergrund: rgba(0,0,0,0.9)
• Text Textfarbe: #ffffff
• Text Textgröße: 450px (Desktop), 70vw (Tablet und Telefon)
• Mischmodus: Multiplizieren

Öffnen Sie die Einstellungen für das Textmodul für den oberen Verschluss und aktualisieren Sie die folgenden Transformationsoptionen:

• Transformationsskala (X und Y): 100 % (Standard)
• Transformieren Y-Achse verschieben: -101%
• Transformieren Z-Achse drehen: -45deg
• Ursprung der Transformation: oben links

Aktualisieren Sie dann die Einstellungen des Textmoduls für den unteren Verschluss und aktualisieren Sie die folgenden Transformationsoptionen:

• Transformationsskala (X und Y): 100 % (Standard)
• Transformieren Y-Achse verschieben: 101%
• Transformieren Z-Achse drehen: -45deg
• Ursprung der Transformation: unten rechts

Ergebnis

Weitere Beispiele und Möglichkeiten

Hier ein paar weitere Beispieldesigns mit den gleichen Techniken.

Hier ist eine, die dem Design Nr. 2 ähnelt, jedoch ohne die Transformationsskala an den Fensterläden. Es zeigt auch, wie der Lightbox-Effekt immer noch auf dem Bild funktioniert.

Und hier ist ein weiteres Beispiel, bei dem transform translate verwendet wird, um die Fensterläden horizontal zu verschieben.

Endgültige Ergebnisse

Abschließende Gedanken

Das Erstellen von Bild-Overlays mit Split-Text-Shutter-Animationen in Divi kann ein effektiver Ansatz sein, um Ihre Bilder hervorzuheben und Besucher auf eine neue Art und Weise anzusprechen.

Hoffentlich wird dies Ihre Kreativität anregen, Ihre eigenen Designs hinzuzufügen und Animationseffekte mit verschiedenen Farben, Schriftarten, Mischmodi usw. zu transformieren. Die Möglichkeiten scheinen endlos.

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

Danke schön!