Slider

Feltet Slider føjer Elementors træk-til-sæt-områdekontrol til en brugerdefineret widget, der er bygget med Master Addons Widget Builder. Redaktører trækker et håndtag eller skriver et tal, vælger en enhed, og værdien går ind i din CSS. Brug den til huller, bredder, højder, ikonstørrelser, skriftstørrelser eller noget andet, der er et tal plus en enhed.

Slider er et Pro-felt. Det gratis plugin indeholder en begrænset Widget Builder, og det fulde sæt felter leveres med Master Addons Pro.

Hvad Slider-feltet gør #

• Den viser en skyder med en nummerboks og en enhedsmenu i panelet Elementor.
• Du indstiller minimum, maksimum og trin plus en startværdi.
• Værdien er et tal og en enhed sammen, såsom 24 og px.
• Du forbinder den til din CSS med en CSS Selectors-række, eller udskriver den i HTML- eller CSS-fanen med to tokens.

Hvis du ikke har bygget en widget endnu, så læs Widget Builder oversigt first.

Før du starter #

• WordPress med Elementor installeret og aktiv.
• Master Addons til Elementor og Master Addons Pro, begge aktive. Den installationsvejledning covers opsætning.
• En widget åben i Widget Builder. Eksemplet i denne vejledning er en “Team Grid” widget med to skydere: Kortgab for mellemrummet mellem kort og Avatar Størrelse for de runde initialer.

Sådan tilføjes et Slider-felt #

1. Gå til Master Addons > Widget Builder og åbn din widget.
2. Klik på Style tab og tilføj et afsnit, for eksempel “Grid Layout”.
3. Type slider i feltsøgefeltet til venstre.
4. Drag Slider ind i sektionen. Dens indstillinger åbnes i venstre sidebjælke.

Skyderfeltindstillinger forklaret #

• Label er teksten over skyderen i Elementor, for eksempel “Card Gap”.
• Name er feltets unikke ID og starten på dets tokens, så card_gap giver {{ card_gap.size }}. Kun bogstaver, tal og understregninger.
• Description vises under skyderen i Elementor.
• Min værdi, Max værdi og Step indstil rækkevidden, og hvor langt hvert træk i håndtaget går. Card Gap bruger 0 til 80 i trin af 2.
• Standardværdi er startnummer og enhed, indstillet med sin egen lille skyder og enhedsmenu.

Skriv Min-, Max- og Step-værdierne, selvom boksene allerede viser 0, 100 og 1. Bokse, du aldrig rører ved, gemmes ikke, og en skyder, hvor ingen af dem er gemt, falder tilbage til Elementors intervaller: 0 til 1000 for px, 0 til 100 for % og 0 til 10 for em og rem. Når du indstiller dem, bruges det samme interval for hver enhed, så 0 til 80 gælder for em såvel som px.

Der er ingen indstilling for, hvilke enheder der vises. Redaktører kan vælge px, %, em og rem. Længere nede, Responsive Control tilføjer enhedsikonet, så desktop, tablet og mobil kan have forskellige værdier.

Tilslut skyderen med CSS Selectors #

Rul til CSS-vælgere og klik Tilføj vare. Den nye række kommer fyldt med et eksempel (.text-1, .text-2 og color: {{VALUE}};), så udskift begge kasser:

CSS Selector:   .team-grid
CSS Properties: gap: {{SIZE}}{{UNIT}};

{{SIZE}} erstattes med nummeret og {{UNIT}} med den valgte enhed, så 24 px bliver gap: 24px;. Du behøver ikke {{WRAPPER}} i vælgeren, fordi bygherren tilføjer det for dig. Tilføj flere rækker for at bruge den samme værdi på andre elementer.

Brug disse rækker frem for singlen Vælger boks nederst på sidebjælken. Den boks har ikke plads til en CSS-egenskab, så den kan ikke skrive en arbejdsregel for en skyder.

Brug værdien i din skabelon i stedet #

Du kan også udskrive værdien i HTML- eller CSS-fanen. Skriv størrelsen og enheden som to tokens ved siden af hinanden. Skyderen Avatarstørrelse indstiller avatarbredden og -højden på denne måde:

.team-avatar {
  width: {{ avatar_size.size }}{{ avatar_size.unit }};
  height: {{ avatar_size.size }}{{ avatar_size.unit }};
}

En bar {{ avatar_size }} udskriver ingenting. Du kan også sammenligne tallet i en tilstand, for eksempel {% if card_gap.size >= 40 %}. Når Responsive Control er slået til, skal du bruge en CSS Selectors-række, da Elementor så skriver en separat regel for hver enhed.

Klik Gem indstillinger når du er færdig.

Brug Slider-kontrolelementet i Elementor #

Føj widgetten til en side, eller genindlæs editoren, hvis siden allerede var åben. Vælg widgetten, og åbn Style fane. Hver skyder viser et håndtag, en nummerboks og en enhedsetiket.

Træk i håndtaget, eller skriv et tal, og widgetten opdateres med det samme. Klik på enhedsetiketten for at skifte mellem px, %, em og rem.

Her er gapet hævet til 48px og avatarerne til 96px:

Almindelige brugstilfælde #

• Mellemrum mellem kort, kolonner og listeelementer.
• Bredde, maks. bredde eller højde på et billede, kort eller en sektion.
• Ikon-, avatar- og badgestørrelser.
• Skriftstørrelse eller linjehøjde for ét element.
• Kanteradius eller kantbredde, når alle sider deler én værdi.

Tips til at arbejde med feltet Slider #

• Skriv altid Min, Max og Step, så skyderen har en fornuftig rækkevidde.
• Vælg et område, der passer til alle enhedsredaktører, der måtte vælge. 0 til 80 er fint til px, men meget stort til em.
• Bevar en basisværdi for egenskaben på fanen CSS, f.eks gap: 24px;, så widgetten ser lige før nogen rører skyderen.
• Erstat eksempelteksten i en ny CSS Selectors-række. Venstre som den er, er rækken målrettet klasser, som din widget ikke har.
• For værdier med fire sider, såsom polstring eller margen, skal du bruge Dimensioner felt.

Ofte stillede spørgsmål #

Indpakning #

Tilføj feltet Skyder, skriv Min, Max og Step, indstil en standard, og forbind den med en CSS Selectors-række som f.eks gap: {{SIZE}}{{UNIT}};. Brug den .size og .unit tokens, når værdien hører hjemme i din HTML- eller CSS-fane. For andre størrelseskontroller, se Dimensioner og Typografi felter, og tjek prissætning for hvad hver plan indeholder.