Tekstskygge

Feltet Tekstskygge føjer Elementors tekstskyggekontrol til en brugerdefineret widget, der er bygget med Master Addons Widget Builder. Redaktører får en farve, en sløringsindstilling og to forskydninger, og skyggen anvendes på den tekst, din CSS-vælger peger på. Brug den, når en overskrift skal forblive læsbar oven på et foto.

Text 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 Tekstskygge gør #

• Det tilføjer én kontrol til din widgets panel i Elementor: din etiket plus et blyantikon, der åbner skyggeindstillingerne.
• Disse indstillinger er Farve (med opacitet), Sløring, Vandret og Lodret.
• Elementor skriver text-shadow CSS til det element, der er indstillet i feltets vælgerindstilling, så du ikke placerer et token i din HTML eller CSS.

Hvis du ikke har bygget en widget endnu, så læs Widget Builder oversigt først og kom tilbage med en widget åben.

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 “Photo Banner” widget: et baggrundsfoto med en H2 overskrift på toppen, der har klassen banner-title, udfyldt fra et Tekstfelt med navnet banner_title.

Sådan tilføjer du et tekstskyggefelt #

1. Gå til Master Addons > Widget Builder og åbn din widget.
2. Klik på Style tabulator over sektionsområdet, og tilføj en sektion, hvis fanen er tom. Giv sektionen en klar titel, som f.eks. “Bannertitel”.
3. Type shadow i feltsøgefeltet til venstre. Box Shadow og Text Shadow kommer op.
4. Drag Tekstskygge ind i sektionen. Dens indstillinger åbnes i venstre sidebjælke.

Du kan også slippe feltet i en sektion Indhold eller Avanceret, og kontrolelementet vises derefter i den Elementor-fane. Redaktører ser dog normalt efter skygger under Stil.

Tekst Skyggefeltindstillinger forklaret #

• Label er teksten ved siden af kontrolelementet i Elementor. Eksemplet bruger “Title Shadow”.
• Name er feltets unikke id (kun bogstaver, tal og understregninger). Elementor gemmer editorens værdier under dette navn, så indstil det én gang og lad det være.
• Description er en note til dig inde i bygherren. Elementor viser den ikke under denne kontrol.
• Standardværdi bruges ikke af dette felt. En ny skygge starter altid fra Elementors egne standardindstillinger, angivet længere nede.

Rul ned i sidebjælken for at nå de almindelige indstillinger og vælgeren.

• Vis etiket skjuler eller viser etiketten i panelet.
• Separator tegner en skillelinje før eller efter kontrollen.
• Betingelser vis kun kontrolelementet, når et andet felt har en bestemt værdi, for eksempel en “Vis skygge”-omskifter. Se Betingelser.
• Vælger er CSS-vælgeren, der modtager skyggen. Feltet gør intet brugbart uden det, så det har sin egen sektion nedenfor.

Etiketblok, Responsiv kontrol, Dynamisk support, Tilgængelig frontend og Kontrolklasser vises også på listen. En tekstskyggekontrol bruger dem ikke, og ændring af dem har ingen effekt på dette felt.

Indstil vælgeren #

Selektoren fortæller Elementor, hvilket element der får skyggen. For banneroverskriften skal du indtaste:

{{WRAPPER}} .banner-title

• {{WRAPPER}} erstattes med den unikke klasse af denne widget på siden, som holder skyggen inde i denne ene widget.
• .banner-title er klassen på overskriften i din widgets HTML.

Feltet bruger din vælger nøjagtigt som indtastet. Uden {{WRAPPER}}, bliver reglen .banner-title { text-shadow: ... } for hele siden, og hvert element med den klasse opfanger det, herunder overskrifter i andre widgets. Hvis du lader Vælgeren være tom, går skyggen til {{WRAPPER}} .elementor-widget-container, som dækker al teksten i widgetten.

Én kontrol kan style flere elementer. Adskil vælgerne med kommaer og start hver enkelt med {{WRAPPER}}, f.eks {{WRAPPER}} .banner-title, {{WRAPPER}} .banner-subtitle.

Dokumentationspanelet ved siden af kodeeditoren viser en {{title_shadow}} token for dette felt. Lad det være ude af din HTML og CSS. En skygge gemmes som tal og en farve, så tokenet har ingen tekst at udskrive, og Selector håndterer allerede outputtet.

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

Brug kontrolelementet Tekstskygge i Elementor #

Føj widgetten til en side, eller genindlæs editoren, hvis siden allerede var åben. Vælg widgetten, og åbn Style fane. Kontrolelementet sidder i den sektion, du oprettede, og viser din etiket og et blyantikon.

Klik på blyanten for at åbne popoveren. Det tænder skyggen med Elementors startværdier: Sløring 10, Vandret 0, Lodret 0 og sort ved 30% opacitet. Lærredet opdateres, mens du trækker skyderne.

• Sløring løber fra 0 til 100 px. Ved 0 får du en skarp kopi af bogstaverne, og højere værdier blødgør det til en glød.
• Vandret og Lodret kør fra -100 til 100 px og flyt skyggen til venstre eller højre og op eller ned.

Klik på farveprøven for at vælge skyggefarven. Vælgeren har en skyder med opacitet og accepterer HEXA-, RGBA- eller HSLA-værdier, så du kan skrive en værdi som f.eks rgba(0, 0, 0, 0.65) direkte.

Hvis du vil fjerne skyggen, skal du klikke på den cirkulære nulstillingspil ved siden af blyanten.

Almindelige brugstilfælde #

• Overskrifter på helte- og bannerfotos med lyse områder bag teksten.
• Tekst på videobaggrunde, hvor en blød skygge holder ordene læsbare, når rammen ændres.
• Retro display type, såsom en hård offset med nul sløring på store tal eller salg badges.
• En glød på mørke baggrunde, lavet med en lys skyggefarve, en stor sløring og ingen offset.

Tips til at arbejde med feltet Tekstskygge #

• Start hver vælger med {{WRAPPER}}. Ellers kan skyggen lække ind i andre widgets på siden.
• Sæt feltet ud for et Typografi-felt, der bruger den samme vælger, så overskriftens skrifttype- og skyggeindstillinger sidder i én sektion.
• Vælg en halvgennemsigtig farve. Sort ved 40 til 70% opacitet ser naturlig ud, og ensfarvet sort har tendens til at se tung ud.
• Kontroller skyggen mod det lyseste billede, widgetten sandsynligvis vil få. En skygge, der virker på et mørkt foto, kan forsvinde på et lyst.
• Hvis designet har brug for en skygge, før nogen rører kontrollen, skal du tilføje en text-shadow regel for .banner-title i fanen CSS. Kontrolelementets værdi erstatter det, når en editor indstiller en.
• For kort, knapper og beholdere skal du bruge Box Shadow felt i stedet. Tekst Skygge følger bogstavernes form.

Ofte stillede spørgsmål #

Indpakning #

Slip feltet Tekstskygge i en typografisektion, giv den en etiket og et navn, og indstil vælgeren til {{WRAPPER}} plus klassen af din tekst. Redaktører får derefter Farve, Sløring og forskydning kontrol i Elementor, og skyggen forbliver inde i den widget. Par det med den Typografifelt for resten af overskriftens styling, og tjek prissætning for hvad hver plan indeholder.