Die Verwendung der neuen ziehbaren Größenoptionen von Divi hilft uns nicht nur bei der Erstellung äußerst reaktionsfähiger Websites, sondern auch bei der Erstellung einzigartiger Interaktionen. Mit diesen Optionen können Sie alle anpassen Website Sie erstellen und passen die Struktur Ihrer Seiten an aktuelle Designtrends an.
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.
Designphase
Bevor wir in das Tutorial eintauchen, gehen wir die Technik durch, die zum Erstellen von Rollover-Abschnitten verwendet wird. Sie können diese Technik auf jede Art von anwenden Website Sie bauen, 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 fortfahren, indem Sie eine neue Zeile mit einem Textbaustein einschließlich Ihres Abschnittstitels hinzufügen. Sie können auch ein Trennmodul und etwas hinzufügen, das anzeigt, dass sich die Linie beim Schweben oder Berühren erweitert. Es ist wichtig, den Abschnittstitel vom Rest zu trennen Inhalt des Abschnitts. Stellen Sie daher sicher, dass zwischen der Abschnittsüberschrift und allem, was folgt, genügend Platz bleibt.
3. Passen Sie den Rest an Inhalt Abschnitt
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.
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 schaffen, die Ihre Besucher Wird schätzen.
Beginn des Entwurfs!
Einen neuen Abschnitt hinzufügen
Standardhintergrundfarbe
Nachdem wir nun den Ansatz in diesem Beitrag verfolgt haben, ist es an der Zeit, die Dinge in die Tat umzusetzen! Fügen Sie einen regulären ersten Abschnitt zu einer brandneuen Seite Ihres Blogs hinzu Website WordPress und öffnen Sie die Abschnittseinstellungen. Ändern Sie die Standardhintergrundfarbe Ihres Abschnitts in eine Farbe Ihrer Wahl.
- Hintergrundfarbe: # 000000
Fliegen Sie über die Hintergrundfarbe
Ändern Sie diese schwebende Hintergrundfarbe.
- Hintergrundfarbe: #ffffff
Fügen Sie die Zeile 1 hinzu
Spaltenstruktur
Fügen Sie Ihrem Abschnitt weiterhin die erste Zeile hinzu, indem Sie die folgende Spaltenstruktur verwenden:
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.
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
Fügen Sie ein Divisionsmodul hinzu
Sichtbarkeit
Das zweite und letzte Modul, das wir in dieser Zeile benötigen, ist ein Teilungsmodul. Stellen Sie sicher, dass die Option "Trennzeichen anzeigen" in den Sichtbarkeitseinstellungen aktiviert ist.
- Teiler anzeigen: Ja
Farbe
Gehen Sie dann zur Registerkarte Design und ändern Sie die Farbe des Trennzeichens.
- Farbe: #ff0f3b
Sizing
Ändern Sie auch die Größenparameter des Moduls.
- Teilergewicht: 2px
- Breite: 14%
Fügen Sie die 2-Zeile hinzu
Spaltenstruktur
Nächste Reihe! Hier müssen Sie alles platzieren Inhalt die Sie nach dem Bewegen des Mauszeigers (Desktop) oder dem Klicken (Tablet und Mobilgerät) anzeigen möchten. Wir verwenden die folgende Spaltenstruktur, beachten Sie jedoch, dass Sie beliebig viele Zeilen und Module hinzufügen und an Ihre Bedürfnisse anpassen können:
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.
Texteinstellungen
Gehen Sie zur Registerkarte Design des Textmoduls und ändern Sie die Ausrichtung des Textes.
- Textausrichtung: Begründen Sie
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.
Texteinstellungen
Ändern Sie erneut die Ausrichtung des Texts in den Texteinstellungen des Moduls.
- Textausrichtung: Begründen Sie
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)
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
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 erstellen, ändern wir auch die Übergangseinstellungen auf der Registerkarte Erweitert.
- Dauer des Übergangs: 800ms
- Übergangszeit: 500 ms
Klonen Sie den gesamten Abschnitt so oft Sie möchten
Sobald Sie den ersten Überflugabschnitt erstellt haben, können Sie ihn beliebig oft klonen.
Abschnittstitel ändern
Natürlich möchten Sie die doppelten Abschnittsüberschriften ändern.
Ä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
Ä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.
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.
