Ein Akkordeon-Schieberegler ist eine unterhaltsame und attraktive Art der Präsentation Inhalt auf engstem Raum. Akkordeonschieber bestehen normalerweise aus mehreren Elementen (oder Paneelen), die horizontal gestapelt sind, wie die Falten eines Vorhangs. 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 wird der Akkordeoneffekt der Expansion und Kontraktion erreicht.
In diesem Tutorial zeige ich Ihnen, wie Sie einen reaktionsschnellen Akkordeon-Schieberegler in erstellen Divi nur CSS verwenden. Dazu verwenden wir mehrere Module Divi als Akkordeonplatten dienen. Jedes Modul kann verwendet werden, aber für dieses Beispiel werden wir Klappentext-Module auf sehr kreative Weise verwenden, um einen schönen Akkordeon-Schieberegler zu erstellen, der sowohl auf dem Desktop als auch auf Mobilgeräten großartig aussieht (und funktioniert).
Check it out!
Übersicht
Hier ist eine Übersicht darüber, was wir in diesem Tutorial erstellen werden.
Beginnen wir mit dem Tutorial
Was Sie brauchen, um loszulegen
Um zu beginnen, müssen Sie Folgendes tun:
- Falls noch nicht geschehen, installieren und aktivieren Sie die Divi-Thema installiert (oder das Plugin Divi Builder, wenn Sie den nicht verwenden Divi-Thema).
- Erstellen Sie eine neue Seite in WordPress und bearbeiten Sie die Seite im Frontend mit Divi Builder (visueller Konstruktor).
- Laden Sie über 5 verschiedene Bilder in die Bibliothek herunter, um sie als Hintergrundbilder für das Tutorial zu verwenden.
Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.
Erstellen Sie einen Schieberegler mit einem ansprechenden Akkordeon auf Divi
Erstellung der Linie
Fügen Sie dem regulären Abschnitt zunächst eine Spaltenzeile hinzu.
Öffnen Sie dann die Einstellungen für die Leitung und aktualisieren Sie Folgendes:
- Dachrinnenbreite: 1
- Breite: 100%
- Maximale Breite: 800px
- Höhe: 400px (Desktop); 700px (Tablet und Telefon)
Die Werte für Breite und maximale Breite können je nach Bedarf geändert werden. Das Akkordeon wird skaliert und funktioniert in jeder Zeilenbreite. Das Einstellen einer festen Höhe ist auch sehr wichtig, damit das Design funktioniert. Untergeordnete Elemente (Spalte und Module) haben eine Höhe von 100%. Wenn Sie die feste Höhe der Zeile nicht festlegen, haben die untergeordneten Elemente daher keine Höhe.
Spaltenparameter
Nachdem Sie die Zeilenhöhe festgelegt haben, öffnen Sie die Spalteneinstellungen und fügen Sie dem Hauptelement den folgenden CSS-Code hinzu:
Büro
display:flex;flex-direction: row;align-items:center;height: 100%;
Tablette
flex-direction: column;
Mit der Flex-Eigenschaft werden Akkordeonfelder horizontal auf dem Desktop und vertikal auf Tablet und Telefon ausgerichtet. Durch die Höhe von 100% können die Module, die wir hinzufügen möchten, auch den Wert für 100% Höhe verwenden.
Erstellen des Akkordeon Panels mit den Modulen Summary
Der Akkordeon-Schieberegler kann mit jedem Modultyp erstellt werden. Wenn wir wollten, könnten wir eine Kombination verschiedener Module verwenden, um als Akkordeonpanel zu dienen. Aber für dieses Design werden wir Blurb Mods verwenden.
Fügen Sie der Zeile zunächst ein Präsentationsmodul hinzu.
Abstraktes Modul-Design
Öffnen Sie die Einstellungen des Zusammenfassungsmoduls und aktualisieren Sie Folgendes:
Halten Sie den Titel fiktiv und Inhalt vom Körper. Wir können dies später jederzeit ändern.
Aktualisieren Sie dann das Präsentationssymbol wie folgt:
- Symbol (Desktop): Symbol für eine horizontale Pfeillinie (siehe Screenshot)
- Symbol (Hover): Symbol überprüfen (siehe Screenshot)
- Symbol (Tablet und Telefon): Symbol für eine vertikale Pfeillinie (siehe Screenshot)
Kontext
Geben Sie dem Klappentext ein Hintergrundbild und eine Verlaufsüberlagerung wie folgt:
- Fügen Sie ein Hintergrundbild hinzu, das mindestens 1000 Pixel breit ist
- Position des Hintergrundbildes: Mitte links
Fügen Sie dann eine Verlaufshintergrundüberlagerung hinzu.
Schwimmer
- Linker Hintergrund mit Farbverlauf (Hover): # 3e215b
- Hintergrundverlauf nach rechts Farbe (Hover): rgba (0,0,0,0)
- Farbverlaufsrichtung: 90deg
- Platzieren Sie den Farbverlauf über dem Hintergrundbild: JA
Symbol
- Symbolfarbe: #ffffff
- Bild / Position der Symbole: links
Gehen Sie dann zur Registerkarte Design und aktualisieren Sie Folgendes:
Titel und Textkörper
- Titelschrift: Poppins
- Schrift Titel: Semi Bold
- Text Titel Farbe: transparent (Desktop), #ffffff (Hover)
- Texttitelgröße: 23px
- Körpertextfarbe: transparent (Desktop), #ffffff (Hover)
Höhe und Box Shadow
Wenn der Text stilvoll ist, weisen Sie dem Modul eine Höhe von 100% und ein Schattenfeld wie folgt zu:
- Höhe: 100%
- Box Shadow: Siehe Screenshot
- Schatten der Box Horizontale Position: -12px
- Schatten der Box Vertikale Position: 0px
Benutzerdefiniertes CSS verwischen
Damit unsere Akkordeon-Panels (oder Präsentationsmodule) mit den übrigen Modulen erweitert und verkleinert werden können, müssen wir benutzerdefiniertes CSS hinzufügen, um die Größe des Moduls mit Flex-Grow zu ändern. Da wir insgesamt 5 Mods haben werden, aus denen das Akkordeon besteht, fügen wir "flex: 1" für den Standardzustand hinzu und ändern es dann im Schwebezustand in "flex: 5".
Fügen Sie auf der Registerkarte Erweitert das folgende benutzerdefinierte CSS hinzu, das Hauptelement von Blurb:
Büro
flex:1;position: relative !important;transition: flex 800ms !important;
Tablette
flex:5;
Fügen Sie dann den folgenden benutzerdefinierten CSS-Code zum CSS-Blurb-Inhalt hinzu:
Büro
position: absolute !important;width: 280px;padding: 20px;transition: color 400ms;
Tablette
width: 100%;height: 100%;position: relative !important;
Überlauf und Übergang
- Horizontaler Überlauf: versteckt
- Vertikaler Überlauf: versteckt
- Dauer des Übergangs: 400ms
- Übergangsdrehzahlkurve: linear
Gut! Es war eine ernsthafte Anpassung eines Präsentationsmoduls. Aber die gute Nachricht ist, wir müssen sie nur duplizieren, um die verbleibenden Akkordeonplatten zu erstellen.
Dupliziere die Klappentexte für mehr Akkordeonplatten
Bewegen Sie den Mauszeiger über das Präsentationsmodul und klicken Sie viermal auf das Duplikatsymbol, um insgesamt fünf Akkordeonfelder (oder Module) zu erstellen.
Aktualisieren Sie dann die Hintergrundbilder für jeden der neuen Klappentexte, die Sie dupliziert haben.
Endergebnis
Abschließende Gedanken
Dieser reaktionsschnelle Akkordeon-Schieberegler hat wirklich einige einzigartige Elemente, die die Verwendung zum Spaß machen. Akkordeonplatten dehnen sich aus und ziehen sich zusammen, während sie ohne unerwartete Probleme schweben. Und Präsentationssymbole ändern sich beim Schweben und auf dem Handy, um UX zu verbessern. Hoffe, dieses Design wird für Ihr nächstes Projekt nützlich sein.
