Divi: So zeigen Sie Inhalte an, wenn Sie mit der Maus über Registerkarten fahren

Hättest du gerne Inhalt Dies wird angezeigt, wenn Sie mit der Maus über die ausziehbaren Winkellaschen fahren Divi ?

Es macht immer Spaß, neue und kreative Möglichkeiten zu entdecken, mit Benutzern mithilfe von Hover-Effekten zu interagieren. Eine gute Möglichkeit, dies zu tun, besteht darin, das zu enthüllen Inhalt beim Schweben mit ausziehbaren Ecklaschen. Dadurch kann der Benutzer mit der Maus über eine Registerkarte in der Ecke einer Spalte oder eines Bildes fahren, um ein Overlay mit einem zu erweitern Inhalt zusätzlicher Nutzen für den Benutzer.

In diesem Tutorial erstellen wir ein Layout Divi Völlig einzigartig, das Inhalte beim Hover mithilfe erweiterbarer Winkelregisterkarten anzeigt. Tatsächlich zeigen wir Ihnen, wie Sie eine ausziehbare Eckgehrung für alle vier Ecken einer Säule entwerfen Divi.

Lassen Sie uns beginnen!

Übersicht

Hier ist ein kurzer Blick auf das Layout der erweiterbaren Eckregisterkarten, die wir gemeinsam erstellen werden. Beachten Sie, wie schön symmetrisch die Hover-Effekte und Inhalte sind.

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 Divi Builder

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 des Layouts für erweiterbare Inhaltsüberlagerungen in Divi

Ausführung einer ausziehbaren Eckgehrung von der unteren rechten Position

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

Aktualisieren Sie vor dem Hinzufügen eines Moduls die Leitungsparameter wie folgt:

• Benutzerdefinierte Bundstegbreite verwenden: JA
• Rinnenbreite: 4

Für dieses erste gezeigte Element erstellen wir ein Spaltenhintergrundbild, das eine Eckregisterkarte hat (unter Verwendung eines Moduls Klappentext) unten rechts in der Spalte, die erweitert wird und die gesamte Spalte/das gesamte Bild abdeckt, wenn Sie den Mauszeiger darüber bewegen.

Lesen Sie auch unseren Leitfaden auf Divi: So erstellen Sie ein Fluid-Spaltenraster beim Hover

Beginnen wir mit dem Hinzufügen eines Blurb-Moduls.

Blurb-Modul zu Spalte 1 hinzufügen

Einstellungen für Spalte 1

Sobald der Klappentext vorhanden ist, öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:

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

HINWEIS: Für dieses Beispiel verwenden wir die transparenten Bierhintergrundbilder aus dem Layoutpaket « Brauerei“. Sie sind 128 x 359 Pixel groß, daher verwenden wir die tatsächliche Bildgröße.

Rand der Spalte 1

• Abgerundete Ecken: 10 Pixel unten rechts
• Randbreite (rechts und unten): 2px
• Rahmenfarbe (rechts und unten): #e94558

Benutzerdefiniertes CSS und Überlauf

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

height: 400px;

Drop-down-Option 'Sichtweite' und folgende Änderungen vornehmen:

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

Inhalte zum Blurb-Modul hinzufügen

Wir können jetzt mit der Anpassung des Blurb-Moduls in Spalte 1 beginnen. Öffnen Sie die Moduleinstellungen 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

Anpassung des Blurb-Moduls

Weisen Sie dem Klappentext wie folgt eine Hover-Hintergrundfarbe zu:

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

Unter der Registerkarte Design, aktualisieren Sie Folgendes:

• Bild-/Icon-Platzierung: Richtig
• Titelschrift: Oswald
• Schriftstärke: Semi Bold
• Schriftstil: TT
• Textgröße: 40px
• Haupttextfarbe (Desktop): klar
• Körpertextfarbe (Hover): #121212

• Bild-/Symbolbreite: 100 Pixel (Desktop), 64 Pixel (Telefon)
• Inhaltsbreite: 100 %
• Höhe: 100 %
• Polsterung (Desktop): 15 % (oben und unten), 8 % (links und rechts)
• Polsterung (Hover): 8 % (Oben, Unten, Links und Rechts)

• Abgerundete Ecken (Desktop): 20 Pixel oben links
• Abgerundete Ecken (Hover): 10px oben links
• Rahmenbreite (oben und links): 4 Pixel (Desktop), 2 Pixel (Hover)
• Rahmenfarbe (oben und links): #e94558

Transformationsoption (Desktop)

• Transformationsskalierung (X und Y): 50 %

• Transformieren Übersetzen
  • Y-Achse: 50 %
  • X-Achse: 30 %

Lesen Sie auch unseren Leitfaden über: Divi: So erstellen Sie eine klebrige Fußzeile mit „Reveal“-Effekt

• Transformationsursprung: unten und rechts

Transformationsoptionen (Hover)

• Transformationsskalierung (Y und X) (Hover): 100 %

• Transformieren Übersetzen (Y und X) (Hover): 0%

Um das angezeigte Bild auf der rechten Seite umzudrehen, fügen Sie dem Bereich das folgende benutzerdefinierte CSS hinzu Klappentext :

direction: rtl

HINWEIS: „rtl“ steht für "Rechts nach links", wodurch die Standardreihenfolge des Inhalts geändert wird (von links nach rechts).

Ergebnis

Sehen wir uns das Endergebnis unserer Eckregisterkarte an, die von der unteren rechten Position erweitert wird. Beachten Sie, wie es erweitert wird, um die gesamte Spalte beim Hover zu füllen.

Ausführung einer ausziehbaren Eckgehrung von der unteren linken Position

Spalte duplizieren

Um die Ecklasche zu erstellen, die sich von der unteren linken Position aus erweitert, können wir das Design neu starten, indem wir die gesamte Spalte duplizieren. Öffnen Sie die Zeileneinstellungen und duplizieren Sie Spalte 1. Löschen Sie dann die zusätzliche Spalte, sodass Sie nur zwei exakte Duplikate haben.

Aktualisieren Sie die 2-Spalteneinstellungen

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

• Abgerundete Ecken: 10 px unten links
• Randbreite (rechts): 0px
• Randbreite (links): 2px
• Farbe: #e94558

Aktualisieren Sie die Parameter des Blurb-Moduls

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

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

• Transformation übersetzen (X-Achse) (Desktop): -30 %
• Transformationsursprung (Desktop): unten links

Stellen Sie dann sicher, dass Sie das benutzerdefinierte CSS im Inhaltsbereich von Blurb entfernen.

Ergebnis

Hier ist das Ergebnis. Beachten Sie, wie diese symmetrisch zur ersten ist und von der unteren linken Position der Säule aus wächst.

Ausführung einer ausziehbaren Eckgehrung von der oberen rechten Position

Wir sind jetzt bereit, mit unseren letzten beiden sich erweiternden Eckengehrungskonstruktionen zu beginnen. Um einen Vorsprung zu bekommen, duplizieren wir die gesamte Zeile, die den Klappentext enthält, den wir bereits entworfen haben.

Aktualisieren Sie die 1-Spalteneinstellungen

Öffnen Sie dann die Einstellungen für die doppelte Zeile, öffnen Sie dann die Einstellungen für Spalte 1 und aktualisieren Sie Folgendes:

• Abgerundete Ecken: 10 Pixel oben rechts
• Breite des unteren Randes: 0px
• Obere Randbreite: 2px
• Farbe des oberen Rahmens: #e94558

Aktualisieren Sie die Parameter des Blurb-Moduls

Öffnen Sie als Nächstes die Blurb-Moduleinstellung und aktualisieren Sie Folgendes:

• Abgerundete Ecken (Desktop): 20 Pixel unten links
• Abgerundete Ecken (Hover): 10 Pixel unten links
• Obere Randbreite: 0px
• Breite des unteren Rands: 4 Pixel (Desktop), 2 Pixel (Hover)
• Breite des unteren Rahmens: #e94558

• Transformieren Übersetzen (Y-Achse) (Desktop): -50 %
• Transformationsursprung: oben rechts

Benutzerdefiniertes CSS

Im Moment sehen wir nur den unteren linken Teil des Präsentationsmoduls, der nicht unseren Titel anzeigt, wie die anderen beiden Präsentationen in der Zeile darüber. Um den Titel auf der Registerkarte anzuzeigen, müssen wir den Titel mit benutzerdefiniertem CSS unten links im Klappentext neu positionieren.

Fügen Sie dem Bereich das folgende benutzerdefinierte CSS hinzu Klappentext :

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

Fügen Sie dann das folgende CSS zum Inhaltsbereich hinzu Klappentext :

direction: rtl;
height: 100%;

Konstruktion einer ausziehbaren Eckgehrung von der oberen linken Position

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

Aktualisieren Sie die 2-Spalteneinstellungen

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

• Grenzen Ecken: 10 px oben links
• Breite des unteren Randes: 0px
• Obere Randbreite: 2px
• Farbe des oberen Rahmens: #e94558

Aktualisieren Sie die Parameter des Blurb-Moduls

Öffnen Sie als Nächstes die Texteinstellungen des Blurb-Moduls in Spalte 2 und aktualisieren Sie Folgendes:

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

Aktualisieren Sie dann die Transformationsoptionen:

• Transformationsübersetzung (Y-Achse) (Desktop): -50 %
• Transformationsursprung: oben links

Benutzerdefiniertes CSS

Fügen Sie dann dem Bereich das folgende benutzerdefinierte CSS hinzu Klappentext :

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

Fügen Sie auch das folgende CSS in das Feld ein Klappentext :

height: 100%;

Beenden Sie die Gestaltung des Layouts

Hintergrundfarbe des Abschnitts

Fügen Sie wie folgt eine Abschnittshintergrundfarbe hinzu:

• Hintergrund: #effef

Titel hinzufügen

Um den Titel zu erstellen, fügen Sie eine Zeile zu einer Spalte in der Mitte der beiden Zeilen hinzu

Fügen Sie dann ein Textmodul hinzu.

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

Aktualisieren Sie dann die folgenden Einstellungen:

• Schriftart: Merriweather
• Schriftdicke: fett
• Stil: TT
• Textausrichtung: Zentriert
• Textfarbe: #999999
• Größe: 50 Pixel (Desktop), 30 Pixel (Tablet), 24 Pixel (Telefon)
• Buchstabenabstand: 1em

• Polsterung (links): 50 Pixel (Desktop), 30 Pixel (Tablet), 24 Pixel (Telefon)

Endergebnis

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

Und hier ist das Design auf dem Handy.

Laden Sie DIVI jetzt herunter!!!

Zusammenfassung

Die in diesem Tutorial gezeigten Eckregisterkarten funktionieren definitiv für jede Art von Inhalten, die Sie auf Ihrem präsentieren möchten Website Divi. 

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 Inhalte beim Hover anzuzeigen.

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.

...