Kostenloses Elementor-Akkordeon-Widget für FAQs und Umschalter
Advanced Accordion ist ein Master Addons Widget für FAQ Abschnitte und zusammenklappbare Inhalte, und es braucht keine Master Addons Pro. Wählen Akkordeon Ein Element gleichzeitig offen zu halten oder Umschalten Besucher mehrere öffnen zu lassen Jeder Gegenstand hat einen Titel und eine Antwort, kann geöffnet beginnen, und kann eigene Erweiterungs - und Einklapp-Symbole verwenden Stiltitel für Normal, Hover - und Aktiv-Zustände, dann stilisieren Sie die Antworten und Symbole. Master Add-dons Pro Fügt gespeicherte Abschnitte, gespeicherte Widgets und Seitenvorlagen als Artikelinhalt hinzu, wodurch Sie auch ein Akkordeon in ein anderes einnisten.
So erstellen Sie eine FAQ-Akkordeon in Elementor
Sie benötigen Elementor und das Master Addons Plugin von WordPress.org.
- Überprüfen Sie, ob Advanced Accordion eingeschaltet ist unter Master-Addons, Widgets.
- Suchen Sie im Elementor-Editor nach Erweiterte Akkordeon Und auf die Seite ziehen.
- Stellen Sie Akkordeon Typ auf Akkordeon für eine klassische FAQ.
- Fügen Sie ein Element pro Frage hinzu, geben Sie die Antwort ein und stellen Sie Ihre am häufigsten gestellte Frage auf Aktiv als Standard.
- Stellen Sie Titel-HTML-Tag auf H3 ein, damit Fragen zu Überschriften werden.
- Stylen Sie die Titel, Antworten und Symbole im Register Stil.
Über FAQ-Schema: Dieses Widget gibt keine strukturierten FAQPage-Daten aus Wenn Sie FAQ-reiche Ergebnisse wünschen, schalten Sie die FAQ-Schema-Option im eigenen Accordion-Widget von Elementor ein oder fügen Sie die Fragen mit einem SEO-Plugin-FAQ-Block hinzu Jede Einstellung wird im abgedeckt Erweiterte Einstellungen für das Accordion-Widget.
Erweiterte Akkordeon auf einen Blick
Was das Widget macht, lesen Sie aus dem Master Addons Code.
| Artikel | Erweitertes Accordion-Widget |
|---|---|
| Modi | Akkordeon (ein Gegenstand nach dem anderen geöffnet) oder Umschalten (mehrere geöffnet) |
| Gegenstände | So viele, wie Sie zur Liste hinzufügen |
| Auf Last öffnen | Aktiv als Standard pro Element; Da kein Satz vorhanden ist, beginnen alle Elemente geschlossen |
| Symbole | Symbole für das Widget erweitern und zusammenklappen sowie benutzerdefinierte Symbole pro Element |
| Titel HTML-Tag | H1 bis H6, div oder span |
| Titelstyling | Normal, Hover und Aktiv: Hintergrund, Textfarbe, Typografie, Rand, Radius, Schatten, Polsterung |
| Inhalt | Text und Medien; gespeicherter Abschnitt, Widget oder Seitenvorlage mit Pro |
| Hintergrundfarbe pro Artikel | Mit Pro |
| Nistend | Durch einen gespeicherten Abschnitt oder eine Vorlage mit Pro |
| Animationsgeschwindigkeit | Drehzahl in Millisekunden umschalten |
| FAQ-schema | Nein |
| Maximale Artikelerweiterte Einstellung | Nein; Verwenden Sie den Akkordeon-Modus einzeln |
| Bedürfnisse | Elementor- und Master-Addons |
Akkordeon oder Verhalten umschalten
Akkordeonart Setzt das Verhalten: Akkordeon schließt das geöffnete Element, wenn sich ein anderes öffnet, und Toggle lässt mehrere offen bleiben Für jedes Element den Titel und den Inhalt hinzufügen, einschalten Aktiv als Standard Es bei Belastung zu öffnen und einzuschalten Benutzerdefiniertes Symbol aktivieren Für eigene Icons. Inhaltstyp Ist einfacher Inhalt ohne Pro. Gespeicherter Abschnitt, gespeichertes Widget und gespeicherte Seitenvorlage sowie eine Hintergrundfarbe pro Element benötigen Pro.
- Schalten Sie die Geschwindigkeit in Millisekunden für die offene und geschlossene Animation um.
- Titel HTML Tag von H1 bis H6, div oder span, so können Fragen echte Überschriften sein.
- Verschachtelte Akkordeons: Speichern Sie ein Akkordeon als Vorlage und laden Sie es in einen Artikel mit Pro.
Halten Sie eine Elementorakkordeon standardmäßig geschlossen
Jedes Element in Advanced Accordion beginnt geschlossen, es sei denn, Sie schalten ein Aktiv als Standard Für sie Für ein Akkordeon, das beim Laden der Seite vollständig geschlossen ist, lassen Sie das bei jedem Artikel ausschalten Um nur den ersten Artikel zu öffnen, schalten Sie es für den ersten Artikel ein und lassen Sie den Rest aus.
Im Akkordeon-Modus bleibt jeweils ein Element geöffnet, so dass ein zweiter Klick auf einen anderen Titel den ersten schließt Im Toggle-Modus können Besucher beliebig viele Elemente öffnen, und jedes Element, das Sie mit Active as Default festlegen, öffnet sich gemeinsam beim Laden Das elementoreigene Akkordeon erledigt dies stattdessen mit zwei Widget-Einstellungen: einem Standardzustand (erstes Element erweitert oder alle zusammengebrochen) und einer maximalen Anzahl erweiterter Elemente.
Kein Element ist als Standard aktiviert aktiv, daher beginnen alle vier Antworten geschlossen.
Schalten Sie den Typ um, wobei zwei Elemente als Standard auf Aktiv gesetzt sind: Beide öffnen sich beim Laden gemeinsam.
Akkordeon, Inhalte umschalten oder umschalten?
Drei unserer Widgets öffnen und schließen Inhalte Wählen Sie nach dem, was der Besucher auf einmal sehen muss.
| Du willst | Verwenden |
|---|---|
| Eine FAQ-Liste, in der jeweils eine Antwort geöffnet ist | Erweiterte Akkordeon, Akkordeon-Typ |
| Eine Spezifikationsliste oder Checkliste, auf der Besucher mehrere Elemente öffnen | Erweiterte Akkordeon, Typ umschalten |
| Ein Switch, der einen ganzen Abschnitt vertauscht, beispielsweise monatliche und jährliche Preise | Inhalte umschalten |
| Etiketten nebeneinander mit einer Tafel | Tabs |
Für die längeren Vergleiche lesen Sie Knebel gegen Akkordeon im Elementor und Tabs vs. Akkordeon.
Staatlicher Titelstil und -struktur
Die Titelleiste ist das, was Benutzer anklicken „Auch jeden visuellen Zustand absichtlich gestalten. Gestalten Sie den Titel separat für seine normalen, Hover- und aktiven (offenen) Zustände. Definieren Sie für jeden Zustand einen eindeutigen Hintergrundtyp (Farbe, Farbverlauf), Textfarbe und Typografie. Steuern Sie den Titel, richten Sie ihn aus, fügen Sie ihn, den Rand, den Grenzradius hinzu. Mit dieser Detaillierung können Sie eine klare visuelle Reise erstellen: eine neutrale Voreinstellung, einen einladenden Hover und einen eindeutigen „offenen“Zustand”, der die Aktion des Benutzers bestätigt.
- Triple-State-Design: Wenden Sie unterschiedliche Stile auf normale, Hover- und aktive Titelleisten an.
- Erweiterte Hintergründe: Verwenden Sie einfarbige Farben oder Farbverläufe für verschiedene Zustände, um Tiefe zu erzeugen.
- Vollständige Boxsteuerung: Passen Sie Polsterung, Ränder und Box Shadow an, um jede Titelleiste zu einer entworfenen Komponente zu machen.
Anpassbare Toggle-Symbole mit Dual-Zuständen
Bewegen Sie sich über das generische Dreieck-Symbol hinaus Aktivieren Sie das benutzerdefinierte Symbol, um ein beliebiges Symbol aus der Bibliothek sowohl für die Aktionen Erweitern (geschlossener Zustand) als auch Einklappen (offener Zustand) auszuwählen Positionieren Sie das Symbol nach links oder rechts. Anschließend gestalten Sie diese Symbole unabhängig für Normal, Hover und Aktivzustände und ändern Sie ihre Farbe, Größe und ihren Hintergrund. Passen Sie den Symbolabstand und die Polsterung um das Symbol an, um eine perfekte Ausrichtung zu gewährleisten. Dadurch wird ein Funktionsindikator zu einem zusammenhängenden Teil Ihrer Designsprache.
- Duale Symbole: Legen Sie verschiedene Symbole für die Zustände “plus” (erweitern) und “minus” (kollaps) fest.
- State-Specific Icon Styling: Ändern Sie die Farbe und den Hintergrund des Symbols, wenn das Element mit der Maus oder aktiv ist.
- Richtig ausrichten: Steuersymbol Ausrichtung, Position und Abstand relativ zum Titeltext.
Inhaltsbereich und Container-Styling
Der nach unten gerutschte Inhalt verdient eine eigene Designüberlegung. Gestalten Sie den Inhaltsbereich mit einer eigenen Hintergrundfarbe, Textfarbe, Typografie und interner Polsterung. Fügen Sie bei Bedarf einen Textschatten hinzu, um ihn lesbar zu machen. Anschließend stylen Sie den gesamten Artikelcontainer, der alle Akkordeonabschnitte enthält: Legen Sie den Abstand zwischen den Elementen fest, einen globalen Rand, einen Randradius und einen Kastenschatten. Dadurch wird sichergestellt, dass sich das gesamte Widget wie eine einheitliche, ausgefeilte Komponente anfühlt und der geöffnete Inhalt ist einfach und angenehm zu lesen.
- Content Area Design: Gestalten Sie den Hintergrund und den Text des Dropdown-Inhalts für optimale Lesbarkeit.
- Containerniveau Polnisch: Bringen Sie Border Radius und Box Shadow auf die gesamte Akkordeongruppe an.
- Artikelabstand: Steuern Sie den Abstand (Rand) zwischen den einzelnen Akkordeonartikeln für einen sauberen, getrennten Look.
Elementorakkordeon vs. Master Addons Advanced Accordion
Free Elementor hat jetzt ein eigenes Accordion-Widget. So vergleichen sich die beiden, sodass Sie das richtige auswählen können.
| Merkmal | Elementorakkordeon | Master Addons Advanced Akkordeon |
|---|---|---|
| Preis | Kostenlos in Elementor | Ohne Pro enthalten; Vorlageninhalte benötigen Pro |
| FAQ-schema | FAQ Schema-Option | Keine Schemaausgabe |
| Verschachtelter Inhalt | Geben Sie in jedes Element beliebige Widgets ein, einschließlich eines weiteren Akkordeons | Text ohne Pro; gespeicherte Abschnitte, Widgets oder Vorlagen mit Pro |
| Offenes Verhalten | Standardstatus und maximale Elemente erweitert | Akkordeon oder Umschalten, plus Aktiv als Standard pro Artikel |
| Symbole pro Artikel | Gemeinsame Symbole | Benutzerdefinierte Erweiterungs - und Einklapp-Symbole pro Artikel |
| Titelstyling | Normal, Hover und Aktiv | Normal, Hover und Aktiv mit Hintergrund, Rand und Schatten |
Wählen Sie Elementor's Accordion, wenn Sie FAQ-Schema oder Widgets in jedem Element ohne Addon benötigen Wählen Sie Advanced Accordion für Symbole pro Element und Schalten Sie das Verhalten mit detaillierter Gestaltung um Verwandte Widgets: Inhalte umschalten, Tabs, Inhaltsverzeichnis, Info-box und Geschäftszeiten.
FAQ Schema und Advanced Accordion
FAQ-Schema sind strukturierte Daten, die einen Block von Fragen und Antworten als FAQ markieren Advanced Accordion gibt es nicht aus Die Fragen werden immer noch auf der Seite angezeigt und bleiben crawlbar; das Widget fügt nur kein FAQPage-Markup hinzu.
Google hat am 7. Mai 2026 aufgehört, FAQ-reiche Ergebnisse in der Suche anzuzeigen, sodass das Markup den Frage-Dropdown unter einem Suchergebnis nicht mehr hinzufügt. Einige andere Tools lesen ihn möglicherweise immer noch. Wenn Sie es trotzdem möchten, verwenden Sie das Accordion-Widget von Elementor und schalten Sie die FAQ-Schema-Option ein oder behalten Sie Advanced Accordion für das Design und fügen Sie das FAQ-Schema über Ihr SEO-Plugin hinzu. Nehmen Sie pro Seite eine Quelle für FAQ-Markup, da zwei FAQPage-Blöcke für dieselben Fragen mehr verwirren als helfen.
Erweiterte Akkordeonbeispiele
Vierzehn Live-Demos mit Advanced Accordion: FAQ-Seiten, Support-Panels, Vorverkaufsfragen, Schrittlisten und eine Plantabelle.
Häufig gestellte Fragen für erweiterte Akkordeon
Was ist der praktische Unterschied zwischen “Accordion” und “Toggle” Typ?
Akkordeon: Es kann jeweils nur ein Artikel geöffnet werden Durch das Öffnen eines neuen Artikels wird automatisch der vorherige geschlossen Am besten für FAQ-Seiten oder sequentielle Anweisungen, bei denen Sie das Scrollen minimieren und die Aufmerksamkeit fokussieren möchten.
Umschalten: Mehrere Elemente können gleichzeitig geöffnet werden Benutzer können mehrere Elemente erweitern, um Informationen zu vergleichen oder zu sammeln Am besten für Feature-Checklisten, Produktspezifikationslisten oder Inhalte, bei denen Benutzer mehrere Abschnitte gleichzeitig sehen müssen.
Benötige ich Master Addons Pro für Advanced Accordion?
Nr. Akkordeon- und Umschalttypen, Aktiv als Standard, benutzerdefinierte Symbole und das gesamte Styling funktionieren ohne Pro. Gespeicherter Abschnitt, Widget- und Vorlageninhalte sowie Hintergrundfarben pro Element sind erforderlich Master Add-dons Pro.
Welche Inhaltstypen gibt es für gespeicherte Abschnitte und gespeicherte Seitenvorlagen?
Es sind Master Addons Pro Optionen, die etwas aus Ihrer Elementor Template Bibliothek in ein Element laden, wie z.B. einen Kontaktformular-Bereich oder ein anderes Akkordeon So bauen Sie verschachtelte Akkordeons mit diesem Widget.
Wie halte ich alle Akkordeonartikel beim Seitenladen geschlossen?
Lassen Sie Aktiv als Standard bei jedem Element aus Advanced Accordion öffnet nur die Elemente, bei denen dieser Schalter eingeschaltet ist, also ohne Satz beginnt jedes Element geschlossen und der Besucher öffnet das, was er braucht.
Warum öffnet sich mein Akkordeon nicht?
Überprüfen Sie, ob Advanced Accordion unter Master Addons, Widgets eingeschaltet ist, und löschen Sie dann Ihren Cache. Wenn ein Geschwindigkeits-Plugin JavaScript bis zum ersten Scrollen oder Tippen verzögert, öffnen sich die Elemente erst, wenn diese Verzögerung endet, schließen Sie also die Master Addons-Skripte davon aus.
Fügt das Akkordeon ein FAQ-Schema hinzu?
Nr. Advanced Accordion gibt keine FAQPage strukturierten Daten aus Google zeigt keine FAQ reichen Ergebnisse mehr an (seit Mai 2026), daher ist das Markup weniger wichtig als früher Wenn Sie es noch wollen, verwenden Sie das Accordion-Widget von Elementor mit seiner FAQ Schema Option, oder fügen Sie es durch ein SEO-Plugin hinzu.
Kann ich die Öffnungs - und Schließanimationsgeschwindigkeit steuern?
Ja. Im Reiter Inhalt finden Sie Toggle Speed (ms) Der Wert ist in Millisekunden (z.B. 300) Eine niedrigere Zahl (wie 200) macht es schneller und bissiger; eine höhere Zahl (wie 500) macht es langsamer und bewusster.
Wie mache ich standardmäßig ein Element offen?
Öffnen Sie das Element im Reiter Inhalt und schalten Sie Aktiv als Standard ein, mit dem Akkordeon-Typ, stellen Sie es nur auf ein Element: wenn zwei Elemente es an haben, beide beim Laden öffnen, und der erste Klick schließt alles, außer das Element angeklickt.
Kann ich ein Akkordeon in ein anderes Akkordeon stecken?
Ja, mit Master Add-dons Pro: das innere Akkordeon als Abschnitt oder Vorlage speichern, dann als Inhaltstyp eines Artikels auswählen Free Elementor's Nested Accordion Widget nistet auch Akkordeons ohne Addon.
Kann ich ein horizontales Akkordeon machen?
No. Advanced Accordion stapelt Artikel vertikal und öffnet jede Antwort unter ihrem Titel Für Side-by-Side-Etiketten wird die Tabs Widget ist die engere Passform.
Trendige Elementor-Widgets und -Erweiterungen
Erstellen Sie anspruchsvolle Websites in kürzerer Zeit.
Glasmorphie
Container-extras
Muster
![Master Addons Post/Page Duplicator-Erweiterung für Elementor: MA Duplicator Zeilenlink in der WordPress Pages-Liste, der eine Landing Page erstellt - [Duplicated #128] Entwurf](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post-/Seitenduplikator
