Vælg

The Vælg felt gengiver en række ikonknapper i din widgets panel, den samme kontrol Elementor bruger til tekstjustering: tre eller fire knapper, en aktiv ad gangen. Inde i Master Addons Widget Builder, det er det rigtige valg, når mulighederne er få, og et ikon siger mere end et ord. Justering er det oplagte eksempel, men positions- og retningskontakter passer til den samme form.

Vælg kontrolelementets indstillingstaster fungerer direkte med Betingelser, så andre felter kan vises baseret på den valgte indstilling, og med den Twig-syntaks skabelon motor, hvor en check som {% if align == "center" %} skifter din markering. Begge guider dækker detaljerne.

Ligesom Vælg er den værdi, der afleveres til din skabelon, indstillingens nøgle, ikke dens titel. Hvad Vælg tilføjer øverst: et ikon pr. mulighed, en valgfri skift-off-adfærd og en ligetil sti til Elementors vælgermekanisme for rene CSS-valg som justering.

Hvad Vælg feltet gør #

• Gengiver en række ikonknapper i Elementor-panelet, én pr. mulighed, du definerer.
• Holder én nøgle fra det definerede sæt, præcis én knap aktiv ad gangen.
• Parrer hver mulighed med et eicon, som f.eks eicon-text-align-left, så valget lyder på et øjeblik.
• Skifter eventuelt af: med indstillingen Toggle tændt, ved at klikke på den aktive knap igen fravælger den, og værdien bliver tom.
• Understøtter et responsivt flag og kan skrive CSS direkte gennem en vælger, dækket nedenfor.

Hvis du er ny til at bygge widgets, skal du starte med Widget Builder oversigt first.

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 testimonial widget med en “Quote Alignment” vælger: venstre, center, højre.

Sådan tilføjer du et Vælg-felt #

I Widget Builder-editoren skal du finde Vælg felt i panelet til venstre, grupperet med de andre valgfelter.

Træk den ind i en sektion under Style fane; indstillinger af justeringstypen lever naturligt der. Når det lander, åbnes feltets muligheder til venstre.

Vælg feltindstillinger forklaret #

• Etiket: teksten vist ved siden af knapperne i Elementor, for eksempel “Citatjustering”.
• Navn: den unikke identifikator for feltet, bogstaver, tal og understregninger kun f.eks quote_align.
• Options: hver mulighed er en nøgle plus en titel og et ikon. Titlen bliver til knapens værktøjstip og ikonet er for eksempel en eicon-klasse eicon-text-align-left for nøglen left.
• Skift: når du er tændt, fravælger det igen at klikke på den aktive knap, og feltets værdi bliver tom. Lad det være slukket, hvis widgetten altid har brug for en værdi.
• Standard: nøglen aktiv, når widgetten først falder på en side.
• Responsive: tilføjer enhedsikonet, så justeringen kan variere pr. brudpunkt.
• Beskrivelse, Vis etiket, Separator: standardvisningsindstillingerne plus Betingelser for kun at vise feltet, når et andet kontrolelement har en bestemt værdi.

Tilslut Vælg til din skabelon eller en vælger #

Der er to ledningsføringsstile. Justeringseksemplet fungerer med enten.

Skabelonmønstre. Tokenet udskriver den valgte tast, så Select-mønstrene overføres uændret. En modifikatorklasse beholder varianterne i din CSS-fane:

<blockquote class="quote align--{{ quote_align }}">
  {{ quote_text }}
</blockquote>

med .align--center { text-align: center; } og venner i CSS fanen. Conditionals arbejde også: {% if quote_align == 'center' %}. Som med Select, sammenligne mod nøglen, aldrig titlen.

Valgmuligheden Selector. Vælg kan også skrive CSS gennem Elementors vælgermekanisme, og springe skabelonen helt over. En ting at vide, før du stoler på det: standardegenskaben Elementor injicerer for en Vælg vælger er color: {{VALUE}}, som er ubrugelig til justering. En brugerdefineret selectors post skal stave ud den faste ejendom:

text-align: {{VALUE}};

Nøglerne skal så være gyldige CSS-værdier (left, center, right allerede er), og {{WRAPPER}} er forberedt automatisk til denne form for værdiregulering, så stilarterne forbliver scoped til din widget, uden at du skriver det.

Pas på den tavse version af denne fejl. A Vælg kablet til en vælger, der holder standardegenskaben, vil med glæde skrive color: center, en ugyldig erklæring browseren falder uden et ord. Ingen konsol advarsel, ingen visuel antydning. Hvis knapperne synes at gøre ingenting, inspicere den genererede CSS før du rører feltet config.

Brug kontrolelementet Vælg i Elementor #

Tilføj din brugerdefinerede widget til en side i Elementor, genindlæser editoren, hvis siden allerede var åben. Kontrolelementet vises som en række ikonknapper under din etiket, med standardnøglens knap aktiv.

Klik på en knap, og forhåndsvisningsopdateringerne på én gang. Med Toggle on rydder et klik på den aktive knap valget, og widgetten falder tilbage til, hvad end din CSS-fane definerer. Med Responsive on lader enhedsikonet hvert breakpoint holde sit eget valg.

Almindelige brugstilfælde #

• Tekstjustering for overskrifter, citater og billedtekster, kontrollens hjemmebane.
• Elementstilling såsom billede til venstre eller billede til højre i et medie-og-tekstkort.
• Retningskontakter for vandrette versus lodrette lister og tidslinjer.
• Forindstillinger for størrelse som små, mellemstore og store kortlagt til modifikatorklasser.
• Vis-side valg til badges og bånd, øverst til venstre gennem nederste højre hjørner.

Tips til at arbejde med feltet Vælg #

• Hold det til to, tre eller fire muligheder. En række med syv ikonknapper er en dropdown iført et kostume; brug en Select i stedet.
• Match nøgler til CSS-værdier, når du bruger en vælger. Nøgler som left og center drop lige ind text-align: {{VALUE}} uden oversættelseslag.
• Definer den faste ejendom i brugerdefinerede vælgere. Standard injiceret egenskab er color: {{VALUE}}, som kun passer til faktiske farvevalg.
• Planlæg for den tomme værdi, hvis Toggle er slået til. Et fravalgt felt udskriver en tom nøgle, så align-- klasser og betingelser bør tolerere det eller holde Toggle væk.
• Sammenlign med nøgler i conditionals. Indstillingstitlen er kun paneltekst og matcher aldrig ind {% if %}.
• Brug Responsive til justering. Center-på-mobil, venstre-på-skrivebord er én kontrol i stedet for to.

Ofte stillede spørgsmål #

Indpakning #

Widget Builder Vælg feltet giver små visuelle beslutninger den kontrol, de fortjener. Taster sidder bag ikonknapper, et token feeds modifikator klasser og conditionals, og vælgerstien håndterer valg af en egenskab som justering, når du definerer den rigtige CSS egenskab. For layout picks, der har brug for en fuld miniature frem for et ikon, skal du træde op til Visual Choice-felt. Udforsk resten af Master Addons widgets og udvidelser, og se den prissætning side for hvad hver plan indeholder.