Hintergrund

Das Hintergrundfeld fügt die Hintergrundsteuerung von Elementor zu einem benutzerdefinierten Widget hinzu, das mit den Master-Addons erstellt wurde Widget-builder. Editoren wählen eine einfarbige Farbe, ein Bild oder einen Farbverlauf im Elementor-Panel aus, und die Stile gehen zu dem Element, auf das Ihr CSS-Auswahler zeigt Es passt zu Bannern, Karten und jedem Feld, dessen Hintergrund sich von Seite zu Seite ändern soll.

Hintergrund ist ein Pro-Feld Das kostenlose Plugin enthält einen begrenzten Widget Builder, und der vollständige Satz von Feldern wird mit Master Addons Pro.

Was das Hintergrundfeld bewirkt #

• Es fügt die Hintergrundtypsteuerung von Elementor zur Registerkarte Stil Ihres Widgets hinzu, wobei Sie pro Hintergrundtyp ein Symbol zulassen.
• Classic gibt eine Farbe und ein Bild mit Positions-, Anhang-, Wiederholungs- und Größeneinstellungen, sobald ein Bild ausgewählt wurde.
• Der Gradient gibt zwei Farben mit ihren Positionen an, einen linearen oder radialen Typ und einen Winkel oder eine Position.
• Elementor schreibt das CSS selbst in das Element in der Option Selector, Sie benötigen kein Token in Ihrem HTML oder CSS.

Wenn Sie noch kein Widget gebaut haben, lesen Sie die Übersicht über Widget Builder Zuerst.

Bevor Sie beginnen #

• WordPress mit installiertem und aktivem Elementor.
• Master Addons für Elementor und Master Addons Pro, beide aktiv Die Installationsführung Cover-einrichtung.
• Ein Widget im Widget Builder geöffnet Das Beispiel in diesem Ratgeber ist ein “Promo Banner” - Widget, dessen äußere Box die Klasse hat promo-banner.

So fügen Sie ein Hintergrundfeld hinzu #

1. Gehe zu Master-Addons > Widget Builder und öffnen Sie Ihr Widget.
2. Klicken Sie auf die Stil Tab und fügen Sie einen Abschnitt hinzu, zum Beispiel “Bannerhintergrund”.
3. Typ background Im Feldsuchfeld links.
4. Ziehen Hintergrund In den Abschnitt Seine Einstellungen öffnen sich in der linken Seitenleiste, und die Abschnittsvorschau zeigt die Typ-Symbole.

Hintergrundfeldoptionen erläutert #

• Etikett Benennt das Feld im Builder, zum Beispiel “Bannerhintergrund” In Elementor sehen Redakteure den Abschnittstitel und ein Steuerelement namens Hintergrundtyp.
• Name Ist die eindeutige ID des Feldes Nur Buchstaben, Zahlen und Unterstriche.
• Beschreibung Notiz für Sie im Inneren des Bauherrn ist.
• Typen Sets, welche Hintergrundtypen Editoren auswählen können: Classic, Gradient, Video und Diashow Ein neues Feld zeigt Classic und Gradient.
• Beinhaltet und Ausgeschlossen Sind dazu gedacht, einzelne Einstellungen innerhalb des Steuerelements hinzuzufügen oder auszublenden In unseren Tests hat keines das Elementorfeld geändert Ausgeschlossen zeigt Bild standardmäßig an, dennoch erschien die Bildeinstellung, also lassen Sie beide so, wie sie sind.

Behalten Sie Typen auf Classic und Gradient bei Video und Diashow fügen Sie ihre Einstellungen dem Panel hinzu, aber als wir sie auf einem benutzerdefinierten Widget getestet haben, zeichneten ein Videolink und eine Diashow-Galerie nichts hinter das Banner Elementor erstellt nur das zusätzliche Markup, das diese beiden Typen für seine eigenen Abschnitte und Container benötigen.

Scrollen Sie zum unteren Rand der Seitenleiste für den Selector Die darüber liegenden gängigen Einstellungen (Label anzeigen, Separator, Bedingungen und der Rest) arbeitet wie auf anderen Feldern.

Stellen Sie den Selektor ein #

Der Selector teilt Elementor mit, welches Element den Hintergrund bekommt Für das Banner ist es die Klasse auf dem äußeren Kasten:

.promo-banner

Sie müssen nicht tippen {{WRAPPER}} Für dieses Feld. fügt der Builder es vor Ihrem Selektor hinzu, also .promo-banner wird {{WRAPPER}} .promo-banner Und betrifft nur dieses Widget Bei einer durch Kommas getrennten Liste bekommt jeder Teil seine eigene {{WRAPPER}}. Wenn der Selector leer ist, kommt der Hintergrund auf den äußeren Wrapper des Widgets statt auf Ihr Element.

Geben Sie dem Element einen Fallback-Hintergrund in der Registerkarte CSS. Es wird angezeigt, bis ein Editor etwas auswählt, und die Stile des Steuerelements ersetzen es danach:

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

Klicken Sie auf Einstellungen speichern Wenn du fertig bist.

Verwenden Sie die Hintergrundsteuerung in Elementor #

Widget zu einer Seite hinzufügen, oder den Editor neu laden, wenn die Seite bereits geöffnet war Wählen Sie das Widget und öffnen Sie die Stil Tab. Ihr Abschnitt zeigt Hintergrundtyp mit einem Symbol für jeden Typ, den Sie zugelassen haben Das Banner behält seine Fallback-Farbe, bis Sie einen auswählen.

Klicken Sie auf das Pinselsymbol für Klassisch und wählen Sie ein Farbe. Das Banner aktualisiert sich gleich.

Klicken Sie unter der Farbe auf die Bild Box ein Bild aus der Mediathek auszuwählen Es erscheinen weitere Einstellungen, sobald ein Bild gesetzt ist: Bildauflösung, Position, Anhang, Wiederholungs - und Anzeigegröße Center Center, No-Repeat und Cover funktionieren bei den meisten Bannern gut.

Klicken Sie auf das zweite Symbol für Gradient. Legen Sie den ersten fest Farbe und seine Standort, die Zweite Farbe und seinen Standort, dann wählen Sie Linear Mit einem Winkel oder Radial mit einer Position.

Häufige Anwendungsfälle #

• Helden - und Promo-Banner, die für jede Kampagne ein neues Bild oder einen neuen Farbverlauf erhalten.
• Karten in Preistabellen, Teamrastern und Featurelisten.
• Call-to-Action-Streifen, die zwischen einer Markenfarbe und einem Foto wechseln.
• Eine Innenplatte oder Overlay-Schicht, indem der Selektor auf dieses Element statt auf den Außenkasten gerichtet wird.

Tipps für die Arbeit mit dem Feld Hintergrund #

• Behalten Sie immer einen Fallback bei background-color Im Reiter CSS. deckt es neue Widgets und den Moment vor dem Laden eines Bildes ab.
• Text auf Fotos lesbar halten Das Beispielbanner fügt eine dunkle Ebene mit .promo-banner::before und isolation: isolate Auf der Box, so dass weißer Text auf hellen Bildern lesbar bleibt.
• Zeigen Sie den Selector auf ein Element Mehrere Hintergrundfelder auf verschiedenen Selektoren sind für Editoren einfacher als ein Feld, das von vielen Teilen gemeinsam genutzt wird.
• Halten Sie sich für benutzerdefinierte Widgets an die klassischen und gradientenspezifischen Typen.
• Für eine einzelne flache Farbe ohne Bild oder Farbverlauf ist die Farbfeld Für Redakteure einfacher ist.

Häufig gestellte Fragen #

Einwickelnd #

Fügen Sie das Hintergrundfeld zu einem Stilabschnitt hinzu, behalten Sie Typen auf Classic und Gradient bei und setzen Sie den Selector auf das Element, das sich ändern soll Legen Sie eine Fallback-Farbe in die CSS-Registerkarte und die Editoren können sie von dort übernehmen Für den Rest des Elementstylings siehe die Grenze und Kastenschatten Felder, und überprüfen Preisbildung Für das, was jeder Plan beinhaltet.