Visuelle Wahl

Das Visual Choice-Feld fügt einer benutzerdefinierten Widget, die mit den Master-Addons erstellt wurde, eine Reihe anklickbarer Bildkarten hinzu Widget-builder. Jede Karte ist ein kleines Bild einer Option, also wählen Redakteure ein Layout oder einen Stil, indem sie sie betrachten Ihre Vorlage erhält den Schlüssel der Karte, auf die sie geklickt haben.

Visual Choice ist ein Pro-Feld Das kostenlose Plugin enthält einen begrenzten Widget Builder und der gesamte Feldsatz ist im Lieferumfang enthalten Master Addons Pro.

Was das Visual Choice-Feld bewirkt #

• Es zeigt Ihre Optionen als Bildkarten im Elementor-Panel an Die ausgewählte Karte bekommt ein Highlight.
• Jede Option hat einen Schlüssel, einen Titel und ein Bild, Der Titel wird als Tooltip und Alt-Text der Karte verwendet.
• Ihre Vorlage erhält den ausgewählten Schlüssel, wie grid oder listDie Sie in einem Klassennamen oder einem verwenden können {% if %} Prüfen.
• Die Einstellung Spalten steuert, wie viele Karten in einer Reihe des Panels sitzen.

Wenn Sie noch kein Widget gebaut haben, lesen Sie die Übersicht über Widget Builder Erstens. Für Entscheidungen, die sich gut als Text oder Symbole lesen lassen, ist die Wählen und Wählen Sie Felder sind schneller einzurichten.

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 kleines Bild für jede Option Einfache Strichzeichnungen von etwa 240 mal 160 Pixeln, als PNG mit transparentem Hintergrund gespeichert, sehen auf dem dunklen Panel von Elementor sauber aus.
• Ein Widget öffnet sich im Widget Builder Das Beispiel in diesem Handbuch ist ein “Team Showcase” - Widget mit drei Layouts: Raster, Liste und Spotlight.

So fügen Sie ein Visual Choice-Feld hinzu #

1. Gehe zu Master-Addons > Widget Builder und öffnen Sie Ihr Widget.
2. Auf der Inhalt Tab, fügen Sie einen Abschnitt hinzu. Ein Layout-Picker geht normalerweise zuerst, also wählen die Redakteure die Struktur vor allem anderen.
3. Typ visual Im Feldsuchfeld links.
4. Ziehen Visuelle Wahl In den Abschnitt Seine Einstellungen öffnen sich in der linken Seitenleiste.

Visual Choice Feldoptionen erklärt #

• Etikett Ist der Text über den Karten in Elementor, zum Beispiel “Layout”.
• Name Ist die eindeutige ID des Feldes und sein Vorlagen-Token, so team_layout wird {{team_layout}}. Nur Buchstaben, Zahlen und Unterstriche.
• Beschreibung Unter den Karten in Elementor erscheint.
• Optionen Eine Reihe pro Karte hält. Schlüssel Ist der Wert, den Ihre Vorlage erhält (kurz und klein halten, wie grid). Titel Karte nennt Klicken Sie auf die Bild Box, um das Fenster Bild auswählen zu öffnen, eine Datei hochzuladen oder eine aus der Mediathek auszuwählen, und klicken Sie dann auf Verwenden Sie dieses Bild. Das Plus-Symbol fügt eine Zeile hinzu und das rote Kreuz entfernt eine.
• Spalten Legt fest, wie viele Karten in eine Reihe passen, von 1 bis 6. Geben Sie die Zahl ein, auch wenn die Box bereits 2 anzeigt. Die angezeigte Zahl wird erst gespeichert, wenn Sie sie ändern, und ohne gespeicherten Wert legt Elementor eine Karte in jede Reihe.
• Umschalten Panel aufgeführt ist, in unseren Tests aber keinen Unterschied gemacht hat, konnten Redakteure immer wieder auf die ausgewählte Karte klicken, um sie zu löschen.

Die unten aufgeführten gemeinsamen Einstellungen funktionieren wie in anderen Bereichen, einschließlich Bedingungen. Das Panel hat keinen Standardwert für dieses Feld, daher beginnt eine neue Kopie des Widgets ohne ausgewählte Karte.

Klicken Sie auf Einstellungen speichern Nachdem Sie die Optionen hinzugefügt haben.

Verwenden Sie den ausgewählten Schlüssel in Ihrer Vorlage #

{{team_layout}} Druckt den Schlüssel der ausgewählten Karte Die einfachste Art, sie zu verwenden, ist eine Modifikatorklasse:

<div class="ts-team ts-team--{{team_layout}}">
  ...
</div>

Wenn Gitter ausgewählt ist, rendert das ts-team--grid. Wenn ein Layout ein anderes Markup benötigt, überprüfen Sie die Taste mit {% if %}. Das Beispiel zeigt eine kurze Biografie nur im Listenlayout:

{% if team_layout == 'list' %}
  <p class="ts-bio">Leads brand and product design across every client project.</p>
{% endif %}

Dann schreiben Sie einen Satz CSS-Regeln pro Schlüssel:

.ts-team--grid { grid-template-columns: repeat(3, 1fr); }
.ts-team--list { grid-template-columns: 1fr; }
.ts-team--spotlight { grid-template-columns: 1.4fr 1fr; }

Bis ein Editor auf eine Karte klickt, druckt der Token nichts aus und die Klasse oben wird ts-team--. Geben Sie die Basis .ts-team Klassen ein Layout, das für sich genommen gut aussieht, so dass das Widget nie defekt erscheint, bevor eine Wahl getroffen wird.

Verwenden Sie die Visual Choice-Steuerung in Elementor #

Widget zu einer Seite hinzufügen, oder den Editor neu laden, wenn die Seite schon geöffnet war Die Karten erscheinen auf der Karteikarte Inhalt Klicken Sie auf eine und die Leinwand aktualisiert sich gleich.

Durch Klicken auf die Liste wird das Team in Zeilen umgeschaltet {% if %} Block fügt das Bios hinzu:

Spotlight macht das erste Mitglied größer:

Klicken Sie erneut auf die ausgewählte Karte, um die Wahl zu klären Die Vorlage erhält dann einen leeren Schlüssel, wie oben beschrieben.

Häufige Anwendungsfälle #

• Layout-Picker für Team, Blog, Portfolio - und Testimonial-Widgets.
• Karten- oder Header-Stile, die auf einem Bild leichter zu erkennen sind als auf einem Namen.
• Bildpositionswahlen, wie Bild links, Bild rechts oder Bild oben.
• Voreingestellte Designs, die mehrere CSS-Regeln gleichzeitig mit einer Klasse wechseln.

Tipps für die Arbeit mit dem Visual Choice Feld #

• Verwenden Sie für jedes Optionsbild den gleichen Zeichenstil, sodass die Karten wie ein Satz aussehen.
• Tasten kurz, klein und frei von Leerzeichen halten Sie landen in Klassennamen.
• Benennen Sie einen Schlüssel nicht um, sobald das Widget verwendet wird. Seiten, die den alten Schlüssel gespeichert haben, stimmen nicht mit Ihrem neuen CSS überein.
• Setzen Sie die Spalten auf die Anzahl der Optionen, wenn Sie drei oder weniger haben, sodass alle Karten in einer Reihe liegen.
• Stil den leeren Zustand Bis jemand eine Karte auswählt, ist der Schlüssel leer.

Häufig gestellte Fragen #

Einwickelnd #

Geben Sie jeder Option einen Schlüssel, einen Titel und ein Bild, geben Sie einen Spaltenwert ein und verwenden Sie {{field_name}} In einem Klassennamen oder einem {% if %} Check Planen Sie den leeren Zustand ein, da nichts ausgewählt ist, bis ein Editor auf eine Karte klickt Zur Auswahl aus einer Texteliste siehe stattdessen die Feld auswählen2und überprüfen Preisbildung Für das, was jeder Plan beinhaltet.