The Visual Choice-felt gengiver et sæt billedkort i din widgets panel, et pr. valgmulighed, og brugeren vælger ved at klikke på et miniaturebillede. Det er layout-picker-kontrollen. Hvor et Vælg tilbyder ord og et Vælg tilbyder ikoner, viser Visual Choice et lille billede af, hvordan hver variant faktisk ser ud. Inde i Master Addons Widget Builder, der gør det den naturlige pasform til grid-versus-liste beslutninger og enhver variant et screenshot forklarer hurtigere end et navn.
Visual Choice optionsværdier tilsluttes direkte Betingelser, lade andre kontroller følge det valgte layout, og ind i Twig-syntaks skabelon motor, hvor {% if style == "grid" %} skifter markeringen, så den passer. Begge hjælpelinjer dækker detaljerne.
Skabelonkontrakten matcher de andre valgfelter: værdien er den valgte options nøgle. Det, der adskiller Visual Choice, er en anden ledningsstil, præfiksklassen, som ændrer en klasse på widget-indpakningen, så din CSS kan skifte layout, uden at skabelonen nogensinde nævner feltet.
Hvad Visual Choice feltet gør #
- Gengiver klikbare billedkort i Elementor-panelet er hver indstilling defineret af en tast, en titel og et billede.
- Holder én nøgle fra det definerede sæt, det kort, der aktuelt er valgt.
- Lægger kort ud i kolonner, tre pr. række som standard, justerbar gennem indstillingen Kolonner.
- Feeds skabeloner den valgte nøgle for modifikatorklasser og
{% if %}blocks. - Indstiller eventuelt en indpakningsklasse gennem præfiksklasseindstillingen, så CSS alene kan skifte layout.
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 teammedlemmer widget med to layout varianter, en 3-kolonne gitter og en stablet liste, plukket gennem miniaturekort.
Sådan tilføjes et Visual Choice-felt #
Find Visual Choice i feltpanelet til venstre for Widget Builder-editoren, grupperet med de andre valgfelter.
Træk den ind i en sektion under Content eller Style fane. Layoutvælgere sidder normalt først i panelet, øverst på fanen Indhold, så redaktører vælger en struktur, før de udfylder indhold. Når feltet lander, åbnes dets muligheder til venstre.
Visual Choice feltindstillinger forklaret #
- Etiket: teksten vist over kortene i Elementor, for eksempel “Layout”.
- Navn: den unikke identifikator for feltet, bogstaver, tal og understregninger kun f.eks
team_layout. - Options: hver mulighed er en nøgle plus en titel og et billede. Billedet bliver det klikbare kort; titlen mærker det. Nøgler forbliver korte og CSS-sikre:
grid,list. - Kolonner: hvor mange kort sidder der pr. række i panelet, 3 som standard. To store kort læses bedre som 2 kolonner.
- Præfiks Klasse: en klassestamme Elementor tilføjer den valgte nøgle til og placerer på widget-indpakningen. Med
team-layout-og nøglengrid, indpakningen bærerteam-layout-grid. - Standard: den valgte nøgle, når widgetten først falder på en side.
- Beskrivelse, Vis etiket, Separator: standardvisningsindstillingerne plus Betingelser for kun at vise feltet, når et andet kontrolelement har en bestemt værdi.
Tilslut det visuelle valg til din widget #
To ledningsføring stilarter. Vælg en pr. felt.
Stil A: skabelonmønstre. Tokenet udskriver den valgte nøgle, så alt fra Vælg felt gælder. En modifikatorklasse:
<div class="team team--{{ team_layout }}">
...
</div>eller en strukturel gren, når varianterne har brug for forskellig markup:
{% if team_layout == 'list' %}
<ul class="team-list"> ... </ul>
{% else %}
<div class="team-grid"> ... </div>
{% endif %}Stil B: præfiksklassen. Udfyld indstillingen Præfiksklasse, f.eks team-layout-, og Elementor skriver team-layout-grid eller team-layout-list på widgetens indpakning, når brugeren klikker på kort. Din CSS målretter derefter den kombinerede klasse:
.team-layout-grid .member { /* grid card rules */ }
.team-layout-list .member { /* stacked row rules */ }Skabelonen refererer aldrig til feltet overhovedet; wrapper-klassen gør skiftet. Dette holder HTML til en enkelt markup-blok og skubber hver variant ind i stylesheet. Når kun præsentationen ændres, er det normalt det renere snit.
Pas på at blande de to stilarter på ét felt. En skabelon betinget, der antager grid mens præfiksklassen samtidigt indstiller team-layout-list er to kilder til sandhed, og de vil drive, normalt måneder senere, når nogen redigerer den ene side og glemmer den anden eksisterer. Beslut om dette felt taler gennem skabelonen eller gennem wrapper klasse, så holde sig til det.
Brug Visual Choice-kontrolelementet i Elementor #
Tilføj din brugerdefinerede widget til en side i Elementor, genindlæser editoren, hvis siden allerede var åben. Kontrolelementet viser dine valgkort i panelet, det valgte er fremhævet.
Klik på et kort, og layoutet vender i forhåndsvisningen, enten gennem din modifikatorklasse eller gennem præfiksklassen på omslaget, uanset hvilken ledning du vælger. Fordi hvert kort viser selve varianten, vælger redaktører det rigtige layout uden at læse en ting.
Almindelige brugstilfælde #
- Gitter versus liste layouts til team-, portefølje- og postwidgets.
- Kortstil varianter hvor miniaturebilleder viser de faktiske boxed, overlay og split designs.
- Overskriftsordninger såsom billed-top, billede-venstre og tekst-kun heltevarianter.
- Slider versus statiske præsentationer af samme indholdssæt.
- Skabelonpakker inde i én widget, tre præ-designet ser en klient plukker fra efter billede.
Tips til at arbejde med Visual Choice feltet #
- Brug rigtige skærmbilleder som valgmuligheder billeder. En lille gengivelse af hver variant slår et abstrakt ikon; kortet er dokumentationen.
- Vælg én ledningsstil pr. felt. Skabelonmønstre eller præfiksklassen, ikke begge, eller de to vil være uenige til sidst.
- Nøgler går ind i klassenavne, så hold dem snegle.
gridoglist, ikke “Grid Layout”. - Afslut præfikset med en separator.
team-layout-plusgridlæser somteam-layout-grid; uden bindestregen får duteam-layoutgrid. - Match kolonner til dit kortantal. To muligheder på tværs af 3 kolonner efterlader et hul; sæt kolonner til 2, og rækken udfyldes.
- Reserver det til visuelle forskelle. Hvis mulighederne er forskellige i adfærd frem for udseende, tjener et Vælg med tydelige etiketter redaktører bedre.
Ofte stillede spørgsmål #
Hvad er Visual Choice-feltet i Master Addons Widget Builder?
Visual Choice-feltet tilføjer en billedkortvælger til en brugerdefineret Elementor-widget. Hver mulighed er en nøgle med en titel og et miniaturebillede; brugeren klikker på et kort, og din widget reagerer, enten gennem den valgte nøgle i skabelonen eller gennem en præfiksklasse placeret på widget-indpakningen.
Hvordan fungerer præfiksklassen?
Du indstiller en klassestamme i indstillingen Præfiksklasse, for eksempel team-layout-. Elementor tilføjer den valgte nøgle og sætter resultatet, som f.eks team-layout-grid, på widgetens indpakningselement. Din CSS målretter den kombinerede klasse for at skifte layout, og skabelonen behøver slet ikke noget token.
Får jeg stadig et skabelon-token?
Ja. {{ team_layout }} udskriver den valgte tast, så modifikatorklasser og {% if team_layout == 'list' %} conditionals fungerer præcis som de gør med en Select. Præfiksklassen er et alternativ, ikke en erstatning.
Hvor mange kort passer i træk?
Tre som standard. Indstillingen Kolonner ændrer det, så to store layoutminiaturebilleder kan sidde som et 2-kolonnepar, og seks små stilprøver kan pakke i 3 kolonner over to rækker.
Hvornår skal jeg bruge Visual Choice i stedet for Select or Choose?
Når et billede identificerer indstillingen hurtigere end et ord eller et ikon. Layout- og designvarianter er det klassiske tilfælde. For korte visuelle sæt, som et eicon dækker, justering eller retning, skal den Vælg felt er lettere; for ordrige eller lange lister skal du bruge et Select.
Bruger værdien indstillingstitlen eller nøglen?
Nøglen, som med hvert valgfelt. Titler og billeder findes for panelet; sammenligninger, modifikatorklasser og præfiksklassesuffikset bruger alle den nøgle, du definerede.
Indpakning #
Widget Builder Visual Choice-feltet lader redaktører vælge et layout ved at se på det: billedkort i panelet, en nøgle i skabelonen og præfiksklassen, når du hellere vil skifte layout fra CSS alene. Det parrer naturligt med Vælg felt. Miniaturebilleder håndtere de store strukturelle picks, ikon knapper de små justeringer. Udforsk resten af Master Addons widgets og udvidelser, og se den prissætning side for hvad hver plan indeholder.
