Springe zum Hauptinhalt

So erstellen Sie in Divi einen ansprechenden Akkordeon-Schieberegler

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]

Ein Akkordeon-Schieberegler ist eine unterhaltsame und ansprechende Möglichkeit, Inhalte auf kleinem Raum anzuzeigen. Akkordeonschieber bestehen normalerweise aus mehreren Elementen (oder Platten), die horizontal gestapelt sind, wie die Falten eines Vorhangs. Wenn Sie mit der Maus über eines der Panels fahren, wird es erweitert, um den Inhalt anzuzeigen, wenn sich die anderen Akkordeon-Panels zusammenziehen. Hier wird der Akkordeoneffekt des Expandierens und Kontrahierens erreicht.

In diesem Tutorial werde ich Ihnen zeigen, wie Sie einen reaktionsschnellen Akkordeoncursor in Divi nur mit CSS erstellen. Zu diesem Zweck werden wir mehrere Divi-Module als Akkordeon-Panels verwenden. Jeder Mod kann verwendet werden, aber in diesem Beispiel werden wir Klappentext-Mods auf sehr kreative Weise verwenden, um einen schönen Akkordeon-Schieberegler zu erstellen, der sowohl auf dem Desktop als auch auf dem Desktop großartig aussieht (und funktioniert). auf dem Handy.

Check it out!

Übersicht

Hier ist eine Übersicht darüber, was wir in diesem Tutorial erstellen werden.

Erstellen Sie einen Schieberegler mit einem Akkordeon auf Divi

Beginnen wir mit dem Tutorial

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie Folgendes tun:

  1. Wenn Sie dies noch nicht getan haben, installieren und aktivieren Sie das installierte Divi-Design (oder das Divi Builder-Plug-In, wenn Sie das Divi-Design nicht verwenden).
  2. Erstellen Sie eine neue Seite in WordPress und bearbeiten Sie die Seite im Frontend mit Divi Builder (visueller Konstruktor).
  3. 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.

Wählen Sie ein Divi-Layout

Ö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%;

Fügen Sie einen Divisionscode hinzu

Tablette

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]

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.

Fügen Sie ein Divi-Zusammenfassungsmodul hinzu

Abstraktes Modul-Design

Öffnen Sie die Einstellungen des Zusammenfassungsmoduls und aktualisieren Sie Folgendes:

Behalten Sie den fiktiven Titel und den Körperinhalt. Das können wir später jederzeit ändern.

Aktualisieren Sie dann das Präsentationssymbol wie folgt:

  • Symbol (Desktop): Symbol für eine horizontale Pfeillinie (siehe Screenshot)
Konfigurationssymbole divi
  • Symbol (Hover): Symbol überprüfen (siehe Screenshot)
Verwenden Sie Symbole, wenn Sie mit der Maus über Divi fahren
  • Symbol (Tablet und Telefon): Symbol für eine vertikale Pfeillinie (siehe Screenshot)
Schieberegler Akkordeon Divi reagiert

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
Abstrakte Divi-Hintergrundkonfiguration

Fügen Sie dann eine Verlaufshintergrundüberlagerung hinzu.

Schwimmer

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]

  • 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
Schieberegler Akkordeon Divi reagiert

Symbol

  • Symbolfarbe: #ffffff
  • Bild / Position der Symbole: links
Ändern Sie das Divi-Icon-Modul

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)
Konfiguration des Divi-Zusammenfassungsmoduls

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
Ändern Sie die Größe des Divi Summary-Moduls

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;

Parameterübersicht divi

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;

Ändern Sie den Stil des Divi-Textmoduls

Tablette

width: 100%;height: 100%;position: relative !important;

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]

CSS-Code für den Inhalt des Zusammenfassungsmoduls

Überlauf und Übergang

  • Horizontaler Überlauf: versteckt
  • Vertikaler Überlauf: versteckt
  • Dauer des Übergangs: 400ms
  • Übergangsdrehzahlkurve: linear
Überlaufkonfiguration des Divi-Zusammenfassungsmoduls

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

Erstellen Sie einen Schieberegler mit einem Akkordeon auf Divi

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.

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