So entwerfen Sie einen kreativen FAQ-Bereich mit Divi

Rifat Divi Tutorials May 21, 2021

"Frequently Asked Question(FAQ)" ist ein spezieller Abschnitt, in dem ein Dienstanbieter wichtige Informationen teilt oder Zweifel ausgeräumt, die Normalerweise von Menschen gestellt werden. Dies ist ein wichtiger Abschnitt für jede Website, die jeden Dienst bietet, weil die Leute in der Regel ihre ersten besuchen, um Antworten auf ihre Fragen zu finden. Eine FAQ-Seite mit kreativem Design ist eine großartige Möglichkeit zu sagen, wie schön Durst Sie sind, und zur gleichen Zeit, Sie kümmern sich um ihre Anfragen.

FAQ-Bereich ist ein fester Abschnitt mit mehreren Fragen und Antworten. Es ist wichtig, sie zu organisieren. Im heutigen Tutorial erfahren wir, wie wir Divi verwenden können, um einen kreativen FAQ-Bereich mit anklickbaren Registerkarten zu entwerfen.

Sneak Peek

So wird unser endgültiges Design aussehen.

Aufbau der Struktur

Hinzufügen: Abschnitt 1

Hintergrundfarbe

Wir beginnen mit dem Hinzufügen einer Hintergrundfarbe im ersten Abschnitt unserer Arbeitsseite. Öffnen Sie die Abschnittseinstellungen, und wenden Sie die Hintergrundfarbe an.

Erstellen Sie erstaunliche Websites

Mit dem besten kostenlosen Seite Builder Elementor

Jetzt anfangen
  • Hintergrundfarbe: #fffbf2

Abstandseinstellungen

Wir werden einige Anpassungen am Abstand vornehmen.

  • Untere Polsterung: 0px

Rahmeneinstellungen

Nun werden wir einen benutzerdefinierten Rahmen auf den Abschnitt anwenden.

  • Grenzbreite: 1vw
  • Rahmenfarbe: #fffbf2

Box Shadow-Einstellungen

Fügen Sie einen Boxschatten hinzu.

  • Box Shadow Vertikale Position: 0px
  • Box Shadow Spread Stärke: 1px
  • Schattenfarbe: #000000
  • Box-Schattenposition: Innenschatten

Z-Indexeinstellungen

Erhöhen Sie den Z-Index-Wert in der erweiterten Registerkarte und wir sind mit diesen Abschnitteinstellungen fertig.

Hinzufügen: Zeile 1 auf Abschnitt 1

Spaltenstruktur

Fügen Sie dem neu abgeschlossenen Abschnitt eine neue Zeile (im Bild erwähnt) hinzu.

Größeneinstellungen

Öffnen Sie die Zeileneinstellungen, und nehmen Sie die folgenden Anpassungen vor.

  • Verwenden Sie Custom Gutter Width: Ja
  • Gutter breite: 1
  • Maximale Breite: 1380px

Abstandseinstellungen

Nehmen Sie auch einige Anpassungen auf den Abstandsregisterkarten vor!

  • Obere Marge: 3%
  • Untere Marge: 3%
  • Linke Polsterung: 1%
  • Rechte Polsterung: 1%

Hinzufügen: Spaltentextmodul

H1 Inhalt

Fügen Sie der Zeile ein Textmodul hinzu, und fügen Sie ein H1-Tag hinzu.

H1-Texteinstellungen

Ändern Sie die H1-Texteinstellungen.

  • Überschrift Schriftart: Cormorant Garamond
  • Überschrift Schriftgewicht: Fett
  • Überschrift Textgröße: Desktop: 60px, Tablet: 42px und Telefon: 36px

Hinzufügen: Teilermodul auf Spalte

Fügen Sie unter dem Textmodul ein Trennmodul hinzu.

Sichtbarkeitseinstellung

Stellen Sie sicher, dass die Option Divider anzeigen aktiviert ist.

  • Show Divider: Ja

Zeileneinstellungen

Wechseln Sie zur Entwurfsregisterkarte, und ändern Sie die Farbe des Teilers.

  • Linienfarbe: #000000

Größeneinstellungen

Nehmen Sie unter den Zeileneinstellungen einige Anpassungen an der Größe vor.

  • Teiler Gewicht: 2px
  • Maximale Breite: 150px
  • Höhe: 2px

Abstandseinstellungen

Fügen Sie nun einen Rand aus den Abstandseinstellungen hinzu.

  • Obere Marge: 4%

Hinzufügen: Zeile 2 auf Abschnitt 1

Spaltenstruktur

Fügen Sie eine zweite Zeile unterhalb der 1. Zeile mit derselben Spaltenstruktur hinzu.

Größeneinstellungen

Ändern Sie die Größeneinstellungen der neu erstellten Zeile über die Registerkarte Entwurf.

  • Verwenden Sie Custom Gutter Width: Ja
  • Gutter breite: 1
  • Maximale Breite: 1380px

Abstandseinstellungen

Nehmen Sie auch einige kleine Anpassungen am Abstandsabschnitt vor.

  • Top Polsterung: 0px
  • Untere Polsterung: 0px

Hinzufügen: Spaltentextmodul 1

H3-Inhalt

Fügen Sie ein neues Textmodul hinzu, und fügen Sie H3-Inhalte hinzu.

Hintergrundfarbe

Fügen Sie eine Hintergrundfarbe hinzu.

  • Hintergrundfarbe: #ffffff

H3-Inhaltseinstellungen

Nehmen Sie diese Einstellungen für H3-Text vor.

  • Überschrift 3 Schriftart: Karla
  • Überschrift 3 Schriftgewicht: Fett
  • Überschrift 3 Schriftstil: Großbuchstaben
  • Überschrift 3 Textausrichtung: Mitte
  • Überschrift 3 Textgröße: 15px
  • Überschrift 3 Buchstabenabstand: 4px

Größeneinstellungen

Ändern Sie die Größeneinstellungen für verschiedene Bildschirmgrößen.

Abstandseinstellungen

Passen Sie Abstandswerte an.

  • Rechter Rand: 1%
  • Top Polsterung: 30px
  • Untere Polsterung: 20px
  • Linke Polsterung: 5%
  • Rechte Polsterung: 5%

Grenze

Fügen Sie unserem Laufdesign einen Rahmen hinzu.

  • Grenzbreite: 1px

Box Shadow

Fügen Sie einen Kastenschatten hinzu, um das Design lebendiger zu gestalten.

  • Box Shadow Vertikale Position: 0px
  • Schattenfarbe: #fff3dd
  • Box-Schattenposition: Innenschatten

Hauptelement CSS

Als letzte Aufgabe für dieses Textmodul fügen wir einen benutzerdefinierten CSS-Code von der erweiterten Registerkarte hinzu. Dieses CSS wird mit dem gesamten Textdesign kombiniert und ermöglicht es, mehrere Module nebeneinander der gleichen Kategorie anzuzeigen.

display: inline-block;

Duplizieren Sie das Textmodul 3 mal

Klonen Sie nun das neu fertige Textmodul dreimal.

Inhalt auf geklonten Modulen ändern

Ändern Sie nun den Inhalt auf geklonten Modulen nach Bedarf.

Hinzufügen: Abschnitt 2

Abstand

Fügen Sie nun einen Abschnitt "Regular" direkt unter dem vorherigen Abschnitt hinzu, und ändern Sie die Abstandseinstellungen auf der Registerkarte Entwurf.

  • Top Polsterung: 100px
  • Untere Polsterung: 100px

Hinzufügen: Zeile 1 auf Abschnitt 2

Spaltenstruktur

Fügen Sie nun diesem Abschnitt eine neue Zeile hinzu. Verwenden Sie die spaltenstruktur, die auf dem Bild markiert ist.

Größeneinstellungen

Öffnen Sie die Zeileneinstellungen, und nehmen Sie die Größe über die Registerkarte Entwurf vor.

  • Verwenden Sie Custom Gutter Width: Ja
  • Gutter breite: 2
  • Maximale Breite: 1380px

Hinzufügen: Modul 1 auf Spalte umschalten

Hinzufügen von Inhalten

Fügen Sie der Zeile ein Umschaltmodul hinzu, und fügen Sie Inhalt hinzu.

Symboleinstellungen

Nehmen Sie auf der Registerkarte Design Anpassungen an den Symboleinstellungen vor.

  • Symbolfarbe: #000000
  • Verwenden Sie benutzerdefinierte Symbolgröße: Ja
  • Icon Schriftgröße: 24px

Umschalten von Einstellungen

Ändern Sie die Umschalteinstellungen .

  • Öffnen Sie die Hintergrundfarbe öffnen: #fffbf2
  • Geschlossenes Umschalten hintergrundfarbe: #ffffff

TitelText

Es ist zeitfürst, den Titeltext anzupassen.

  • Öffnen Titel TextFarbe: #333333
  • Titel Textfarbe: #333333
  • Titelüberschriftsebene: H4
  • Titel Schriftart: Cormorant Garamond
  • Titel Font Weight: Bold
  • Titel Textgröße: Desktop: 36px, Tablet: 34px und Telefon: 28px

Geschlossener Titeltext

Ändern Sie die Farbe für den Schließen von Titeltext.

  • Geschlossener Titel TextFarbe: #333333

Textkörper

Wir passen auch den Textkörper an.

  • Körperschrift: Karla
  • Textgröße des Textes: 17px
  • Körperlinienhöhe: 1.9em

Abstandseinstellungen

Ändern Sie nun einige Abstandswerte, um sie reaktionsfähig zu machen.

  • Top Padding: Desktop: 2%, Tablet: 4% und Telefon: 6%
  • Untere Polsterung: Desktop: 2%, Tablet: 4% und Telefon: 6%
  • Linke Polsterung: 5%
  • Rechte Polsterung: 5%

Rahmeneinstellungen

Ändern Sie dann die Rahmenfarbe in Schwarz.

  • Rahmenfarbe: #000000

Umschalten von Content CSS

Fügen Sie auf der erweiterten Registerkarte dem Umschaltinhaltsbereich einen CSS-Code hinzu.

margin-top: 30px;

Duplizieren des Umschaltmoduls

Wie wir mit unserem ersten Umschaltmodul fertig sind, klonen Sie es so oft, wie Sie es brauchen.

Hinzufügen eindeutiger Inhalte

Ändern Sie alle Inhalte aus geklonten Umschaltmodulen. Auf diese Weise wird es einzigartiger aussehen.

Umschalten der Modulstatuseinstellungen

Erweitern Sie das Umschaltmodul 1, und ändern Sie den Status.

  • Zustand: Offen

Duplizieren ganze Zeile 3 Mal

Wir haben jetzt unsere ersten Reihe von Umschaltmodulen abgeschlossen. Jetzt werden wir es dreimal klonen. Es gibt vier Umschaltmodulzeilen. 4 Zeilen für vier Abschnitte, die wir zuvor erstellt haben.

Inhalt auf duplizierten Modulen ändern

Ändern Sie den Inhalt auf geklonten Modulen entsprechend Ihren Bedarf.

Hinzufügen von Funktionen

Abschnitt 1 Zeile 2: Konsekutives CSS-ID-Hinzufügen

Jetzt fügen wir einige benutzerdefinierte CSS-ID zu unseren Modulen hinzu. Hier versuchen wir, ein Design zu machen, bei dem ein Besucher auf FAQ-Registerkarten klickt, und die folgenden FAQ-Umschalter werden erweitert. Um dieses Design funktionsfähig zu machen, öffnen Sie jedes Textmodul aus "Zeile 2 auf Abschnitt 1", und fügen Sie die folgenden aufeinander folgenden CSS-IDs hinzu.

  • Textmodul #1: faq-item-1
  • Textmodul #2: faq-item-2
  • Textmodul #3: faq-item-3
  • Textmodul #4: faq-item-4

Abschnitt 2 Alle Zeilen: Konsekutives CSS-ID-Hinzufügen

Dann fügen wir CSS-IDs zu allen vier Zeilen hinzu, die das Umschaltmodul in Abschnitt 2 enthalten. Außerdem werden wir die gleiche aufeinanderfolgende Reihenfolge beibehalten.

  • Erste Reihe: faq-tab-1
  • Zweite Reihe: faq-tab-2
  • Dritte Reihe: faq-tab-3
  • Vierte Reihe: faq-tab-4

Hinzufügen: Codemodul zu Zeile 1 in Abschnitt 1

Da wir zu Recht alle aufeinander folgenden CSS-IDs platziert haben, werden wir nun einige CSS- und JQuery-Codes zu unserer Seite hinzufügen. Fügen Sie ein neues Codemodul in die erste Zeile von Abschnitt 1 (unter Teilermodul) hinzu.

Stellen Sie sicher, dass Stil- und Skripttags auf der erweiterten Registerkarte hinzugefügt werden.

Hinzufügen: CSS-Code

Kopieren Sie den folgenden Code zwischen Stiltags, und fügen Sie ihn ein.

[id*="faq-item"] {
cursor: pointer; 
}
 
[id*="faq-tab"]{  
position: absolute!important;
top: 0px;
bottom: auto;
left: 50%;
right: auto;
transform: translateX(-50%);
}
 
 
.active-faq-item {
color: #6b63dd !important;
background-color: #fff;
}
 
.hide-faq-tab{  
visiblity: hidden;
opacity: 0;  
}
 
.show-faq-tab{
visibility: visible !important;
opacity: 1 !important;
z-index: 12;
   
position: relative !important;
left: 0 !important;
transform: translateX(0%) !important;
}
   
.faq-item-active {
background-color: #000 !important;
color: #fff !important;
}
 
.faq-item-active h3{
color: #fff !important;
}

Hinzufügen: JQuery-Code

Fügen Sie nun einen JQuery-Code zwischen Skript-Tags hinzu.

jQuery(document).ready(function($){
 
$('#faq-item-1').addClass('faq-item-active');
$('#faq-tab-1').addClass('show-faq-tab');
$('[id*="faq-tab"]').not('#faq-tab-1').addClass('hide-faq-tab');
  
$('[id*="faq-item"]').click(function() {
  
var selector = $(this).attr('id').replace('item', 'tab');
var $faqSelect  = $('#' + selector);
 
$('[id*="faq-tab"]').removeClass('show-faq-tab');
$('[id*="faq-tab"]').addClass('hide-faq-tab');
$faqSelect.addClass('show-faq-tab');
  
$('[id*="faq-item"]').removeClass('faq-item-active');
$(this).addClass('faq-item-active');
    
});
});

Endergebnis

Wir sind mit der Arbeit fertig, und unser maßgeschneiderter FAQ-Bereich wird so aussehen.

Letzte Worte

Wir können alle Arten von schönen Designs durch Divi machen, die die Besucher auf der Website für eine lange Zeit halten wird. Das heutige interaktive FAQ-Seitendesign ist eines dieser vielen. Wenn Sie mehr solche Divi Tutorials sehen möchten, lassen Sie es uns in den Kommentaren wissen. Auch, wenn Sie wollen, dass wir das Tutorial Ihrer Wahl zu tun, lassen Sie es uns wissen. Wenn Sie das heutige Tutorial genossen haben, würde uns eine Aktie inspirieren, mehr Tutorials für Sie zu bringen.