Kostenloses Elementor-Akkordeon-Widget für FAQs und Umschalter
Advanced Accordion ist ein kostenloses Master Addons Widget für FAQ-Abschnitte und zusammenklappbare Inhalte Wählen Sie 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 Addons 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 kostenlose 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.
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 im kostenlosen Plugin Gespeicherter Abschnitt, Gespeichertes Widget und Gespeicherte Seitenvorlage, plus 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, span oder a, damit Fragen echte Überschriften sein können.
- Verschachtelte Akkordeons: Speichern Sie ein Akkordeon als Vorlage und laden Sie es in einen Artikel mit Pro.
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 Accordion |
|---|---|---|
| Preis | Kostenlos in Elementor | Kostenlos, mit Vorlageninhalten in Pro |
| FAQ-schema | FAQ Schema-Option | Keine Schemaausgabe |
| Verschachtelter Inhalt | Geben Sie in jedes Element beliebige Widgets ein, einschließlich eines weiteren Akkordeons | Kostenloser Text; 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 Elementen kostenlos benötigen Wählen Sie Advanced Accordion für Symbole pro Element und Schalten Sie das Verhalten mit detailliertem Styling um Verwandte Widgets: Inhalte umschalten, Tabs und Inhaltsverzeichnis.
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.
Ist das Advanced Accordion Widget kostenlos?
Ja. Das Widget ist kostenlos mit Akkordeon - und Umschalttypen, Active as Default, benutzerdefinierten Symbolen und vollem Styling Gespeicherter Abschnitt, Widget - und Vorlageninhalt und Hintergrundfarben pro Artikel benötigen Master Addons 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.
Fügt das Akkordeon ein FAQ-Schema hinzu?
Nr. Advanced Accordion gibt keine strukturierten FAQPage-Daten aus. Verwenden Sie für FAQ-reiche Ergebnisse das Accordion-Widget von Elementor mit der FAQ-Schema-Option oder einen FAQ-Block für SEO-Plugins.
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 auf der Registerkarte Inhalt und schalten Sie Aktiv als Standard ein, Mit dem Akkordeon-Typ setzen Sie es nur auf ein Element.
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
