Select

Feltet Vælg tilføjer en dropdown til en brugerdefineret widget, du bygger med Master Addons Widget Builder. Du indstiller en fast liste over valg, editoren vælger en i Elementor, og din skabelon ændres, så den matcher: en anden layoutklasse, et ekstra badge, en anden blok af markup. Det er det felt, der skal bruges til navngivne varianter som kortstile, badgetyper eller sorteringsordrer.

Select er et af de felter, du kan bruge i den gratis versions Widget Builder. Det gratis plugin indeholder en begrænset Widget Builder, og det fulde sæt af felter leveres med Master Addons Pro.

Hvad feltet Vælg gør #

• Tilføjer en standard dropdown til din widgets panel i Elementor.
• Lader editoren vælge én mulighed fra den liste, du definerer.
• Gemmer optionens key (for eksempel outlined), ikke den etiket redaktøren ser.
• Udskriver den tast, uanset hvor du placerer dens token, f.eks {{ layout_style }}, så du kan bruge det som en klasse eller tjekke det med {% if %}.

Ny hos bygherren? Læs den Widget Builder oversigt først, så kom tilbage med en widget åben.

Før du starter #

• WordPress med Elementor installeret og aktiv.
• Master Addons til Elementor installeret og aktiv. Den installationsvejledning covers opsætning.
• En widget åben i Widget Builder. Eksemplet i denne vejledning er en “Plankort” widget med to Vælg felter: layout_style (Boxed, Minimal, Outlined) på fanen Style og badge (Ingen badge, Mest populære, Nye) på fanen Indhold.

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

1. Gå til Master Addons > Widget Builder og åbn din widget.
2. Vælg den fane, indstillingen hører til, og tilføj en sektion. Et kig-og-føl-valg som Layout Style passer til Style fane, for eksempel i en “Card Style” sektion.
3. Type select i feltsøgefeltet til venstre. To felter kommer op: Vælg og Vælg2.
4. Drag Select ind i sektionen. Klik på blyanten på feltet for at åbne dens indstillinger.

Select har ét valg fra en kort liste. Hvis redaktører skal søge på en lang liste eller vælge mere end én mulighed, skal du bruge Vælg2 i stedet, som er et Pro-felt.

Vælg feltindstillinger forklaret #

• Etiket: teksten ved siden af dropdown i Elementor, for eksempel “Layout Style”.
• Navn: feltets unikke id og navnet på dets token. Brug kun bogstaver, tal og understregninger, f.eks layout_style.
• Beskrivelse: et tip vist under dropdown i Elementor.
• Options: en række pr. valg. Den venstre boks er den key din skabelon modtager, og den rigtige boks er label redaktører se. Brug det røde kryds til at fjerne en række og plusknappen til at tilføje en.
• Standardværdi: indstillingen en ny kopi af widget starter med. Dropdownen viser etiketter, men feltet gemmer nøglen.

Et nyt Vælg felt kommer med tre prøverækker, value-1 til value-3 med etiketterne Mulighed 1 til Mulighed 3. Udskift dem med dine egne nøgler og etiketter, før du bruger widgetten.

Hold taster korte, små bogstaver og uden mellemrum, som f.eks boxed eller most_popular. De ender i klassenavne og sammenligninger. Hvis du lader Standardværdi være tom, starter widgetten på den første indstilling på listen.

Under Fælles indstillinger finder du Vis etiket, Etiketblok, Separator og Betingelser, der fungerer på samme måde som på andre felter.

Brug valget i din skabelon #

Plan Card HTML bruger begge Vælg felter på de to mest almindelige måder:

<div class="plan plan--{{ layout_style }}">
  {% if badge == 'popular' %}
  <span class="plan-badge">Most Popular</span>
  {% elseif badge == 'new' %}
  <span class="plan-badge plan-badge--new">New</span>
  {% endif %}
  <p class="plan-name">{{ plan_name }}</p>
  <p class="plan-price">{{ plan_price }}<span>/month</span></p>
  <a class="plan-button" href="#">Get started</a>
</div>

Modifikatorklasser #

plan--{{ layout_style }} bliver plan--boxed, plan--minimal eller plan--outlined. Hver variant er så en kort regel i CSS-panelet, og HTML forbliver den samme:

.plan--boxed { background: #fff; box-shadow: 0 12px 32px rgba(29, 27, 76, .14); }
.plan--minimal { background: transparent; }
.plan--outlined { background: #fff; border: 2px solid #7c3aed; }

Forskellig markup pr. mulighed #

Når en mulighed har brug for en anden HTML, skal du sammenligne nøglen med {% if %}. {% elseif %} og {% else %} arbejde også. I eksemplet, none matcher ingen af checkene, så der udskrives ikke noget badge.

Sammenlign altid med nøglen. {% if badge == 'popular' %} kampe, mens {% if badge == 'Most Popular' %} gør det aldrig og giver ingen fejl. Hvis en check aldrig udløses, skal du først se på tastens stavemåde.

Vælger og responsiv kontrol #

• Vælger skriver altid color: {{VALUE}}; for dette felt, og der er ingen boks til at ændre egenskaben. Med nøgler som boxed reglen gør ingenting. Det hjælper kun, når dine nøgler er farver: i vores tests, nøgler som f.eks #7c3aed og #0ea5e9 med en Selector of .plan-price farvede prisen. For alt andet, lad Selector være tom og brug klasser.
• Responsive Control lader redaktører vælge en anden indstilling pr. enhed. Disse valg pr. enhed når kun siden gennem vælgerreglen ovenfor. Tokenet udskriver skrivebordsvalget, så lad Responsive Control være slukket, når du bruger værdien i din skabelon.

Brug kontrolelementet Vælg i Elementor #

Tilføj widget til en side, eller genindlæs editoren, hvis siden allerede var åben. Vælg widget og åbn fanen, hvor du placerede feltet. Dropdownen viser dine etiketter, med standardindstillingen allerede valgt. Vælg en anden indstilling og forhåndsvisningsopdateringerne.

Her er det samme Plankort med tre kombinationer af Layout Style og Badge:

Almindelige brugstilfælde #

• Kort-, knap- eller sektionsstilvarianter.
• Badges eller bånd såsom udsalg, nye eller mest populære.
• Valg af overskriftsmærke, billedforhold eller kolonnetælling.
• Sorteringsrækkefølge eller datakilde for en listewidget.

Tips til at arbejde med feltet Vælg #

• Beslut dig for nøgler, før redaktører bruger widgetten. Du kan omdøbe etiketter senere, men ændring af en tast bryder sider, der allerede har gemt den gamle.
• Tilføj en “ingen” mulighed når elementet er valgfrit, som badget i eksemplet.
• Indstil en standardværdi det ser godt ud i sig selv, så en nyligt tilføjet widget er klar til brug.
• Kun to eller tre muligheder med tydelige ikoner? The Vælg felt viser dem som knapper i stedet for en dropdown.
• Bare tændt eller slukket? Brug den Switcher field.

Ofte stillede spørgsmål #

Indpakning #

Tilføj et Vælg felt, erstat prøverækkerne med korte taster og tydelige etiketter, og indstil en standard. Udskriv derefter tasten som en klasse for stilvarianter, eller kontroller den med {% if %} når opmærkningen ændres. For søgbare eller flere valg, se Vælg2, og kontrollere prissætning for hvad hver plan indeholder.