Faner

The Faner felt organiserer en widgets kontrolelementer i panelfaner, den samme struktur Elementors egne widgets bruger til Normal og Hover state styling. Inde i Master Addons Widget Builder, definerer du fanerne, placerer underordnede kontrolelementer i hver, og panelet Elementor gengiver dem som en kompakt fanestrimmel i stedet for én lang rulle af felter.

Tabs-kontrollen understøtter Betingelser som alle felter, og dets børn læses gennem Twig-syntaks skabelon motor med et tredelt token, {{ tabs.tab_1.field }}, ingen løkke påkrævet. Begge guider dækker detaljerne og begrænsningerne.

Tabs er et strukturelt felt. Det har ingen egen værdi; værdierne tilhører børnene, og din skabelon læser hver enkelt gennem en indlejret sti, der navngiver fanebladsfeltet, fanen og feltet inde i det. Ingen sløjfer, ingen tricks, kun adresser.

Hvad Tabs-feltet gør #

• Gengiver en fanestrimmel i widgettens panel, bygget på Elementors kontrolfaner mekanisme.
• Holder et sæt faner, hver med sit eget navn, etiket og liste over børnekontroller.
• Holder relaterede tilstande sammen, idet den klassiske parring er Normal- og Hover-versioner af de samme indstillinger.
• Udsætter underordnede værdier gennem indlejrede stier i din skabelon: fanebladsfeltets navn, derefter fanen og derefter feltet.
• Tillader de samme undernavne på tværs af faner, så Normal og Hover kan spejle hinanden rent.

Hvis du lige er i gang med bygherren, så læs Widget Builder oversigt før denne.

Før du starter #

• WordPress med Elementor installeret og aktiv.
• Master Addons til Elementor installeret og aktiv. Ny i plugin'et? Se den installationsvejledning.
• En brugerdefineret widget åben i Widget Builder editor. Vores eksempel er en knap widget med en Tabs felt navngivet states hold en fane Normal og en Hover-fane, hver med et farvefelt navngivet bg.

Sådan tilføjes et Tabulatorfelt #

Rul feltpanelet til venstre i Widget Builder-editoren, indtil du finder Faner felt, opført med de andre strukturelle felter såsom Popover Toggle og Repeater.

Træk den ind i en sektion under Style tab, hvor tilstandsstyling bor, definer derefter fanerne og slip underordnede kontroller i hver enkelt. Feltets muligheder åbnes til venstre, så snart det lander.

Faner feltindstillinger forklaret #

• Etiket: overskriften vist over fanestrimlen i Elementor.
• Navn: den unikke identifikator for hele fanerne gruppe, bogstaver, tal og understregninger kun, for eksempel states. Det er det første segment af hvert barns skabelon sti.
• Faner: listen over faner. Hver fane bærer et navn (bruges f.eks. i skabelonveje normal), en etiket (vist på strimlen, for eksempel “Normal”), og sit eget sæt af underordnede kontroller.
• Børnekontrol: felterne inde i hver fane. Værdifelttyper fungerer her, og hver beholder sine egne muligheder og værdiform.
• Beskrivelse, Vis etiket, Separator og Betingelser er de samme visningsmuligheder som alle andre steder.

Læs tabulatorværdier gennem indlejrede stier #

Børn af et fanefelt adresseres med en tredelt priksti: fanefeltets navn, faneens navn og derefter det underordnede felts navn.

{{ tabsname.tabname.fieldname }}

Der er ingen looping over faner. Hver værdi bliver læst præcis, hvor du har brug for det. For knappen eksempel, en states fanebladsfelt med faner Normal og Hover, der hver holder en bg farvefelt, ledninger ind i CSS-panelet sådan her:

.ma-btn {
  background: {{ states.normal.bg }};
}
.ma-btn:hover {
  background: {{ states.hover.bg }};
}

At navngive barnet det samme i begge faner er bevidst og understøttet. Internt deduperer bygherren duplikerede nøgler med en tæller, men skabelonstien forbliver per fane, så bg i Normal og bg i Hover forbliver to distinkte, rent adresserede værdier. Spejlede navne er det mønster, der skal tilstræbes: Den, der læser skabelonen, ser, at Normal- og Hover-reglerne kun adskiller sig med ét stisegment.

Pas på: det flade token {{ bg }} løser sig til ingenting, og det samme gør den todelte {{ normal.bg }}. Stien starter altid med Tabulatorfeltets eget navn. Når en tabulatorværdi udskrives tomt, skal du tælle segmenterne først. Omdøbning af en tabulator bryder stier på samme lydløse måde; CSS'en bliver ved med at kompilere, værdien stopper bare med at ankomme, så sæt dig på tabulatornavne, før du skriver reglerne.

Brug kontrolelementet Tabulatorer i Elementor #

Tilføj din brugerdefinerede widget til en side i Elementor (eller genindlæs editoren, hvis siden allerede var åben). Fanestriben gengives i panelet med dine faneetiketter, og hvis du klikker på en fane, afsløres dens underordnede kontroller.

En editor indstiller baggrunden Normal på den første fane, skifter til Hover og indstiller den anden farve. Hvis du holder markøren over knappen i forhåndsvisningen, vises overgangen med det samme, eftersom begge værdier allerede sidder i widgettens CSS-regler.

Almindelige brugstilfælde #

• Normal og Hover styling for knapper, kort og links, den klassiske parring.
• Aktive og inaktive tilstande for skifter, filtre og nav-elementer.
• Før og efter indstillinger i sammenligning eller afsløre widgets.
• Lyse og mørke varianter, lade redaktører tune begge ordninger fra én sektion.
• Mærkelig og jævn række styling i liste- og tabelwidgets.

Tips til at arbejde med feltet Tabulatorer #

• Adresseværdier med den fulde tredelte sti. {{ states.hover.bg }} værker; {{ bg }} og {{ hover.bg }} ikke.
• Spejl underordnede navne på tværs af faner. Samme felter, samme navne, et forskelligt stisegment; skabelonen forbliver læsbar, og fanerne forbliver sammenlignelige.
• Hold fanenavne korte og små bogstaver. De er skabelonidentifikatorer, så normal og hover slå “Tab 1” og “Tab 2”.
• Brug faner til tilstande, sektioner til emner. To varianter af de samme indstillinger hører hjemme i faner; ikke-relaterede indstillinger hører hjemme i separate sektioner.
• Husk, at hvert barn holder sin types værdiform. En skyder inde i en fane læser stadig som {{ states.normal.gap.size }}{{ states.normal.gap.unit }}.

Ofte stillede spørgsmål #

Indpakning #

Feltet Widget Builder Tabs gør tilstandsstyling til et ryddeligt panelmønster:definer normal og hover en gang skal du spejle undernavnene, og din CSS læser {{ states.normal.bg }} mod {{ states.hover.bg }} med intet andet, der ændrer sig. For at gentage indhold frem for parrede tilstande, er Repeaterfelt er den strukturelle søskende at række ud efter. Udforsk resten af Master Addons widgets og udvidelser, og se den prissætning side for hvad hver plan indeholder.