Erweiterte Akkordeon
Lange Textblöcke überfordern sich, aber versteckte Antworten frustrieren Ein Akkordeon findet die perfekte Balance, wenn es durchdacht gestaltet ist Master Addons Advanced Accordion Element gibt Ihnen die vollständige Kontrolle über dieses klassische interaktive Tool Wählen Sie zwischen sauberem Akkordeon (jeweils ein offenes) oder flexiblem Verhalten umschalten (mehrfach geöffnet).Füllen Sie Elemente mit Text, Bildern oder sogar ganzen gespeicherten Vorlagen. Dann stylen Sie jeden einzelnen Zustand: den normalen Titel, den Hover, den aktiven offenen Artikel und den Inhaltsbereich selbst. Es ist nicht nur für FAQs; es gilt für Featurelisten, Produktspezifikationen, Portfolios oder Inhalte, die von einer sauberen, offenbaren und auf Abruf-Präsentwurf profitieren.
Duale Verhaltensweisen und dynamische Inhalte
Beginnen Sie mit der Definition, wie sich Ihr Akkordeon verhält Wählen Sie Akkordeon Typ: traditionelle Akkordeon für einen fokussierten, ein-Item-offenen Fluss, oder Schalten Sie um für einen flexibleren, Checklisten-Stil, wo Benutzer mehrere Elemente öffnen können, dann bauen Sie Ihre Elemente Für jeden Tab legen Sie einen Titel fest und wählen Sie einen Inhaltstyp. Gehen Sie über einfachen Text hinaus, verwenden Sie Inhalte für Rich Text und Medien, oder wählen Sie aus Gespeicherter Abschnitt, Gespeichertes Widget oder Gespeicherte Seitenvorlage, um ganze vorgestaltete Inhaltsblöcke einzufügen Dies macht es zu einem leistungsstarken Werkzeug für modulare Seitenerstellung und Wiederverwendung komplexer Layouts.
- Zwei Interaktionsmodelle: Akkordeon (einfach geöffnet) für abgestufte Prozesse, Toggle (mehrfach geöffnet) für Checklisten oder Funktionen.
- Rich Content-Quellen: Füllen Sie Akkordeonelemente mit einfachem Text, Bildern oder ganzen gespeicherten Elementorabschnitten und -vorlagen.
- Standardaktives Element: Legen Sie fest, dass jedes Element beim Laden der Seite als Standard aktiv ist.
- Einfache Verwaltung: Hinzufügen, Entfernen und Neubestellen von Artikeln mit der Schaltfläche + Artikel hinzufügen und einem intuitiven Repeater.
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.
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.
Kann ich beim Laden der Seite einen Artikel öffnen lassen?
Ja. Wenn Sie ein einzelnes Element im Register Inhalt bearbeiten, finden Sie eine Option Aktiv als Standard Stellen Sie dies auf Ja für das Element ein, das Sie voreröffnet haben möchten Nur ein Element sollte dieses in einem Akkordeon-Typ gesetzt haben, um Konflikte zu vermeiden.
Was sind "Sparter Abschnitt" oder "Spared Page Template" als Inhaltstypen?
Dies sind leistungsstarke Elementor Pro-Funktionen Wenn Sie einen Abschnitt (wie ein Teamprofil) oder eine ganze Seitenvorlage (wie ein Kontaktformular) in Ihrer Elementor-Bibliothek gespeichert haben, können Sie diese auswählen, um sie im Inneren des Akkordeon-Elements zu sehen Damit können Sie komplexe, vorgestaltete Layouts in Ihr Akkordeon einbetten.
Wie funktionieren Hover und Active States auf Mobilgeräten?
Auf Touch-Geräten löst der erste Tipp oft kurz hintereinander sowohl den Hover - als auch den Active-Zustand aus (wenn sich das Element öffnet).Das Styling, das Sie auf den Active-Zustand anwenden, ist für Mobilgeräte am wichtigsten, da es zeigt, welches Element gerade geöffnet ist Der Hover-Zustand wird möglicherweise nicht als separater Schritt betrachtet.
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.
Ist das Akkordeon für Tastaturnavigation und Bildschirmlesegeräte zugänglich?
Ein richtig codiertes Akkordeon-Widget sollte zugänglich sein Die Verwendung von semantischen Title HTML Tags (wie <div>, <h3>) hilft bei der Strukturierung des Inhalts Die interaktiven Zustände und ARIA-Attribute für erweiterte/zusammengefallene Zustände werden normalerweise vom Widget verarbeitet, um sicherzustellen, dass Bildschirmleser die Änderungen bekannt geben können.
Trendige Elementor-Widgets und -Erweiterungen
Erstellen Sie anspruchsvolle Websites in kürzerer Zeit.
Glasmorphie
Container-extras
Muster
Post-/Seitenduplikator
