Kastenschatten

Die Kastenschattenfeld Platziert den Standard-Schattenregler von Elementor im Bedienfeld Ihres benutzerdefinierten Widgets: horizontaler und vertikaler Versatz, Unschärfe, Spreizung, Farbe mit Deckkraft und ein eingesetzter Knebel. Innerhalb der Master-Add-ons Widget-builderIn „es ist das Feld, mit dem Redakteure eine Karte von der Seite heben, eine Schaltfläche aufweichen oder eine Eingabe auslassen können, ohne das Stylesheet zu berühren.

Die Box Shadow Steuerung unterstützt Bedingungen„Eine saubere Möglichkeit, es nur anzuzeigen, wenn ein Schattenumschalter eingeschaltet ist, und die Token-Ausgabe im gesamten Builder wird vom Builder verwaltet Twig-Syntax-Vorlagen-Engine. Beide Leitfäden behandeln Einrichtung und Einschränkungen.

Box Shadow ist ein Gruppensteuerelement, die gleiche Familie wie Typografie und Hintergrund Die Verbindung zu Ihrem Widget ist ein CSS-Selektor, kein Token: Sie sagen dem Feld, welches Element es stylt, und Elementor schreibt den Schatten von selbst dorthin.

Was das Feld Box Shadow bewirkt #

• Renders Die Box Schattengruppensteuerung von Elementor, geöffnet vom Bleistiftsymbol neben dem Etikett des Feldes.
• Horizontale und vertikale Offsets Positionieren Sie den Schatten um das Element.
• Unschärfe und Ausbreitung Weichheit und Reichweite kontrollieren.
• Farbe Einen Alphakanal beinhaltet, von dem die meisten Schattenqualität herrührt.
• Positionsknebel Wechselt zwischen einem äußeren Schatten und Einschub.
• Schreibt das CSS selbst an den von Ihnen bereitgestellten Selektor; Es existiert kein Vorlagen-Token.

Wenn Sie neu im Erstellen von Widgets sind, ist die Übersicht über Widget Builder Ort ist, um zu beginnen.

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 Testimonial-Widget, dessen <article class="quote-card"> Editorgesteuerten Schatten tragen soll.

So fügen Sie ein Box Shadow-Feld hinzu #

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

Ziehen Sie es in einen Abschnitt unter dem Stil Tab, typischerweise neben den Feldern Grenze und Maße in einem Abschnitt zum Kartenstyling Sobald es landet, öffnen sich die Optionen des Feldes auf der linken Seite.

Feldoptionen für Box Shadow erklärt #

• Etikett: Der neben dem Steuerelement in Elementor abgebildete Text, zum Beispiel “Kartenschatten”.
• 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.
• Feldoptionen: Überschreibt die Untersteuerungen innerhalb der Gruppe, z. B. das Ändern eines Standardwerts, von dem der Schatten ausgeht.
• Beschreibung, Etikett anzeigen, Trenner und Bedingungen sind die üblichen Anzeigeoptionen.

Richten Sie das Feld auf Ihren Wähler #

Wie jede Gruppensteuerung Das Feld Box Shadow hat keine {{shortcode}} Für Ihr CSS. Ein Schatten besteht aus mehreren Werten, die in eine Eigenschaft gerollt werden, und a {{ token }} Für das Feld druckt nichts Nützliches Die Wähler Option ist die ganze Verbindung.

Für die Testimonialkarte lautet die Auswahl:

{{WRAPPER}} .quote-card

• {{WRAPPER}} Steht für den eigenen Container des Widgets und hält den Schatten auf dieses Widget beschränkt Gruppensteuerungen verwenden den Selektor genau so, wie Sie ihn schreiben, also tippen {{WRAPPER}} sich.
• .quote-card Ist das Element in Ihrem Widget HTML, auf dem der Schatten landet.

Achtung: ein Selektor ohne {{WRAPPER}} Zählt jeden .quote-card Auf der Seite, also die Schatteneinstellungen eines Widgets gestalten alle neu Nichts warnt dich; die Stile verbreiten sich einfach.

Behalten Sie einen Fallback-Schatten auf der CSS-Registerkarte des Widgets, wenn das Design von einem abhängt. Es ist der Look beim ersten Drop, und die Werte des Steuerelements übernehmen die Kontrolle, sobald ein Editor den Popover öffnet.

Verwenden Sie die Box Shadow-Steuerung in Elementor #

Platzieren Sie das Widget auf einer Seite in Elementor, laden Sie den Editor neu, wenn die Seite bereits geöffnet war Das Steuerelement zeigt Ihr Etikett mit einem Bleistiftsymbol; Klicken darauf öffnet sich der Schatten-Popover.

Legen Sie zuerst die Farbe fest, ziehen Sie dann Blur nach oben und halten Sie die Offsets klein für den Softcard-Look, oder drücken Sie Vertical mit null Blur nach oben für einen harten grafischen Schatten Drehen Sie Position, um sie für eingepresste Felder und Vertiefungen einzufügen Die Vorschau verfolgt jede Änderung Eine Layout-Anmerkung: Schatten nehmen keinen Platz im Fluss, so dass ein großzügiger Spread in die Abschnitte oben und unten bluten kann, ohne etwas zu bewegen, was es wert ist, überprüft zu werden, wenn das Widget zwischen engen Reihen sitzt.

Häufige Anwendungsfälle #

• Karten In Testimonial-, Preis- und Team-Widgets, bei denen ein weicher Schatten die Karte von der Seite trennt.
• Knöpfe Das erfordert Tiefe im Standardzustand.
• Bilderrahmen, Fotos einen angehobenen, druckartigen Rand geben.
• Klebestäbe und -platten Wo ein Schatten eine Erhöhung über dem Inhalt signalisiert.
• Formularfelder einfügenVerwenden Sie den eingelegten Knebel für ein versenktes Aussehen.

Tipps für die Arbeit mit dem Feld Box Shadow #

• Die Option Selector ist die gesamte Verbindung. Es gibt kein Box-Shadow-Token für die CSS-Registerkarte; Die Erwartung einer solchen ist die häufigste Sackgasse mit Gruppensteuerungen.
• Starten Sie den Selektor immer mit {{WRAPPER}}. Das Feld verwendet es roh und lässt es weg und verschüttet den Schatten auf jedes passende Element auf der Seite.
• Gruppieren Sie es mit Border and Dimensions. Die drei Felder bilden zusammen einen vollständigen Kartenstilabschnitt im Panel.
• Lehnen Sie sich auf Farbe Alpha, nicht auf Dunkelheit. Ein schwarzer Schatten mit einer Deckkraft von 10 bis 15 Prozent liest sich besser als ein einfarbiger grauer, und er ist eine Anmerkung in der Beschreibung Ihres Fachgebiets wert.
• Behalten Sie einen Fallback im Widget CSS bei. Wenn das Design standardmäßig einen Schatten benötigt, senden Sie ihn im Stylesheet und lassen Sie die Steuerung ihn außer Kraft setzen.

Häufig gestellte Fragen #

Einwickelnd #

Das Widget Builder Box Shadow-Feld gibt Redakteuren echte Kontrolle über die Tiefe: ein Feld, ein Selektor, der mit beginnt {{WRAPPER}}‘und im Panel erscheint der ganze Schatten-Popover. Es funktioniert auf demselben Auswahlmodell wie das Typografiefeld„Das Setup wird also direkt zwischen den Gruppensteuerelementen übertragen. Entdecken Sie den Rest Master Addons Widgets und Erweiterungen, und sehen Sie sich die an Preisseite Für das, was jeder Plan beinhaltet.