Select

The Vælg felt sætter en indbygget dropdown i din widgets indstillingspanel. Du definerer et fast sæt valg, brugeren vælger en, og din skabelon reagerer på valget: en anden layoutklasse, en anden blok af markup, en anden CSS-værdi. Inde i Master Addons Widget Builder, Select er arbejdshesten for alt med en håndfuld navngivne varianter. Layout stilarter, hover effekter, sorteringsrækkefølger, den slags beslutning.

Vælg optionsværdier er det naturlige brændstof til Betingelser: andre kontrolelementer kan kun vises, når en bestemt indstilling er valgt. De samme værdier fungerer i Twig-syntaks skabelon motor med checks som {% if layout == "card" %}, så én dropdown kan skifte både panelet og markeringen.

En detalje former hvert mønster i denne doc. Den værdi, din skabelon modtager, er indstillingens nøgle, en kort slug, du vælger, ikke den menneskelæsbare etiket, brugeren ser. Nøgler går ind i klassenavne og sammenligninger; etiketter bliver i panelet.

Hvad feltet Vælg gør #

• Gengiver en standard dropdown i Elementor-panelet bruger de samme native select-kontrolkernewidgets.
• Holder én værdi fra et fast sæt du definerer som nøgle- og etiketpar.
• Feeds din skabelon den valgte nøgle, klar til modifikatorklasser eller {% if %} blocks.
• Drives Betingelser på andre betjeningselementer, så at vælge “Boxed” kan afsløre en grænse-farve felt, som “Minimal” skjuler.
• Understøtter et responsivt flag, lade brugeren vælge en anden mulighed pr. enhed.

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 prissætning tabel widget med en “Layout Style” dropdown tilbyder Boxed, Minimal, og Skitseret varianter.

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

Åbn din widget i Widget Builder editor og se gennem felterne panelet til venstre. Select sidder med de andre valgfelter.

Træk den ind i en sektion under Content eller Style fane. En layoutskifter som vores hører til i Style; et indholdsrelateret valg, som en sorteringsrækkefølge, passer til Content. Når den lander, åbnes feltets muligheder til venstre.

Vælg feltindstillinger forklaret #

• Etiket: teksten vist ved siden af dropdown i Elementor, for eksempel “Layout Style”.
• Navn: den entydige identifikator for feltet, bogstaver, tal og understregninger kun. Din skabelon henviser til dette navn, for eksempel layout_style.
• Options: selve valgene, hver en nøgle plus en etiket. Nøglen er, hvad din skabelon modtager; etiketten er, hvad brugeren læser. Hold nøgler korte og CSS-sikre: boxed, minimal, outlined.
• Standard: den valgte nøgle, når widgetten først falder på en side. Indstil den til din flotteste variant.
• Responsive: tilføjer enhedsikonet, så valget kan variere pr. brudpunkt.
• Beskrivelse, Vis etiket, Separator: standardvisningsindstillingerne plus betingelser længere nede for kun at vise feltet, når et andet kontrolelement har en bestemt værdi.

Tilslut Vælg til din skabelon #

Select udskriver sin værdi med et almindeligt token. Den værdi er altid den key, aldrig etiketten. To mønstre dækker næsten hver brug.

Modifikatorklasse. Udskriv nøglen direkte i en klasseattribut, og lad din CSS-fane gøre resten:

<div class="pricing layout--{{ layout_style }}">
  ...
</div>

Picking “Boxed” gengiver layout--boxed, og en regel som .layout--boxed { border: 1px solid #e2e2e2; } overtager. Tre varianter bliver til tre korte CSS-blokke. HTML'en forgrener sig aldrig.

Betinget markup. Når varianter har brug for forskellige HTML, ikke bare forskellige stilarter, sammenligne med nøglen:

{% if layout_style == 'boxed' %}
  <div class="pricing-frame"> ... </div>
{% elseif layout_style == 'outlined' %}
  <div class="pricing-outline"> ... </div>
{% else %}
  <div class="pricing-plain"> ... </div>
{% endif %}

Pas på én ting her: sammenligningen skal bruge nøglen. {% if layout_style == 'boxed' %} virker, mens {% if layout_style == 'Boxed Layout' %} lydløst aldrig matcher, og du får ingen advarsel om det. Hvis en betinget nægter at fyre, kontrollere nøglen stavning, før du har mistanke om noget andet.

Brug kontrolelementet Vælg i Elementor #

Slip din brugerdefinerede widget på en side i Elementor. Hvis siden allerede var åben, før du gemte widgetten, genindlæse editoren først, da Elementor holder på den gamle kontrol config, indtil du gør. Vælg widget og dropdown vises i sit panel under etiketten, du har indstillet, med standardindstillingen forudvalgt.

Vælg en anden indstilling, og forhåndsvisningen opdateres med det samme. Modifikatorklassen ændres, din CSS-variant starter, og eventuelle kontroller, der er betinget af dette felt, vises eller forsvinder for at matche.

Almindelige brugstilfælde #

• Layoutvarianter såsom boxed, minimal, og skitserede kort stilarter fra én widget.
• Forindstillinger for svæve og animation hvor hver nøgle kortlægges til en CSS-klasse med sin egen overgang.
• Sorter og bestil valg for widgets i listestil, nyeste først eller alfabetisk.
• Overskriftsmærkeplukkere der bytter en h2 ud med en h3 gennem en betinget blok.
• Tilstandsdrivere der viser eller skjuler hele grupper af andre felter baseret på den valgte tast.

Tips til at arbejde med feltet Vælg #

• Nøgler er til kode, etiketter er til mennesker. Brug snegle som boxed som nøgler og gem den venlige formulering til etiketten.
• Hold tasterne CSS-sikre. Små bogstaver, cifre og bindestreger eller understregninger udskrives rent i klassenavne.
• Sammenlign med nøglen, aldrig etiketten. Dette er den mest almindelige årsag til, at en Select conditional aldrig matcher.
• Foretrækker modifikatorklasser frem for konditionaler når kun stylingen ændres. Skabelonen forbliver én blok, og varianterne lever i CSS.
• Brug Select til at køre Betingelser. Sammen med Switcheren er det den sædvanlige kontrol til at afsløre eller skjule andre felter.
• Indstil en fornuftig standard så widgetten ser bevidst ud i det øjeblik, den bliver droppet.

Ofte stillede spørgsmål #

Indpakning #

Feltet Widget Builder Select gør navngivne varianter til et valg med ét klik. Definer taster og etiketter, udskriv tasten i en modifikatorklasse eller en {% if %} blok, og hver layoutbeslutning flyttes ind i Elementor-panelet. Når listen bliver lang, eller et valg ikke er nok, skal du gå op til Vælg2 felt. Udforsk resten af Master Addons widgets og udvidelser, og se den prissætning side for hvad hver plan indeholder.