So erstellen Sie Hover-Abschnitte mit den neuen Größen- und Überlaufeinstellungen von Divi

Die Verwendung der neuen ziehbaren Größenoptionen von Divi hilft Ihnen nicht nur beim Erstellen reaktionsschneller Websites, sondern sie können auch wirklich dazu beitragen, einzigartige Interaktionen zu schaffen. Indem Sie mit diesen Optionen herumspielen, können Sie jede von Ihnen erstellte Website anpassen und Ihre Seitenstrukturen an aktuelle Designtrends anpassen.

In diesem Tutorial zeigen wir Ihnen insbesondere, wie Sie mit Divi Hover-Abschnitte erstellen. Wir erstellen eine neue Seite und lassen alle Abschnittstitel anzeigen, aber jeder Abschnitt wird nur beim Bewegen der Maus (Desktop) oder beim Klicken (mobil) geöffnet. Sobald Sie einen anderen Bereich öffnen, wird der zuvor geöffnete automatisch geschlossen. Wir beginnen mit der Erklärung des allgemeinen Ansatzes und fahren fort, indem wir das Beispiel, das Sie unten sehen, von Grund auf neu erstellen. Wir hoffen, dass dieses Tutorial Sie ermutigt, auch Ihre eigenen Hover-Sektionsdesigns zu erstellen!

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 Sections Layout KOSTENLOS herunter

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

Sich nähern

Bevor wir in das eigentliche Tutorial eintauchen, gehen wir die Technik durch, die verwendet wird, um Hover-Sektionen zu erstellen. Sie können diese Technik auf jede Art von Website anwenden, die Sie erstellen, mit jedem Designstil.

1. Füge den ersten Abschnitt zu deiner Seite hinzu

Nehmen wir an, Sie beginnen ein neues Design auf einer brandneuen Seite. Als erstes müssen Sie einen neuen regulären Abschnitt hinzufügen.

2. Fügen Sie eine neue Zeile hinzu, die einen Abschnittstitel enthält

Dann können Sie fortfahren, indem Sie eine neue Zeile mit einem Textmodul hinzufügen, das Ihren Abschnittstitel enthält. Sie können auch ein Trennmodul und etwas hinzufügen, das anzeigt, dass die Zeile beim Bewegen oder Berühren erweitert wird (siehe Beispiel in der Vorschau dieses Beitrags). Es ist wichtig, den Abschnittstitel vom Rest des Abschnittsinhalts zu trennen, also stellen Sie sicher, dass Sie zwischen dem Abschnittstitel und dem, was als nächstes kommt, genügend Leerraum lassen.

3. Passen Sie den Rest des Abschnittsinhalts an (fügen Sie so viele Zeilen und Module wie gewünscht hinzu)

Die Gestaltungselemente, die den Abschnittstiteln folgen, liegen ganz bei Ihnen. Sie können den Abschnitt so lang oder kurz gestalten, wie Sie möchten, und jeden Designstil verwenden.

4. Ändern Sie die Standard- und Hover-Max-Höhe des Abschnitts

Sobald Sie mit der Feinabstimmung des Abschnitts und aller darin enthaltenen Designelemente fertig sind, ist es an der Zeit, den Schwebeeffekt zu erstellen. Die Standardhöhe Ihres Abschnitts soll nur zum Abschnittstitel passen. Wenn Sie den Mauszeiger darüber bewegen, nimmt der Abschnitt seine ursprüngliche Größe zurück.

5. Verstecken Sie den vertikalen Überlauf

Ein weiterer wichtiger Teil dieser Technik ist das Verbergen des vertikalen Überlaufs. Sobald Sie eine maximale Standardhöhe für Ihren Abschnitt festgelegt haben, die kleiner als die anfängliche Höhe des Abschnitts ist, wird ein Überlauf erstellt. Um sicherzustellen, dass der Überlauf nicht angezeigt wird, müssen Sie sicherstellen, dass er in den Sichtbarkeitseinstellungen des Abschnitts ausgeblendet ist.

5. Wiederholen Sie die Schritte für alle Abschnitte auf der Seite

Wiederholen Sie die gleichen Schritte für alle Abschnitte auf Ihrer Seite, um eine offensichtliche Benutzererfahrung zu schaffen, die Ihre Besucher zu schätzen wissen.

Abonnieren Sie unseren Youtube-Kanal

Beginnen wir mit der Neuerstellung!

Neuen Abschnitt hinzufügen

Standardhintergrundfarbe

Nachdem wir den Ansatz dieses Beitrags durchgegangen sind, ist es an der Zeit, die Dinge in die Tat umzusetzen! Fügen Sie einen ersten regulären Abschnitt zu einer brandneuen Seite auf Ihrer WordPress-Website hinzu und öffnen Sie die Abschnittseinstellungen. Ändern Sie die Standardhintergrundfarbe Ihres Abschnitts in eine Farbe Ihrer Wahl.

• Hintergrundfarbe: #000000

Hintergrundfarbe schweben

Ändern Sie diese Hintergrundfarbe beim Schweben.

• Hintergrundfarbe: #ffffff

Zeile 1 hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie die erste Zeile zu Ihrem Abschnitt hinzufügen, indem Sie die folgende Spaltenstruktur verwenden:

Textmodul hinzufügen

H2-Inhalt hinzufügen

Fügen Sie als nächstes ein Textmodul zu Ihrer neuen Zeile hinzu. Fügen Sie eine H2-Kopie mit zusammen mit dem '▼'-Symbol hinzu, das anzeigt, dass etwas als nächstes kommt.

H2-Texteinstellungen

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die H2-Texteinstellungen.

• Überschrift 2 Schriftart: Trebuchet
• Überschrift 2 Schriftstärke: Ultra Bold
• Überschrift 2 Textausrichtung: Links
• Überschrift 2 Textfarbe: #ff0f3b
• Überschrift 2 Textgröße: 100px (Desktop), 80px (Tablet), 60px (Telefon)
• Überschrift 2 Buchstabenabstand: -5px

Trennmodul hinzufügen

Sichtweite

Das zweite und letzte Modul, das wir in dieser Reihe benötigen, ist ein Divider-Modul. Stellen Sie sicher, dass Sie die Option "Teiler anzeigen" in den Sichtbarkeitseinstellungen aktivieren.

• Teiler anzeigen: Ja

Farbe

Wechseln Sie dann zur Registerkarte Design und ändern Sie die Teilerfarbe.

• Farbe: #ff0f3b

Größe

Ändern Sie auch die Größeneinstellungen des Moduls.

• Teilergewicht: 2px
• Breite: 14%

Zeile 2 hinzufügen

Spaltenstruktur

Auf in die nächste Reihe! Hier müssen Sie alle Inhalte platzieren, die nach dem Bewegen der Maus (Desktop) oder Klicken (Tablet und Handy) angezeigt werden sollen. Wir verwenden die folgende Spaltenstruktur, aber beachten Sie, dass Sie beliebig viele Zeilen und Module hinzufügen und nach Ihren Wünschen gestalten können:

Textmodul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Platzieren Sie in der ersten Spalte ein Textmodul mit einem Inhalt Ihrer Wahl.

Texteinstellungen

Gehen Sie zum Design-Tab des Textmoduls und ändern Sie die Textausrichtung.

• Textausrichtung: Begründen

Textmodul zu Spalte 2 hinzufügen

Inhalt hinzufügen

Fügen Sie auch in der zweiten Spalte ein Textmodul mit einem Inhalt Ihrer Wahl hinzu.

Texteinstellungen

Ändern Sie auch hier die Textausrichtung in den Texteinstellungen des Moduls.

• Textausrichtung: Begründen

Größeneinstellungen zum Abschnitt hinzufügen

Standardgröße

Sobald Sie Ihren Abschnitt fertiggestellt haben, ist es an der Zeit, den Hover-Effekt zu erzielen. Öffnen Sie die Abschnittseinstellungen und ändern Sie die maximale Höhe für verschiedene Bildschirmgrößen:

• Maximale Höhe: 300px (Desktop), 280px (Tablet), 260px (Telefon)

Hover-Größen

Aktivieren Sie auch die Hover-Option für die maximale Höhe und fügen Sie einen Wert hinzu, der hoch genug ist, um alle Elemente auf verschiedenen Bildschirmgrößen abzudecken. Dieser Wert stellt sicher, dass alle Ihre Elemente angezeigt werden, ohne die ursprüngliche Größe des Abschnittscontainers zu überschreiten.

• Maximale Höhe: 5000px

Vertikaler Überlauf

Gehen Sie dann zur Registerkarte "Erweitert" des Abschnitts und ändern Sie den vertikalen Überlauf. Dadurch wird der gesamte Inhalt ausgeblendet, der über den Abschnittscontainer hinausgeht.

• Vertikaler Überlauf: Versteckt

Übergänge

Um einen reibungslosen Übergang zu schaffen, ändern wir auch die Übergangseinstellungen auf der Registerkarte „Erweitert“.

• Übergangsdauer: 800ms
• Übergangsverzögerung: 500ms

Ganze Sektion so oft wie gewünscht klonen

Sobald Sie den ersten Hover-Abschnitt erstellt haben, können Sie ihn beliebig oft klonen.

Abschnittstitel ändern

Natürlich möchten Sie die Abschnittstitel der Duplikate ändern.

H2-Textfarben ändern

Um eine gewisse Variation im Design zu schaffen, werden wir auch die Textfarben der Module ändern, die im Druckbildschirm unten hervorgehoben sind.

• Überschrift 2 Textfarbe: #c4c4c4

Teilerfarben ändern

Zusammen mit den Teilerfarben, die die Textmodule begleiten.

• Farbe: #c4c4c4

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 die neuen verschiebbaren Größenoptionen von Divi kreativ verwenden, um einzigartige Interaktionen mithilfe von Hover-Abschnitten auf jeder von Ihnen erstellten Website zu erstellen. Wir haben mit der Erklärung des Ansatzes begonnen und das Designbeispiel von Grund auf neu erstellt. Sie konnten die JSON-Datei auch kostenlos herunterladen! Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie bitte einen Kommentar im Kommentarbereich unten.

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.