Tekstskygge

The Tekst Skyggefelt tilføjer Elementors tekstskyggekontrol til din brugerdefinerede widget: vandret og lodret forskydning, sløring og en farve med opacitet, der anvendes på den tekst, din vælger peger på. Inde i Master Addons Widget Builder, det er den hurtigste måde at lade redaktører holde en overskrift læsbar over et optaget foto eller give display type et subtilt løft.

Som enhver Widget Builder-kontrol understøtter Text Shadow Betingelser, praktisk til kun at afsløre det, når en skyggeindstilling er aktiveret, og tokenoutput på tværs af bygherren løber gennem Twig-syntaks skabelon motor. Begge guider dækker opsætning og begrænsninger.

Text Shadow er en gruppekontrol, den mindste i familien, der inkluderer Typografi og baggrund. Ledningerne er identiske: ingen token i din CSS, bare en Selector-indstilling, der fortæller Elementor, hvilket element der skal styles.

Hvad feltet Tekstskygge gør #

• Gengiver Elementors tekstskyggegruppekontrol, åbnet fra blyantikonet ved siden af feltets etiket.
• Vandrette og lodrette forskydninger placer skyggen omkring glyfferne.
• Sløring blødgør det, fra en hård duplikatkant til en bred glød.
• Color indeholder en alfakanal til realistiske skygger med lav kapacitet.
• Skriver selve CSS til den vælger, du angiver; der er ingen skabelontoken.

Har du aldrig bygget en widget før? Start med Widget Builder oversigt og kom tilbage, når du har en åben.

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 et foto banner widget med en <h2 class="banner-title"> på vej siddende på billedet.

Sådan tilføjer du et tekstskyggefelt #

Rul feltpanelet til venstre i Widget Builder-editoren, indtil du finder Tekstskygge felt, opført med de andre stilgruppefelter såsom typografi og boksskygge.

Træk den ind i en sektion under Style tab, normalt lige ved siden af feltet Typografi, der styler den samme tekst. Når den lander, åbnes feltets muligheder til venstre.

Tekst Skyggefeltindstillinger forklaret #

• Etiket: teksten vist ved siden af kontrolelementet i Elementor, for eksempel “Title 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.
• Udelukke: fjerner individuelle underkontroller fra gruppen, når du vil have en nedtrimmet popover.
• Beskrivelse, Vis etiket, separator og betingelser er de standardvisningsmuligheder, du har set på andre felter.

Peg feltet mod din vælger #

Ligesom de andre gruppekontroller, feltet Tekstskygge har ingen {{shortcode}} til din CSS. Skyggen bundter forskydninger, sløring og farve til én egenskab, så en {{ token }} for feltet udskriver intet nyttigt. Den Vælger option bærer hele forbindelsen.

For banneroverskriften er vælgeren:

{{WRAPPER}} .banner-title

• {{WRAPPER}} står for widgetens egen beholder, og holder skyggen inde i denne widget. Gruppekontroller anvender vælgeren som skrevet, så {{WRAPPER}} er din at skrive; det er ikke tilføjet til dig.
• .banner-title er tekstelementet inde i din widget HTML.

Pas på: spring over {{WRAPPER}} og vælgeren styler hver .banner-title på tværs af siden, herunder dem i andre widgets. Opsætningen spejler de Typografifelt præcis, så en vælger, der arbejder der, fungerer her.

Hvis designet kræver en standardskygge, skal du holde den i widgettens CSS-fane som et fallback. Kontrolelementet tilsidesætter det, når en editor indstiller værdier.

Brug kontrolelementet Tekstskygge i Elementor #

Føj din brugerdefinerede widget til en side i Elementor, eller genindlæs editoren, hvis den allerede var åben. Kontrolelementet viser din etiket og et blyantikon, der åbner skyggepopoveren.

Vælg en farve, og juster derefter Blur og de to forskydninger. En mørk skygge ved lav opacitet med et par pixels sløring holder en overskrift læselig over fotografering; større forskydninger med nul sløring producerer en retro display effekt. Forhåndsvisningen opdateres med hver ændring. Afstem resultatet mod det lyseste foto, som webstedet sandsynligvis vil bruge, ikke kun demobilledet, fordi en skygge, der er ringet ind på en mørk baggrund, kan forsvinde helt på en lys.

Almindelige brugstilfælde #

• Overskrifter over fotos i helte- og bannerwidgets, hvor skyggen køber kontrast tilbage.
• Tekst på video baggrunde, som skifter konstant og har brug for den ekstra kant.
• Effekter af visningstype såsom hårde offset skygger på store tal.
• Lys tekst på lys billeder, hvor en blød mørk glorie holder billedtekster læsbare.
• Badges og etiketter sidder på gradienter eller mønstrede områder.

Tips til at arbejde med feltet Tekstskygge #

• Valgmuligheden Selector er hele forbindelsen. Der findes ikke noget token til gruppekontroller, så der går intet i fanen CSS for dette felt.
• Start altid vælgeren med {{WRAPPER}}. Den bruges rå, og uden den når skyggen hvert matchende element på siden.
• Par det med et Typografi-felt på samme vælger. Skrifttype- og skyggebeslutninger for én overskrift sidder derefter sammen i panelet.
• Favoriser farver med lav kapacitet. Skygger bygget af farvens alfakanal sidder i designet; ensfarvet sort gør det sjældent.
• Brug Udeluk for at forenkle. Hvis en widget kun nogensinde har brug for sløring og farve, holder trimning af gruppen popoveren lille.
• Send en fallback i fanen CSS når standarddesignet afhænger af, at skyggen er der.

Ofte stillede spørgsmål #

Indpakning #

Feltet Widget Builder Text Shadow er et lille kontrolelement, der løser et tilbagevendende problem: tekst, der skal forblive læsbar, uanset hvilket billede en editor taber bag det. Navngiv feltet, indstil vælgeren til {{WRAPPER}} plus tekstens klasse, og skyggen lever i panelet fra da af. Den deler sin vælgermodel med Typografifelt, som normalt hører hjemme på samme overskrift alligevel. Udforsk resten af Master Addons widgets og udvidelser, og se den prissætning side for hvad hver plan indeholder.