Box Shadow

The Box Shadow felt sætter Elementors standard skyggekontrol i din brugerdefinerede widgets panel: vandret og lodret offset, sløring, spredning, farve med opacitet og en indsat toggle. Inde i Master Addons Widget Builder, det er det felt, der lader redaktører løfte et kort fra siden, blødgøre en knap eller recesse et input uden at røre ved stylesheet.

Box Shadow-kontrollen understøtter Betingelser, en ren måde at vise det kun, når en skygge skifte er tændt, og token output på tværs af bygherren håndteres af Twig-syntaks skabelon motor. Begge guider dækker opsætning og begrænsninger.

Box Shadow er en gruppekontrol, den samme familie som Typografi og Baggrund. Forbindelsen til din widget er en CSS-vælger, ikke et token: du fortæller feltet, hvilket element den styler, og Elementor skriver skyggen der på egen hånd.

Hvad feltet Box Shadow gør #

• Gengiver Elementors boks skyggegruppekontrol, åbnet fra blyantikonet ved siden af feltets etiket.
• Vandrette og lodrette forskydninger placer skyggen omkring elementet.
• Sløring og spredning kontroller blødhed og rækkevidde.
• Color indeholder en alfakanal, som er der, hvor det meste skyggekvalitet kommer fra.
• Positionsskift skifter mellem en ydre skygge og indsat.
• Skriver selve CSS til den vælger, du angiver; der findes ikke noget skabelontoken.

Hvis du er ny til at bygge widgets, er Widget Builder oversigt er stedet at starte.

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 testimonial widget, hvis <article class="quote-card"> bør bære en redaktørstyret skygge.

Sådan tilføjes et felt Boksskygge #

Rul feltpanelet til venstre i Widget Builder-editoren, indtil du finder Box Shadow felt, opført med de andre typografigruppefelter såsom baggrund og tekstskygge.

Træk den ind i en sektion under Style tab, typisk ved siden af felterne Border og Dimensions i en kortstylingssektion. Når den lander, åbnes feltets muligheder til venstre.

Box Shadow feltindstillinger forklaret #

• Etiket: teksten vist ved siden af kontrolelementet i Elementor, for eksempel “Card Shadow”.
• Navn: den unikke identifikator for feltet, bogstaver, tal og understregninger.
• Vælger: den CSS-vælger skyggen gælder for. Dette er selve forbindelsen, der dækkes næste gang.
• Felter Options: tilsidesættelser for underkontrolelementerne inde i gruppen, såsom ændring af en standardværdi, skyggen starter fra.
• Beskrivelse, Vis etiket, Separator og Betingelser er de sædvanlige visningsmuligheder.

Peg feltet mod din vælger #

Som enhver gruppekontrol, feltet Box Shadow har ingen {{shortcode}} til din CSS. En skygge er flere værdier rullet ind i én egenskab, og en {{ token }} for feltet udskriver intet nyttigt. Den Vælger mulighed er hele forbindelsen.

For testimonialkortet er vælgeren:

{{WRAPPER}} .quote-card

• {{WRAPPER}} står for widgetens egen beholder og holder skyggen scoped til denne widget. Gruppekontroller bruger vælgeren præcis, som du skriver den, så skriv {{WRAPPER}} yourself.
• .quote-card er det element inde i din widget HTML, som skyggen lander på.

Pas på: en vælger uden {{WRAPPER}} matcher hver .quote-card på siden, så en widgets skyggeindstillinger restyle dem alle. Intet advarer dig; stilarterne spredes simpelthen.

Hold en fallback skygge i widgets CSS-fane, hvis designet afhænger af en. Det er udseendet på første drop, og kontrollens værdier tager over, når en editor åbner popover.

Brug Box Shadow-kontrolelementet i Elementor #

Placer widget på en side i Elementor, genindlæse editoren, hvis siden allerede var åben. Kontrolelementet viser din etiket med et blyantikon; ved at klikke på det åbnes skyggepopoveren.

Indstil farven først, træk derefter Blur op og hold forskydningerne små for det bløde kortlook, eller skub Vertical op med nul Blur for en hård grafisk skygge. Flip Position for at indsætte for indpressede felter og brønde. Forhåndsvisningen sporer hver ændring. Én layoutnote: skygger tager ingen plads i flowet, så en generøs spredning kan bløde ind i sektionerne over og under uden at flytte noget, hvilket er værd at kontrollere, når widgetten sidder mellem stramme rækker.

Almindelige brugstilfælde #

• Cards i testimonial, prissætning og teamwidgets, hvor en blød skygge adskiller kortet fra siden.
• Knapper der har brug for dybde på standardtilstanden.
• Billedrammer, hvilket giver fotos en løftet, printlignende kant.
• Klæbende stænger og paneler hvor en skygge signalerer højde over indhold.
• Indstil formularfelter, ved hjælp af den indsatte toggle for et forsænket look.

Tips til at arbejde med feltet Box Shadow #

• Valgmuligheden Selector er hele forbindelsen. Der er ingen boks skygge token til CSS fanen; forventer en er den mest almindelige blindgyde med gruppe kontrolelementer.
• Start altid vælgeren med {{WRAPPER}}. Feltet bruger det råt, og at lade det være slukket spilder skyggen på hvert matchende element på siden.
• Gruppér det med Border og Dimensions. De tre felter udgør tilsammen en komplet kortstylingssektion i panelet.
• Læn dig op ad farve alfa, ikke mørke. En sort skygge ved 10 til 15 procent opacitet læser bedre end en solid grå, og den er en note værd i dit felts beskrivelse.
• Hold et tilbagefald i widget CSS. Hvis designet som standard har brug for en skygge, skal du sende den i typografiarket og lade kontrollen tilsidesætte den.

Ofte stillede spørgsmål #

Indpakning #

Feltet Widget Builder Box Shadow giver redaktører reel kontrol over dybden: ét felt, én vælger, der starter med {{WRAPPER}}, og hele skygge popover vises i panelet. Det virker på samme selector model som den Typografifelt, så opsætningen bærer lige over mellem gruppekontroller. Udforsk resten af Master Addons widgets og udvidelser, og se den prissætning side for hvad hver plan indeholder.