So zeigen Sie Inhalte beim Hover mit expandierenden Corner-Tabs in Divi an (KOSTENLOSER Download)

Es macht immer Spaß, neue und kreative Möglichkeiten zu entdecken, um Benutzer mithilfe einzigartiger Hover-Effekte mit Ihren Inhalten zu begeistern. Eine gute Möglichkeit, dies zu tun, besteht darin, Inhalte beim Hovern mithilfe von expandierenden Eckregisterkarten anzuzeigen. Auf diese Weise kann der Benutzer mit der Maus über eine Registerkarte in der Ecke einer Spalte oder eines Bildes fahren, um ein Overlay mit zusätzlichen hilfreichen Inhalten für den Benutzer zu erweitern.

Für dieses Tutorial werden wir ein völlig einzigartiges Divi-Layout erstellen, das Inhalte beim Schweben mithilfe von expandierenden Eckregisterkarten anzeigt. Tatsächlich zeigen wir Ihnen, wie Sie in Divi eine erweiterbare Eckregisterkarte für alle vier Ecken einer Spalte entwerfen.

Lass uns anfangen!

Vorgeschmack

Hier ist ein kurzer Blick auf das Layout der sich erweiternden Eckregisterkarten, die wir gemeinsam erstellen werden. Beachten Sie, wie schön die Schwebeeffekte und der Inhalt symmetrisch sind.

Laden Sie das 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.

Lasst uns zum Tutorial kommen, sollen wir?

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 des Expanding-Content-Overlays-Layouts von Grund auf neu

Teil 1: Erstellen einer expandierenden Eckregisterkarte von der unteren rechten Position aus

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

Aktualisieren Sie vor dem Hinzufügen eines Moduls die Zeileneinstellungen mit einer benutzerdefinierten Bundstegbreite wie folgt:

• Dachrinnenbreite: 4

Für dieses erste vorgestellte Element erstellen wir ein Spaltenhintergrundbild mit einer Eckregisterkarte (mithilfe eines Klappenmoduls) unten rechts in der Spalte, die die gesamte Spalte/das gesamte Bild beim Bewegen des Mauszeigers erweitert und überlagert.

Beginnen wir damit, ein Klappenmodul hinzuzufügen.

Blurb-Modul hinzufügen

Fügen Sie ein Klappenmodul zu Spalte 1 hinzu.

Wir werden es noch nicht stylen. Wir brauchten im Grunde einige Inhalte, damit wir die Spalte gestalten können, die den Klappentext enthält.

Spalte 1 Einstellungen

Öffnen Sie mit dem Klappentext die Zeileneinstellungen und klicken Sie dann auf , um die Einstellungen für Spalte 1 zu bearbeiten. Aktualisieren Sie dann Folgendes:

• Hintergrundbild [Bild einfügen]
• Hintergrundbildgröße: Tatsächliche Größe

HINWEIS: Für mein Beispiel verwende ich die transparenten Hintergrundbierbilder aus dem Brauerei-Layout-Paket. Sie sind 128 x 359 Pixel groß, weshalb ich die tatsächliche Größe des Bildes verwende.

Spalte 1 Rahmen

• Abgerundete Ecken: 10px unten rechts
• Breite des rechten Rands: 2px
• Farbe des rechten Rands: #e94558
• Breite des unteren Rands: 2px
• Farbe des unteren Rands: #e94558

Benutzerdefiniertes CSS und Überlauf

Fügen Sie auf der Registerkarte "Erweitert" das folgende benutzerdefinierte CSS zum Hauptelement hinzu:

height: 400px;

Das Update folgendes:

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

Diese benutzerdefinierte Höhe ist erforderlich, damit unser Klappenmodul (Eckregisterkarte) die volle Höhe der Spalte erweitern kann. Und der versteckte Überlauf wird benötigt, damit wir den größten Teil des Klappenmoduls außerhalb der Spalte bis zum Hover-Zustand ausblenden können.

Inhalt des Blurb-Moduls hinzufügen

Jetzt können wir mit der Anpassung des Klappenmoduls in Spalte 1 beginnen. Öffnen Sie die Klappeneinstellungen und aktualisieren Sie Folgendes:

• Titel: Mango IPA
• Körper:

  <p>Vivamus suscipit tortor eget felis porttitor volutpat. Pellentesque in ipsum id orci porta dapibus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur arcu erat, accumsan id imperdiet</p>
  <p>Hops: Lorem Ipsum<br /> Yeast: Dolor Amet</p>
  <p>4.8% ABV / 4 IBUs</p>
  

• Bild: Fügen Sie dasselbe Bild hinzu, das für den Spaltenhintergrund verwendet wird

Entwerfen des Blurb-Moduls

Geben Sie dem Klappentext eine Hintergrundfarbe, wenn Sie den Mauszeiger wie folgt bewegen:

• Hintergrundfarbe (Desktop): transparent
• Hintergrundfarbe (Hover): rgba(255,255,255,0.9)

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

• Bild-/Symbolplatzierung: Links
• Titelschriftart: Oswald
• Titelschriftart: TT
• Titeltextgröße: 40px
• Schriftstärke des Hauptteils: Semi Bold
• Textkörperfarbe (Desktop): transparent
• Körpertextfarbe (Hover): #121212

• Bildbreite: 100px (Desktop), 64px (Telefon)
• Inhaltsbreite: 100%
• Höhe: 100%
• Polsterung (Desktop): 15 % oben, 15 % unten, 8 % links, 8 % rechts
• Polsterung (Hover): 8 % oben, 8 % unten, 8 % links, 8 % rechts

• Abgerundete Ecken (Standard): 20px oben links
• Abgerundete Ecken (Hover): 10px oben links
• Breite des oberen Rands: 4 Pixel (Desktop), 2 Pixel (Hover)
• Farbe des oberen Rands: #e94558
• Breite des linken Rands: 4 Pixel (Desktop), 2 Pixel (Hover)
• Farbe des linken Rands: #e94558

Transformationsoption (Desktop)

• Transformationsskalierung Y-Achse: 50%
• X-Achse der Transformationsskala: 50%
• Transformieren Y-Achse übersetzen: 50%
• Transformieren, Übersetzen der X-Achse: 30%
• Ursprung der Transformation: Unten rechts

Transformationsoptionen (Hover)

• Transformationsskala Y-Achse (Hover): 100%
• Transformieren Skala X-Achse (Hover): 100%
• Transformieren Y-Achse verschieben (Hover): 0%
• Transformieren X-Achse verschieben (Hover): 0%

Um das Klappentext-Bild auf die rechte Seite umzudrehen, fügen Sie das folgende benutzerdefinierte CSS zum Feld Blurb-Inhalt hinzu:

direction: rtl

HINWEIS: Die Richtung „rtl“ steht für „rechts nach links“, was die Standardreihenfolge des Inhalts (von links nach rechts) ändert.

Ergebnis

Sehen wir uns das Endergebnis unseres expandierenden Eck-Tabs von der unteren rechten Position an. Beachten Sie, wie es erweitert wird, um die gesamte Spalte beim Bewegen des Mauszeigers auszufüllen.

Teil 2: Erstellen einer expandierenden Eckregisterkarte von der unteren linken Position

Duplizieren Sie die Spalte

Um die expandierende Eckregisterkarte von der unteren linken Position aus zu erstellen, können wir das Design durch Duplizieren der gesamten Spalte starten. Öffnen Sie die Zeileneinstellungen und duplizieren Sie Spalte 1. Löschen Sie dann die zusätzliche Spalte, sodass Sie nur noch zwei exakte Duplikate haben.

Einstellungen für Spalte 2 aktualisieren

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

• Abgerundete Ecken: 10px unten links
• Breite des rechten Rands: 0px
• Breite des linken Rands: 2px
• Farbe des linken Rands: #e94558

Blurb-Einstellungen aktualisieren

Aktualisieren Sie als Nächstes die Blurb-Einstellungen wie folgt:

• Textausrichtung: rechts
• Abgerundete Ecken (Desktop): 20px oben rechts
• Abgerundete Ecken (Hover): 10px oben rechts
• Breite des linken Rands: 0px
• Breite des rechten Rands: 4 Pixel (Desktop), 2 Pixel (Hover)
• Farbe des rechten Rands: #e94558

• Transformieren X-Achse übersetzen (Desktop): -30%
• Ursprung transformieren (Desktop): unten links

Stellen Sie dann sicher, dass Sie das benutzerdefinierte CSS im Feld Blurb-Inhalt löschen.

Ergebnis

Hier ist das Ergebnis. Beachten Sie, dass dieser symmetrisch zum ersten ist und sich von der unteren linken Position der Spalte aus erweitert.

Teil 3: Erstellen eines expandierenden Eckregisters von der oberen rechten Position

Jetzt können wir mit unseren letzten beiden expandierenden Eckentab-Designs beginnen. Um einen Vorsprung zu erhalten, duplizieren wir die gesamte Zeile mit dem bereits erstellten Klappentext.

Einstellungen für Spalte 1 aktualisieren

Öffnen Sie als nächstes die Einstellungen der doppelten Zeile und öffnen Sie dann die Einstellungen für Spalte 1 und aktualisieren Sie Folgendes:

• Abgerundete Ecken 10px oben rechts
• Breite des unteren Rands: 0px
• Breite des oberen Rands: 2px
• Farbe des oberen Rands: #e94558

Einstellungen des Blurb-Moduls aktualisieren

Öffnen Sie als Nächstes die Einstellung für das Klappenmodul und aktualisieren Sie Folgendes:

• Abgerundete Ecken (Desktop): 20px unten links
• Abgerundete Ecken (Hover): 10px unten links
• Breite des oberen Rands: 0px
• Breite des unteren Rands: 4 Pixel (Desktop), 2 Pixel (Hover)
• Farbe des unteren Rands: #e94558
• Transformieren Y-Achse übersetzen (Desktop): -50%
• Ursprung der Transformation: oben rechts

Blurb benutzerdefiniertes CSS

Im Moment können wir nur den unteren linken Teil des Klappenmoduls sehen, der unseren Titel nicht wie die anderen beiden Klappen in der Zeile darüber zeigt. Um den Titel in der Registerkarte anzuzeigen, müssen wir den Titel mit etwas benutzerdefiniertem CSS unten links im Klappentext neu positionieren.

Fügen Sie das folgende benutzerdefinierte CSS zum Feld Blurb-Titel hinzu:

position: absolute;
bottom: 0;
left: 15px;

Fügen Sie dann das folgende CSS zur Blurb-Inhaltsbox hinzu:

direction: rtl;
height: 100%;

Teil 4: Erstellen eines expandierenden Eckregisters von der oberen linken Position

Für unseren vierten und letzten expandierenden Hover-Effekt für die Ecke werden wir ihn in der oberen linken Ecke positionieren, um das symmetrische Design des gesamten Rasterlayouts zu vervollständigen.

Einstellungen für Spalte 2 aktualisieren

Öffnen Sie unter den Zeileneinstellungen die Einstellungen für Spalte 2 und aktualisieren Sie Folgendes:

• Abgerundete Ecken: 10px oben links
• Breite des unteren Rands: 0px
• Breite des oberen Rands: 2px
• Farbe des oberen Rands: #e94558

Blurb-Einstellungen aktualisieren

Öffnen Sie als Nächstes die Einstellungen für den Klappentext in Spalte 2 und aktualisieren Sie Folgendes:

• Abgerundete Ecken (Desktop): 20px unten rechts
• Abgerundete Ecken (Hover): 10px unten rechts
• Breite des oberen Rands: 0px
• Breite des unteren Rands: 4 Pixel (Desktop), 2 Pixel (Hover)
• Farbe des unteren Rands: #e94558

Aktualisieren Sie dann die Transformationsoptionen:

• Transformieren X-Achse übersetzen (Desktop): -30%
• Ursprung der Transformation: Oben links

Blurb benutzerdefiniertes CSS

Fügen Sie dann das folgende benutzerdefinierte CSS zum Feld Blurb-Titel hinzu:

position: absolute;
bottom: 0%;
right: 0%;

Fügen Sie dann das folgende CSS zum Inhaltsfeld von Blurb hinzu:

height: 100%;

Teil 4: Fertigstellung des Layout-Designs

Abschnitt Hintergrundfarbe

Fügen Sie eine Abschnittshintergrundfarbe wie folgt hinzu:

• Hintergrundfarbe: #effef

Titel hinzufügen

Um den Titel zu erstellen, fügen Sie eine Zeile in der Mitte der beiden Zeilen hinzu und fügen Sie der einspaltigen Zeile einen Textbaustein hinzu.

Fügen Sie den Inhalt hinzu: „Saisonal“.

Aktualisieren Sie dann die folgenden Einstellungen:

• Überschrift 2 Schriftart: Merriweather
• Überschrift 2 Schriftstärke: Fett
• Überschrift 2 Schriftstil: TT
• Überschrift 2 Textausrichtung: Mitte
• Überschrift 2 Textfarbe: #999999
• Überschrift 2 Textgröße: 50px (Desktop), 30px (Tablet), 24px (Telefon)
• Überschrift 2 Buchstabenabstand: 1em
• Padding: 50 Pixel links (Desktop), 30 Pixel links (Tablet), 24 Pixel links (Telefon)

Endergebnis

Sehen Sie sich das Endergebnis des Layouts mit expandierenden Eckregisterkarten an.

Und hier ist das Design auf dem Handy.

Abschließende Gedanken

Die erweiterten Eckregisterkarten in diesem Layout-Design funktionieren definitiv für alle Arten von Inhalten, die Sie auf Ihrer Divi-Website präsentieren möchten. Sie müssen auch nicht alle vier Ecken verwenden. Sie können beispielsweise ein Rasterlayout für Bilder erstellen, indem Sie nur die Registerkarten in der oberen rechten Ecke verwenden, um den Inhalt beim Mauszeiger anzuzeigen. Die Gestaltungsmöglichkeiten sind bei diesem reichlich vorhanden. Spaß haben.

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

Danke schön!