Box Shadow

Feltet Box Shadow føjer Elementors boksskyggekontrol til en brugerdefineret widget, der er bygget med Master Addons Widget Builder. Redaktører indstiller farven, forskydninger, sløring, spredning og position fra en lille popover, og skyggen påføres det element, din CSS-vælger peger på. Det er feltet til at løfte kort fra siden, blødgøre knapper eller give et panel et indpresset look.

Box Shadow 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 Box Shadow gør #

• Det tilføjer én kontrol til din widgets Style-fane: din etiket og et blyantikon, der åbner skyggeindstillingerne.
• Indstillingerne er Farve, Vandret, Lodret, Sløring, Spredning og Position (Outline eller Indsat).
• Elementor skriver box-shadow CSS til elementet i Selector, så du ikke behøver et token i din HTML eller CSS.

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 “Testimonial Card” widget, hvis kort har klassen quote-card.

Sådan tilføjes et felt Boksskygge #

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

Box Shadow feltindstillinger forklaret #

• Label er teksten ved siden af kontrolelementet i Elementor, for eksempel “Card Shadow”.
• Name er feltets unikke ID. Kun bogstaver, tal og understregninger.
• Description er en note til dig inde i bygherren.
• Vælger, Standardskyggetype, Standard skyggeværdier og Standard skyggefarve vises under beskrivelsen. I vores test blev ændringer indtastet i disse bokse ikke gemt, og bygherren loggede en fejl, så stol ikke på dem for nu. Indstil vælgeren i de almindelige indstillinger i stedet (næste afsnit), og giv kortet en startskygge i fanen CSS.
• Standardværdi bruges ikke af dette felt.

Indstil vælgeren #

Rul til bunden af sidebjælken, og skriv elementets klasse i Vælger boks under Control Classes. Til testimonialkortet:

.quote-card

Du behøver ikke skrive {{WRAPPER}}. Bygherren tilføjer det foran din vælger, så reglen bliver {{WRAPPER}} .quote-card og påvirker kun denne widget. Adskil flere vælgere med kommaer, hvis én skygge skal gælde for mere end ét element. Hvis vælgeren er tom, går skyggen på widgettens ydre indpakning.

Når du har gemt, viser feltet Vælger nær toppen af sidebjælken den samme værdi.

Tilføj en fallback skygge #

Sæt startskyggen i fanen CSS. Den vises, indtil en editor slår kontrolelementet til, og kontrolelementets skygge erstatter det derefter:

.quote-card {
  box-shadow: 0 1px 2px rgba(17, 24, 39, .06);
}

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

Brug Box Shadow-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. Din etiket vises med et blyantikon.

Klik på blyanten for at åbne popover. Det tænder skyggen med Elementors startværdier: Vandret 0, Lodret 0, Slør 10, Spred 0 og sort ved 50% opacitet. Juster dem og kortopdateringerne, mens du trækker:

• Color indstiller skyggefarven og opaciteten. En tonet, halvgennemsigtig farve ser blødere ud end sort.
• Vandret og Lodret flyt skyggen sidelæns og op eller ned.
• Sløring blødgør kanten. 0 giver en hård skygge.
• Spread vokser eller krymper skyggen. En lille negativ værdi holder en stor sløring fra at spilde ud til siderne.
• Position skifter mellem Outline (uden for boksen) og Inset (inde i den).

Indstil position til Indsats for et indpresset look, nyttigt til inputfelter og støjsvage paneler:

Den cirkulære pil ud for blyanten nulstiller kontrolelementet og fjerner skyggen.

Almindelige brugstilfælde #

• Kort i vidnesbyrd, priser, team- og blogwidgets.
• Knapper, der har brug for lidt dybde, ofte parret med en svæve stil.
• Hårde offset skygger for dristige, flade designs.
• Indsatte skygger på inputfelter, søgebjælker og forsænkede paneler.

Tips til at arbejde med feltet Box Shadow #

• Brug vælgeren nederst på sidebjælken, og skriv kun klassen. {{WRAPPER}} er tilføjet for dig.
• Hold et tilbagefald box-shadow i CSS-fanen, så nye widgets ikke ser flade ud.
• For bløde kortskygger, prøv en stor sløring, en lodret forskydning på omkring halvdelen af sløringen og et lille negativt spredning.
• Giv elementet en grænseradius. Skygger følger hjørnerne, så afrundede kort får afrundede skygger.
• For skygger på tekst skal du bruge Tekst Skyggefelt i stedet.

Ofte stillede spørgsmål #

Indpakning #

Føj feltet Boksskygge til en Style-sektion, skriv dit elements klasse i Selector nederst på sidebjælken, og hold en let fallback-skygge i fanen CSS. Redaktører styrer derefter skyggen fra én popover. For resten af kortets styling, se Border og Dimensioner felter, og tjek prissætning for hvad hver plan indeholder.