Möchten Sie einen Ziehharmonika-Schieberegler erstellen Divi ansprechbar?
Ein Akkordeon-Schieberegler ist eine unterhaltsame und attraktive Art der Präsentation Inhalt auf kleinem Raum.
Akkordeonschieber bestehen im Allgemeinen aus mehreren Elementen (oder Paneelen), die horizontal wie die Falten eines Vorhangs gestapelt sind. Und wenn Sie mit der Maus über eines der Panels fahren, wird es erweitert und zeigt das an Inhalt während sich die anderen Akkordeonplatten zusammenziehen. Hier entsteht der ziehharmonikaartige Effekt der Expansion und Kontraktion.
In diesem Tutorial zeigen wir Ihnen, wie Sie einen reaktionsschnellen Akkordeon-Schieberegler in erstellen Divi nur CSS verwenden. Dazu werden wir mehrere Module verwenden Divi als Akkordeonplatten dienen.
Übersicht
Hier ist ein kurzer Überblick darüber, was wir in diesem Tutorial erreichen werden.
Laden Sie DIVI jetzt herunter!!!
Erstellen einer neuen Seite mit Divi Builder
Um zu beginnen, müssen Sie Folgendes tun:
- Gehen Sie im WordPress-Dashboard zu Seiten> Neu hinzufügen um eine neue Seite zu erstellen.
- Geben Sie ihm einen für Sie sinnvollen Titel und klicken Sie darauf Verwenden Sie Divi Builder
- klicken Sie dann auf Beginnen Sie mit dem Bauen (Von Grund auf neu erstellen)
Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.
Erstellung des reaktionsschnellen Akkordeon-Schiebereglers in Divi
Erstellung der Linie
Fügen Sie zunächst eine einspaltige Zeile zum regulären Abschnitt hinzu.
Öffnen Sie dann die Leitungseinstellungen und aktualisieren Sie Folgendes:
- Benutzerdefinierte Bundstegbreite verwenden: JA
- Rinnenbreite: 1
- Breite: 100 %
- Maximale Breite: 800 Pixel
- Höhe: 400 Pixel (Desktop); 700px (Tablet und Telefon)
Die Werte für die Breite und die maximale Breite können an Ihre Bedürfnisse angepasst werden. Das Akkordeon passt und funktioniert in jeder Linienbreite.
Spaltenparameter
Nachdem wir nun eine Höhe für die Zeile definiert haben, öffnen Sie die Spalteneinstellungen und fügen dem Hauptelement das folgende CSS hinzu:
Desktop
display:flex;
flex-direction: row;
align-items:center;
height: 100%;
Tablette
display:flex;
flex-direction: column;
align-items:center;
height: 100%;
Erstellen des Akkordeon-Bedienfelds mit Blurb-Modulen
Der Akkordeon-Schieberegler kann mit jeder Art von Modul(en) gebaut werden. Wenn wir wollten, könnten wir eine Kombination verschiedener Module verwenden, um als Akkordeon-Panel zu fungieren. Aber für dieses Design werden wir Blurb-Module verwenden.
Beginnen Sie damit, der Linie ein Blurb-Modul hinzuzufügen.
Klappentext-Mod-Design
Öffnen Sie die Einstellungen des Präsentationsmoduls und aktualisieren Sie Folgendes:
Behalten Sie den fiktiven Titel und Inhalt vom Körper. Wir können dies später jederzeit ändern.
Aktualisieren Sie als Nächstes das Präsentationssymbol wie folgt:
- Symbol (Desktop): Symbol mit horizontaler Pfeillinie (siehe Screenshot)
- Symbol (Hover): (siehe Screenshot)
- Symbol (Tablet und Telefon): (siehe Screenshot)
Hintergrund
Geben Sie dem Klappentext dann wie folgt ein Hintergrundbild und eine Verlaufsüberlagerung beim Hover:
- Fügen Sie ein Hintergrundbild hinzu, das mindestens 1000 Pixel breit ist
- Position des Hintergrundbilds: Mitte links
Fügen Sie dann eine Verlaufshintergrundüberlagerung hinzu.
Schweben
- Hintergrundverlauf links (Hover): #3e215b
- Hintergrundverlauf rechts (Hover): rgba(0,0,0,0)
- Verlaufsrichtung: 90 Grad
- Quadratische Steigung über Hintergrundbild: JA
Symbol
- Symbolfarbe: #ffffff
- Bild-/Icon-Platzierung: Richtig
Wechseln Sie als Nächstes zur Registerkarte Design und aktualisieren Sie Folgendes:
Titel und Textkörper
- Titelschriftart: Poppins
- Schriftstärke: halbfett
- Titeltextfarbe: transparent (Desktop), #ffffff (Hover)
- Titeltextgröße: 22px
- Haupttextfarbe: transparent (Desktop), #ffffff (Hover)
Kastenhöhe und Schatten
Sobald der Text angepasst ist, geben Sie dem Modul eine Höhe von 100 % und einen Rahmenschatten wie folgt:
- Höhe: 100 %
- Box Shadow: Siehe Screenshot
- Horizontale Position: -12px
- Vertikale Position: 0px
Benutzerdefiniertes CSS
Damit unsere Akkordeon-Panels (oder das Blurb-Modul) mit den übrigen Modulen wachsen und zusammenziehen können, müssen wir benutzerdefiniertes CSS hinzufügen, um die Größe des Moduls mit Flex-Grow zu ändern.
Da wir insgesamt 5 Module haben werden, aus denen das Akkordeon besteht, fügen wir "flex:1" für den Standardzustand hinzu und ändern es dann im Hover-Zustand in "flex:5".
Fügen Sie auf der Registerkarte „Erweitert“ das folgende benutzerdefinierte CSS zum Blurb-Hauptelement hinzu:
Büro
flex:1;
position: relative !important;
transition: flex 800ms !important;
Beim Schweben
flex:5;
position: relative !important;
transition: flex 800ms !important;
Fügen Sie dann das folgende benutzerdefinierte CSS zum Blurb-Inhalts-CSS hinzu:
Büro
position: absolute !important;
width: 280px;
padding: 20px;
transition: color 400ms;
Tablette
position: relative !important;
width: 100%;
height: 100%;
padding: 20px;
transition: color 400ms;
Überlauf und Übergang
- Horizontaler Überlauf: Ausgeblendet
- Vertikaler Überlauf: Ausgeblendet
- Übergangsdauer: 400 ms
- Übergangsgeschwindigkeitskurve: Linear
Sehr gut! Es war eine ernsthafte Anpassung eines Blurb-Moduls. Aber die gute Nachricht ist, dass wir sie nur duplizieren müssen, um die verbleibenden Akkordeon-Panels zu erstellen.
Doppelte Layouts für mehr Akkordeon-Panels
Bewegen Sie den Mauszeiger über das Präsentationsmodul und klicken Sie viermal auf das Doppelsymbol, um insgesamt fünf Akkordeonfelder (oder Module) zu erstellen.
Aktualisieren Sie als Nächstes die Hintergrundbilder für jeden der neuen Klappentexte, die Sie dupliziert haben.
Endergebnis
Nun, da wir alle Schritte durchlaufen haben, sehen wir uns das Endergebnis an.
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
Dieser reaktionsschnelle Akkordeon-Schieberegler hat wirklich einige einzigartige Elemente, die die Verwendung zum Vergnügen machen. Akkordeon-Panels erweitern und kontrahieren nahtlos bei Mouseover ohne unerwartete Störungen.
Und Präsentationssymbole ändern sich beim Hover und auf Mobilgeräten, um die UX zu verbessern. Wir hoffen, dass dieses Tutorial Sie für Ihre nächsten Divi-Projekte inspirieren wird. Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.
Sie können sich auch beraten lassen unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
