Ein FAQ-Bereich lebt oder stirbt an seinem Akkordeon: Fragen bleiben kompakt, Antworten erscheinen auf Klick, und die Seite fühlt sich nie lang an Die Erweiterte Akkordeon Widget in Master-Addons für Elementor Erstellen Sie dieses Muster mit einer Wendung, die die meisten Akkordeon-Widgets überspringen: Jedes Element kann Klartext oder eine gesamte gespeicherte Elementor-Vorlage enthalten, sodass eine Antwort ein Kontaktformular, eine Preistabelle oder sogar ein anderes Akkordeon sein kann.
Dieser Leitfaden geht durch das Widget in einem echten FAQ-Bereich, von der Artikelliste bis zum gestylten Akkordeon auf der Live-Seite.
Suchen Sie nach dem, was das Widget tut, und nicht danach, wie Sie es konfigurieren? Die Übersicht über das Elementor-Akkordeon-Widget Deckt die Funktionen, Styling-Optionen und Preise auf einer Seite ab.
Was das Advanced Accordion-Widget tut #
Das Widget rendert einen Stapel zusammenklappbarer Elemente Jede Zeile hat einen Titel, einen Inhaltsbereich und ein Kippsymbol, das zwischen Erweiterungs - und Einklappzuständen umdreht Die Akkordeonart Dropdown wählt das Verhalten aus: Akkordeon hält jeweils einen Gegenstand offen und schließt den letzten, wenn sich ein neuer öffnet; Umschalten Lassen Sie Besucher mehrere Gegenstände gleichzeitig offen halten.
Bevor Sie beginnen #
- WordPress Mit Elementor Installiert und aktiv.
- Master-Addons für Elementor Installiert und aktiv Neu im Plugin? siehe die Installationsführung.
- Das Advanced Accordion-Widget ist im Master Addons-Optionsfeld unter Basis-Widgets aktiviert.
- Optional: eine gespeicherte Elementor-Vorlage, wenn Sie eine in ein Akkordeonelement laden möchten.
Akkordeonartikel hinzufügen und verwalten #
In der Inhalt Tab, die Artikelliste enthält einen Eintrag pro Frage Klicken Sie auf ein Element, um seine Einstellungen zu erweitern, duplizieren oder löschen Sie Zeilen mit den Symbolen neben jedem einzelnen, und drücken Sie Artikel hinzufügen Liste zu erweitern Die Demo läuft eine fünf Fragen Klempner FAQ.
Unterhalb der Liste befinden sich die gemeinsamen Steuerelemente:
- Aktives/inaktives Symbol anzeigen?: Schaltet die Erweiterungs- und Einklappungssymbole rechts von jedem Titel um.
- Symbol erweitern und Symbol einklappen: Zwei Tabs, je ein Icon-Picker Mehr dazu weiter unten.
- Drehzahl umschalten (ms): Wie schnell sich Gegenstände öffnen und schließen, standardmäßig 300 Millisekunden. Diese Voreinstellung fühlt sich bissig an; Nach 600 fühlt sich das Akkordeon an, als würde es abwürgen.
- Titel HTML Tag: Das Markup um jede Frage, div standardmäßig Wählen Sie H3, wenn die Fragen die Überschriftenstruktur der Seite speisen sollen.
Geben Sie Text oder eine ganze Vorlage in ein Element ein #
Öffnen Sie ein einzelnes Element und die Bedienelemente pro Element werden angezeigt: Aktiv als Standard Startet die Seite mit geöffnetem Element Benutzerdefiniertes Symbol aktivieren Gibt ihm ein eigenes Kippsymbol und Hintergrundfarbe aktivieren Tönt genau diese Reihe.
Derjenige, an den man sich erinnern sollte, ist Inhaltstyp. Stellen Sie es auf Text für eine normale getippte Antwort ein, oder auf Gespeicherter Abschnitt und wählen Sie eine beliebige Vorlage aus Ihrer Elementor-Bibliothek aus. Die Demo lädt einen Kontaktbereich, komplett mit einem Arbeitsformular, in das erste Akkordeonelement:
So funktionieren auch verschachtelte Akkordeons: ein Akkordeon als Vorlage speichern, dann in einen Gegenstand eines anderen Akkordeons laden Kategorien mit Unterfragen, Kursmodule mit Unterricht, so eine Art Aufbau Zwei Ebenen sind die praktische Grenze; tiefer als das und die Besucher verlieren den Überblick, wo sie sind.
Legen Sie die Erweiterungs- und Einklappungssymbole fest #
Die Icon erweitern und Einsturzsymbol Tabs öffnen jeweils die Elementor-Icon-Bibliothek Das Erweiterungssymbol zeigt auf geschlossenen Elementen das Einsturzsymbol auf dem offenen.
Passende Paare lesen sich am besten: caret down mit caret up, plus mit minus, chevron mit chevron Die Demo legt sich auf carets fest.
Stil die Titel #
Die Stil Tab bricht ein Gegenstände, Titel, Inhalt, und Symbole umschalten. Der Titelabschnitt trägt Normal, Schweben, und Aktiv Zustände, so dass die offene Frage anders aussehen kann als der Rest.
- Hintergrundtyp und Farbe: Die Titelleiste wird pro Bundesstaat ausgefüllt.
- Textfarbe und Typografie: Der Fragetext.
- Titelausrichten: Links, Mitte oder rechts.
- Randtyp, Randradius, Kastenschatten, Polsterung: Die Demo verwendet einen Radius von 8 Pixeln und eine Polsterung von 20 x 16 für weiche, geräumige Balken.
Die Demo gibt Titeln einen hellgrauen Hintergrund und blauen Text, und die Leinwand aktualisiert live, während der Farbwähler geöffnet ist:
Gestalten Sie den Inhaltsbereich #
Die Inhalt Abschnitt Stile das Antwortfeld: Hintergrundfarbe, Textfarbe, Typografie, Polsterung, und Text Schatten. Halten Sie den Antworthintergrund heller als die Titelleisten, sodass offene Elemente als verbunden, aber deutlich gelesen werden.
Stylen Sie die Kippsymbole #
Die Symbole umschalten Abschnitt beendet die Reihenenden.
- Symbolposition: Links des Titels, rechts davon, oder keine.
- Symbolgröße, Abstand, Polsterung: Auf der Demo laufen 18 Pixel Symbole.
- Symbolfarben: Normal-, Hover- und Aktivzustände, jeweils mit Hintergrund- und Symbolfarbe.
Das Ergebnis auf der Seite #
Auf der Live-Seite verhält sich das Akkordeon genau wie konfiguriert: Eine Frage nach der anderen ist offen, es geht darum, sich umzudrehen, während die Artikel umgeschaltet werden, und die gestylten Titelleisten halten den Abschnitt scannbar.
Häufige Anwendungsfälle #
- FAQ-abschnitte auf Landingpages, Preisseiten und Produktseiten.
- Kontakt- oder Angebotsformulare in einer Antwort, wobei der Inhaltstyp des gespeicherten Abschnitts wie die Demo verwendet wird.
- Verschachtelte Akkordeons Für Kategorie - und Unterkategorie-Fragesätze.
- Kurs- oder Dokumentationsumrisse Wo jedes Modul in seinen Unterricht erweitert wird.
- Stellenangebote Mit der Rolle als Titel und Details im Panel.
Tipps für ein besseres Akkordeon #
- Wählen Sie den Akkordeon-Typ für FAQs. Eine offene Antwort hält die Besucher konzentriert; Toggle passt zu Referenzinhalten, die Menschen nebeneinander vergleichen.
- Öffnen Sie standardmäßig die am häufigsten gestellte Frage. Setzen Sie Aktiv als Standard auf Ihre beste Frage, damit der Abschnitt nie vollständig geschlossen beginnt.
- Verwenden Sie H3 als Titel-HTML-Tag auf FAQ-Seiten. Suchmaschinen lesen die Fragen als richtige Überschriften.
- Halten Sie Symbolpaare konsistent. Ein Caret, das die Richtung umdreht, kommuniziert den Zustand sofort; Nicht übereinstimmende Symbole bringen Besucher zum Nachdenken.
- Gewicht der Mind-Vorlage in gespeicherten Abschnitten. Ein Formular oder eine Tabelle in einem Artikel ist großartig; Ein Abschnitt über die gesamte Breite mit schweren Bildern wird auch beim Zusammenklappen geladen.
Video-tutorials #
Wenn Sie sich das Advanced Accordion lieber in Aktion ansehen möchten, zeigt dieses Video, wie einfach jeder eines bauen kann, fangen Sie an, fertig zu werden:
Und dieses zeigt, wie man ein ineinander geschachteltes Akkordeon hinzufügt und dabei ein Akkordeon in ein anderes lädt, mit dem Inhaltstyp des gespeicherten Abschnitts:
Häufig gestellte Fragen #
Was ist das Advanced Accordion Widget in Master Addons?
Es handelt sich um ein Elementor-Widget für zusammenklappbare Inhaltsabschnitte Sie fügen Elemente mit Titeln und Antworten hinzu, wählen Akkordeon - oder Kippverhalten, setzen Erweiterungs - und Einklapp-Symbole, und stylen die Titel, Inhalte und Symbole pro Zustand Elemente können Text oder eine vollständig gespeicherte Vorlage enthalten.
Was ist der Unterschied zwischen Akkordeon und Toggle Typ?
Accordion hält jeweils ein Element offen, schließt das vorherige Element, wenn sich ein neues öffnet Toggle lässt Besucher mehrere Elemente auf einmal öffnen und jedes unabhängig schließen Beide werden aus dem Accordion Type Dropdown in der Registerkarte Inhalt gesetzt.
Kann ich ein Formular oder eine Vorlage in ein Akkordeonelement einfügen?
Ja. Legen Sie den Inhaltstyp des Elements auf den gespeicherten Abschnitt fest und wählen Sie eine beliebige Vorlage aus Ihrer Elementor-Bibliothek aus. Die Demo lädt einen vollständigen Kontaktabschnitt mit einem Arbeitsformular in ein Akkordeonelement, und jede andere gespeicherte Vorlage funktioniert auf die gleiche Weise.
Wie erstelle ich ein verschachteltes Akkordeon in Elementor?
Speichern Sie zuerst ein Akkordeon als Elementor-Vorlage. Stellen Sie dann im übergeordneten Akkordeon den Inhaltstyp eines Elements auf den gespeicherten Abschnitt ein und wählen Sie diese Vorlage aus. Das innere Akkordeon lädt sich in das äußere Element ein, sodass Sie zwei Ebenen mit zusammenklappbarem Inhalt erhalten.
Kann ein Element standardmäßig geöffnet bleiben?
Ja. Erweitern Sie das Element im Reiter Inhalt und schalten Sie Aktiv als Standard ein, Dieses Element beginnt geöffnet, wenn die Seite geladen wird, was gut für die Frage funktioniert, die Besucher am meisten stellen.
Einwickelnd #
Das Advanced Accordion-Widget verarbeitet das Standard-FAQ-Muster und geht dann weiter: Symbole und Hintergründe pro Element, Drei-State-Stil und ein Inhaltstyp mit gespeichertem Abschnitt, der Formulare, Tabellen oder ganze verschachtelte Akkordeons in jedes Element einfügt Durchsuchen Sie den gesamten Satz von Master Addons Widgets und Erweiterungen Um zu sehen, was sonst noch mit dem Plugin ausgeliefert wird, und überprüfen Sie die Preisseite Für Pro Extras wie Akkordeonmuster.
