So erstellen Sie die Layout Pack-Vorschauen von ET mit Fan-Out-Hover-Effekten in Divi

Eines der coolen Features des neuen Website-Designs von elegantthemes.com sind die vorgefertigten Layout-Pack-Vorschauen auf der Divi-Produktseite. Was dieses Design einzigartig macht, ist, dass jedes Layout-Paket mit drei separaten Bildern ausgestattet ist, die sich beim Schweben auffächern.

Heute zeigen wir Ihnen, wie Sie das Design unserer Layout-Pack-Vorschauen mit demselben beeindruckenden Fan-Out-Hover-Effekt in Divi neu erstellen können. Da das Design etwas fortgeschrittener ist, werden wir einige benutzerdefinierte CSS in Kombination mit den integrierten Designoptionen von Divi verwenden. Aber keine Sorge, der Aufbau dauert nicht lange und das Ergebnis ist es auf jeden Fall wert.

Lass uns anfangen.

Vorgeschmack

Hier ist ein Blick auf die Layout-Pack-Vorschauen mit einem Fan-Out-Hover-Effekt. Beachten Sie, dass die untere Reihe einen sekundären Hover-Effekt hat, der die Bilder beim Hover separat dreht.

Das dreispaltige Layout auf dem Desktop wird auf Tablet und Telefon an eine Spalte angepasst.

Laden Sie das Layout Pack Preview Fan-Out Hover Effects 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 Layout auf Ihre Seite zu importieren, entpacken Sie einfach die ZIP-Datei und ziehen Sie die JSON-Datei in den Divi Builder.

Kommen wir zum Tutorial, sollen wir?

Abonnieren Sie unseren Youtube-Kanal

Was Sie brauchen, um loszulegen

Um zu beginnen, benötigen Sie die folgende Einrichtung:

1. Das Divi Theme installiert und aktiv
2. Eine neue Seite, die erstellt wurde, um den Frontend-Builder (visuellen) von Divi von Grund auf neu zu erstellen.
3. Drei Bilder, die für simulierte Inhalte verwendet werden sollen. Die Bilder sollten etwa 250 x 375 Pixel groß sein, um optimale Ergebnisse zu erzielen. Da es sich um Vorschauen von Webseiten handelt, können Sie Ihre eigenen Screenshots von jedem Seitendesign erstellen und dann jedes Bild entsprechend zuschneiden/die Größe ändern.

Danach haben Sie eine leere Leinwand, um mit dem Erstellen einiger Hover-Tabs in Divi zu beginnen.

Neuerstellen der Layout Pack-Vorschauen von ET mit Fan-Out-Hover-Effekten in Divi

Erstellen des Abschnitts und der Reihe

Erstellen Sie einen neuen regulären Abschnitt mit einer dreispaltigen Zeile.

Öffnen Sie vor dem Hinzufügen von Modulen die Zeileneinstellungen und aktualisieren Sie die Größe und den Abstand wie folgt:

• Dachrinnenbreite: 2
• Breite: 90%
• Maximale Breite: 1120 Pixel (Desktop), 400 Pixel (Tablet)

Fügen Sie dann auf dem Tablet in der Zeile etwas Auffüllung hinzu, um mehr Platz auf dem Handy zu erhalten.

• Spalte 1 Polsterung: 20% unten
• Spalte 2 Polsterung: 20% unten
• Spalte 3 Polsterung: 20% unten

Bild hinzufügen 1

Jetzt können wir unser erstes von drei Bildern hinzufügen, die unser Layoutpaket-Vorschaudesign bilden. Fahren Sie fort und fügen Sie ein Bildmodul zu Spalte 1 hinzu.

Laden Sie dann das Bild in das Bildmodul hoch (es sollte etwa 250 x 375 Pixel groß sein).

Aktualisieren Sie dann die Designeinstellungen wie folgt:

• Bildausrichtung: Mitte
• Breite: 220px
• Vertikaler Überlauf: versteckt
• Z-Index: 4

Da wir auf den Bildcontainer (nicht das Bild selbst) abzielen müssen, müssen wir mit benutzerdefiniertem CSS eine benutzerdefinierte Höhe, einen Boxschatten und einen Randradius hinzufügen. Fügen Sie dem Hauptelement das folgende CSS hinzu:

height: 240px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

Dadurch kann sich das Bild mit dem mit des Bildcontainers anpassen, wenn wir später den Hover-Effekt hinzufügen. Wie Sie jetzt sehen können, wurde das Bild unten leicht abgeschnitten, da wir eine benutzerdefinierte Höhe von 240px haben und der Überlauf auf „versteckt“ eingestellt ist.

Bild hinzufügen 2

Um das zweite Image zu erstellen, fügen Sie ein neues Image-Modul unterhalb des ersten Image-Moduls in Spalte 1 hinzu. Laden Sie dann ein neues Image (250X350) in das Modul hoch.

Dann müssen wir das Bild hinter und leicht links von Bild 1 positionieren. Dazu müssen wir eine benutzerdefinierte Breite und Höhe hinzufügen, wobei der vertikale Überlauf ausgeblendet ist (ähnlich wie bei Bild 1). Der Hauptunterschied besteht darin, dass wir dem Bild eine absolute Position zuweisen müssen, damit es oben links in der Spalte hinter Bild 1 angezeigt wird.

Aktualisieren Sie dazu Folgendes:

• Breite: 180px
• Vertikaler Überlauf: versteckt

Fügen Sie dann das folgende benutzerdefinierte CSS zum Hauptelement hinzu:

position: absolute !important;
top: 12px;
left: 25px;
height: 200px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

Bild hinzufügen 3

Jetzt können wir das dritte Bild hinzufügen, um die Vorschau des Layoutpakets zu vervollständigen. An dieser Stelle ist es sinnvoll, den Drahtmodell-Ansichtsmodus zu verwenden, da es einige Überschneidungen gibt, die die Verwendung des Visual Builders erschweren. Stellen Sie den Drahtmodellmodus bereit und duplizieren Sie das Bild 2.

Wir haben das Bild dupliziert, weil wir die meisten Einstellungen, die wir für Bild 2 verwendet haben, übernehmen möchten. Der einzige Unterschied (außer einem neuen Bild) besteht darin, dass wir das Bild rechts statt links positionieren müssen.

Öffnen Sie das duplizierte Bild (Bild 3) und aktualisieren Sie das Bildmodul mit einem neuen Bild (250 × 375).

Aktualisieren Sie dann das benutzerdefinierte CSS, indem Sie die Eigenschaft left position in eine Eigenschaft right position ändern. Es sind keine weiteren Änderungen am CSS erforderlich.

Wenn Sie möchten, können Sie das folgende CSS kopieren und in das Hauptelement einfügen, um das aktuelle CSS zu ersetzen.

position: absolute !important;
top: 12px;
right: 25px;
height: 200px;
box-shadow: 0 10px 70px 0 rgba(103,151,255,.22), 0 15px 105px 0 rgba(103,151,255,.22);
border-radius: 9px;

So weit, ist es gut

Hier das bisherige Endergebnis.

Das Design ist so wie es ist wirklich sehr schön, aber lassen Sie es uns mit einem Fan-Out-Hover-Effekt noch eine Stufe höher schlagen.

Hinzufügen des Fan-Out-Hover-Effekt-CSS

Normalerweise, wenn wir es mit nur einem Bild zu tun hätten, könnten wir mit den integrierten Divi-Optionen leicht Hover-Effekte hinzufügen. Dieser Auffächerungs-Hover-Effekt erfordert jedoch, dass wir den Hover-Zustand mehrerer untergeordneter Elemente (Bilder) gleichzeitig aktivieren, wenn wir den Mauszeiger über die übergeordnete Spalte bewegen. Wenn Sie mit der Maus über die Spalte fahren, möchten wir, dass die folgenden Anpassungen an den Bildern vorgenommen werden.

1. Fügen Sie jedem Bild eine Übergangsdauer hinzu, um einen sanften Übergang beim Schweben zu erzielen.
2. Passen Sie Bild 1 so an, dass es eine Breite von 180 Pixel und eine Höhe von 240 Pixel hat. Dadurch wird der Bildcontainer höher und schmaler, um mehr vom Bild anzuzeigen.
3. Passen Sie Bild 2 und 3 so an, dass es eine Breite von 160 px und eine Höhe von 220 px hat. Dadurch werden die Bilder auch höher und schmaler, um mehr von dem Bild zu zeigen.
4. Passen Sie Bild 2 an, um es um 5 Grad gegen den Uhrzeigersinn zu drehen und leicht nach links zu bewegen. Wir können dies tun, indem wir der Eigenschaft transform:rotate Wert von -5 Grad hinzufügen und den Wert der Eigenschaft left position auf 0 anpassen.
5. Passen Sie Bild 3 an, um es um 5 Grad im Uhrzeigersinn zu drehen und leicht nach rechts zu bewegen. Wir können dies tun, indem wir der transform:rotate Eigenschaft einen 5-Grad-Wert hinzufügen und den Wert der right Positionseigenschaft auf 0 anpassen.

Um das für diese Hover-Effekte erforderliche benutzerdefinierte CSS hinzuzufügen, müssen wir der Zeile mit den Bildern eine benutzerdefinierte CSS-Klasse hinzufügen. Dadurch können wir das benutzerdefinierte CSS nur auf die Bilder in einer bestimmten Zeile anwenden.

Öffnen Sie die Zeileneinstellungen und fügen Sie die folgende CSS-Klasse hinzu.

• CSS-Klasse: fan-out-images

Um das benutzerdefinierte CSS zur Seite hinzuzufügen, öffnen Sie die Seiteneinstellungen und fügen Sie das folgende benutzerdefinierte CSS auf der Registerkarte Erweitert hinzu.

/**transition duration and speed curve**/
.fan-out-images .et_pb_image {
  -webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
  transition: 300ms all cubic-bezier(.4,0,.2,1);
}
/**Change width and height of image 1 on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:first-child {
  width: 160px;
  height: 240px;
}
/**Change width and height of image 2 and 3 on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(2), .fan-cards .et_pb_column:hover .et_pb_image:nth-child(3) {
  width: 160px;
  height: 220px;
}
/**Rotate image 2 counterclockwise and move to the left on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(2) {
  left: 0;
  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);
}
/**Rotate image 3 clockwise and move to the right on hover**/
.fan-out-images .et_pb_column:hover .et_pb_image:nth-child(3) {
  right: 0;
  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);
}

Ich habe über jedem CSS-Schnipsel einen Kommentar hinzugefügt, um Sie daran zu erinnern, was jeder tut.

Sobald Sie fertig sind. Sehen Sie sich das Endergebnis an.

Endergebnis

Optionaler Hover-Effekt: Bild 1 und 2 beim Hover separat drehen

Um den Vorschaubildern des Layoutpakets eine weitere Interaktionsebene hinzuzufügen, können wir die Drehung von Bild 1 und Bild 2 unabhängig vom anfänglichen Hover-Effekt durchführen. Dadurch kann der Benutzer auf einzigartige Weise mit den Bildern interagieren. Sie können diesen Bildern sogar separate Links oder Lightbox-Vorschauen hinzufügen, wenn Sie möchten.

So machen Sie es.

Entfernen der Transformationseigenschaften aus den Seiteneinstellungen Benutzerdefiniertes CSS

Zuerst müssen Sie die zwei Zeilen des benutzerdefinierten CSS entfernen, die das Bild drehen, wenn Sie mit der Maus über die Spalte fahren. Öffnen Sie das benutzerdefinierte CSS für die Seiteneinstellungen und nehmen Sie Folgendes heraus:

  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);

  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);

Hinzufügen von Transformationseigenschaften beim Hover für Bild 2

Öffnen Sie dann die Bildmoduleinstellungen für Bild 2 und verwenden Sie die integrierten Transformationsoptionen von Divi, um denselben Transformationsdrehwert hinzuzufügen, den wir zuvor für den Hover-Zustand gelöscht haben.

• Transformieren Z-Achse drehen (Hover): -5deg
• Transformieren X-Achse verschieben (Hover): -20px

Hinzufügen von Transformationseigenschaften beim Hover für Bild 3

Aktualisieren Sie dann die Bildmoduleinstellungen für Bild 3, um die Rotationseigenschaft für die Transformation hinzuzufügen.

• Transformieren Z-Achse drehen (Hover): 5deg
• Transformieren X-Achse verschieben (Hover): 20px

Sehen Sie sich nun das Endergebnis an.

Endergebnis

Hinzufügen von Links zu Bildern

Wenn Sie Umleitungslinks erstellen möchten, um ein bestimmtes Layoutpaket oder Seitendesign auf einer separaten Seite zu präsentieren, ist es am besten, allen drei Bildern im Paket dieselbe Link-URL hinzuzufügen. Öffnen Sie dazu jedes der Bildmodule und fügen Sie die Link-URL hinzu.

Hinzufügen neuer Layout-Pack-Vorschauen zu den anderen Spalten

Um das Design abzuschließen, können wir die drei Bilder in Spalte 1 kopieren und in Spalte 2 und Spalte 3 einfügen.

Danach müssen Sie nur noch jedes der Bilder in Spalte 2 und 3 mit neuen aktualisieren.

Das ist es!

Endgültiges Design

Hier ist das endgültige Design. Die obere Reihe zeigt den Hover-Fan-Out-Hover-Effekt, wenn Sie mit der Maus über die Spalte fahren. Die zweite Reihe zeigt den sekundären Fan-Out-Hover-Effekt, der separat zu Bild 2 und 3 hinzugefügt wurde.

Das dreispaltige Layout auf dem Desktop wird auf Tablet und Telefon an eine Spalte angepasst.

Abschließende Gedanken

Der Fan-Out-Hover-Effekt ist ein schönes und ansprechendes Designelement, mit dem Sie Seitenlayouts auf Ihrer eigenen Website präsentieren können. Die Kombination aus benutzerdefiniertem CSS und integrierten Divi-Einstellungen, die wir in diesem Tutorial behandelt haben, wird auf magische Weise funktionieren. Und dieses Setup dient als großartiger Ausgangspunkt, um mehr Design mit dem Divi-Builder zu erkunden. Hoffentlich gibt Ihnen dies etwas Inspiration, um Ihr Portfolio auf die nächste Stufe zu heben.

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

Danke schön!