Baggrund

Feltet Baggrund føjer Elementors baggrundskontrol til en brugerdefineret widget, der er bygget med Master Addons Widget Builder. Redaktører vælger en ensfarvet farve, et billede eller en gradient i Elementor-panelet, og typografierne går til det element, din CSS-vælger peger på. Det passer til bannere, kort og enhver boks, hvis baggrund skal ændres fra side til side.

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

• Det tilføjer Elementors kontrolelement til baggrundstype til din widgets fane Style med et ikon pr. baggrundstype, du tillader.
• Classic giver en farve og et billede med indstillinger for position, vedhæftning, gentagelse og størrelse, når et billede er valgt.
• Gradient giver to farver med deres placeringer, en lineær eller radial type og en vinkel eller position.
• Elementor skriver selve CSS til elementet i valgmuligheden Selector. Du behøver ikke 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 “Promo Banner” widget, hvis ydre boks har klassen promo-banner.

Sådan tilføjes et Baggrundsfelt #

1. Gå til Master Addons > Widget Builder og åbn din widget.
2. Klik på Style tab og tilføj et afsnit, for eksempel “Bannerbaggrund”.
3. Type background i feltsøgefeltet til venstre.
4. Drag Baggrund ind i sektionen. Dens indstillinger åbnes i venstre sidebjælke, og sektionsvisning viser typeikonerne.

Baggrundsfeltindstillinger forklaret #

• Label navngiver feltet i bygherren, for eksempel “Bannerbaggrund”. I Elementor ser redaktører sektionens titel og et kontrolelement, der hedder Baggrundstype.
• Name er feltets unikke ID. Kun bogstaver, tal og understregninger.
• Description er en note til dig inde i bygherren.
• Typer indstiller hvilke baggrundstyper redaktører kan vælge: Klassisk, Gradient, Video og Slideshow. Et nyt felt viser Klassisk og Gradient.
• Inkluderer og Udelukker er beregnet til at tilføje eller skjule enkelte indstillinger inde i kontrolelementet. I vores test hverken ændret Elementor panel. Udelukker viser Billede som standard, men alligevel Billede indstilling stadig dukkede op, så lad begge som de er.

Hold Typer til Classic og Gradient. Video og Slideshow tilføje deres indstillinger til panelet, men når vi testede dem på en brugerdefineret widget, en video link og et slideshow galleri trak intet bag banneret. Elementor bygger kun den ekstra markup disse to typer har brug for sine egne sektioner og containere.

Rul til bunden af sidebjælken for Selector. De almindelige indstillinger over det (Vis etiket, Separator, Betingelser og resten) fungerer som de gør på andre marker.

Indstil vælgeren #

Selektoren fortæller Elementor hvilket element der får baggrunden. For banneret er det klassen på den ydre boks:

.promo-banner

Du behøver ikke skrive {{WRAPPER}} til dette felt. Bygherren tilføjer det foran din vælger, så .promo-banner bliver {{WRAPPER}} .promo-banner og påvirker kun denne widget. Med en kommasepareret liste får hver del sin egen {{WRAPPER}}. Hvis Selector er tom, baggrunden går på widget's ydre indpakning i stedet for dit element.

Giv elementet en fallback baggrund i CSS fanen. Det viser indtil en editor vælger noget, og kontrollens stilarter erstatte det efter det:

.promo-banner {
  background-color: #1f1147;
  color: #ffffff;
}

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

Brug kontrolelementet Baggrund i Elementor #

Føj widgetten til en side, eller genindlæs editoren, hvis siden allerede var åben. Vælg widgetten, og åbn Style fane. Dit afsnit viser Baggrundstype med et ikon for hver type, du har tilladt. Banneret beholder sin reservefarve, indtil du vælger en.

Klik på penselikonet for Classic og vælg en Color. Banneret opdateres med det samme.

Klik på den under farven Image boks for at vælge et billede fra Mediebiblioteket. Flere indstillinger vises, når et billede er indstillet: Billedopløsning, Position, Vedhæftet fil, Gentag og Vis størrelse. Center Center, No-repeat og Cover fungerer godt for de fleste bannere.

Klik på det andet ikon for Gradient. Indstil den første Color og dens Location, den Anden farve og dens placering, så pluk Lineær med en Vinkel eller Radial med en position.

Almindelige brugstilfælde #

• Helt og promo bannere, der får et nyt billede eller gradient for hver kampagne.
• Kort i pristabeller, teamgitter og funktionslister.
• Call-to-action strips, der skifter mellem en mærkefarve og et foto.
• Et indre panel eller overlejringslag ved at pege vælgeren mod det element i stedet for den ydre boks.

Tips til at arbejde med feltet Baggrund #

• Hold altid et tilbagefald background-color i CSS-fanen. Det dækker nye widgets og øjeblikket før et billede indlæses.
• Hold tekst læsbar på fotos. Eksempelbanneret tilføjer et mørkt lag med .promo-banner::before og isolation: isolate på æsken, så hvid tekst forbliver læselig på lyse billeder.
• Peg vælgeren mod ét element. Flere baggrundsfelter på forskellige vælgere er nemmere for redaktører end ét felt, der deles af mange dele.
• Hold dig til Classic og Gradient i Typer for brugerdefinerede widgets.
• For en enkelt flad farve uden billede eller gradient, Farvefelt er enklere for redaktører.

Ofte stillede spørgsmål #

Indpakning #

Føj feltet Baggrund til en Style-sektion, hold Typer til Klassisk og Gradient, og indstil Vælgeren til det element, der skal ændres. Sæt en fallback-farve i CSS-fanen, og redaktører kan tage den derfra. For resten af elementets styling, se Border og Box Shadow felter, og tjek prissætning for hvad hver plan indeholder.