Farbfeld

Einen Editor ein Widget neu einfärben zu lassen, ohne das CSS zu öffnen, ist eines der nützlichsten Dinge, die ein benutzerdefiniertes Widget tun kann Die Farbfeld In den Master Addons Widget-builder Lässt den Farbwähler von Elementor in Ihr Widget-Panel fallen, komplett mit globalen Farben und einem optionalen Alphakanal. Sie benennen das Feld, wählen aus, wo es lebt, und sein Shortcode wird direkt in Ihr CSS eingespeist.

Wie jedes Widget Builder-Feld unterstützt das Farbfeld Bedingungen Für Panel-Sichtbarkeit Sein Token wird von der Twig-Syntax-Vorlagen-Engine„Dadurch können Sie die ausgewählte Farbe überall in Ihrem CSS drucken. Beide Anleitungen behandeln Einrichtung und Einschränkungen.

Das ist eine Stilkontrolle, also geht es in der Demo unter die Stil Tab. Das Feld funktioniert jedoch gleich, egal in welcher Registerkarte Sie es platzieren. Wo es lebt, ist Ihr Anruf, und es kommt darauf an, wie Sie die Steuerelemente Ihres benutzerdefinierten Widgets organisieren möchten.

Was das Feld Farbe bewirkt #

Das Feld Farbe rendert den nativen Farbwähler von Elementor im Optionsfeld Ihres Widgets, Editoren klicken auf den Swatch, wählen eine Farbe (oder eine globale Farbe aus dem Theme), und Ihr Widget gibt diesen Wert aus, wo immer Sie den passenden Shortcode platziert haben Meistens bedeutet das eine CSS-Eigenschaft wie color, background, oder border-color.

Da es Elementors eigenen Picker verwendet, erhalten Redakteure die Steuerung, die sie bereits kennen: den Swatch, den Eyedropper, aktuelle Farben und die globale Farbpalette Schalten Sie den Alphakanal ein und Sie können auch Transparenz einstellen.

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. Erster? Beginnen Sie mit dem Übersicht über Widget Builder.

So fügen Sie ein Farbfeld hinzu #

Suchen Sie im Widget Builder-Editor das Feldfeld auf der linken Seite und ziehen Sie die Farbe Feld in einen Abschnitt Da Farbe eine Stylingwahl ist, wird die Stil Tab ist das natürliche Zuhause, aber die Inhalt und Fortgeschritten Tabs nehmen es genauso gut an, sobald das Feld steht, öffnen sich seine Optionen links und sein Shortcode erscheint im Dokumentation Seitenleiste neben dem Code-Editor.

Farbfeldoptionen erklärt #

Wählen Sie das Feld Farbe, um seine Einstellungen zu öffnen Die meisten Optionen stimmen mit den anderen Feldern überein, plus eines, das spezifisch für die Farbe ist.

• Etikett: Der über dem Picker in Elementor gezeigte Text, zum Beispiel “Textfarbe”.
• Name: Die eindeutige Kennung für das Feld Buchstaben, Zahlen, und Unterstriche nur Dies wird Ihr Shortcode, also ein Feld mit dem Namen color Gibt dir {{color}}.
• Beschreibung: Optionaler Helfertext, der unter dem Steuerelement angezeigt wird.
• Alpha: Schalten Sie dies ein, um Transparenz im Picker zu ermöglichen. Wenn es ausgeschaltet ist, können Redakteure nur Volltonfarben auswählen. Aktivieren Sie es, wenn Sie rgba-Werte benötigen, wie ein halbtransparentes Overlay.
• Standardwert: Die Startfarbe als Hex-Wert, wie #FFFFFF. Stellen Sie dies so ein, dass das Widget fertig aussieht, bevor es jemand berührt.

Gemeinsame Einstellungen: responsive, dynamische und mehr #

Unterhalb des Standardwerts erhalten Sie dasselbe Gemeinsame Einstellungen Wie jedes Feld im Builder: Label, Label Block, Responsive Control, Dynamic Support, Frontend Available, Separator, and Conditions anzeigen Responsive Control ist hier praktisch, wenn Sie eine andere Farbe pro Gerät wünschen Die Textfelddokumentation Handelt sich jeweils im Detail um.

Verbinden Sie das Feld mit Ihrem Code #

Ein Farbfeld namens color Den Token produziert {{color}} In der Seitenleiste Dokumentation. Geben Sie es als Wert einer beliebigen Farbeigenschaft in Ihr CSS ein. Um beispielsweise den Heldentext zu färben:

Im CSS-Editor würde man so etwas schreiben wie .hero-content { color: {{color}}; }. Wenn der Editor eine Farbe in Elementor auswählt, tauscht Master Addons das Token gegen diesen Wert und der Text färbt live neu. Das gleiche Token funktioniert für background, border-color, oder alles, was eine Farbe annimmt, und Sie können sie in so vielen Regeln wiederverwenden, wie Sie brauchen Eines, das Sie beachten sollten: Behalten Sie den Token als den gesamten Wert, also color: {{color}};, nicht in Anführungszeichen verpackt, oder das CSS wird nicht angewendet.

Verwenden Sie die Farbsteuerung in Elementor #

Ziehen Sie Ihr benutzerdefiniertes Widget auf eine Seite und öffnen Sie es im Elementor-Editor. Unter der Registerkarte, auf der Sie das Feld platziert haben, wird das Farbsteuerelement als Standard-Swatch mit der Schaltfläche für globale Farben daneben angezeigt Klicken Sie darauf, wählen Sie eine Farbe aus und das Widget aktualisiert sich auf der Leinwand.

Die Redakteure können eine einmalige Farbe wählen oder auf das Globussymbol klicken, um aus den globalen Farben der Website zu ziehen, wodurch benutzerdefinierte Widgets auf der Marke bleiben Wenn Sie Dynamic Support aktiviert haben, erscheint auch hier das dynamische Tags-Symbol.

Häufige Anwendungsfälle #

• Textfarbe für Überschriften und Absätze.
• Hintergrundfarbe Für Abschnitte, Karten und Schaltflächen.
• Rand - und Akzentfarben Markenpalette gebunden.
• Überlagerungszinken Nutzung des Alphakanals für Transparenz.
• Schwebezustände In Kombination mit einem zweiten Farbfeld.

Tipps für die Arbeit mit dem Feld Farbe #

• Platzieren Sie es überall dort, wo es zu Ihrem Widget passt. Stil ist die Konvention, aber das Feld funktioniert unter jeder Registerkarte, also organisieren Sie die Kontrollen so, wie es für Sie sinnvoll ist.
• Schalten Sie Alpha nur ein, wenn Sie Transparenz benötigen. Bei einfarbigen Markenfarben ist der Picker durch das Weglassen einfacher.
• Legen Sie einen sinnvollen Standardwert fest. Eine gute Voreinstellung bedeutet, dass das Widget genau dann aussieht, wenn es auf einer Seite verworfen wird.
• Lehnen Sie sich an globale Farben. Ermutigen Sie Redakteure, aus der globalen Palette auszuwählen, damit Widgets auf der gesamten Website konsistent bleiben.
• Erstellen Sie das Feld, bevor Sie auf seinen Shortcode verweisen. Der Token existiert erst, nachdem sich das Feld auf dem Panel befindet.

Häufig gestellte Fragen #

Einwickelnd #

Das Feld Widget Builder Color verwandelt eine hartcodierte Farbe in einen bearbeitbaren Picker in Ihrem eigenen benutzerdefinierten Widget. Benennen Sie es, wählen Sie, ob Sie Alpha zulassen möchten, legen Sie eine Standardeinstellung fest und leiten Sie es weiter {{color}} In dein CSS. danach kann jeder das Widget von Elementor neu einfärben, mit globalen Farben und Transparenz vom Fass Schaut euch den Rest an Master Addons Widgets und Erweiterungen& überprüfen Sie die Preisseite Für das, was jeder Plan beinhaltet.