Hintergrund

Die Hintergrundfeld Hände Ihr benutzerdefiniertes Widget das gleiche Hintergrundfeld Elementor's Abschnitte verwenden: eine klassische Registerkarte für einfarbige Farben und Bilder, eine Farbverlaufsregisterkarte mit zwei Farbstopps und eine Video-Registerkarte für Bewegungshintergründe In den Master Addons Widget-builderIn 's, fügen Sie das Feld einmal hinzu, richten es auf einen CSS-Selektor, und jede Hintergrundentscheidung wandert in das Elementor-Panel.

Wie jedes Widget Builder-Steuerelement unterstützt Background Bedingungen Für die Panel-Sichtbarkeit läuft die Token-Ausgabe im gesamten Builder durch die Twig-Syntax-Vorlagen-Engine. Beide Leitfäden erläutern die Einrichtung und die Einschränkungen.

Hintergrund ist eine Gruppensteuerung, die gleiche Familie wie Typografie und Border Das heißt, das Verbindungsmodell unterscheidet sich von Text - oder Farbfeldern: Es gibt kein Token, das Sie in Ihr CSS einfügen können Sie füllen die Option Selector aus und Elementor schreibt die Hintergrundstile selbst in diesen Selektor.

Was das Hintergrundfeld bewirkt #

• Renders Elementors Hintergrundgruppensteuerung Im Panel Ihres Widgets mit Registerkarten für jeden Hintergrundtyp, den Sie zulassen.
• Klassische Registerkarte: Eine einfarbige Farbe oder ein Bild mit den üblichen Positions-, Größen- und Wiederholungseinstellungen.
• Gradientenregisterkarte: Zwei Farbstopps mit Standort-, Winkel- und Typsteuerung.
• Video-Tab: einen Bewegungshintergrund hinter dem ausgewählten Element.
• Schreibt das CSS selbst An den von Ihnen bereitgestellten Selektor, ohne dass ein Vorlagen-Token beteiligt ist.

Erstes Widget? mit dem beginnen Übersicht über Widget Builder Vor der Verkabelung Gruppensteuerungen.

Bevor Sie beginnen #

• WordPress Mit Elementor Installiert und aktiv.
• Master-Addons für Elementor Installiert und aktiv Neu im Plugin? siehe die Installationsführung.
• Ein benutzerdefiniertes Widget, das im Widget Builder-Editor geöffnet wird Unser Beispiel ist ein Helden-Widget, dessen <div class="hero-box"> Container sollte einen vom Editor gewählten Hintergrund annehmen.

So fügen Sie ein Hintergrundfeld hinzu #

Scrollen Sie im Widget Builder-Editor im Feldfenster auf der linken Seite, bis Sie das gefunden haben Hintergrund Feld, aufgelistet mit den anderen Stilgruppenfeldern wie Typografie und Box Shadow.

Ziehen Sie es in einen Abschnitt unter dem Stil Tab, sein natürliches Zuhause Sobald es landet, öffnen sich links die Optionen des Feldes.

Hintergrundfeldoptionen erläutert #

• Etikett: Der über dem Steuerelement in Elementor gezeigte Text, zum Beispiel “Hero Background”.
• Name: Die eindeutige Kennung für das Feld, Buchstaben, Zahlen und Unterstriche nur.
• Auswahl: Der CSS-Selektor, für den der Hintergrund gilt Dies ist die Verbindung selbst, die im nächsten Abschnitt behandelt wird.
• Typen: Welche Registerkarten das Steuerelement anzeigt, von klassisch, Verlauf und Video Das Zuschneiden der Liste hält das Panel fokussiert; ein Karten-Widget benötigt selten die Video-Registerkarte.
• Ausschließen: Entfernt einzelne Untersteuerelemente aus der Gruppe, wenn Sie eine reduzierte Version des Panels wünschen.
• Beschreibung, Zeigetikett, Trennzeichen und Bedingungen verhalten sich auf jedem Feld wie zuvor.

Richten Sie das Feld auf Ihren Wähler #

Hier ist der Teil, der Menschen auf die Probe stellt, wenn sie an die Token-Felder gewöhnt sind: Das Hintergrundfeld hat keine {{shortcode}} Für Ihr CSS. Ein Hintergrund ist ein Bündel von Eigenschaften, sodass er nicht durch einen Token drucken kann; Ein {{ token }} Für dieses Feld gibt nichts Sinnvolles aus Stattdessen füllen Sie die Wähler Option und Elementor generiert die Stile.

Für den Heldencontainer lautet die Auswahl:

{{WRAPPER}} .hero-box

• {{WRAPPER}} Steht für den Widget eigenen Container, den Hintergrund dieses Widgets alleine scopen Gruppensteuerungen verwenden den Selektor genau so wie geschrieben, also tippt man {{WRAPPER}} Sie selbst; Dir ist nichts voraus.
• .hero-box Ist das Element in Ihrem Widget HTML, das den Hintergrund empfängt.

Pass auf: lass {{WRAPPER}} Aus und der Selektor passt zu jedem .hero-box Auf der Seite landet also der Hintergrund eines Widgets auf allen Gruppensteuerungen nehmen den Selektor roh, was den Versand zum einfachsten Fehler macht.

Behalten Sie einen Fallback-Hintergrund im CSS-Tab des Widgets bei. Es ist das, was das Widget auf einem frischen Drop anzeigt, und die Werte des Steuerelements überschreiben es, sobald ein Editor etwas auswählt. Eine solide Fallback-Farbe verdient ihren Behalt zweimal, da sie auch den Moment abdeckt, bevor ein schweres Hintergrundbild zu Ende lädt Laden, das sonst bei langsamen Verbindungen weiß blinkt.

Verwenden Sie die Hintergrundsteuerung in Elementor #

Fügen Sie das Widget zu einer Seite in Elementor hinzu und laden Sie den Editor neu, wenn die Seite bereits geöffnet war. Das Steuerelement erscheint unter Ihrem Etikett mit einer Registerkarte pro erlaubtem Typ.

Wählen Sie auf dem klassischen Tab eine Farbe aus oder wählen Sie ein Bild aus der Mediathek mit Position, Größe und Wiederholungseinstellungen Wechseln Sie zur Registerkarte Farbverlauf für zwei Farbstopps mit Winkel und Ort, oder zur Registerkarte Video für einen Bewegungshintergrund Die Vorschau aktualisiert sich während Sie gehen.

Häufige Anwendungsfälle #

• Helden - und Banner-Widgets Wo jede Seite hinter der Überschrift ihr eigenes Bild oder ihren eigenen Farbverlauf haben möchte.
• Kartenhintergründe In Preistabellen, Teamrastern und Funktionslisten.
• Call-to-action-streifen Die zwischen einer Markenfarbe und einem Foto pro Kampagne wechseln.
• Video-header, wobei die Video-Registerkarte nur für dafür erstellte Widgets aktiviert ist.
• Überlagerungsfelder', wobei der Selektor auf eine innere Schicht über dem Medium gerichtet ist.

Tipps für die Arbeit mit dem Feld Hintergrund #

• Die Option Selector ist die gesamte Verbindung. Suchen Sie nicht nach einem Hintergrund-Token in der Registerkarte CSS; es gibt keinen.
• Starten Sie den Selektor immer mit {{WRAPPER}}. Gruppensteuerungen verwenden es roh, sodass eine bloße Klassenauswahl an jede Übereinstimmung auf der Seite durchsickert.
• Trimmen Sie die Typenliste. Wenn Sie nur klassische und verlaufende Karten-Widgets anbieten, bleiben sie einfach und verhindern, dass Editoren Videos dort ablegen, wo sie nicht hingehören.
• Behalten Sie Fallback-Stile im Widget CSS bei. Eine Standardhintergrundfarbe in Ihrem Stylesheet macht das Widget vorzeigbar, bevor jemand das Steuerelement öffnet.
• Gedankentextkontrast. Wenn Editoren den Hintergrund steuern, koppeln Sie das Widget mit Farbsteuerelementen für den darauf sitzenden Text.

Häufig gestellte Fragen #

Einwickelnd #

Das Widget Builder-Hintergrundfeld bringt Hintergrundbearbeitung auf Abschnittsniveau zu jedem Element eines benutzerdefinierten Widgets: Benennen Sie das Feld und legen Sie den Selektor fest {{WRAPPER}} Plus Ihrer Klasse, und wählen Sie aus, welche Typen der Editor sieht Es folgt dem gleichen Selektormodell wie die Typografiefeld„Wenn also eine Gruppensteuerung klickt, tut es auch der Rest. Entdecken Sie den Rest Master Addons Widgets und Erweiterungen, und sehen Sie sich die an Preisseite Für das, was jeder Plan beinhaltet.