The Grænsefelt giver en brugerdefineret widget et komplet sæt grænsekontroller i én dråbe: en Border Type dropdown, per-side Border Width indgange og en Border Color picker. Inde i Master Addons Widget Builder, du tilføjer feltet én gang, placere sin shortcode i din CSS, og alle, der redigerer widget i Elementor kan restyle grænsen uden at røre kode.
Grænsekontrollen understøtter Betingelser som hvert felt, så det kan forblive skjult, indtil en kantskift er slået til, og token-output på tværs af builderen gengives af Twig-syntaks skabelon motor. Begge guider dækker detaljerne.
Feltet kortlægges direkte til CSS border stenografi. Uanset hvilken type, bredde og farve brugeren vælger i panelet udskriver i dit stylesheet, uanset hvor du lægger tokenet.
Hvad Border feltet gør #
Et Border-felt gengiver Elementors velkendte grænsegruppekontrol i din widgets indstillingspanel. Vælg widgetten, og tre relaterede kontrolelementer vises:
- Kanttype: en dropdown med Standard, Ingen, Solid, Double, Dotted, Dashed og Groove.
- Border Bredde: Top-, højre-, bund- og venstreindgange med et linkskift for at indstille alle fire på én gang, plus et enhedsikon for responsive værdier.
- Border Farve: en farvevælger med adgang til dine globale farver.
Kontrolelementerne Bredde og Farve forbliver skjulte, indtil brugeren vælger en anden kanttype end Standard eller Ingen, som holder panelet rent, når der ikke er nogen kant i brug. Dette er det samme mønster som Tekstfelt og de andre Widget Builder felter: drop feltet, navngiv det, brug tokenet. 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 overskrift widget med en
<h2 class="border-title">i sin HTML.
Sådan tilføjes et Border-felt #
Rul feltpanelet til venstre i Widget Builder-editoren, indtil du finder Border felt. Det sidder nær bunden af listen, mellem Baggrund og Tekstskygge.
Træk feltet Grænse ind i en sektion under Content, Style, eller Advanced fane. Stil er det naturlige hjem for det, selvom det virker overalt. Når det lander, åbnes feltets muligheder til venstre, og dets kortkode vises i Dokumentation sidebjælke ved siden af kodeeditoren.
Grænsefeltindstillinger forklaret #
Vælg feltet Border for at åbne dets indstillinger. De følger samme layout som hvert andet Widget Builder-felt.
- Etiket: teksten vist over kontrolelementet i Elementor, “Grænse” som standard.
- Navn: den entydige identifikator for feltet. Den skal kun indeholde bogstaver, tal og understregninger. Et felt med navnet
bordergiver dig den{{border}}shortcode. - Beskrivelse: valgfri hjælpetekst vist under kontrolelementet.
- Standardværdi: grænsen widget starter med, skrevet som CSS stenografi, for eksempel
1px solid #333. Lad det være tomt, og widgeten sendes uden kant, indtil en bruger indstiller en. - Vis etiket og Etiketblok: standardetiketten skifter, plus den sædvanlige Separator og betingelser styrer længere nede.
Forbind feltet til din CSS #
Border-feltets token hører hjemme i dit stylesheet, ikke din HTML. Åbn CSS faneblad og brug det som værdien af border ejendom på hvad vælgeren skal bære grænsen. Med vores overskrift eksempel:
- Reglen lyder
border: {{border}};inde i.border-titleselector. - På gengivelsestidspunktet udvides tokenet til den fulde stenografi, som brugeren valgte, f.eks
5px solid #e02b20.
Klik Gem indstillinger når reglen er på plads. Du kan slippe det samme token på en hvilken som helst vælger i widgetten, så én grænsekontrol kan skitsere et kort, dets billede eller begge dele.
Brug grænsekontrollen i Elementor #
Føj din brugerdefinerede widget til en side i Elementor, eller genindlæs editoren, hvis siden allerede var åben. Vælg widgetten, og grænsekontrollen vises i dens panel med den etiket, du har indstillet.
Vælg en kanttype #
The Border Type rullelister Standard, Ingen, Solid, Double, Dotted, Dashed og Groove. Vælg en anden type end Standard eller Ingen, og der vises to flere kontrolelementer under den: Border Width og Border Color. Forhåndsvisningen opdateres, så snart du vælger, så hvis du vælger Dashed, tegnes en stiplet kontur rundt om widgetten med det samme.
Indstil kantbredden #
The Border Width kontrol tager separate Top, Højre, Bund, og Venstre værdier. Hold link ikonet på for at ændre alle fire sider sammen, eller unlink det for ujævne grænser, som en tyk top og bund med tynde sider. Enhedsikonet ved siden af etiketten lader dig indstille forskellige bredder pr breakpoint.
Vælg kantfarven #
The Border Color kontrol åbner Elementors farvevælger. Brug globusikonet til at trække fra dine globale farver, eller vælg en brugerdefineret værdi med plukkeren og hex-, RGBA- eller HSLA-indgangen.
Hver ændring lander live i forhåndsvisningen. I vores eksempel ender overskriften med en solid rød kant, 5 pixels på top og bund og 3 pixels på siderne.
Almindelige brugstilfælde #
- Kort og boks konturer hvor hvert websted har brug for sin egen kantvægt og farve.
- Fremhævede overskrifter ligesom den indrammede overskrift i dette eksempel.
- Billedrammer på team-, portefølje- eller produktwidgets.
- Knapstilarter hvor en dispositionsvariant har brug for en brugerredigerbar kant.
- Callout og opslagsbokse der skifter mellem solide og stiplede stilarter.
Tips til at arbejde med Border feltet #
- Sæt tokenet i CSS, ikke HTML. Shortcoden udvides til en CSS-værdi, så det kun giver mening som en ejendomsværdi som
border: {{border}};. - Indstil en standardværdi i stenografiform. Noget som
1px solid #333får widgetten til at se færdig ud, før nogen åbner panelet. - Par det med border-radius. Feltet dækker type, bredde og farve. Tilføj et Dimensioner felt eller et fast
border-radiusregel for afrundede hjørner. - Husk Ingen er et reelt valg. Brugere kan slukke for kanten fra panelet, så stol ikke på, at kanten holder layoutet sammen.
- Genbrug tokenet, hvor det hjælper. Det samme
{{border}}værdi kan style flere vælgere, og de følger alle den ene kontrol.
Ofte stillede spørgsmål #
Hvad er feltet Border i Master Addons Widget Builder?
Feltet Border føjer Elementors grænsegruppekontrol til en brugerdefineret widget: en Border Type dropdown, per-side Border Width inputs og en Border Color picker. Dens shortcode udskriver den resulterende CSS border stenografi i din widgets stylesheet.
Hvor placerer jeg grænsekortkoden?
I CSS-fanen i Widget Builder, som værdien af en grænseegenskab. Et felt med navnet border bruges som border: {{border}}; på vælgeren, der skal bære grænsen. Det hører ikke hjemme i HTML-editoren.
Hvilke grænsetyper understøtter kontrollen?
Rullemenuen Kanttype tilbyder Standard, Ingen, Solid, Dobbelt, Stiplet, Stiplet og Groove. Hvis du vælger en hvilken som helst type undtagen Standard eller Ingen, afsløres kontrolelementerne Kantbredde og Kantfarve under dropdown.
Kan brugerne indstille en forskellig kantbredde på hver side?
Ja. Kontrolelementet Border Width har separate Top-, Højre-, Bund- og Venstre-indgange. Link-skiftet ændrer alle fire sammen; fjern linket til det for at indstille ujævne værdier, som 5 pixels på toppen og bunden med 3 pixels på siderne.
Hvorfor ser jeg ikke Border Width and Color i panelet?
Disse kontrolelementer forbliver skjulte, mens Border Type er Standard eller Ingen. Vælg Solid, Stiplet eller en hvilken som helst anden synlig type, og begge kontrolelementer vises. Hvis hele Border-kontrollen mangler, skal du genindlæse Elementor-editoren, så den opfanger den gemte widget.
Indpakning #
Feltet Widget Builder Border pakker en kanttype dropdown, responsive per-side bredder og en farvevælger i et enkelt træk og slip. Navngiv feltet, indstil border: {{border}}; i din CSS, og kantbeslutninger flyttes ud af dit stylesheet og ind i Elementor-panelet, hvor redaktører kan håndtere dem. Kombiner det med Tekstfelt og a Divider sådan opbygger du et widgetpanel, der dækker indhold og stil på ét sted. Udforsk resten af Master Addons widgets og udvidelser, og se den prissætning side for hvad hver plan indeholder.
