Erstellen einzigartiger FAQ-Designs für Spalten mit Divi

Jede Website, die regelmäßig mit Kunden kommuniziert, kann von einem FAQ-Bereich profitieren. Wenn Sie Ihre Website mit Divi erstellen, gibt es viele Möglichkeiten, Ihren FAQ-Bereich zu gestalten. In diesem Beitrag erstellen wir nun einen unterhaltsamen FAQ-Bereich, der sich darauf konzentriert, den Spalten- und Modulcontainer zu kombinieren, um ein schönes Design zu erstellen. Sie können die JSON-Datei auch kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Laden Sie The Column FAQ Design KOSTENLOS herunter

Um das kostenlose FAQ-Design für die Spalte in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Abonnieren Sie unseren Youtube-Kanal

Beginnen wir mit der Neuerstellung

Neuen Abschnitt hinzufügen

Hintergrund

Beginnen Sie damit, der Seite, an der Sie gerade arbeiten, einen neuen regulären Abschnitt hinzuzufügen. Passen Sie den Abschnittshintergrund an, bevor Sie eine Zeile hinzufügen.

• Hintergrund: Farbverlauf
• Farbe 1: Dark Aqua #50aebf
• Farbe 2: Helles Aqua #6bf2ff
• Richtung: 180 Grad
• Startposition: 21%

Abstand

Ändern Sie auch die Padding-Werte des Abschnitts.

• Obere Polsterung:
  • Desktop: 4vw
  • Tablet: 15vw
  • Telefon: 24vw
• Untere Polsterung: 2vw

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie dem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Spalteneinstellungen

Abstand

Öffnen Sie die Einstellungen von Spalte 1 und fügen Sie links und rechts einen Abstand hinzu.

• Linke und rechte Polsterung:
  • Desktop: 1vw
  • Tablet + Telefon: 3vw

Textmodul hinzufügen

Inhalt hinzufügen

Zeit, Module hinzuzufügen! Fügen Sie einen neuen Textbaustein mit H2- und Absatzinhalten Ihrer Wahl hinzu.

Text

Wechseln Sie zur Registerkarte Design und formatieren Sie den Absatztext.

• Textschriftart: Schauspieler
• Textfarbe: Off White ##f6f6f6
• Textgröße:
  • Desktop + Tablet: 1.5vw
  • Telefon: 3.8vw
• Text Buchstabenabstand: 1px
• Textausrichtung: Mitte

Überschriftstext

Dann formatieren Sie den Überschriftstext.

• Überschriftstextebene: H2
• H2-Schriftart: Verdana
• H2 Schriftstärke: Halbfett
• H2 Schriftfarbe: Weiß: #f6f6f6
• H2 Schriftgröße:
  • Desktop: 3vw
  • Tablet: 5vw
  • Telefon: 6vw
• H2-Buchstabenabstand: 7px
• H2-Linienhöhe:
  • Desktop: 1.8em
  • Tablette: 1,6em
  • Telefon: 1,5 em

Größe

Passen Sie außerdem die Größe an.

• Breite: 100%

Abstand

Passen Sie abschließend den Abstand an.

• Oberer Rand:
  • Desktop + Tablet: 1.5vw
• Unterer Rand:
  • Telefon: -5vw
• Untere Polsterung: 0vw
• Polsterung links + rechts: 7vw

Trennmodul hinzufügen

Leitung

Fügen Sie unter dem Text ein Trennmodul hinzu und machen Sie es gelb.

• Linienfarbe: Gelb #ffe100

Größe

Passen Sie dann Gewicht und Breite an.

• Teilergewicht: 4px
• Breite: 12%
• Modulausrichtung: Mitte

Abstand

Passen Sie abschließend den Abstand an.

• Oberer Rand:
  • Desktop + Tablet: -1vw
  • Telefon: 10vw

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie eine neue mit der folgenden Spaltenstruktur hinzufügen:

Größe

Passen Sie vor allem die Größe an.

• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%

Abstand

Passen Sie dann den Abstand an.

• Oberer Rand: 3vw
• Unterer Rand: 11vw
• Linker und rechter Rand: auto
• Obere Polsterung: 0vw
• Untere Polsterung: 11vw
• Linke und rechte Polsterung: 5vw

Spalte 1 Einstellungen

Hintergrund zu Hover

Bevor Sie die anderen Spalten hinzufügen, gestalten Sie den Hintergrund von Spalte 1 wie folgt:

• Hover-Hintergrund: Farbverlauf
• Farbe eins: Gelb #ffe100
• Farbe Zwei: Transparent
• Verlaufstyp: Radial
• Radiale Richtung: Oben links
• Start- und Endposition: 19%

Abstand

Fügen Sie der nächsten Spalte einige Abstandswerte hinzu.

• Untere Polsterung:
  • Desktop + Tablet: 0vw
  • Telefon: 4vw
• Linke und rechte Polsterung:
  • Desktop: 1vw
  • Tablet + Telefon: 3vw

Grenze

Fügen Sie der Spalte auch einige abgerundete Ecken hinzu.

• Abgerundete Ecken: 1vw alle vier Ecken

Verwandeln

Wenden Sie schließlich einen benutzerdefinierten Transformationswert für die Transformation auf die Spalte an.

• Transformieren Übersetzen: 4vw y-Achse (Desktop), 0vw (Hover, Tablet & Telefon)

Spalte 1 viermal duplizieren

Duplizieren Sie nun die erste Spalte viermal.

Spalte 2 Einstellungen

Verwandeln

Passen Sie dann die Transformationswerte an. Zuerst Spalte 2.

• Transformieren Übersetzen: 2vw y-Achse (Desktop), 0vw (Hover, Tablet & Telefon)

Spalte 3 Einstellungen

Verwandeln

Setzen Sie dann den Transformationswert in Spalte 3 zurück.

• Transformieren Übersetzen: Zurücksetzen

Spalte 4 Einstellungen

Verwandeln

Passen Sie außerdem den Transformationswert in Spalte 4 an.

• Transformieren Übersetzen: 2vw y-Achse (Desktop), 0vw (Hover, Tablet & Telefon)

Spalte 5 Einstellungen

Verwandeln

Überprüfen Sie abschließend die Transformationswerte in Spalte 5.

• Transformieren Übersetzen: 4vw y-Achse (Desktop), 0vw (Hover, Tablet & Telefon)

Toggle-Modul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Zeit, Module hinzuzufügen! Fügen Sie der ersten Spalte ein Umschaltmodul mit einem Inhalt Ihrer Wahl hinzu.

• Titel
• Körper

Bundesland

Wählen Sie dann als Status des Moduls 'Schließen'.

• Zustand: Geschlossen

Hintergrund

Und fügen Sie ein transparentes Bild eines Fragezeichens als Hintergrund hinzu.

• Hintergrundbild
• Hintergrundbild-Mischung: Weiches Licht

Symbol

Gestalten Sie das Symbol auf der Registerkarte Design.

• Symbolfarbe: Gelb #ffe100
• Symbolgröße:
  • Desktop: 34px
  • Tablet + Telefon: 20px

Umschalten

Gestalten Sie dann die Umschalthintergründe für statisch und schwebend.

• Open Toggle Hintergrundfarbe: Teal #0092af
• Closed Toggle Hintergrundfarbe: Off White: #f7f7f7
  • Schweben: Blaugrün #0092af

Titeltext

Fahren Sie fort, indem Sie den Titeltext gestalten.

• Textfarbe des offenen Titels: Off White: #f7f7f7
• Titeltextfarbe: Sehr Dunkelgrau #3a3a3a
  • Schweben: Weiß: #f7f7f7
• Titelüberschriftsebene: H5
• H5 Schriftart: Schauspieler
• H5-Ausrichtung: Links
• H5 Textgröße:
  • Desktop: 1,5 vw
  • Tablet: 3 VW
  • Telefon: 4,5 VW

Geschlossener Titeltext

Stylen Sie auch den geschlossenen Text.

• Geschlossene Titeltextfarbe: Sehr Dunkelgrau #3a3a3a
• Geschlossene Titelschrift: Schauspieler
• Ausrichtung: Links
• Geschlossene Textgröße:
  • Desktop: 1.5vw
  • Tablet: 3vw
  • Telefon: 4.5vw

Hauptteil

Vergiss den Fließtext nicht.

• Körperschriftart: Schauspieler
• Ausrichtung des Textkörpers: Links
• Textkörperfarbe: Weiß: #f7f7f7
• Textgröße:
  • Desktop: 0.9vw
  • Tablet: 2vw
  • Telefon: 3vw
• Körperlinienhöhe: 1.8em

Abstand

Fügen Sie nach dem Textstil einige Abstandswerte hinzu.

• Oberer Rand:
  • Desktop + Tablet: 1vw
• Polsterung oben + unten:
  • Desktop: 2vw
  • Tablet: 3vw
  • Telefon: 5vw
• Linke Polsterung:
  • Desktop: 2vw
  • Tablet: 4vw
  • Telefon: 5vw
• Rechte Polsterung:
  • Desktop: 2vw
  • Tablet: 3vw
  • Telefon: 4vw

Grenze

Fügen Sie einige abgerundete Ecken hinzu und entfernen Sie den standardmäßigen 1px-Rahmen.

• Abgerundete Ecken: 1vw alle vier Ecken
• Rand: 0px

Box Schatten

Fügen Sie schließlich einen inneren Kastenschatten hinzu.

• Kastenschatten: 6. Option
• Stärke der Box-Schattenunschärfe:
  • Desktop + Tablet: 18px
  • Telefon: 9px
• Stärke der Box-Schattenausbreitung: -4px
• Schattenfarbe: rgba(0,0,0,0.21)

Duplizieren Sie das Umschaltmodul 4 Mal

Duplizieren Sie das gestylte Umschaltmodul viermal und ziehen Sie die neuen in die leeren Spalten.

Inhalt bearbeiten

Bearbeiten Sie die Fragen und Antworten in den duplizierten Umschaltmodulen und fertig!

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abschluss

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie ein einzigartiges FAQ-Design für Spalten erstellen. Wir haben einige Hover-Optionen hinzugefügt, um dem Design einen interessanten gelben Eckeffekt zu verleihen. Wir hoffen, dass dieses Design Sie dazu inspiriert, im Rahmen Ihrer Divi-Projekte interessante FAQ-Designs zu erstellen. Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen!