Erstellen von Pop-Out-Dienstbeschreibungen beim Hover mit Divi

Das Erstellen von Pop-Out-Dienstbeschreibungen beim Hover kann eine effektive Möglichkeit sein, Benutzer mit zusätzlichen Informationen zu informieren und zu engagieren. Ähnlich wie ein Tooltip zeigen diese Pop-Out-Beschreibungen weitere Informationen zu Ihrem Dienst beim Schweben. Aber mit Divi steht Ihnen die gesamte Palette an Design-Tools im Divi-Builder zur Verfügung, um atemberaubende Pop-Out-Designs ohne zusätzliches benutzerdefiniertes CSS zu erstellen.

In diesem Tutorial zeigen wir Ihnen, wie einfach es ist, Pop-Out-Dienstbeschreibungen auf Ihrer Divi-Website zu erstellen. Der Trick besteht darin, Ihre Module so zu positionieren, dass sie hintereinander gleiten und herausspringen, wenn Sie die Breite der Reihe beim Schweben anpassen.

Lass uns anfangen!

Vorgeschmack

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!

Abonnieren Sie unseren Youtube-Kanal

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?

Was Sie brauchen, um loszulegen

Um zu beginnen, benötigen Sie Folgendes:

1. Das Divi Theme installiert und aktiv
2. Eine neue Seite, die erstellt wurde, um das Frontend von Grund auf neu zu erstellen (visueller Builder)
3. Bilder, die für simulierte Inhalte verwendet werden sollen. Für dieses Tutorial verwenden wir ein paar Layout-Pakete der Investmentgesellschaft.

Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.

Erstellen der Pop-Out-Dienstbeschreibungen auf Hover mit Divi

Erstellen Sie den Abschnitt und die Zeile

Erstellen Sie zunächst einen neuen regulären Abschnitt mit einer einspaltigen Zeile.

Aktualisieren Sie die Zeileneinstellungen wie folgt, bevor Sie Module hinzufügen:

Fügen Sie ein dunkles Hintergrundbild oder eine dunkle Hintergrundfarbe hinzu. Ich verwende ein abstraktes Hintergrundbild aus dem Layout Pack der Investmentgesellschaft. Wenn Sie diese jedoch nicht verwenden möchten, können Sie einfach eine Hintergrundfarbe von #161c29 hinzufügen.

• Dachrinnenbreite: 1
• Breite: 100%
• Höhe: 320px (Desktop), automatisch (Tablet und Telefon)\
• Padding: 0px oben, 0px unten

Ein Blurb-Modul hinzufügen

Als nächstes fügen Sie Ihrer Zeile ein Klappenmodul hinzu.

Und aktualisieren Sie die Einstellungen des Klappenmoduls wie folgt:

• Titel: Dienst
• Symbol: siehe Screenshot

Löschen Sie auch den Standardtextkörperinhalt.

• Hintergrundbild: Fügen Sie ein Bild hinzu, das ungefähr 320 x 215 Pixel groß ist
• Hintergrundbildgröße: Fit
• Position des Hintergrundbilds: Oben Mitte

• Hintergrundfarbe links: rgba(31,72,192,0.61)
• Hintergrund mit Farbverlauf rechts: #161c29
• Startposition: 34%
• Endposition: 71%
• Farbverlauf über dem Hintergrundbild platzieren: JA

• Symbolfarbe: #ffffff
• Textausrichtung: Mitte
• Titelschriftart: Archivo
• Titeltextfarbe: #ffffff
• Titeltextgröße: 38px
• Titel Buchstabenabstand: 4px
• Maximale Breite: 320px
• Modulausrichtung: Mitte
• Höhe: 320px

• Polsterung: 68px oben
• Abgerundete Ecken: 10px
• Z-Index: 1

Das Hinzufügen des Wertes z-Index 1 ist entscheidend, um sicherzustellen, dass das Klappenmodul über den anderen Modulen bleibt, die schließlich dahinter gestapelt werden.

Call-to-Action-Modul hinzufügen

Als nächstes müssen wir ein Call-to-Action-Modul hinzufügen, das links neben dem Klappenmodul positioniert wird.

Dies wird unser erster von zwei Inhaltsbereichen sein, die schließlich beim Hover erscheinen werden.

Jetzt müssen wir die Standardhintergrundfarbe entfernen und die Designeinstellungen wie folgt aktualisieren:

• Textausrichtung: Links
• Titelschriftart: Archivo
• Titeltextgröße: 22px
• Breite: 320px
• Modulausrichtung: Links (Desktop), Mitte (Tablet und Telefon)
• Höhe: 320px (Desktop), automatisch (Tablet und Telefon)
• Marge: -320px (Desktop), 0px (Tablet und Telefon)
• Polsterung: 40px oben, 40px links, 40px rechts

Duplizieren Sie das Call-to-Action-Modul und richten Sie es rechts aus

Um den zweiten Inhaltsblock zu erstellen, der rechts neben dem Klappentext angezeigt wird, können wir den Drahtmodell-Ansichtsmodus bereitstellen und das Call-to-Action-Modul duplizieren. Öffnen Sie dann die Einstellungen des Duplikats und aktualisieren Sie die Modulausrichtung rechts.

So sollte das Design bisher aussehen.

Erstellen der Schaltfläche

Das letzte Element, das wir unserem Design hinzufügen müssen, ist die Schaltfläche. Sie können in jedem der Call-to-Action-Module eine Schaltfläche hinzufügen, wenn Sie möchten. Aber für dieses Design dachte ich, es wäre besser, eine Schaltfläche hinzuzufügen, die unten in unserer Reihe sichtbar bleibt.

Um die Schaltfläche zu erstellen, stellen Sie das Drahtmodellansichtsmodul bereit und fügen Sie ein Schaltflächenmodul direkt unter dem zweiten Call-to-Action-Modul hinzu, sodass es das letzte Modul in der Zeile/Spalte ist.

Öffnen Sie die Einstellungen für das Schaltflächenmodul und schalten Sie dann den Desktop-Ansichtsmodus um, damit Sie die Schaltfläche visuell bearbeiten.

Fügen Sie den Schaltflächentext "Weitere Informationen" hinzu.

Aktualisieren Sie dann den Schaltflächenstil wie folgt:

• Tastenausrichtung: Mitte
• Schaltflächentextfarbe: #ffffff
• Schaltflächenhintergrundfarbe: #1f48c0
• Breite des Tastenrahmens: 0px
• Schaltflächenrandradius: 10px
• Tastenabstand: 4px
• Schaltflächenschriftart: Archivo

Jetzt müssen wir nur noch unseren Button positionieren.

• Rand (Desktop): -25px oben
• Rand (Tablet und Telefon): 25 Pixel oben, 50 Pixel unten
• Z-Index: 2

Der z-Indexwert von 2 stellt sicher, dass die Schaltfläche über dem Klappenmodul bleibt (das einen z-Index von 1 hat).

Erstellen des Pop-Out-Hover-Effekts

Der wichtigste Hover-Effekt, den wir benötigen, um die Pop-Out-Dienstbeschreibungen zu erreichen, besteht darin, die Breite der Zeile beim Hover zu ändern. Dazu müssen wir unserer Zeile standardmäßig eine schmale Breite zuweisen. Dadurch werden die Module hintereinander gestapelt und bleiben hinter dem Klappenmodul verborgen. Dann werden wir die Breite der Zeile beim Hover erweitern, um die beiden versteckten Call-to-Action-Module anzuzeigen.

Öffnen Sie die Zeileneinstellungen und aktualisieren Sie die Breite wie folgt:

• Maximale Breite (Desktop): 320px
• Maximale Breite (Hover): 1080px
• Maximale Breite (Tablet und Telefon) 1080px

Fügen Sie dann für den letzten Schliff der Zeile einen Randradius hinzu und aktualisieren Sie die Option für den Sichtbarkeitsüberlauf auf sichtbar, damit die Schaltfläche nicht ausgeblendet wird.

• Abgerundete Ecken: 10px
• Horizontaler Überlauf: sichtbar
• Vertikaler Überlauf: sichtbar

Endergebnis

Sehen Sie sich die bisherigen Pop-Out-Dienstbeschreibungen an.

Und hier ist es auf dem Tablet- und Telefondisplay.

Weitere Designoptionen zum Ausprobieren

Es macht immer Spaß, mit mehr Designoptionen zu experimentieren, da wir jetzt die Grundausstattung haben. Hier sind einige Vorschläge, die Sie für Ihre Pop-Out-Dienstbeschreibungen ausprobieren können.

Hinzufügen einer Abschnittshintergrundfarbe

Wenn Sie möchten, können Sie dem Abschnitt eine Hintergrundfarbe hinzufügen, die der Hintergrundfarbe/dem Hintergrundbild der Reihe entspricht, um ein einzigartiges Pop-Out-Design zu erhalten.

Gehen Sie zu den Zeileneinstellungen und aktualisieren Sie Folgendes:

• Hintergrundfarbe: #161c29

Dann schau dir das Ergebnis an.

Nur zwei Module verwenden

Wenn Sie ein kompakteres Pop-Out mit nur zwei Modulen wünschen, können Sie eines der Call-to-Action-Module löschen und dann das Klappenmodul nach links ausrichten, sodass die beiden beim Schweben sichtbar werden.

Stellen Sie dazu den Drahtmodell-Ansichtsmodus bereit. Löschen Sie dann das erste Call-to-Action-Modul direkt unter dem Klappenmodul.

Aktualisieren Sie danach das Klappenmodul mit einer linken Modulausrichtung.

• Modulausrichtung: Links (Desktop), Mitte (Tablet)

Verringern Sie schließlich die maximale Breite der Zeile beim Schweben, um sie kompakter zu machen. Öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:

• Maximale Breite (Hover): 700px
• Max Breite (Tablet): 700px

Hier ist das Endergebnis.

Und hier ist es auf weißem Hintergrund.

Abschließende Gedanken

Das Erstellen von Pop-Out-Dienstbeschreibungen beim Hover ist eine einzigartige Möglichkeit, Besucher mit Ihren Inhalten zu begeistern. Diese Funktionalität funktioniert ähnlich wie ein ausgefallener und informativer Tooltip mit allen Gestaltungsmöglichkeiten von Divi. Und es ist ziemlich einfach zu tun. Sobald Sie die Module dimensioniert und positioniert haben, müssen Sie nur noch die Breite der Reihe beim Hover anpassen. Experimentieren Sie mit verschiedenen Modulen und Inhalten für noch mehr Anwendungen. Wenn überhaupt, hoffe ich, dass dies Ihnen ein wenig mehr Inspiration gibt, um mehr mit Divi zu tun.

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

Danke schön!