Wählen2

Das Feld Select2 fügt einem benutzerdefinierten Widget, das mit den Master-Addons erstellt wurde, einen durchsuchbaren Dropdown hinzu Widget-builder. Editoren geben ein, um die Liste zu filtern, und mit eingeschalteten Mehrfach anzeigen können sie mehrere Optionen auf einmal auswählen Verwenden Sie es für lange Optionslisten oder für Auswahlmöglichkeiten im Tag-Stil, bei denen eine Antwort nicht ausreicht.

Select2 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 Select2 bewirkt #

• Es fügt dem Panel Ihres Widgets in Elementor einen Dropdown mit einem Suchfeld hinzu.
• Mit Show Multiple off wählt der Editor eine Option aus und Ihre Vorlage erhält den Schlüssel dieser Option.
• Mit dem Anzeigen mehrerer Optionen wählt der Editor eine beliebige Anzahl von Optionen aus, die als entfernbare Tags angezeigt werden, und Ihre Vorlage erhält eine Liste von Schlüsseln, die Sie mit a drucken {% for %} Schleife.
• Jede Option hat einen Schlüssel und eine Beschriftung Redakteure sehen die Beschriftungen, und Ihr HTML erhält immer die Schlüssel.

Wenn Sie noch kein Widget gebaut haben, lesen Sie die Übersicht über Widget Builder Erstens. Für eine kurze Single-Choice-Liste ohne Suche, die Ebene Feld auswählen Einfacher ist.

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 Handbuch ist ein “Portfolio Card” - Widget mit einem Textfeld für den Projekttitel und zwei Select2-Feldern: Projekttyp (eine Auswahl) und Projekttags (mehrere Auswahlmöglichkeiten).

So fügen Sie ein Feld Select2 hinzu #

1. Gehe zu Master-Addons > Widget Builder und öffnen Sie Ihr Widget.
2. Auf der Inhalt Tab, fügen Sie einen Abschnitt hinzu, falls noch keins vorhanden ist.
3. Typ select Im Feldsuchfeld links kommen Auswählen und Auswählen2.
4. Ziehen Wählen2 In den Abschnitt Seine Einstellungen öffnen sich in der linken Seitenleiste.

Ein neues Select2-Feld beginnt mit dem eingeschalteten Anzeigen mehrerer Optionen und drei Beispieloptionen (value-1 zu value-3). Ersetzen Sie sie durch Ihre eigenen, bevor Sie die Vorlage schreiben.

Select2 Feldoptionen erklärt #

Hier ist das Feld Projekttyp, eingerichtet für eine einzige Wahl:

• Etikett Text neben dem Steuerelement in Elementor ist, zum Beispiel “Projekttyp”.
• Name Ist die eindeutige ID des Feldes (nur Buchstaben, Zahlen und Unterstriche).Es ist auch das Token, das Sie in der Vorlage verwenden, also project_type wird {{project_type}}.
• Beschreibung Unter der Kontrolle in Elementor erscheint Verwenden Sie es für einen kurzen Hinweis wie “Eine Kategorie wählen”
• Mehrere anzeigen? Wechselt zwischen einem Pick (Nein) und vielen Picks (Ja).Dies ändert, was Ihre Vorlage erhält, also entscheiden Sie, bevor Sie den HTML-Code schreiben.
• Optionen Ist die Liste der Auswahlmöglichkeiten Das linke Feld ist der Schlüssel, den Ihre Vorlage erhält (branding, web). Das richtige Kästchen ist die Beschriftung Editoren siehe (Branding, Web Design) Verwenden Sie das Plus-Symbol, um eine Zeile hinzuzufügen, und das rote Kreuz, um eine zu entfernen.
• Standardwert Ist das, was beim ersten Hinzufügen des Widgets zu einer Seite ausgewählt wird Im Single-Modus ist es ein normaler Dropdown, lässt man es leer, wird die erste Option ausgewählt.

Project Tags verwendet die gleichen Optionen mit eingeschaltetem Show Multiple Die Standardwertbox wird zu einem Tag-Picker, sodass Sie mehr als eine Option vorwählen können Lassen Sie sie leer und die erste Option ist vorgewählt.

Wenn die Standardwertliste nach dem Bearbeiten von Optionen immer noch die alten Beispieloptionen anzeigt, klicken Sie auf Einstellungen speichern Und das Feld wieder öffnen.

Unterhalb des Standardwerts finden Sie die gemeinsamen Einstellungen, die von den meisten Feldern gemeinsam genutzt werden: Etikett anzeigen, Etikettenblock, Responsive Control, Dynamischer Support, Frontend verfügbar, Separator, Bedingungen und Kontrollklassen. Label Block lohnt sich für ein Mehrfachfeld einzuschalten, da das Steuerelement dann die volle Panelbreite für seine Tags erhält.

Verwenden Sie Select2-Werte in Ihrer Vorlage #

Wie Sie den Wert drucken, hängt von Mehrfach anzeigen ab.

Einzelmodus: Drucken Sie die Taste #

Ein einzelner Select2 funktioniert wie jeder andere Token. {{project_type}} Druckt den ausgewählten Schlüssel aus, so dass Sie ihn als Text verwenden oder daraus eine CSS-Klasse bauen können:

<article class="portfolio-card type-{{project_type}}">
  <span class="card-type">{{project_type}}</span>

Wenn das Branding ausgewählt ist, rendert das type-branding und branding. Man kann es auch vergleichen: {% if project_type == 'web' %}...{% endif %}.

Mehrer Modus: Schleife über die Tasten #

Ein mehrfacher Select2 enthält eine Liste und {{project_tags}} Auf eigene Faust nichts druckt Schlingen Sie stattdessen darüber:

<ul class="card-tags">
  {% for tag in project_tags %}
    <li class="card-tag">{{ tag }}</li>
  {% endfor %}
</ul>

Die Schleife läuft einmal für jede ausgewählte Option, in der Reihenfolge, in der der Editor sie ausgewählt hat. Darin, {{ tag }} Ein Schlüssel ist, und Filter wie {{ tag|upper }} Arbeit auch Die Twig-Syntax-Guide Listet alles auf, was die Template-Engine unterstützt.

Das Dokumentationsfeld neben dem Code-Editor listet für jedes Feld ein Token auf Kopieren {{project_tags}} Von dort ist für einzelne Felder in Ordnung, aber ein Mehrfachfeld benötigt weiterhin die Schleife.

Klicken Sie auf Einstellungen speichern Wenn die Vorlage fertig ist.

Verwenden Sie das Select2-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. Beide Select2-Steuerelemente werden auf der Registerkarte Inhalt angezeigt, wobei ihre Standardeinstellungen bereits ausgewählt sind.

Klicken Sie im Mehrfach-Steuerelement auf den Plus-Button oder das leere Leerfeld nach den Tags und beginnen Sie mit der Eingabe Die Liste verengt sich beim Tippen, und Enter fügt die hervorgehobene Option hinzuJedes Tag hat ein kleines Kreuz, das es entfernt.

Das einzelne Steuerelement öffnet einen Dropdown mit eigenem Suchfeld Wählen Sie eine Option, oder verwenden Sie das Kreuz neben dem aktuellen Wert, um es zu löschen.

Die Leinwand aktualisiert sich gleich Beachten Sie, dass das Panel Etiketten (Webdesign, Social Media) zeigt, während die Karte Tasten druckt (web, social):

Wenn Sie den Beschriftungstext auf der Seite benötigen, machen Sie den Schlüssel entweder so gut lesbar, dass er angezeigt werden kann, oder ordnen Sie ihn in der Vorlage zu:

{% for tag in project_tags %}
  <li class="card-tag">{% if tag == 'social' %}Social Media{% else %}{{ tag }}{% endif %}</li>
{% endfor %}

Häufige Anwendungsfälle #

• Tags oder Dienstleistungen auf Portfolio, Fallstudie und Teamkarten.
• Ein Kategorie- oder Stilwähler, der eine CSS-Klasse hinzufügt, wie z type-web.
• Lange Listen wie Länder, Branchen oder Symbolsätze, in denen die Suche das Scrollen speichert.
• Feature-Listen auf Preis - oder Produktkarten, in Listen-Elementen geschlungen.

Tipps für die Arbeit mit dem Feld Select2 #

• Entscheiden Sie sich zuerst für Mehrere anzeigen Umsteigen bedeutet später ändern {{field}} zu einer Schleife, oder anders herum.
• Tasten klein schreiben ohne Leerzeichen (social, web). Sie landen in Klassenbezeichnungen und Vergleichen.
• Benennen Sie Schlüssel nicht um, nachdem das Widget verwendet wurde Seiten, die den alten Schlüssel bereits gespeichert haben, passen nicht zum neuen.
• Stylen Sie die Ausgabe zum Beispiel mit der Taste .type-web .card-type { ... }.
• Verwenden Sie für eine Handvoll Symbolschaltflächen anstelle eines Dropdowns die Feld wählen.

Häufig gestellte Fragen #

Einwickelnd #

Fügen Sie das Feld Select2 hinzu, legen Sie Ihre Schlüssel und Beschriftungen fest und wählen Sie zwischen einem Pick und vielen, bevor Sie den HTML-Wert drucken mit {{field_name}} und Schleife über ein Vielfaches mit {% for %}. Für die Wiederholung von Gruppen von Feldern statt einer Liste von Auswahlmöglichkeiten, schauen Sie sich die Repeaterfeldund überprüfen Preisbildung Für das, was jeder Plan beinhaltet.