Springe zum Hauptinhalt

So erstellen Sie faltbare Abschnitte, wenn Sie den Mauszeiger über Divi halten

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Die Verwendung der neuen beweglichen Größenoptionen von Divi hilft uns nicht nur beim Erstellen von reaktionsschnellen (reaktionsschnellen) Websites, sondern schafft auch einzigartige Interaktionen. Mit diesen Optionen können Sie jede von Ihnen erstellte Website anpassen und Ihre Seitenstruktur basierend auf aktuellen Designtrends anpassen.

Insbesondere in diesem Tutorial zeigen wir Ihnen, wie Sie mit Divi Hover-Abschnitte erstellen. Wir werden eine neue Seite erstellen und die Anzeige aller Abschnittsüberschriften zulassen, aber jeder Abschnitt wird nur beim Hover (Desktop) oder beim Klicken (Mobil) geöffnet. Sobald Sie einen anderen Abschnitt öffnen, wird der zuvor geöffnete automatisch geschlossen. Wir werden zunächst den allgemeinen Ansatz erläutern und anschließend das unten gezeigte Beispiel von Grund auf neu erstellen. Wir hoffen, dass dieses Tutorial Sie dazu ermutigt, Ihre eigenen Hover-Section-Designs zu erstellen!

Lassen Sie uns gehen!

Übersicht

Sehen wir uns das Ergebnis kurz an, bevor wir in das Tutorial eintauchen.

Design Vorschau Divi Abschnitt

Designphase

Bevor wir uns mit dem Tutorial befassen, werden wir uns mit der Technik befassen, die zum Erstellen von Überführungsabschnitten verwendet wird. Sie können diese Technik auf jede Art von Website anwenden, die Sie erstellen, mit jedem Stil.

1. Fügen Sie den ersten Abschnitt Ihrer Seite hinzu

Angenommen, Sie starten 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 mit einem Abschnittstitel hinzu

Anschließend können Sie eine neue Zeile mit einem Textmodul hinzufügen, das Ihren Abschnittstitel enthält. Sie können auch ein Teilermodul und etwas hinzufügen, das anzeigt, dass sich die Linie beim Schweben oder Berühren entfaltet. Es ist wichtig, den Abschnittstitel vom Rest des Abschnittsinhalts zu trennen. Stellen Sie also sicher, dass zwischen dem Abschnittstitel und allem, was folgt, genügend Platz bleibt.

3. Passen Sie den restlichen Inhalt des Abschnitts an

Die Gestaltungselemente, die den Abschnittsüberschriften folgen, liegen ganz bei Ihnen. Sie können einen Abschnitt so lang oder so kurz wie Sie möchten erstellen und einen beliebigen Designstil verwenden.

4. Ändern Sie die Standardhöhen und bewegen Sie den Mauszeiger über den Bereich

Sobald Sie den Abschnitt und alle seine Designelemente verfeinert haben, ist es Zeit, den Rollover-Effekt zu erstellen. Die Standardhöhe Ihres Abschnitts stimmt nur mit dem Abschnittstitel überein. Beim Hover kehrt der Abschnitt zu seiner ursprünglichen Größe zurück.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

5. Vertikaler Überlauf ausblenden

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

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

Wiederholen Sie die gleichen Schritte für alle Bereiche Ihrer Seite, um eine offensichtliche Benutzererfahrung zu erzielen, die Ihre Besucher schätzen werden.

Beginn des Entwurfs!

Einen neuen Abschnitt hinzufügen

Standardhintergrundfarbe

Nachdem wir den Ansatz in diesem Beitrag verfolgt haben, ist es Zeit, die Dinge in die Tat umzusetzen! Fügen Sie einer brandneuen Seite Ihrer WordPress-Website einen regulären ersten Abschnitt hinzu und öffnen Sie die Abschnittseinstellungen. Ändern Sie die Standardhintergrundfarbe Ihres Abschnitts in eine Farbe Ihrer Wahl.

  • Hintergrundfarbe: # 000000

Parameter divi AbschnittFliegen Sie über die Hintergrundfarbe

Ändern Sie diese schwebende Hintergrundfarbe.

  • Hintergrundfarbe: #ffffff

Divi Parameter AbschnittFügen Sie die Zeile 1 hinzu

Spaltenstruktur

Fügen Sie Ihrem Abschnitt weiterhin die erste Zeile hinzu, indem Sie die folgende Spaltenstruktur verwenden:

Wählen Sie eine Zeilenteilung

Fügen Sie ein Textmodul hinzu

Fügen Sie H2-Inhalte hinzu

Fügen Sie Ihrer nächsten neuen Zeile ein Textmodul hinzu. Fügen Sie im Verlauf des Abschnitts eine H2-Kopie mit dem Symbol '▼' hinzu.

Über Abschnitt diviÄndern Sie die Symbolfarbe

H2-Texteinstellungen

Gehen Sie zur Registerkarte Moduldesign und ändern Sie die H2-Texteinstellungen.

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

Passen Sie den Divi-Titel an

Fügen Sie ein Divisionsmodul hinzu

Sichtbarkeit

Das zweite und letzte Modul, das wir in dieser Zeile benötigen, ist ein Divisionsmodul. Stellen Sie sicher, dass die Option "Trennzeichen anzeigen" in den Sichtbarkeitseinstellungen aktiviert ist.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

  • Teiler anzeigen: Ja

Fügen Sie ein Divi-Trennzeichen hinzuFarbe

Gehen Sie dann zur Registerkarte Design und ändern Sie die Farbe des Trennzeichens.

  • Farbe: #ff0f3b

Fügen Sie einen Teiler auf divi hinzuSizing

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

  • Teilergewicht: 2px
  • Breite: 14%

Passen Sie das Trennzeichen an

Fügen Sie die 2-Zeile hinzu

Spaltenstruktur

Nächste Reihe! Hier müssen Sie alle Inhalte platzieren, die Sie nach dem Bewegen (Desktop) oder Klicken (Tablet und Handy) anzeigen möchten. Wir verwenden die folgende Spaltenstruktur. Beachten Sie jedoch, dass Sie beliebig viele Zeilen und Module hinzufügen und nach Bedarf anpassen können:

Fügen Sie einen doppelspaltigen Divi-Abschnitt hinzu

Fügen Sie der 1-Spalte einen Textbaustein hinzu

Inhalt hinzufügen

Platzieren Sie in der ersten Spalte einen Textbaustein mit dem Inhalt Ihrer Wahl.

Divi-Textfeld hinzufügenTexteinstellungen

Gehen Sie zur Registerkarte Design des Textmoduls und ändern Sie die Ausrichtung des Textes.

  • Textausrichtung: Begründen Sie

Divi-Textparameter

Fügen Sie der 2-Spalte einen Textbaustein hinzu

Inhalt hinzufügen

Fügen Sie der zweiten Spalte auch einen Textbaustein mit dem Inhalt Ihrer Wahl hinzu.

Inhaltszone 2 hinzufügen

Texteinstellungen

Ändern Sie erneut die Ausrichtung des Texts in den Texteinstellungen des Moduls.

  • Textausrichtung: Begründen Sie

Divi-Textparameter

Fügen Sie dem Abschnitt die Größenparameter hinzu

Standardgröße

Sobald Sie Ihren Abschnitt abgeschlossen haben, ist es Zeit, den Hover-Effekt zu erstellen. Ö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)

Divi Builder Dimensionierung

Schwebeflug

Aktivieren Sie auch die Hover-Option für die maximale Höhe und fügen Sie einen Wert hinzu, der groß genug ist, um alle Elemente unabhängig von der Bildschirmgröße 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

Schwebeflug

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

Bildschirmeinstellung

Übergänge

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

  • Dauer des Übergangs: 800ms
  • Übergangszeit: 500 ms

Übergangseinstellungen

Klonen Sie den gesamten Abschnitt so oft Sie möchten

Sobald Sie den ersten Überflugabschnitt erstellt haben, können Sie ihn beliebig oft klonen.

Klonen Sie Divi-AbschnitteAbschnittstitel ändern

Natürlich möchten Sie die doppelten Abschnittsüberschriften ändern.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Änderung des Divi-Abschnitts

Ändern Sie die Farben des H2-Texts

Um Variationen im Design zu erstellen, ändern wir auch die Textfarben der Module, die im Druckbildschirm unten hervorgehoben sind.

  • Titel 2 Textfarbe: #c4c4c4

Änderung der Divi-Titelfarben

Ändern Sie die Farben des Separators

Mit den Separationsfarben, die den Textbausteinen beiliegen.

  • Farbe: #c4c4c4

Übersicht

Nachdem alle Schritte abgeschlossen sind, werfen wir einen letzten Blick auf das Ergebnis.

Divi Design Vorschau

Abschließende Gedanken

In diesem Artikel haben wir Ihnen gezeigt, wie Sie die neuen ziehbaren Größenoptionen von Divi kreativ nutzen können, um mithilfe von Hover-Abschnitten auf jeder von Ihnen erstellten Website einzigartige Interaktionen zu erstellen. Wir haben zunächst den Ansatz erläutert und das Designbeispiel von Grund auf neu erstellt. Sie können die JSON-Datei auch kostenlos herunterladen! Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie bitte einen Kommentar im Kommentarbereich unten.

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
1 Aktien
Aktie1
tweet
Registrieren