Wählen

Das Feld Auswählen fügt einem benutzerdefinierten Widget, das Sie mit den Master-Addons erstellen, einen Dropdown hinzu Widget-builder. Sie legen eine feste Liste von Auswahlmöglichkeiten fest, der Editor wählt eine in Elementor aus und Ihre Vorlage ändert sich passend: eine andere Layoutklasse, ein zusätzliches Abzeichen, ein anderer Auszeichnungsblock. Es ist das Feld, das Sie für benannte Varianten wie Kartenstile, Abzeichentypen oder Sortierreihenfolgen verwenden können.

Select ist eines der Felder, die Sie im Widget Builder der kostenlosen Version verwenden können. Das kostenlose Plugin enthält einen begrenzten Widget Builder und den vollständigen Satz an Feldern ist im Lieferumfang enthalten Master Addons Pro.

Was das Feld Auswählen bewirkt #

• Fügt dem Panel Ihres Widgets in Elementor einen Standard-Dropdown hinzu.
• Lässt den Editor eine Option aus der von Ihnen definierten Liste auswählen.
• Speichert die Optionen Schlüssel (zum Beispiel outlined), nicht das Etikett, das der Herausgeber sieht.
• Druckt diesen Schlüssel überall dort, wo Sie seinen Token platzieren, z {{ layout_style }}Sie können es also als Klasse verwenden oder mit überprüfen {% if %}.

Neu beim Bauherrn? lesen Sie die Übersicht über Widget Builder Kommen Sie dann zuerst mit geöffnetem Widget zurück.

Bevor Sie beginnen #

• WordPress mit installiertem und aktivem Elementor.
• Master Addons für Elementor installiert und aktiv Die Installationsführung Cover-einrichtung.
• Ein Widget im Widget Builder geöffnet Das Beispiel in diesem Handbuch ist ein “Plan Card” - Widget mit zwei Select-Feldern: layout_style (Boxed, Minimal, Outlined) auf der Registerkarte Stil und badge (Kein Abzeichen, Beliebteste, Neu) auf der Registerkarte Inhalt.

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

1. Gehe zu Master-Addons > Widget Builder und öffnen Sie Ihr Widget.
2. Wählen Sie die Registerkarte, auf die die Einstellung gehört, und fügen Sie einen Abschnitt hinzu. Eine Auswahl wie Layout-Stil passt zum Erscheinungsbild Stil Tab, zum Beispiel in einer Rubrik “Kartenstil”.
3. Typ select Im Feldsuchfeld links kommen zwei Felder hoch: Wählen und Auswählen2.
4. Ziehen Wählen In den Abschnitt Klicken Sie auf den Bleistift auf dem Feld, um seine Einstellungen zu öffnen.

Select hält eine Auswahl aus einer kurzen Liste Wenn Redakteure eine lange Liste durchsuchen oder mehr als eine Option auswählen müssen, verwenden Sie Wählen2 Stattdessen handelt es sich um ein Pro-Feld.

Feldoptionen erklären #

• Etikett: Der Text neben dem Dropdown in Elementor, zum Beispiel “Layout Style”.
• Name: Die eindeutige ID des Feldes und der Name seines Tokens Verwenden Sie zum Beispiel nur Buchstaben, Zahlen und Unterstriche layout_style.
• Beschreibung: Ein Hinweis, der unter dem Dropdown in Elementor angezeigt wird.
• Optionen: Eine Reihe pro Wahl Das linke Kästchen ist die Schlüssel Ihre Vorlage erhält, und das richtige Kästchen ist die Etikett Editoren siehe Mit dem roten Kreuz entfernen Sie eine Zeile und mit dem Plus-Button fügen Sie eine hinzu.
• Standardwert: Die Option eine neue Kopie des Widgets beginnt mit Der Dropdown zeigt Beschriftungen an, aber das Feld speichert den Schlüssel.

Ein neues Feld Auswählen wird mit drei Beispielzeilen geliefert value-1 zu value-3 Mit den Etiketten Option 1 bis Option 3. Ersetzen Sie diese durch eigene Schlüssel und Etiketten, bevor Sie das Widget verwenden.

Halten Sie die Tasten kurz, klein und ohne Leerzeichen, z boxed oder most_popularSie landen in Klassennamen und Vergleichen, lässt man den Standardwert leer, startet das Widget auf der ersten Option in der Liste.

Unter Gemeinsame Einstellungen finden Sie Etikett anzeigen, Beschriftungsblock, Trenner und Bedingungen, die genauso funktionieren wie auf anderen Feldern.

Nutzen Sie die Wahl in Ihrer Vorlage #

Die Plan Card HTML verwendet beide Select-Felder auf die beiden häufigsten Arten:

<div class="plan plan--{{ layout_style }}">
  {% if badge == 'popular' %}
  <span class="plan-badge">Most Popular</span>
  {% elseif badge == 'new' %}
  <span class="plan-badge plan-badge--new">New</span>
  {% endif %}
  <p class="plan-name">{{ plan_name }}</p>
  <p class="plan-price">{{ plan_price }}<span>/month</span></p>
  <a class="plan-button" href="#">Get started</a>
</div>

Modifikatorklassen #

plan--{{ layout_style }} wird plan--boxed, plan--minimal oder plan--outlined. Jede Variante ist dann eine kurze Regel im CSS-Panel, und das HTML bleibt gleich:

.plan--boxed { background: #fff; box-shadow: 0 12px 32px rgba(29, 27, 76, .14); }
.plan--minimal { background: transparent; }
.plan--outlined { background: #fff; border: 2px solid #7c3aed; }

Unterschiedlicher Aufschlag pro Option #

Wenn eine Option anderes HTML benötigt, vergleichen Sie den Schlüssel mit {% if %}. {% elseif %} und {% else %} Arbeit auch Im Beispiel, die none Übereinstimmungen weder prüfen, so dass kein Abzeichen gedruckt wird.

Vergleichen Sie immer mit dem Schlüssel. {% if badge == 'popular' %} Übereinstimmungen, während {% if badge == 'Most Popular' %} Tut nie und gibt keinen Fehler Wenn nie ein Scheck auslöst, schauen Sie sich zuerst die Schreibweise des Schlüssels an.

Selektor und Reaktionssteuerung #

• Wähler Schreibt immer color: {{VALUE}}; Für dieses Feld, und es gibt kein Kästchen, um die Eigenschaft zu ändern Mit Schlüsseln wie boxed Die Regel bringt nichts, Sie hilft nur, wenn Ihre Tasten Farben sind: In unseren Tests sind Schlüssel wie #7c3aed und #0ea5e9 Mit einem Selector von .plan-price Hat den Preis eingefärbt Für alles andere lassen Sie Selector leer und verwenden Sie Klassen.
• Reaktionsfähige Kontrolle Lassen Sie die Redakteure eine andere Option pro Gerät auswählen. Diese Auswahlmöglichkeiten pro Gerät erreichen die Seite nur über die Selector-Regel oben. Das Token gibt die Desktop-Auswahl aus. Lassen Sie daher die Responsive Control deaktivieren, wenn Sie den Wert in Ihrer Vorlage verwenden.

Verwenden Sie den Select-Steuerelement in Elementor #

Fügen Sie das Widget zu einer Seite hinzu, oder laden Sie den Editor neu, wenn die Seite bereits geöffnet war Wählen Sie das Widget und öffnen Sie die Registerkarte, auf der Sie das Feld platziert haben Der Dropdown zeigt Ihre Beschriftungen an, wobei die Standardoption bereits ausgewählt ist Wählen Sie eine andere Option und die Vorschau-Updates.

Hier ist die gleiche Plankarte mit drei Kombinationen aus Layoutstil und Abzeichen:

Häufige Anwendungsfälle #

• Varianten im Karten-, Knopf- oder Abschnittsstil.
• Abzeichen oder Bänder wie Sale, Neu oder Beliebteste.
• Auswahl von Überschriften, Bildverhältnissen oder Spaltenzahlen.
• Sortieren Sie die Reihenfolge oder Datenquelle für ein Listen-Widget.

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

• Entscheiden Sie sich für Schlüssel, bevor Editoren das Widget verwenden. Sie können Etiketten später umbenennen, aber durch das Ändern einer Taste werden Seiten unterbrochen, die die alte bereits gespeichert haben.
• Fügen Sie eine “keine” Option hinzu Wenn das Element optional ist, wie das Abzeichen im Beispiel.
• Legen Sie einen Standardwert fest Das sieht für sich genommen gut aus, so dass ein neu hinzugefügtes Widget einsatzbereit ist.
• Nur zwei oder drei Optionen mit klaren Symbolen? Die Feld wählen Zeigt sie als Schaltflächen statt als Dropdown.
• Einfach an oder aus? Nutzen Sie die Schalterfeld.

Häufig gestellte Fragen #

Einwickelnd #

Fügen Sie ein Feld Auswählen hinzu, ersetzen Sie die Beispielzeilen durch kurze Tasten und übersichtliche Beschriftungen und setzen Sie eine Voreinstellung. Drucken Sie dann die Taste als Klasse für Stilvarianten aus oder überprüfen Sie sie mit {% if %} Wenn sich das Markup ändert Für durchsuchbare oder mehrere Auswahlmöglichkeiten siehe Wählen2und überprüfen Preisbildung Für das, was jeder Plan beinhaltet.