Dimensioner

Feltet Dimensioner tilføjer Elementors afstandskontrol med fire kasser (øverst, højre, nederst og venstre, med et linkikon og en enhedsmenu) til en brugerdefineret widget, der er bygget med Master Addons Widget Builder. Brug det, når polstring, margen, kantbredde eller hjørneradius skal indstilles fra Elementor-panelet i stedet for fast i din CSS.

Dimensioner 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 feltet Dimensioner gør #

• Den viser fire talbokse i Elementor-panelet. Med linkikonet tændt fylder det alle fire at skrive i én boks.
• En enhedsmenu lader editorer skifte mellem de enheder, du tillader, såsom px, em og %.
• Du kan skjule sider, du ikke har brug for. Et knappolstringsfelt viser måske kun Højre og Venstre.
• Elementor skriver CSS for dig gennem feltets CSS Selectors-rækker, inklusive separate værdier pr. enhed, når Responsive Control er tændt.

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 “Pricing Card” widget med en price-card kasse og en price-btn knap og tre dimensionsfelter: Kortpolstring, kortradius og knappolstring.

Sådan tilføjes et Dimensions-felt #

1. Gå til Master Addons > Widget Builder og åbn din widget.
2. Klik på Style tab og tilføj en sektion, for eksempel “Kortafstand”.
3. Type dimensions i feltsøgefeltet til venstre.
4. Drag Dimensioner ind i sektionen. Dens indstillinger åbnes i venstre sidebjælke.

Dimensioner feltindstillinger forklaret #

Her er feltet Kortpolstring:

• Label er teksten over boksene i Elementor, for eksempel “Card Padding”.
• Name er feltets unikke ID. Kun bogstaver, tal og understregninger.
• Description vises under kontrol i Elementor.
• Tilladte dimensioner har fire pileknapper til top, højre, bund og venstre. Klik på en pil for at slå den side fra. I Elementor viser en side, der er slukket, som en grå boks, der ikke kan redigeres.
• Ejendomstype tilbyder Custom, Margin, Padding, Border Width og Border Radius. Vælg en, og bygherren udfylder en CSS Selectors-række for den pågældende egenskab (mere om dette nedenfor). Border Width tilføjer også border-style: solid.
• Størrelse Enheder lister enhederne redaktører kan vælge. Et nyt felt tillader px, %, em, rem, vh og vw. Fjern dem, der ikke giver mening for dit design.
• Standardværdi har fire bokse til startværdierne øverst, højre, nederst og venstre.

Feltet Knappolstring behøver kun venstre og højre, så de øverste og nederste pile er slået fra:

Længere nede, Responsive Control tilføjer enhedsikonet, så desktop, tablet og mobil kan have forskellige værdier. Vis etiket, separator og betingelser fungerer, som de gør på andre felter.

Forbind feltet med CSS Selectors #

Hver CSS-vælgere række har en CSS Selector (hvilket element til stil) og CSS-egenskaber (reglen for at skrive). Når du vælger Polstring som Ejendomstype, starter rækken sådan ud:

CSS Selector:   {{WRAPPER}}
CSS Properties: padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};

{{WRAPPER}} på sin egen betyder hele widget. Ændre det til det element, du ønsker, som f.eks .price-card. Du kan tage af sted {{WRAPPER}} ud, fordi bygherren tilføjer det foran din vælger, så reglen forbliver inde i denne widget.

I CSS-egenskaber, {{TOP}}, {{RIGHT}}, {{BOTTOM}} og {{LEFT}} erstattes med tallene fra de fire kasser, og {{UNIT}} med den valgte enhed. Med egenskabstypen indstillet til Brugerdefineret skriver du selv reglen. Feltet Knappolstring bruger kun to sider:

CSS Selector:   .price-btn
CSS Properties: padding-right: {{RIGHT}}{{UNIT}}; padding-left: {{LEFT}}{{UNIT}};

Klik Tilføj vare at anvende den samme værdi på et andet element med en anden række.

To ting at vide. Singlen Vælger boks nær bunden af de almindelige indstillinger gør intet for et Dimensioner felt, så brug altid CSS Selectors rækkerne. Og at vælge en Egenskabstype udfylder i CSS Properties boksen for dig, så vælg det først og tjek rækkerne igen, hvis du skifter det senere.

Brug værdierne i din skabelon i stedet #

Du kan også udskrive værdierne direkte i HTML- eller CSS-fanen. Feltet holder top, right, bottom, left og unit, så skriv hver side efterfulgt af enheden:

.price-card {
  padding: {{ card_padding.top }}{{ card_padding.unit }} {{ card_padding.right }}{{ card_padding.unit }} {{ card_padding.bottom }}{{ card_padding.unit }} {{ card_padding.left }}{{ card_padding.unit }};
}

En bar {{ card_padding }} udskriver intet. For de fleste widgets er CSS Selectors-rækkerne det bedre valg, da Elementor skriver en separat regel for hver enhed, når Responsive Control er tændt.

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

Brug kontrolelementet Dimensioner i Elementor #

Føj widgetten til en side, eller genindlæs editoren, hvis siden allerede var åben. Vælg widgetten, og åbn Style fane. Hvert Dimensioner felt viser fire bokse mærket Top, Højre, Bund og Venstre, link ikonet, og en enhed menu i øverste højre hjørne. Knap Padding viser Top og Bund grånet ud.

Skriv et tal og kortopdateringerne med det samme. Klik på linkikonet for at fjerne sammenkædningen mellem siderne og give hver enkelt sin egen værdi, som Card Padding gør her med 64 på toppen og bunden og 56 på siderne. Brug enhedsmenuen til at skifte mellem de enheder, du har tilladt.

Almindelige brugstilfælde #

• Indvendig polstring til kort, æsker og bannere.
• Margener mellem dele af en widget, såsom mellemrummet under en overskrift.
• Hjørneradius på kort, billeder og knapper ved hjælp af egenskabstypen Border Radius.
• Venstre og højre knappolstring, med top- og bundsiden slået fra.
• Kantbredder pr. side ved hjælp af egenskabstypen Kantbredde.

Tips til at arbejde med feltet Dimensioner #

• Skift altid CSS Selector fra {{WRAPPER}} til dit element. Venstre som det er, afstanden gælder for hele widget wrapper.
• Trim størrelsesenheder til dem, du vil have redaktører til at bruge. px og em dækker de fleste mellemrum.
• Sluk sider, der ikke gælder. Det forhindrer editorer i at indstille værdier, der ikke har nogen effekt.
• Indstil en standardværdi, der matcher dit design, så widgetten ser rigtig ud, så snart den er tilføjet.
• Vær forsigtig med % for polstring og margin. Browsere beregner procentvis polstring ud fra elementets bredde, selv for top og bund.
• For en enkelt værdi, såsom et mellemrum eller ikonstørrelse, Skyderfelt er enklere.

Ofte stillede spørgsmål #

Indpakning #

Vælg en egenskabstype, peg CSS Selectors-rækken mod dit element, trim enhederne og siderne, og indstil en fornuftig standard. Redaktører får derefter den samme afstandskontrol, som de kender fra Elementors egne widgets. For resten af boksstylingen, se Border og Baggrund felter, og tjek prissætning for hvad hver plan indeholder.