Visuelle Wahl

Die Visual Choice-Feld Rendert einen Satz Bildkarten im Panel Ihres Widgets, eine pro Option, und der Benutzer wählt durch Klicken auf ein Miniaturbild aus. Es ist das Layout-Picker-Steuerelement. Wo a Select Wörter und a Choose Symbole anbietet, zeigt Visual Choice ein kleines Bild davon, wie jede Variante tatsächlich aussieht. Im Inneren der Master-Addons Widget-builderDas macht es zur natürlichen Anpassung an Grid-versus-List-Entscheidungen und jede Variante, die ein Screenshot schneller erklärt als ein Name.

Visual Choice-Optionswerte werden direkt angeschlossen BedingungenLassen Sie andere Steuerelemente dem ausgewählten Layout folgen und in die Twig-Syntax-Vorlagen-Engine(wo {% if style == "grid" %} Schaltet das Markup passend um Beide Guides behandeln die Details.

Der Vorlagenvertrag stimmt mit den anderen Auswahlfeldern überein: Der Wert ist der Schlüssel der ausgewählten Option. Was die visuelle Auswahl auszeichnet, ist ein zweiter Verkabelungsstil, die Präfixklasse, die eine Klasse auf dem Widget-Wrapper ändert, sodass Ihr CSS Layouts wechseln kann, ohne dass die Vorlage jemals das Feld erwähnt.

Was das Visual Choice-Feld bewirkt #

• Verleiht anklickbare Bildkarten Im Elementor-Panel wird jede Option durch einen Schlüssel, einen Titel und ein Bild definiert.
• Hält einen Schlüssel Aus dem definierten Satz, die aktuell ausgewählte Karte.
• Legt Karten in Spalten ausStandardmäßig drei pro Zeile, einstellbar über die Option Spalten.
• Feeds Vorlagen der ausgewählten Taste Für Modifikatorklassen und {% if %} Blöcke.
• Legt optional eine Wrapper-Klasse fest Durch die Option Präfixklasse, so dass CSS allein das Layout wechseln 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 Installationsführung.
• Ein benutzerdefiniertes Widget öffnet sich im Widget Builder-Editor Unser Beispiel ist ein Teammitglieder-Widget mit zwei Layoutvarianten, einem 3-Spalten-Raster und einer gestapelten Liste, ausgewählt durch Miniaturbildkarten.

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

Finden Visuelle Wahl Im Feldfenster links im Widget Builder-Editor, gruppiert mit den anderen Auswahlfeldern.

Ziehen Sie es in einen Abschnitt unter dem Inhalt oder Stil Tab. Layout-Picker sitzen normalerweise zuerst im Panel, oben auf der Registerkarte Inhalt, sodass Redakteure vor dem Ausfüllen von Inhalten eine Struktur auswählen Sobald das Feld landet, öffnen sich seine Optionen auf der linken Seite.

Visual Choice Feldoptionen erklärt #

• Etikett: Der über den Karten in Elementor abgebildete Text, zum Beispiel “Layout”.
• Name: Die eindeutige Kennung für das Feld, Buchstaben, Zahlen und Unterstriche, zum Beispiel team_layout.
• Optionen: Jede Option ist ein Schlüssel plus ein Titel und ein Bild Das Bild wird zur anklickbaren Karte; der Titel beschriftet es Schlüssel bleiben kurz und CSS-sicher: grid, list.
• Spalten: Wie viele Karten sitzen pro Reihe im Panel, standardmäßig 3. Zwei große Karten lesen sich besser als 2 Spalten.
• Präfixklasse: Ein Klassenstammelementor hängt den ausgewählten Schlüssel an den Widget-Wrapper an und platziert ihn auf diesem. Mit team-layout- und der Schlüssel gridDie Hülle trägt team-layout-grid.
• Standard: Die Taste wird ausgewählt, wenn das Widget zum ersten Mal auf einer Seite abfällt.
• 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 visuelle Wahl mit Ihrem Widget #

Zwei Verkabelungsstile Wählen Sie einen pro Feld.

Stil A: Mustervorlagen. Der Token druckt den ausgewählten Schlüssel aus, sodass alles aus dem Feld auswählen Gilt. Eine Modifikatorklasse:

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

oder einen strukturellen Zweig, wenn die Varianten eine andere Markup benötigen:

{% if team_layout == 'list' %}
  <ul class="team-list"> ... </ul>
{% else %}
  <div class="team-grid"> ... </div>
{% endif %}

Stil B: die Präfixklasse. Füllen Sie beispielsweise die Option Prefix-Klasse aus team-layout-und Elementor schreibt team-layout-grid oder team-layout-list Auf den Wrapper des Widgets, während der Benutzer auf Karten klickt Ihr CSS zielt dann auf die kombinierte Klasse:

.team-layout-grid .member { /* grid card rules */ }
.team-layout-list .member { /* stacked row rules */ }

Die Vorlage referenziert das Feld überhaupt nicht; die Wrapper-Klasse macht das Umschalten, das hält den HTML-Code auf einem einzigen Markup-Block und schiebt jede Variante in das Stylesheet, wenn sich nur die Präsentation ändert, ist das meist der sauberere Schnitt.

Achten Sie darauf, die beiden Stile auf einem Feld zu mischen. Eine Vorlage bedingte, die annimmt grid Während die Präfixklasse gleichzeitig setzt team-layout-list Zwei Quellen der Wahrheit ist, und sie werden driften, in der Regel Monate später, wenn jemand die eine Seite bearbeitet und vergisst, dass die andere existiert Entscheiden Sie, ob dieses Feld durch die Vorlage oder durch die Wrapper-Klasse spricht, und bleiben Sie dann dabei.

Verwenden Sie die Visual Choice-Steuerung 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 zeigt Ihre Optionskarten im Bedienfeld an, die ausgewählte wird hervorgehoben.

Klicken Sie auf eine Karte und das Layout blättert in der Vorschau um, entweder durch Ihre Modifikatorklasse oder durch die Präfixklasse auf dem Wrapper, je nachdem, welche Verkabelung Sie gewählt haben Da jede Karte die Variante selbst anzeigt, wählen Redakteure das richtige Layout aus, ohne etwas zu lesen.

Häufige Anwendungsfälle #

• Raster- versus Listenlayouts Für Team-, Portfolio- und Post-Widgets.
• Kartenstilvarianten Dabei zeigen Miniaturansichten die tatsächlichen Box-, Overlay- und Split-Designs.
• Kopfanordnungen Wie z. B. Bild-oben-, Bild-links- und reine Text-Heldenvarianten.
• Slider versus statische Präsentationen gleichen Inhaltssatzes.
• Vorlagenpakete in einem Widget„Drei vordesignte Looks, die ein Kunde nach Bildern auswählt.

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

• Verwenden Sie echte Screenshots als Optionsbilder. Ein winziges Rendering jeder Variante schlägt ein abstraktes Symbol; Die Karte ist die Dokumentation.
• Wählen Sie einen Verkabelungsstil pro Feld. Vorlagenmuster oder die Präfixklasse, nicht beide, sonst werden die beiden irgendwann anderer Meinung sein.
• Schlüssel werden in Klassennamen eingearbeitet, also behalten Sie sie Schnecken. grid und list“Gitterlayout” nicht.
• Beenden Sie das Präfix mit einem Trennzeichen. team-layout- Plus grid Liest als team-layout-grid; ohne Bindestrich bekommt man team-layoutgrid.
• Ordnen Sie die Spalten Ihrer Kartenanzahl zu. Zwei Optionen über 3 Spalten lassen eine Lücke; Setzen Sie die Spalten auf 2 und die Zeile wird ausgefüllt.
• Reservieren Sie es für visuelle Unterschiede. Wenn sich die Optionen eher im Verhalten als im Aussehen unterscheiden, bietet ein Select mit klaren Beschriftungen den Redakteuren bessere Dienste.

Häufig gestellte Fragen #

Einwickelnd #

Mit dem Widget Builder Visual Choice-Feld können Redakteure ein Layout auswählen, indem sie es betrachten: Bildkarten im Panel, eine Taste in der Vorlage und die Option der Präfixklasse, wenn Sie lieber Layouts von CSS allein wechseln möchten. Es passt sich auf natürliche Weise mit dem an Feld wählen. Miniaturansichten kümmern sich um die großen Strukturpicks, Symbolknöpfe um die kleinen Anpassungen Entdecken Sie den Rest Master Addons Widgets und Erweiterungen, und sehen Sie sich die an Preisseite Für das, was jeder Plan beinhaltet.