Baggrund

The Baggrundsfelt rækker din brugerdefinerede widget det samme baggrundspanel Elementors sektioner bruger: en klassisk fane til solide farver og billeder, en gradientfane med to farvestop og en videofane til bevægelsesbaggrunde. Inde i Master Addons Widget Builder, tilføjer du feltet én gang, peger det mod en CSS-vælger, og hver baggrundsbeslutning flyttes ind i Elementor-panelet.

Som enhver Widget Builder-kontrol understøtter Background Betingelser for panelsynlighed og token-output på tværs af bygherren løber gennem Twig-syntaks skabelon motor. Begge guider forklarer opsætningen og begrænsningerne.

Baggrund er en gruppekontrol, den samme familie som Typografi og Border. Det betyder, at forbindelsesmodellen adskiller sig fra tekst- eller farvefelter: der er ingen token at indsætte i din CSS. Du udfylder valgmuligheden Selector, og Elementor skriver baggrundstypografierne til den pågældende vælger selv.

Hvad feltet Baggrund gør #

• Gengiver Elementors baggrundsgruppekontrol i din widgets panel, med faner for hver baggrundstype, du tillader.
• Klassisk fane: en ensfarvet farve eller et billede med de sædvanlige indstillinger for position, størrelse og gentagelse.
• Gradientfane: to farvestop med placerings-, vinkel- og typekontroller.
• Video faneblad: en bevægelsesbaggrund bag det valgte element.
• Skriver selve CSS til den vælger, du leverer, uden skabelontoken involveret.

Første widget? Start med Widget Builder oversigt før ledningsgruppekontroller.

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 helt widget, hvis <div class="hero-box"> container bør tage en redaktør-valgt baggrund.

Sådan tilføjes et Baggrundsfelt #

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

Træk den ind i en sektion under Style fane, dens naturlige hjem. Når den lander, åbner markens muligheder til venstre.

Baggrundsfeltindstillinger forklaret #

• Etiket: teksten vist over kontrolelementet i Elementor, for eksempel “Hero Background”.
• Navn: den unikke identifikator for feltet, bogstaver, tal og understregninger.
• Vælger: den CSS-vælger baggrunden gælder for. Dette er selve forbindelsen, dækket i næste afsnit.
• Typer: hvilke faner kontrolelementet viser, fra klassisk, gradient og video. Trimning af listen holder panelet fokuseret; en kortwidget har sjældent brug for videofanen.
• Udelukke: fjerner individuelle underkontrolelementer fra gruppen, når du vil have en reduceret version af panelet.
• Beskrivelse, Vis etiket, separator og betingelser opfører sig, som de gør på hvert felt.

Peg feltet mod din vælger #

Her er den del, der snubler folk op, hvis de er vant til tokenfelterne: feltet Baggrund har ingen {{shortcode}} til din CSS. En baggrund er et bundt af egenskaber, så det kan ikke udskrive gennem ét token; en {{ token }} for dette felt udgange intet nyttigt. I stedet, du udfylder den Vælger option og Elementor genererer stilarterne.

For heltebeholderen er vælgeren:

{{WRAPPER}} .hero-box

• {{WRAPPER}} står for widgetens egen beholder, scoping baggrunden til denne widget alene. Gruppekontroller bruger vælgeren nøjagtigt som skrevet, så du skriver {{WRAPPER}} dig selv; intet er forberedt til dig.
• .hero-box er det element inde i din widget HTML, der modtager baggrunden.

Pas på: forlade {{WRAPPER}} fra og vælgeren matcher hver .hero-box på siden, så en widgets baggrund lander på dem alle. Gruppekontroller tager vælgeren rå, hvilket gør dette til den nemmeste fejl at sende.

Hold en fallback baggrund i widgets CSS-fane. Det er, hvad widget viser på et frisk drop, og kontrollens værdier tilsidesætter det, når en editor vælger noget. En solid fallback-farve tjener sit hold to gange, da den også dækker øjeblikket, før et tungt baggrundsbillede er færdigt med at indlæse, som ellers blinker hvidt på langsomme forbindelser.

Brug kontrolelementet Baggrund i Elementor #

Føj widgetten til en side i Elementor, genindlæsning af editoren, hvis siden allerede var åben. Kontrolelementet vises under din etiket med en fane pr. tilladt type.

Vælg en farve på fanen klassisk, eller vælg et billede fra mediebiblioteket med indstillinger for position, størrelse og gentagelse. Skift til fanen gradient for to farvestop med vinkel og placering, eller til fanen video for en bevægelsesbaggrund. Forhåndsvisningen opdateres, mens du går.

Almindelige brugstilfælde #

• Hero og banner widgets hvor hvert websted ønsker sit eget billede eller gradient bag overskriften.
• Kort baggrunde i pristabeller, teamgitter og funktionslister.
• Call-to-action strips der skifter mellem en mærkefarve og et foto pr. kampagne.
• Videooverskrifter, med video fanen aktiveret kun på widgets bygget til det.
• Overlay paneler, idet vælgeren peges på et indre lag over mediet.

Tips til at arbejde med feltet Baggrund #

• Valgmuligheden Selector er hele forbindelsen. Gå ikke på jagt efter et baggrundstoken på fanen CSS; der er ingen.
• Start altid vælgeren med {{WRAPPER}}. Gruppekontroller bruger det råt, så en bar klassevælger lækker til hver kamp på siden.
• Trimme listen Typer. Tilbyder kun klassisk og gradient holder kort widgets enkle og stopper redaktører droppe videoer, hvor de ikke hører hjemme.
• Hold fallback stilarter i widget CSS. En standard baggrundsfarve i dit stylesheet gør widgetten præsentabel, før nogen åbner kontrolelementet.
• Mindtekstkontrast. Når editorer styrer baggrunden, skal du parre widgetten med farvekontroller til teksten, der sidder oven på den.

Ofte stillede spørgsmål #

Indpakning #

Feltet Widget Builder-baggrund bringer baggrundsredigering i sektionskvalitet til ethvert element i en brugerdefineret widget: navngiv feltet, indstil vælgeren til {{WRAPPER}} plus din klasse, og vælg hvilke typer editoren ser. Den følger samme vælgermodel som den Typografifelt, så når en gruppe kontrol klikker, resten gør også. Udforsk resten af Master Addons widgets og udvidelser, og se den prissætning side for hvad hver plan indeholder.