Text Schatten

Die Text Schattenfeld Fügt Ihrem benutzerdefinierten Widget das Text-Schatten-Steuerelement von Elementor hinzu: horizontaler und vertikaler Versatz, Unschärfe und eine Farbe mit Deckkraft, angewendet auf den Text, auf den Ihr Auswahlelement zeigt. Innerhalb der Master-Addons Widget-builderDies ist der schnellste Weg, Redakteuren die Möglichkeit zu geben, eine Überschrift über einem vielbeachteten Foto lesbar zu halten oder dem Displaytyp einen subtilen Auftrieb zu verleihen.

Wie jedes Widget Builder-Steuerelement unterstützt Text Shadow Bedingungen, praktisch, um es nur dann anzuzeigen, wenn eine Schattenoption aktiviert ist, und die Token-Ausgabe über den Builder läuft durch das Twig-Syntax-Vorlagen-Engine. Beide Leitfäden behandeln Einrichtung und Einschränkungen.

Text Shadow ist ein Gruppensteuerelement, das kleinste der Familie, das Typografie und Hintergrund umfasst Die Verkabelung ist identisch: kein Token in Ihrem CSS, nur eine Option Selector, die Elementor angibt, welches Element gestylt werden soll.

Was das Feld Textschatten bewirkt #

• Renders Elementors Text-Schattengruppensteuerung, geöffnet vom Bleistiftsymbol neben dem Etikett des Feldes.
• Horizontale und vertikale Offsets Platzieren Sie den Schatten um die Glyphen.
• Unschärfe Weicht es, von einer harten doppelten Kante bis zu einem breiten Leuchten.
• Farbe Enthält einen Alphakanal für realistische Schatten mit geringer Opazität.
• Schreibt das CSS selbst an den von Ihnen bereitgestellten Selektor; Es gibt keinen Vorlagen-Token.

Noch nie ein Widget gebaut? mit dem beginnen Übersicht über Widget Builder Und wiederkommen, wenn man einmal einen offen hat.

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 Fotobanner-Widget mit einem <h2 class="banner-title"> Auf dem Bild sitzend voranschreiten.

So fügen Sie ein Textschattenfeld hinzu #

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

Ziehen Sie es in einen Abschnitt unter dem Stil Tab, meist rechts neben dem Feld Typografie, das den gleichen Text styles Sobald es landet, öffnen sich links die Optionen des Feldes.

Text Shadow Feldoptionen erklärt #

• Etikett: Der neben dem Steuerelement in Elementor abgebildete Text, zum Beispiel “Titelschatten”.
• Name: Die eindeutige Kennung für das Feld, Buchstaben, Zahlen und Unterstriche nur.
• Auswahl: Der CSS-Selektor, auf den der Schatten zutrifft Dies ist die Verbindung selbst, als nächstes abgedeckt.
• Ausschließen: Entfernt einzelne Untersteuerungen aus der Gruppe, wenn Sie einen abgeschnittenen Popover wünschen.
• Beschreibung, Etikett anzeigen, Trennzeichen und Bedingungen sind die Standardanzeigeoptionen, die Sie auf anderen Feldern gesehen haben.

Richten Sie das Feld auf Ihren Wähler #

Wie die anderen Gruppensteuerungen Das Feld Textschatten hat keine {{shortcode}} Für Ihr CSS. Der Schatten bündelt Offsets, Unschärfe und Farbe in einer Eigenschaft, also a {{ token }} Für das Feld druckt nichts Nützliches Die Wähler Option trägt die gesamte Verbindung.

Für die Bannerüberschrift lautet die Auswahl:

{{WRAPPER}} .banner-title

• {{WRAPPER}} Steht für den eigenen Container des Widgets, der den Schatten in diesem Widget behält Gruppensteuerelemente wenden den Selektor wie geschrieben an, also {{WRAPPER}} Zu tippen ist dein; es wird nicht für dich hinzugefügt.
• .banner-title Ist das Textelement in Ihrem Widget HTML.

Aufgepasst: überspringen {{WRAPPER}} und die Auswahlstile alle .banner-title Über die Seite, auch in anderen Widgets Das Setup spiegelt die Typografiefeld Genau, also ein Selektor, der dort funktioniert, funktioniert hier.

Wenn das Design einen Standardschatten erfordert, behalten Sie ihn als Fallback im CSS-Tab des Widgets. Das Steuerelement überschreibt ihn, sobald ein Editor Werte festlegt.

Verwenden Sie das Text Shadow-Steuerelement in Elementor #

Fügen Sie Ihr benutzerdefiniertes Widget zu einer Seite in Elementor hinzu oder laden Sie den Editor neu, wenn er bereits geöffnet war. Das Steuerelement zeigt Ihr Etikett und ein Bleistiftsymbol, das den Schatten-Popover öffnet.

Wählen Sie eine Farbe aus, dann passen Sie Unschärfe und die beiden Offsets an Ein dunkler Schatten bei geringer Deckkraft mit ein paar Pixeln Unschärfe hält eine Überschrift über Fotografie lesbar; größere Offsets mit null Unschärfe erzeugen einen Retro-Anzeigeffekt Die Vorschau-Updates mit jeder Änderung Stimmen Sie das Ergebnis gegen das hellste Foto, das die Website wahrscheinlich verwenden wird, nicht nur das Demobild, denn ein Schatten, der auf einem dunklen Hintergrund eingewählt wird, kann auf einem hellen vollständig verschwinden.

Häufige Anwendungsfälle #

• Überschriften über Fotos In Helden- und Banner-Widgets, bei denen der Schatten Kontraste zurückkauft.
• Text auf Video-Hintergründen, die sich ständig verschieben und die zusätzliche Kante benötigen.
• Display-Typeffekte Wie zum Beispiel hartversetzte Schatten auf großen Ziffern.
• Lichttext auf Lichtbildern, wo ein weicher dunkler Heiligenschein die Bildunterschriften lesbar hält.
• Abzeichen und Etiketten Sitzen auf Gefällen oder gemusterten Bereichen.

Tipps für die Arbeit mit dem Feld Textschatten #

• Die Option Selector ist die gesamte Verbindung. Für Gruppensteuerelemente existiert kein Token, daher geht für dieses Feld nichts in die Registerkarte CSS.
• Starten Sie den Selektor immer mit {{WRAPPER}}. Es wird roh verwendet und ohne es erreicht der Schatten jedes passende Element auf der Seite.
• Koppeln Sie es mit einem Typografiefeld auf demselben Selektor. Schriftart - und Schattenentscheidungen für eine Überschrift sitzen dann gemeinsam im Panel.
• Bevorzugen Sie Farben mit geringer Opazität. Schatten, die aus dem Alphakanal der Farbe bestehen, sind im Design enthalten; Vollschwarz tut es selten.
• Verwenden Sie Ausschließen, um die Vereinfachung. Wenn ein Widget immer nur Unschärfe und Farbe benötigt, hält das Zuschneiden der Gruppe den Popover klein.
• Senden Sie einen Fallback im CSS-Tab Wenn das Standarddesign davon abhängt, dass der Schatten vorhanden ist.

Häufig gestellte Fragen #

Einwickelnd #

Das Feld Widget Builder Text Shadow ist ein kleines Steuerelement, das ein wiederkehrendes Problem löst: Text, der lesbar bleiben muss, egal welches Bild ein Editor dahinter fallen lässtNennen Sie das Feld, stellen Sie den Selector auf {{WRAPPER}} Plus die Klasse des Textes, und der Schatten lebt fortan im Panel, Er teilt sein Selektormodell mit dem Typografiefeld(was ja meistens eh auf die gleiche Überschrift gehört Erkunde den Rest der Master Addons Widgets und Erweiterungen, und sehen Sie sich die an Preisseite Für das, was jeder Plan beinhaltet.