Dimensioner

The Dimensioner felt giver en brugerdefineret widget den velkendte fire-input afstandskontrol fra Elementors faneblad Avanceret: top, højre, bund og venstre værdier med et linkikon, der holder dem synkroniseret. Inde i Master Addons Widget Builder, det er det felt, du når til, når polstring, margen eller en per-hjørne kantradius skal kunne redigeres fra panelet i stedet for hårdkodet i dit stylesheet.

Som enhver Widget Builder-kontrol understøtter Dimensions Betingelser, så du kan afsløre afstandsmuligheder kun, når de gælder. Token output på tværs af bygherren løber gennem Twig-syntaks skabelon motor; begge vejledninger dækker detaljerne og begrænsningerne.

Den værdi, den gemmer, bærer alle fire sider plus enheden, og dit CSS-panel udskriver hvert stykke ved navn. At få den stavemåde rigtigt er hele tricket, og der er én adfærd, der er specifik for dette felt, der er værd at vide, før du tilslutter det: Bygherrens almindelige vælgerfelt gør intet for en Dimensions-kontrol.

Hvad feltet Dimensioner gør #

• Gengiver fire-input-kontrollen for top, højre, bund og venstre, med linkikonet, der afspejler én værdi til alle sider.
• Gemmer hver side plus enheden i en enkelt værdi læser din CSS med priknotation.
• Tilbyder en enhed switcher på tværs af de enheder, du tillader, såsom px, % og em.
• Kan begrænse hvilke sider der viser gennem den tilladte dimensions mulighed, ned til kun vandrette eller lodrette indgange.
• Understøtter responsive værdier så hvert brudpunkt holder sin egen afstand.

Hvis du ikke har bygget en widget før, Widget Builder oversigt dækker det grundlæggende; start der.

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 prissætning kort widget, hvis .price-card box bør lade redaktører indstille den indvendige polstring.

Sådan tilføjes et Dimensions-felt #

Åbn panelet felter til venstre for Widget Builder-editoren, og find Dimensioner felt, opført med de andre CSS-værdifelter såsom Slider.

Træk den ind i en sektion under Style tab, det sædvanlige hjem for afstandskontroller. Når det lander, åbnes feltets muligheder til venstre.

Dimensioner feltindstillinger forklaret #

• Etiket: teksten ved siden af kontrolelementet i Elementor, for eksempel “Card Padding”.
• Navn: den unikke identifikator, som din CSS refererer til, bogstaver, tal og kun understreger, for eksempel pad.
• Standard: startværdien, der holder top, højre, bund, venstre, enheden, og om siderne begynder at blive forbundet.
• Størrelse Enheder: de enheder, brugeren kan skifte mellem, såsom px, % og em.
• Tilladte dimensioner: hvilke indgange vises. “Alle” viser fire sider; “vandret” viser kun venstre og højre; “lodret” viser kun top og bund; en brugerdefineret liste vælger bestemte sider.
• Responsive: tilføjer enhedsikonet, så desktop, tablet og mobil holder separate værdier.
• Beskrivelse, Vis etiket, Separator og betingelser fungerer på samme måde her som på alle andre felter.

Tilslut værdien Dimensioner til din CSS #

Den lagrede værdi er et array med tasterne top, right, bottom, left, unit, og isLinked. I CSS-panelet skal du stave alle fire sider ud og gentage enheden efter hver enkelt:

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

Med 24 på hver side og px valgt, gengives reglen som padding: 24px 24px 24px 24px;. Fjern sammenkædningen af siderne i panelet, og hver token bærer sit eget nummer. Det samme mønster dækker margin og, side om side pr. hjørne, border-radius. Én CSS-quirk, der er værd at huske, hvis du tilbyder % som en enhed: procentvis udfyldning løser mod elementets bredde, selv for top og bund, og redaktører vil ikke forvente det.

Pas på: feltet builder's Selector udsender ingen standard CSS-egenskab for et Dimensions-kontrolelement, så udfyldning af det producerer intet. Skriv siderne ud i CSS-panelet som ovenfor, eller definer fuldvælgerposter, der indeholder den komplette egenskab; indstillingen almindelig vælger er ikke en genvej for dette felt.

Brug kontrolelementet Dimensioner i Elementor #

Slip din brugerdefinerede widget på en side i Elementor, eller genindlæs editoren, hvis siden allerede var åben; nye kontroller vises aldrig i en forældet editor-fane. Kontrolelementet vises med fire indgange, enhedsomskifteren og linkikonet i hjørnet.

Skriv ind i ethvert input, mens linkikonet er aktivt, og alle fire sider opdateres sammen. Klik på ikonet for at fjerne linket, og hver side tager sin egen værdi, hvilket er, hvordan du får asymmetrisk polstring, såsom en højere top end bunden. Med Responsive på gemmer enhedsikonet separat afstand pr. brudpunkt.

Almindelige brugstilfælde #

• Kort- og kassepolstring, den enkelte mest almindelige afstandskontrol i brugerdefinerede widgets.
• Sektions- og indpakningsmargener så redaktører kan indstille lodret rytme mellem blokke.
• Per-hjørne grænseradius, ved hjælp af de fire værdier som hjørner i stedet for sider.
• Knappolstring, ofte med tilladte dimensioner begrænset til vandret.
• Medieforskydninger, nudging af et billede eller badge med marginværdier.

Tips til at arbejde med feltet Dimensioner #

• Stav alle sider og enheden ud. CSS-panelforbindelsen er fire tokens plus fire enhedstokens; en bar {{ pad }} udskriver intet brugbart.
• Spring over feltet almindelig vælger. Den udsender ingen egenskab for Dimensioner. CSS-panelet, eller en fuld vælgerpost, er arbejdsruten.
• Begræns siderne, når ejendommen kræver det. En kontrol, der kun er vandret, holder et knappolstringsfelt ærligt.
• Indstil en sammenkædet standard. Startende med lige, linkede sider giver redaktører en fornuftig baseline og et input at tænke over.
• Hold basisafstand i dit stylesheet. Widgetten skal se rigtigt ud ved første drop; kontrollen justeres derefter derfra.
• Slå Responsive til for polstring og margin. Desktopafstand overlever sjældent kontakt med en telefonskærm.

Ofte stillede spørgsmål #

Indpakning #

Feltet Widget Builder Dimensions flytter beslutninger om polstring, margen og radius ud af dit stylesheet og ind i panelet: et kontrolelement, fire sider, en enhed, alle udskrevet ved navn i fanen CSS. Brug det ved siden af Skyderfelt, som dækker de enkeltværdi længder en firesidet kontrol ville være overkill for. Udforsk resten af Master Addons widgets og udvidelser, og se den prissætning side for hvad hver plan indeholder.