Slider

The Skyderfelt sætter en træk-til-sæt-områdekontrol i din brugerdefinerede widgets panel, den samme som Elementor bruger til mellemrum, bredder og grænseradius på tværs af sine egne widgets. Inde i Master Addons Widget Builder, du indstiller et minimum, et maksimum, et trin og de enheder, brugeren kan vælge fra. Den, der redigerer widgetten i Elementor, trækker derefter et håndtag i stedet for at skrive rå CSS-værdier.

Slider-feltet understøtter Betingelser som enhver kontrol, og da dens værdi er numerisk, er Twig-syntaks skabelon motor lader dig forgrene dig på det med sammenligninger som {% if columns >= 3 %}. Begge guider dækker opsætning og begrænsninger.

Værdien en Slider producerer er ikke et almindeligt tal. Det er et par: en størrelse og en enhed. Den ene detalje bestemmer, hvordan du forbinder feltet til dit stylesheet, så denne doc bruger det meste af sin tid der.

Hvad Slider-feltet gør #

• Gengiver en rækkeviddeskyder med et trækbart håndtag og et numerisk input ved siden af, der matcher Elementors oprindelige skyderkontroller.
• Tilbyder en enhed switcher når du tillader mere end én enhed, så den samme kontrol kan fungere i px, % eller em.
• Gemmer en størrelse og en enhed sammen som én værdi læser dit CSS-panel med priknotation.
• Understøtter responsive værdier, lade brugerne indstille en anden størrelse pr. enhed fra enhedsikonet.
• Accepterer dynamiske værdier og kan skrive CSS gennem Elementors vælgermekanisme som et alternativ til CSS-panelet.

Ny til at bygge widgets? Læs den Widget Builder oversigt først; denne doc antager, at du allerede har en widget åben i editoren.

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 et teamkort gitter, hvis .team-row container har brug for et brugerjusterbart mellemrum mellem kortene.

Sådan tilføjes et Slider-felt #

Rul feltpanelet til venstre i Widget Builder-editoren, indtil du finder Slider felt, opført med de andre CSS-værdifelter såsom Dimensioner.

Træk den ind i en sektion under Style tab, hvor størrelseskontroller normalt bor, selvom indhold og avanceret også virker. Når det lander, åbnes feltets muligheder til venstre.

Skyderfeltindstillinger forklaret #

• Etiket: teksten ved siden af kontrolelementet i Elementor, for eksempel “Card Gap”.
• Navn: den unikke identifikator, som din CSS refererer til, bogstaver, tal og kun understreger, for eksempel my_gap.
• Standard: startværdien, gemt som en størrelse plus en enhed.
• Min, Max, Trin: det område, håndtaget dækker, og hvor langt hvert træktilvækst bevæger sig. En mellemrumskontrol kan køre 0 til 100 i trin på 1.
• Størrelse Enheder: de enheder, brugeren kan skifte mellem, såsom px, % og em. En enhed skjuler switcheren; flere viser det.
• Responsive: tilføjer enhedsikonet, så hvert breakpoint beholder sin egen værdi.
• Dynamisk og Vælgere: dynamisk tag-understøttelse og Elementors vælgermekanisme dækket nedenfor.
• Beskrivelse, Vis etiket, Separator og betingelser er de samme visningsmuligheder, som hvert felt bærer.

Tilslut skyderen til din CSS #

En Sliders værdi er et array med to taster: size og unit. Udskrivning af feltnavnet på sine egne udgange intet, fordi der ikke er en enkelt værdi at udskrive. I CSS-panelet skal du altid skrive begge dele med punktnotation:

.team-row {
  gap: {{ my_gap.size }}{{ my_gap.unit }};
}

En værdi på 24 med px valgt gengiver som gap: 24px;. Ændre enhedsomskifteren til %, og den samme regel bliver gap: 24%; uden at røre ved skabelonen.

Pas på: {{ my_gap }} udskriver på egen hånd en tom streng. Hvis din regel gengives som gap: ; og layoutet ignorerer kontrollen, den manglende .size og .unit er næsten altid hvorfor. Den samme stilhed følger et omdøb: ændre feltets Navn senere og de gamle tokens holde gengivelse, bare med intet i dem, så opdatere CSS panelet i samme møde.

Vælgerne alternativ #

Sliders arbejder også med Elementors vælgermekanisme, som skriver CSS for dig i stedet for at gå gennem CSS-panelet. For en skyder injicerer Elementor en bar værdi i stedet for en fuld erklæring, så bygherrens almindelige vælgerfelt alene ikke producerer en brugbar regel. En brugerdefineret vælgerpost skal bære den fulde egenskab ved at bruge Elementors egne pladsholdere:

'{{WRAPPER}} .team-row' => 'gap: {{SIZE}}{{UNIT}};'

For de fleste widgets er CSS-panelets token den enklere rute; nå ud til vælgerposter, når du vil have Elementor til at administrere outputtet.

Brug Slider-kontrolelementet i Elementor #

Tilføj din brugerdefinerede widget til en side i Elementor. Hvis siden allerede var åben, skal du genindlæse editoren først, da en forældet fane bliver ved med at vise det gamle panel. Skyderen vises i widgetens panel med din etiket, håndtaget, det numeriske input og enhedsomskifteren, hvis du tillod mere end én enhed.

Træk i håndtaget, eller skriv et tal, og forhåndsvisningen følger med det samme. Med Responsive tændt skifter enhedsikonet kontrollen mellem skrivebords-, tablet- og mobilværdier, så et 40px skrivebordsgab kan skrumpe til 16px på telefoner fra samme felt.

Almindelige brugstilfælde #

• Gitter- og flexgab mellem kort, kolonner eller gallerielementer.
• Elementbredder og -højder, såsom en billedstørrelse eller dividerlængde, med en % mulighed for flydende layout.
• Grænseradius på kort og knapper, når én ensartet radius er nok.
• Ikon og skriftstørrelse hvor en em-enhed opbevarer ting i forhold til omgivende tekst.
• Afstandsforskydninger som afstanden mellem et badge og hjørnet, det sidder i.

Tips til at arbejde med feltet Slider #

• Print altid begge dele. {{ my_gap.size }}{{ my_gap.unit }} er hele forbindelsen; det blottede feltnavn giver dig en tom streng.
• Match Min, Max, og Træd til ejendommen. Et 0–100 område i trin på 1 passer til et mellemrum; en radiuskontrol behøver muligvis kun 0–50.
• Tilbyd kun de enheder, der giver mening. En kontrol, der kun er px, er klarere end en, hvor % producerer ødelagte layouts.
• Hold et tilbagefald i CSS-panelstrukturen. Skriv reglen, så widgetten stadig lægger sig fornuftigt ud ved standardværdien ved første drop.
• Slå Responsive til for layoutværdier. Mellemrum og bredder har næsten altid brug for en strammere mobil indstilling.
• Foretræk CSS-panelets token over feltet Vælger. Feltet almindelig vælger injicerer kun en nøgen værdi for skydere, hvilket ikke er en fuldstændig erklæring.

Ofte stillede spørgsmål #

Indpakning #

Feltet Widget Builder Slider forvandler en hvilken som helst enkelt CSS-længde i din widget til et kontrolelement, som editoren kan trække: navngiv feltet, bind området og udskriv {{ name.size }}{{ name.unit }} i CSS-panelet. Det parrer naturligt med Dimensioner felt når en widget har brug for firesidet afstand sammen med enkelte værdier. Udforsk resten af Master Addons widgets og udvidelser, og se den prissætning side for hvad hver plan indeholder.