Wählen Sie

Die Feld wählen Rendert eine Reihe von Symbol-Tasten im Panel Ihres Widgets, die gleiche Steuerung, die Elementor für die Textausrichtung verwendet: drei oder vier Tasten, eine nach der anderen aktiv Innerhalb der Master-Addons Widget-builder„Es ist die richtige Wahl, wenn es nur wenige Optionen gibt und ein Symbol mehr als ein Wort sagt. Ausrichtung ist das offensichtliche Beispiel, aber Positions- und Richtungsschalter passen in die gleiche Form.

Die Optionstasten des Choose-Steuerelements arbeiten direkt mit Bedingungen, so können andere Felder basierend auf der ausgewählten Option und mit der Twig-Syntax-Vorlagen-EngineWo ein Scheck wie {% if align == "center" %} Schaltet Ihr Markup Beide Guides behandeln die Details.

Wie beim Select ist der Ihrer Vorlage übergebene Wert der Schlüssel der Option, nicht ihr Titel. Was der Choose oben hinzufügt: ein Symbol pro Option, ein optionales Umschaltverhalten und ein einfacher Pfad in den Selektormechanismus von Elementor für reine CSS-Auswahlmöglichkeiten wie Ausrichtung.

Was das Feld Wählen bewirkt #

• Rendert eine Reihe von Symbolknöpfen Im Elementor-Panel eine pro Option, die Sie definieren.
• Hält einen Schlüssel Aus dem definierten Set, jeweils genau eine Taste aktiv.
• Kombiniert jede Option mit einem Eicon(wie z eicon-text-align-left, die Wahl liest sich also auf einen Blick.
• Schaltet optional ab: Wenn Sie die Option Umschalten einschalten, wird die Auswahl durch erneutes Klicken auf die aktive Schaltfläche abgebrochen und der Wert wird leer.
• Unterstützt ein responsives Flag und kann CSS direkt über einen unten behandelten Selektor schreiben.

Wenn Sie neu im Erstellen von Widgets sind, beginnen Sie mit dem Übersicht über Widget Builder Zuerst.

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 öffnet sich im Widget Builder Editor Unser Beispiel ist ein Testimonial Widget mit einem “Quote Alignment” Chooser: links, Mitte, rechts.

So fügen Sie ein Feld Wählen hinzu #

Im Widget Builder-Editor finden Sie die Wählen Sie Feld im Feld links, gruppiert mit den anderen Auswahlfeldern.

Ziehen Sie es in einen Abschnitt unter dem Stil Tab; ausrichtungsartige Einstellungen leben dort natürlich Sobald es landet, öffnen sich links die Optionen des Feldes.

Feldoptionen erklärt wählen #

• Etikett: Der neben den Schaltflächen in Elementor angezeigte Text, zum Beispiel “Zitatausrichtung”.
• Name: Die eindeutige Kennung für das Feld, Buchstaben, Zahlen und Unterstriche, zum Beispiel quote_align.
• Optionen: Jede Option ist ein Schlüssel plus ein Titel und ein Icon Der Titel wird zum Tooltip des Buttons und das Icon ist eine Eicon-Klasse, zum Beispiel eicon-text-align-left für den Schlüssel left.
• Umschalten: Beim Einklicken wird der Aktiv-Button erneut abgewählt und der Wert des Feldes wird leer Lassen Sie es aus, wenn das Widget immer einen Wert benötigt.
• Standard: Der Schlüssel wird aktiv, wenn das Widget zum ersten Mal auf einer Seite abfällt.
• Responsiv: Fügt das Gerätesymbol hinzu, damit die Ausrichtung je nach Haltepunkt unterschiedlich sein kann.
• Beschreibung, Etikett anzeigen, Trenner: Die Standard-Anzeigeeinstellungen sowie Bedingungen für die Anzeige des Feldes nur dann, wenn ein anderes Steuerelement einen bestimmten Wert hat.

Verbinden Sie die Auswahl mit Ihrer Vorlage oder einem Selektor #

Es gibt zwei Verdrahtungsstile Das Ausrichtungsbeispiel funktioniert mit beiden.

Mustervorlagen. Der Token druckt den ausgewählten Schlüssel aus, sodass die Muster auswählen unverändert übernommen werden Eine Modifikatorklasse behält die Varianten in Ihrem CSS-Tab:

<blockquote class="quote align--{{ quote_align }}">
  {{ quote_text }}
</blockquote>

Mit .align--center { text-align: center; } und Freunde im CSS-Tab Konditionale funktionieren auch: {% if quote_align == 'center' %}. Wie beim Select, vergleichen Sie mit dem Schlüssel, niemals dem Titel.

Die Option Selektor. Die Auswahl kann CSS auch über den Selektormechanismus von Elementor schreiben und die Vorlage vollständig überspringen. Eines sollten Sie wissen, bevor Sie sich darauf verlassen: Die Standardeigenschaft, die Elementor für einen Auswahlwähler einspritzt, lautet color: {{VALUE}}Das für die Ausrichtung nutzlos ist. Ein benutzerdefinierter Auswahleintrag muss die Immobilie buchstabieren:

text-align: {{VALUE}};

Die Schlüssel müssen dann gültige CSS-Werte sein (left, center, right Sind bereits), und {{WRAPPER}} Wird automatisch für diese Art der Wertkontrolle vorbereitet, sodass die Stile auf Ihr Widget beschränkt bleiben, ohne dass Sie es schreiben.

Achten Sie auf die stille Version dieses Fehlers. A Wählen Sie eine Verbindung zu einem Selektor, der die Standardeigenschaft behält, und schreibt Sie gerne color: centerEine ungültige Deklaration der Browser fällt ohne ein Wort Keine Konsolenwarnung, kein visueller Hinweis, wenn die Schaltflächen scheinbar nichts tun, überprüfen Sie das generierte CSS, bevor Sie die Feldkonfiguration berühren.

Verwenden Sie die Steuerung Wählen in Elementor #

Fügen Sie Ihr benutzerdefiniertes Widget zu einer Seite in Elementor hinzu und laden Sie den Editor neu, wenn die Seite bereits geöffnet war. Das Steuerelement erscheint als Reihe von Symbolschaltflächen unter Ihrem Etikett, wobei die Schaltfläche der Standardtaste aktiv ist.

Klicken Sie auf eine Schaltfläche und die Vorschau aktualisiert auf einmal Mit Umschalten auf, klickt der aktive Knopf die Wahl frei, und das Widget fällt zurück zu dem, was Ihr CSS-Tab definiert Mit Responsive on lässt das Gerätesymbol jeden Haltepunkt seinen eigenen Pick halten.

Häufige Anwendungsfälle #

• Textausrichtung Für Überschriften, Zitate und Bildunterschriften ist der Heimbereich des Steuergeräts vorgesehen.
• Elementstellung Wie Bild links oder Bild rechts in einer Medien- und Textkarte.
• Richtungsschalter Für horizontale versus vertikale Listen und Zeitleisten.
• Größenvoreinstellungen Wie kleine, mittlere und große, auf Modifikatorklassen abgebildet.
• Auswahlmöglichkeiten auf der Ausstellungsseite Für Abzeichen und Bänder oben-links durch unten-rechts Ecken.

Tipps für die Arbeit mit dem Feld Wählen #

• Behalten Sie es bei zwei, drei oder vier Optionen. Eine Reihe von sieben Symbolknöpfen ist ein Dropdown mit einem Kostüm; Verwenden Sie stattdessen eine Auswahl.
• Stimmen Sie Schlüssel mit CSS-Werten ab, wenn Sie einen Selektor verwenden. Schlüssel wie left und center Direkt hineinfallen text-align: {{VALUE}} Ohne Übersetzungsschicht.
• Definieren Sie die Immobilie in benutzerdefinierten Selektoren. Die standardmäßig eingegebene Eigenschaft ist color: {{VALUE}}, was nur zur tatsächlichen Farbauswahl passt.
• Planen Sie den leeren Wert ein, wenn Toggle eingeschaltet ist. Ein abgewähltes Feld druckt also einen leeren Schlüssel align-- Klassen und Bedingungen sollten es tolerieren oder Toggle deaktivieren.
• Vergleichen Sie mit Schlüsseln in Konditionalen. Der Optionstitel ist nur Panel-Text und passt nie zusammen {% if %}.
• Verwendung Responsive für die Ausrichtung. Center-on-mobile, left-on-desktop ist ein Steuerelement statt zwei.

Häufig gestellte Fragen #

Einwickelnd #

Das Feld Widget Builder Choose gibt kleinen visuellen Entscheidungen die Kontrolle, die sie verdienen Schlüssel sitzen hinter Symbol-Tasten, ein Token Feeds Modifikator Klassen und Bedingungen, und der Auswahlpfad behandelt Ein-Eigenschaft-Auswahl wie Ausrichtung, sobald Sie die echte CSS-Eigenschaft definieren Für Layout-Picks, die eine vollständige Miniaturansicht benötigen, anstatt ein Symbol, steigen Sie auf die Visual Choice-Feld. Erkunden Sie den Rest der Master Addons Widgets und Erweiterungen, und sehen Sie sich die an Preisseite Für das, was jeder Plan beinhaltet.