So platzieren Sie mit Divi . Hover-Tooltips überall auf Ihrer Seite

Jede Woche stellen wir Ihnen neue und kostenlose Divi-Layoutpakete zur Verfügung, die Sie für Ihr nächstes Projekt verwenden können. Für eines der Layout-Pakete teilen wir auch einen Anwendungsfall, der Ihnen hilft, Ihre Website auf die nächste Stufe zu heben.

Diese Woche zeigen wir Ihnen im Rahmen unserer laufenden Divi-Designinitiative, wie Sie mit Divi Hover-Tooltips erstellen und überall auf Ihrer Seite platzieren können. Dies ist eine großartige Möglichkeit, Nebeninformationen mit Ihren Besuchern zu teilen, ohne sie direkt auf der Seite einzufügen.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Laden Sie das Hover-Tooltips-Layout KOSTENLOS herunter

Um das kostenlose Hover-Tooltips-Layout 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!

Neue Seite mit Dog Walker Homepage-Layout erstellen

Neue Seite hinzufügen

Als erstes müssen Sie eine neue Seite erstellen, indem Sie zu Seiten > Neu hinzufügen gehen . Fahren Sie fort, indem Sie Ihrer Seite einen Titel geben, die Seite veröffentlichen und zu Visual Builder wechseln.

Dog Walker Landing Page hochladen

Laden Sie als nächstes das Landingpage-Layout auf Ihre Seite hoch. Obwohl wir dieses Layoutpaket verwenden werden, um die Hover-Tooltips-Technik durchzugehen, können Sie diesen Ansatz auf jede Art von Layout anwenden, an dem Sie arbeiten.

Hover-Tooltips-Design erstellen

Neue Zeile am Ende des Abschnitts hinzufügen

Spaltenstruktur (Entscheiden Sie, wie viele Tooltips Sie benötigen)

Nachdem Sie das Landingpage-Layout hochgeladen haben, können Sie mit der Erstellung der Hover-Tooltips beginnen. Wir fügen sie an einer bestimmten Stelle auf der Seite hinzu, aber Sie können sie mit den Transformationsübersetzungsoptionen überall platzieren. Suchen Sie den folgenden Abschnitt auf Ihrer Seite und fügen Sie unten eine Zeile mit drei Spalten hinzu:

Max. Zeilenbreite

Um sicherzustellen, dass die Tooltip-Designs an der richtigen Stelle erscheinen, verwenden wir dieselbe maximale Zeilenbreite wie für die darüber liegende Zeile. Gehen Sie zu den Größeneinstellungen der Zeile und passen Sie die maximale Breite entsprechend an:

• Maximale Breite: 1280px

Abstand

Um den Platzbedarf des Zeilencontainers zu reduzieren, entfernen wir die standardmäßige obere und untere Auffüllung in den Abstandseinstellungen.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Überläufe

Wir stellen außerdem sicher, dass die Überläufe der Zeile auf der Registerkarte "Erweitert" sichtbar sind.

• Horizontaler Überlauf: Sichtbar
• Vertikaler Überlauf: Sichtbar

Tooltip-Textmodul zu Spalte 1 hinzufügen

Inhalt zur Inhaltsbox hinzufügen

Fragezeichenspanne

Zeit, das erste Tooltip-Design zu erstellen! Wir verwenden ein Textmodul. Wir fügen ein Span (für das Tooltip-Symbol) und ein div (für den Tooltip-Inhalt) in das Inhaltsfeld ein. Dies gibt uns mehr Freiheit, das Hover-Tooltip-Symbol und den Tooltip-Inhalt individuell zu gestalten. Beginnen Sie damit, die Spanne hinzuzufügen und ihr die Klasse 'Fragezeichen' zuzuweisen.

Tooltip-Div

Fahren Sie fort, indem Sie mit der Klasse 'tooltip-content' ein div zum Inhaltsfeld hinzufügen. Fügen Sie diesem Div den Tooltip-Inhalt Ihrer Wahl hinzu.

Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Texteinstellungen entsprechend:

• Textschriftart: Open Sans
• Textfarbe: #ffffff

H3-Texteinstellungen

Ändern Sie auch die H3-Texteinstellungen.

• Überschrift 3 Schriftart: Amatic SC
• Überschrift 3 Textfarbe: #ffffff
• Überschrift 3 Textgröße: 30px

Größe

Wir spielen auch mit der Breite und Höhe des Moduls herum, um den Schwebeeffekt zu erzeugen.

• Breite: 300px
• Höhe: 42px

Abstand

Fügen Sie auch etwas obere Polsterung hinzu.

• Obere Polsterung: 10px

Standardsichtbarkeit

Im Standardzustand möchten wir jetzt, dass alles, was unter das Tooltip-Symbol geht, ausgeblendet wird. Aus diesem Grund blenden wir die Überläufe in der Registerkarte "Erweitert" aus.

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

Hover-Sichtbarkeit

Beim Schweben möchten wir jedoch, dass alles angezeigt wird. Wir machen das, indem wir die Überläufe beim Hover sichtbar machen.

• Horizontaler Überlauf: Sichtbar
• Vertikaler Überlauf: Sichtbar

Codemodul unter Textmodul hinzufügen

Nachdem wir das Modul gestylt haben, müssen wir noch Span und div in der Inhaltsbox mit den CSS-Klassen gestalten, die wir ihm zugewiesen haben. Fügen Sie ein Codemodul direkt unter dem Tooltip-Textmodul hinzu.

CSS-Code zu Style Divs im Textmodul hinzufügen

Fügen Sie die folgenden CSS-Codezeilen hinzu, um die verschiedenen Teile des Textmoduls zu gestalten:

<style>
.question-mark {
background-color: #000;
padding: 10px 16px 10px 16px;
border-radius: 500px;
}

.tooltip-content {
background-color: #ee6a5b;
padding: 20px;
border-radius: 5px;
}</style>

Tooltip-Textmodul zweimal klonen und in verbleibende Spalten platzieren

Nachdem Sie die erste Spalte ausgefüllt haben, können Sie das Tooltip-Textmodul zweimal klonen und die Duplikate in die beiden verbleibenden Spalten der Zeile einfügen.

Inhalt des Tooltips ändern

Stellen Sie sicher, dass Sie den Tooltip-Inhalt jedes Duplikats ändern.

QuickInfo-Position ändern (mit Transform Translate)

Kurzinfo Nr. 1

Zu guter Letzt müssen wir die Tooltips an der gewünschten Stelle auf der Seite neu positionieren. Um genau das gleiche Ergebnis zu erzielen, das in der Vorschau dieses Beitrags gezeigt wurde, öffnen Sie das erste Tooltip-Textmodul und wenden Sie die folgenden Transformationswerte an:

• Rechts: -450px (Desktop), -2000px (Tablet), -1900px (Telefon)

Tooltip #2

Wechseln Sie zum Tooltip-Textmodul in der zweiten Spalte und ändern Sie die Transformationswerte wie folgt:

• Rechts: -400px (Desktop), -1300px (Tablet), -1250px (Telefon)

Tooltip #3

Machen Sie dasselbe für das Tooltip-Textmodul in Spalte 3 und Sie sind fertig!

• Rechts: -500px (Desktop), -600px (Tablet und Telefon)

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie Hover-Tooltips überall auf Ihrer Seite erstellen und platzieren können, ohne dass ein zusätzliches Plugin erforderlich ist. Dies ist eine großartige Möglichkeit, zusätzliche Informationen hinzuzufügen, ohne sie direkt in Ihre Seite aufzunehmen. Dieses Use-Case-Tutorial ist Teil unserer laufenden Divi-Designinitiative, bei der wir versuchen, jede Woche etwas mehr in Ihre Design-Toolbox zu bringen. Wenn Sie Fragen haben, stellen Sie sicher, dass Sie eine Frage im Kommentarbereich unten hinterlassen!

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.