Wählen

Die Feld auswählen Legt einen nativen Dropdown in das Optionsfeld Ihres Widgets einSie definieren einen festen Satz von Auswahlmöglichkeiten, der Benutzer wählt einen aus, und Ihre Vorlage reagiert auf den Pick: eine andere Layoutklasse, einen anderen Markupblock, einen anderen CSS-Wert. Innerhalb der Master-Addons Widget-builder‘s, the Select ist das Arbeitstier für alles mit einer Handvoll benannter Varianten Layout-Stile, Hover-Effekte, Sortierreihenfolgen, diese Art von Entscheidung.

Wählen Sie Optionswerte aus, für die der natürliche Kraftstoff verwendet wird Bedingungen: Andere Steuerelemente können nur angezeigt werden, wenn eine bestimmte Option ausgewählt wird. Die gleichen Werte funktionieren in der Twig-Syntax-Vorlagen-Engine Mit Schecks wie {% if layout == "card" %}, so kann ein Dropdown sowohl das Panel als auch das Markup umschalten.

Ein Detail prägt jedes Muster in diesem Dokument Der Wert, den Ihre Vorlage erhält, ist der Schlüssel der Option, ein kurzer Slug, den Sie wählen, nicht das für Menschen lesbare Label, das der Benutzer sieht. Schlüssel gehen in Klassennamen und Vergleiche ein; Etiketten bleiben im Panel.

Was das Feld Auswählen bewirkt #

• Macht einen Standard-Dropdown Im Elementor-Panel werden dieselben nativen Auswahl-Steuerungskern-Widgets verwendet.
• Hält einen Wert aus einer festen Menge Sie definieren als Schlüssel - und Etikettenpaare.
• Fügt Ihrer Vorlage den ausgewählten Schlüssel zuModifiziererklassen bereit sind oder {% if %} Blöcke.
• Fahrbedingungen für andere Steuerelemente„Ein „Boxed“kann also ein Randfarbfeld aufdecken, das „Minimal” verbirgt.
• Unterstützt ein responsives Flag, damit der Benutzer pro Gerät eine andere Option auswählen kann.

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 Installationsanleitung.
• Ein benutzerdefiniertes Widget, das im Widget Builder-Editor geöffnet wird Unser Beispiel ist ein Preistabellen-Widget mit einem “Layout Style” - Dropdown-Angebot Boxed, Minimal, and Outlined-Varianten.

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

Öffnen Sie Ihr Widget im Widget Builder-Editor und schauen Sie sich das Feldfenster auf der linken Seite an. Wählen Mit den anderen Auswahlfeldern sitzt.

Ziehen Sie es in einen Abschnitt unter dem Inhalt oder Stil Tab. Ein Layout-Umschalter wie der unsere gehört in Style; eine inhaltliche Wahl, wie eine Sortierreihenfolge, passt zum Inhalt Sobald er landet, öffnen sich links die Optionen des Feldes.

Feldoptionen erklären #

• Etikett: Der neben dem Dropdown in Elementor gezeigte Text, zum Beispiel “Layout Style”.
• Name: Die eindeutige Kennung für das Feld, Buchstaben, Zahlen, und Unterstriche nur Ihre Vorlage bezieht sich auf diesen Namen, zum Beispiel layout_style.
• Optionen: Die Auswahlmöglichkeiten selbst, jeweils ein Schlüssel plus ein Etikett Der Schlüssel ist, was Ihre Vorlage erhält; das Etikett ist das, was der Benutzer liest Schlüssel kurz und CSS-sicher halten: boxed, minimal, outlined.
• Standard: Der Schlüssel wurde ausgewählt, wenn das Widget zum ersten Mal auf einer Seite abfällt Stellen Sie es auf Ihre am besten aussehende Variante ein.
• Responsiv: Fügt das Gerätesymbol hinzu, damit die Auswahl je nach Haltepunkt unterschiedlich sein kann.
• Beschreibung, Etikett anzeigen, Trenner: Die Standardanzeigeeinstellungen sowie weiter unten Bedingungen für die Anzeige des Feldes nur dann, wenn ein anderes Steuerelement einen bestimmten Wert hat.

Verbinden Sie die Auswahl mit Ihrer Vorlage #

Der Select druckt seinen Wert mit einem einfachen Token aus. Dieser Wert ist immer der Schlüssel„Niemals das Etikett. Zwei Muster decken nahezu jede Verwendung ab.

Modifikatorklasse. Drucken Sie den Schlüssel direkt in ein Klassenattribut und lassen Sie Ihren CSS-Tab den Rest erledigen:

<div class="pricing layout--{{ layout_style }}">
  ...
</div>

Das Auswählen von “Boxed” rendert layout--boxedund eine Regel wie .layout--boxed { border: 1px solid #e2e2e2; } Übernimmt Drei Varianten werden zu drei kurzen CSS-Blöcken Der HTML verzweigt sich nie.

Bedingter Aufschlag. Wenn Varianten unterschiedliches HTML und nicht nur unterschiedliche Stile benötigen, vergleichen Sie mit der Taste:

{% if layout_style == 'boxed' %}
  <div class="pricing-frame"> ... </div>
{% elseif layout_style == 'outlined' %}
  <div class="pricing-outline"> ... </div>
{% else %}
  <div class="pricing-plain"> ... </div>
{% endif %}

Achten Sie hier auf eines: Der Vergleich muss den Schlüssel verwenden. {% if layout_style == 'boxed' %} Funktioniert, während {% if layout_style == 'Boxed Layout' %} Stimmt lautlos nie überein, und Sie erhalten keine Warnung darüber Wenn ein Konditional sich weigert zu feuern, überprüfen Sie die Schreibweise des Schlüssels, bevor Sie etwas anderes vermuten.

Verwenden Sie den Select-Steuerelement in Elementor #

Geben Sie Ihr benutzerdefiniertes Widget auf eine Seite in Elementor ab, wenn die Seite bereits geöffnet war, bevor Sie das Widget gespeichert haben, laden Sie zuerst den Editor neu, da Elementor die alte Steuerungskonfiguration bis dahin beibehalten hat Wählen Sie das Widget aus und der Dropdown wird in seinem Panel unter dem von Ihnen festgelegten Label angezeigt, wobei die Standardoption vorgewählt ist.

Wählen Sie eine andere Option und die Vorschau aktualisiert sofort Die Modifikatorklasse ändert sich, Ihre CSS-Variante tritt ein und alle auf diesem Feld konditionierten Steuerelemente erscheinen oder verschwinden, um übereinstimmend zu sein.

Häufige Anwendungsfälle #

• Layoutvarianten Zum Beispiel verpackte, minimale und umrissene Kartenstile aus einem Widget.
• Hover - und Animations-Voreinstellungen Dabei wird jeder Schlüssel einer CSS-Klasse mit eigenem Übergang zugeordnet.
• Sortieren und Bestellauswahl Für Widgets im Listenstil, neueste zuerst oder alphabetisch.
• Überschrift Tag Picker Das tauscht ein h2 durch einen bedingten Block gegen ein h3 aus.
• Zustandstreiber Die ganze Gruppen anderer Felder basierend auf dem ausgewählten Schlüssel anzeigen oder ausblenden.

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

• Schlüssel sind für Code, Etiketten sind für Menschen. Verwenden Sie Schnecken wie boxed Schlüssel und speichern Sie die freundliche Formulierung für das Etikett.
• Schlüssel CSS-sicher halten. Kleinbuchstaben, Ziffern und Bindestriche oder Unterstriche werden sauber in Klassennamen gedruckt.
• Vergleichen Sie mit dem Schlüssel, niemals mit dem Etikett. Dies ist der häufigste Grund, warum eine Select-Konditional niemals übereinstimmt.
• Bevorzugen Sie Modifikatorklassen gegenüber Konditionalen Wenn sich nur das Styling ändert Die Vorlage bleibt einen Block und die Varianten leben in CSS.
• Verwenden Sie die Auswahl, um die Bedingungen zu steuern. Zusammen mit dem Switcher ist es die übliche Steuerung zum Aufdecken oder Verstecken anderer Felder.
• Legen Sie eine sinnvolle Voreinstellung fest Das Widget sieht also in dem Moment, in dem es weggelassen wird, absichtlich aus.

Häufig gestellte Fragen #

Einwickelnd #

Das Feld Widget Builder Select macht benannte Varianten zu einer Ein-Klick-Wahl Definieren Sie Tasten und Beschriftungen, drucken Sie den Schlüssel in eine Modifikatorklasse oder eine {% if %} Block, und jede Layout-Entscheidung wandert in das Elementor-Panel Wenn die Liste lang wird oder ein Pick nicht ausreicht, steigen Sie auf die Feld auswählen2. Erkunden Sie den Rest der Master Addons Widgets und Erweiterungen, und sehen Sie sich die an Preisseite Für das, was jeder Plan beinhaltet.