Text Schatten

Das Textschattenfeld fügt das Textschattensteuerelement von Elementor zu einem benutzerdefinierten Widget hinzu, das mit den Master-Addons erstellt wurde Widget-builder. Editoren erhalten eine Farbe, eine Unschärfeeinstellung und zwei Offsets, und der Schatten wird auf den Text angewendet, auf den Ihr CSS-Auswahler zeigt Verwenden Sie ihn, wenn eine Überschrift auf einem Foto lesbar bleiben muss.

Text Shadow ist ein Pro-Feld Das kostenlose Plugin enthält einen begrenzten Widget Builder und der vollständige Satz an Feldern ist im Lieferumfang enthalten Master Addons Pro.

Was das Feld Textschatten bewirkt #

• Es fügt dem Panel Ihres Widgets in Elementor ein Steuerelement hinzu: Ihr Etikett und ein Bleistiftsymbol, das die Schatteneinstellungen öffnet.
• Diese Einstellungen sind Farbe (mit Deckkraft), Unschärfe, horizontal und vertikal.
• Elementor schreibt die text-shadow CSS auf das Element, das in der Auswahloption des Feldes festgelegt ist, sodass Sie kein Token in Ihrem HTML oder CSS platzieren.

Wenn Sie noch kein Widget gebaut haben, lesen Sie die Übersicht über Widget Builder Zuerst und kommen Sie mit einem geöffneten Widget zurück.

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 “Foto Banner” - Widget: ein Hintergrundfoto mit einer H2-Überschrift oben drauf, das die Klasse hat banner-titleAus einem Textfeld mit dem Namen ausgefüllt banner_title.

So fügen Sie ein Textschattenfeld hinzu #

1. Gehe zu Master-Addons > Widget Builder und öffnen Sie Ihr Widget.
2. Klicken Sie auf die Stil Tab über dem Bereich Abschnitte und fügen Sie einen Abschnitt hinzu, wenn der Tab leer ist Geben Sie dem Abschnitt einen klaren Titel, z.B. “Bannertitel”.
3. Typ shadow Im Feldsuchfeld links Box Shadow und Text Shadow kommen hoch.
4. Ziehen Text Schatten In den Abschnitt Seine Einstellungen öffnen sich in der linken Seitenleiste.

Sie können das Feld auch in einen Inhalts- oder Erweiterungsbereich einfügen, und das Steuerelement wird dann in dieser Elementor-Registerkarte angezeigt. Redakteure suchen jedoch normalerweise unter Stil nach Schatten.

Text Shadow Feldoptionen erklärt #

• Etikett Ist der Text neben dem Steuerelement in Elementor Das Beispiel verwendet “Titelschatten”.
• Name Ist die eindeutige ID des Feldes (nur Buchstaben, Zahlen und Unterstriche) Elementor speichert die Werte des Editors unter diesem Namen, also einmal einstellen und lassen.
• Beschreibung Ist ein Hinweis für Sie im Inneren des Builders Elementor zeigt es nicht unter dieser Kontrolle an.
• Standardwert Wird von diesem Feld nicht verwendet Ein neuer Schatten beginnt immer bei den eigenen Standardeinstellungen von Elementor, die weiter unten aufgeführt sind.

Scrollen Sie in der Seitenleiste nach unten, um die gemeinsamen Einstellungen und den Selector zu erreichen.

• Etikett anzeigen Versteckt oder zeigt das Etikett im Panel.
• Trenner Zeichnet eine Trennlinie vor oder nach der Steuerung.
• Bedingungen Steuerung nur anzeigen, wenn ein anderes Feld einen bestimmten Wert hat, z.B. ein “Schatten anzeigen” - Switcher Siehe Bedingungen.
• Wähler Ist der CSS-Selektor, der den Schatten empfängt Das Feld macht ohne nichts Sinnvolles, daher hat es unten einen eigenen Abschnitt.

In der Liste erscheinen auch Label Block, Responsive Control, Dynamic Support, Frontend Available und Control Classes, ein Text-Schatten-Control verwendet sie nicht, und sie zu ändern hat keine Auswirkungen auf dieses Feld.

Stellen Sie den Selektor ein #

Der Selector teilt Elementor mit, welches Element den Schatten erhält. Geben Sie für die Bannerüberschrift ein:

{{WRAPPER}} .banner-title

• {{WRAPPER}} Wird durch die eindeutige Klasse dieses Widgets auf der Seite ersetzt, die den Schatten in diesem einen Widget behält.
• .banner-title Klasse auf der Überschrift im HTML Ihres Widgets ist.

Das Feld verwendet Ihren Selektor genau so, wie er eingegeben wurde Ohne {{WRAPPER}}Regel wird .banner-title { text-shadow: ... } Für die ganze Seite, und jedes Element mit dieser Klasse nimmt es auf, auch Überschriften in anderen Widgets, Wenn Sie den Selector leer lassen, geht der Schatten zu {{WRAPPER}} .elementor-widget-container, die den gesamten Text im Widget abdeckt.

Ein Steuerelement kann mehrere Elemente stylen Trennen Sie die Selektoren mit Kommas und starten Sie jedes mit {{WRAPPER}}(zum Beispiel {{WRAPPER}} .banner-title, {{WRAPPER}} .banner-subtitle.

Das Dokumentationsfeld neben dem Code-Editor listet a auf {{title_shadow}} Token für dieses Feld Lassen Sie es aus Ihrem HTML und CSS. Ein Schatten wird als Zahlen und eine Farbe gespeichert, so dass das Token keinen Text zum Drucken hat, und der Selector bereits die Ausgabe übernimmt.

Klicken Sie auf Einstellungen speichern Wenn du fertig bist.

Verwenden Sie das Text Shadow-Steuerelement 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. Die Steuerung sitzt in dem von Ihnen erstellten Abschnitt, der Ihr Etikett und ein Bleistiftsymbol zeigt.

Klicken Sie auf den Bleistift, um den Popover zu öffnen. Das schaltet den Schatten mit den Startwerten von Elementor ein: Unschärfe 10, Horizontal 0, Vertikal 0 und Schwarz bei 30% Deckkraft. Die Leinwand aktualisiert sich, während Sie die Schieberegler ziehen.

• Unschärfe Läufe von 0 bis 100 px. Bei 0 bekommt man eine scharfe Kopie der Buchstaben, und höhere Werte erweichen es zu einem Leuchten.
• Horizontal und Vertikal Lauf von -100 auf 100 px und verschiebe den Schatten nach links oder rechts und nach oben oder unten.

Klicken Sie auf den Farb-Swatch, um die Schattenfarbe auszuwählen Der Picker hat einen Deckkraft-Slider und akzeptiert HEXA, RGBA - oder HSLA-Werte, sodass Sie einen Wert eingeben können, wie z.B rgba(0, 0, 0, 0.65) Direkt.

Um den Schatten zu entfernen, klicken Sie auf den kreisförmigen Reset-Pfeil neben dem Bleistift.

Häufige Anwendungsfälle #

• Überschriften auf Helden - und Bannerfotos mit hellen Bereichen hinter dem Text.
• Text auf Videohintergründen, wobei ein weicher Schatten die Wörter lesbar hält, wenn sich der Rahmen ändert.
• Retro-Anzeigetyp, z. B. ein Hard Offset mit null Unschärfe bei großen Zahlen oder Verkaufsabzeichen.
• Ein Leuchten auf dunklen Hintergründen, hergestellt mit einer hellen Schattenfarbe, einer großen Unschärfe und ohne Versatz.

Tipps für die Arbeit mit dem Feld Textschatten #

• Starten Sie jeden Selektor mit {{WRAPPER}}. Andernfalls kann der Schatten in andere Widgets auf der Seite gelangen.
• Legen Sie das Feld neben ein Typografiefeld, das denselben Selektor verwendet, sodass die Schriftart- und Schatteneinstellungen der Überschrift in einem Abschnitt liegen.
• Wählen Sie eine halbtransparente Farbe Schwarz mit 40 bis 70% Deckkraft sieht natürlich aus, und einfarbiges Schwarz sieht tendenziell schwer aus.
• Überprüfen Sie den Schatten mit dem hellsten Bild, das das Widget wahrscheinlich erhalten wird. Ein Schatten, der auf einem dunklen Foto funktioniert, kann auf einem hellen verschwinden.
• Wenn das Design einen Schatten benötigt, bevor jemand das Steuerelement berührt, fügen Sie einen hinzu text-shadow Regel für .banner-title Im Reiter CSS. ersetzt der Wert des Steuerelements, sobald ein Editor einen setzt.
• Für Karten, Knöpfe und Behälter verwenden Sie die Kastenschattenfeld Stattdessen folgt Text Shadow der Form der Buchstaben.

Häufig gestellte Fragen #

Einwickelnd #

Geben Sie das Textschattenfeld in einen Stilabschnitt, geben Sie ihm eine Beschriftung und einen Namen und stellen Sie den Selektor auf {{WRAPPER}} Plus die Klasse Ihres Textes Editoren erhalten dann in Elementor Farb, Unschärfe - und Offset-Steuerelemente, und der Schatten bleibt in diesem Widget. Koppeln Sie es mit dem Typografiefeld Für den Rest des Überschriftenstylings und überprüfen Sie Preisbildung Für das, was jeder Plan beinhaltet.