Advanced Accordion
Lange tekstblokke overvælder, men skjulte svar frustrerer. En harmonika finder den perfekte balance – når den er gennemtænkt designet. Master Addons Advanced Accordion Element giver dig fuldstændig kontrol over dette klassiske interaktive værktøj. Vælg mellem ren Accordion (en åben ad gangen) eller fleksibel Toggle (flere åbne) adfærd. Fyld elementer med tekst, billeder eller endda hele gemte skabeloner. Derefter skal du style hver enkelt tilstand: den normale titel, svæveren, det aktive åbne element og selve indholdsområdet. Det er ikke kun for ofte stillede spørgsmål; det er til funktionslister, produktspecifikationer, porteføljer eller ethvert indhold, der drager fordel af en ren, afsløring-on-demand præsentation.
Dobbelt adfærdstilstande og dynamisk indhold
Start med at definere, hvordan din harmonika opfører sig. Vælg Harmonikatype: traditionel Harmonika for et fokuseret, et-element-åbent flow, eller Skift for en mere fleksibel, tjekliste-stil, hvor brugerne kan åbne flere elementer. Derefter, bygge dine elementer. For hver fane, indstille en Titel og vælge en Indholdstype. Gå ud over simpel tekst – bruge Indhold til rig tekst og medier, eller vælg fra Gemt sektion, Gemt Widget, eller Gemt side skabelon til at indsætte hele præ-designede blokke af indhold. Dette gør det til et kraftfuldt værktøj til modulær side bygning og genbruge komplekse layouts.
- To interaktionsmodeller: Harmonika (enkelt åben) til trinvise processer, Skift (flere åbne) for tjeklister eller funktioner.
- Rige indholdskilder: Udfyld harmonikaelementer med simpel tekst, billeder eller hele gemte Elementor-sektioner og skabeloner.
- Standard aktivt element: Indstil ethvert element til at være aktivt som standard, når siden indlæses.
- Nem administration: Tilføj, fjern og genbestil elementer med knappen + Tilføj element og intuitiv repeater.
Statsbaseret titelstyling og struktur
Titellinjen er det, brugerne klikker på – gør hver visuel tilstand tilsigtet. Style Titlen separat for dens Normal, Hover og Aktiv (åben) tilstande. For hver tilstand skal du definere en unik Baggrundstype (farve, forløb), Tekstfarve og Typografi. Styr Titeljustering, Polstring, Border, Border Radius, og tilføj en Box Shadow. Dette detaljeringsniveau lader dig oprette en klar visuel rejse: en neutral standard, en indbydende hover og en tydelig “åben” tilstand, der bekræfter brugerens handling.
- Triple-State Design: Anvend forskellige stilarter på Normal-, Hover- og Active-titelbjælker.
- Avancerede baggrunde: Brug massive farver eller forløb for forskellige tilstande for at skabe dybde.
- Fuld boks kontrol: Juster polstring, kanter og boks skygge for at gøre hver titellinje til en designet komponent.
Brugerdefinerbare Toggle Ikoner med Dual States
Flyt ud over det generiske trekantikon. Aktivér Brugerdefineret ikon for at vælge et hvilket som helst ikon fra biblioteket for både Expand (lukket tilstand) og Collapse (åben tilstand) handlinger. Placer ikonet til venstre eller højre. Derefter skal du style disse ikoner uafhængigt for Normal, Hover og Active tilstande, ændre deres Farve, Størrelse og Baggrund. Juster ikonafstand og polstring omkring ikonet for perfekt justering. Dette gør en funktionel indikator til en sammenhængende del af dit designsprog.
- Dual Icons: Indstil forskellige ikoner for tilstandene “plus” (udvid) og “minus” (kollaps).
- Tilstandsspecifik ikonstyling: Skift ikonets farve og baggrund, når elementet er svævet eller aktivt.
- Justering korrekt: Kontrolikon Justering, position og afstand i forhold til titelteksten.
Indholdsområde & Containerstyling
Indholdet, der glider ned, fortjener sin egen designovervejelse. Style området Indhold med sin egen Baggrundsfarve, Tekstfarve, Typografi og intern Polstring. Tilføj en Tekstskygge for læsbarhed, hvis det er nødvendigt. Derefter skal du style den overordnede Varer beholder, der holder alle harmonika sektioner: indstil Afstanden mellem emner, en global Border, Border Radius, og Box Shadow. Dette sikrer hele widget føles som en samlet, poleret komponent, og det åbnede indhold er let og behageligt at læse.
- Design af indholdsområde: Stil baggrunden og teksten for drop-down-indholdet for optimal læsbarhed.
- Container-Level Polish: Påfør Border Radius og Box Shadow på hele harmonika gruppen.
- Elementafstand: Styr afstanden (marginen) mellem hver harmonikapost for et rent, adskilt look.
Ofte stillede spørgsmål til avanceret harmonika
Hvad er den praktiske forskel mellem “Accordion” og “Toggle” type?
Harmonika: Kun ét element kan være åbent ad gangen. Åbning af et nyt element lukker automatisk det foregående. Bedst til FAQ-sider eller sekventielle instruktioner, hvor du vil minimere rulning og fokusere opmærksomheden.
Skift: Flere elementer kan være åbne samtidigt. Brugere kan udvide flere elementer for at sammenligne eller indsamle oplysninger. Bedst til funktionstjeklister, produktspecifikationslister eller indhold, hvor brugerne skal se flere sektioner på én gang.
Kan jeg få et element til at starte åbent, når siden indlæses?
Ja. Når du redigerer et individuelt element i fanen Indhold, finder du en Aktiv som standard-indstilling. Indstil dette til Ja for det element, du vil have åbnet på forhånd. Kun ét element skal have dette sæt i en Accordion-type for at undgå konflikt.
Hvad er "Gemt sektion" eller "Gemt sideskabelon" som indholdstyper?
Disse er kraftfulde Elementor Pro-funktioner. Hvis du har en sektion (som en holdprofil) eller en hel sideskabelon (som en kontaktformular) gemt i dit Elementor-bibliotek, kan du vælge den, så den vises inde i harmonikaelementet. Dette lader dig integrere komplekse, foruddesignede layouts i din harmonika.
Hvordan fungerer svæve- og aktivtilstanden på mobilen?
På berøringsenheder vil det første tryk ofte udløse både Hover- og Active-tilstanden hurtigt efter hinanden (efterhånden som elementet åbnes). Den styling, du anvender på Active-tilstanden, er vigtigst for mobilen, da den vil vise, hvilket element der aktuelt er åbent. Hover-tilstanden ses muligvis ikke som et separat trin.
Kan jeg styre åbnings- og lukkeanimationshastigheden?
Ja. I fanen Indhold finder du Toggle Speed (ms). Værdien er i millisekunder (f.eks. 300). Et lavere tal (som 200) gør det hurtigere og snappier; et højere tal (som 500) gør det langsommere og mere bevidst.
Er harmonikaen tilgængelig for tastaturnavigation og skærmlæsere?
En korrekt kodet harmonika widget bør være tilgængelig. Brugen af semantiske Title HTML Tags (som <div>, <h3>) hjælper med at strukturere indholdet. De interaktive tilstande og ARIA attributter for udvidede / sammenklappede tilstande håndteres typisk af widgetten for at sikre, at skærmlæsere kan annoncere ændringerne.
Trending Elementor Widgets & Udvidelser
Byg sofistikerede websteder på kortere tid.
Glasmorfisme
Container ekstraudstyr
Mønstre
Post/Page Duplicator
