Symbole

Die Symbolfeld Platziert den vollständigen Icon-Bibliothekspicker von Elementor im Panel Ihres Widgets: Font Awesome, alle auf der Website registrierten benutzerdefinierten Icon-Bibliotheken und direkter SVG-Upload, alles hinter den Icon-Chooser-Editoren, die bereits wissen. Innerhalb der Master-Addons Widget-builderEs ist das Feld für Feature-Bullets, Infoboxen, soziale Zeilen und jede zweite Stelle, an der ein kleines Symbol die Bedeutung trägt.

Wie jedes Widget Builder-Feld unterstützt die Symbolsteuerung Bedingungen„Nützlich, um den Picker nur anzuzeigen, wenn ein „Aktivierungssymbol“-Umschalter eingeschaltet ist und seine Ausgabe durch „Aktivieren” erfolgt Twig-Syntax-Vorlagen-Engine. Beide Leitfäden behandeln die Details und Einschränkungen.

Der Wert ist ein Array mit zwei Schlüsseln value und library. Diese Form hat eine Konsequenz, die es wert ist, im Voraus erwähnt zu werden: das Feld direkt mit auszudrucken {{ my_icon }} Gibt gar nichts aus Font-Icons und hochgeladene SVGs rendern auch durch unterschiedliches Markup, so dass die Vorlage einen kurzen Zweig braucht Beide Muster sind unten, bereit zum Einfügen.

Was das Feld Symbole bewirkt #

• Öffnet den Icon-Bibliothekspicker von Elementor Mit Font Awesome, benutzerdefinierten Bibliotheken und SVG-Upload.
• Speichert den Pick als Array von value und library.
• Hält eine Klassenzeichenfolge für Schriftartensymbole: value Klasse der Ikone ist, bereit für eine <i> Tag.
• Hält ein verschachteltes Dateiarray für SVGs: value URL und ID-Paar erreicht wird als {{ my_icon.value.url }}.
• Akzeptiert eine Standardeinstellung und eine empfohlene ListeDamit der Picker die Symbole, die zum Widget passen, aufdecken 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, das im Widget Builder-Editor geöffnet ist. Unser Beispiel ist ein Feature-List-Widget, bei dem jede Instanz ein Symbol mit dem Namen anzeigt feature_icon„neben einem kurzen Text-Klappentext.

So fügen Sie ein Symbolfeld hinzu #

Finden Sie die Symbole Feld im Panel links vom Widget Builder-Editor, gruppiert mit den anderen Medienfeldern.

Ziehen Sie es in einen Abschnitt unter dem Inhalt Tab. Sobald es landet, öffnen sich links die Optionen des Feldes.

Symbole Feldoptionen erklärt #

• Etikett: Der über dem Picker in Elementor gezeigte Text, zum Beispiel “Feature Icon”.
• Name: Die eindeutige Kennung für das Feld, Buchstaben, Zahlen und Unterstriche, zum Beispiel feature_icon.
• Standard: Ein Start-Icon als value und library Pair, damit das Widget nie ikonenlos einfällt.
• Empfohlen: Eine Reihe von Symbolen, die der Picker zuerst aufdeckt und die Redakteure zu Entscheidungen lenkt, die zum Design passen.
• 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 das Feld Symbole mit Ihrer Vorlage #

Erstens der Fehler, den fast jeder einmal macht: {{ feature_icon }} Druckt nichts. Die Direktdruckverknüpfung auf Array-Werten gibt nur eine oberste Ebene aus url Schlüssel, und das Icons-Array hat keine, also kommt das Token leer raus Kein Fehler, keine Warnung, nur eine leere Stelle, wo das Icon sein soll Die Eigenschaften sind dort, wo der Inhalt lebt.

Schriftbild (Font Awesome und andere klassenbasierte Bibliotheken): value Hält die Klassenzeichenfolge, also an <i> Tag rendert es:

<i class="{{ feature_icon.value }}" aria-hidden="true"></i>

Hochgeladene SVG: Wenn der Pick aus der SVG-Bibliothek kommt, wird value Ist selbst ein Array mit URL und ID, daher rendert das Symbol als Bild:

<img src="{{ feature_icon.value.url }}" alt="">

Ein Widget weiß selten im Voraus, welche Art der Editor auswählen wird, sodass das zuverlässige Muster auf dem verzweigt library Schlüssel und Griffe beide:

{% if feature_icon.library == 'svg' %}
  <img src="{{ feature_icon.value.url }}" alt="">
{% else %}
  <i class="{{ feature_icon.value }}"></i>
{% endif %}

Verpacken Sie das Ganze wie bei jedem Medienfeld in einen leeren Statusschutz, damit ein nicht gesetztes Symbol keinen Abweg hinterlässt <i class=""> Hinter:

{% if feature_icon.value %}
  ...the branch above...
{% endif %}

Achten Sie auf Tests nur mit Schriftartensymbolen. Die <i>- Tag-Version funktioniert die ganze Woche, dann lädt ein Client eine Marke SVG hoch und das Symbol verschwindet, weil ein Klassenattribut kein Dateiarray aufnehmen kann Wenn Sie das Feld versenden, versenden Sie den Zweig.

Verwenden Sie die Symbolsteuerung 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 Feld wird als Symbolauswahl von Elementor unter Ihrem Etikett gerendert und zeigt das aktuelle Symbol an.

Klicken Sie darauf und die Symbolbibliothek öffnet sich. Suchen Sie nach Font Awesome, durchsuchen Sie alle benutzerdefinierten Bibliotheken oder wechseln Sie zur Upload-Registerkarte für eine SVG. Bestätigen Sie die Auswahl und die Vorschauaktualisierungen und führen Sie sie durch den Zweig Ihrer Vorlage, der mit der Bibliothek übereinstimmt.

Häufige Anwendungsfälle #

• Feature - und Benefit-Listen Mit einem Symbol pro Punkt.
• Info - und Icon-Boxen Wo das Icon das Thema der Karte verankert.
• Soziale LinkreihenIn „jedes Beispiel koppelt ein Symbol mit einem URL-Feld.
• Knöpfe und Handlungsaufrufe Die ein kleines Leitsymbol tragen.
• Schritt - und Prozess-Widgets Dabei erhalten nummerierte Stufen jeweils ein passendes Symbol.

Tipps für die Arbeit mit dem Feld Symbole #

• Drucken Sie das Feld niemals blank. {{ feature_icon }} Gibt nichts aus; das Symbol lebt in {{ feature_icon.value }} Und, für SVGs, {{ feature_icon.value.url }}.
• Versenden Sie die Zweigstelle der Bibliothek. Die {% if feature_icon.library == 'svg' %} Pattern ist die einzige Version, die jede Auswahl überlebt, die ein Redakteur treffen kann.
• Bewachen Sie den leeren Zustand. {% if feature_icon.value %} Hält unset-Symbole davon ab, leere Tags zu rendern.
• Hinzufügen aria-hidden="true" zu dekorativen Schriftsymbolen. Bildschirmlesegeräte überspringen das Symbol und lesen stattdessen den Text daneben.
• Verwenden Sie Empfohlen, um die Auswahl zu leiten. Wenn Sie ein kuratiertes Set angreifen, bleiben die Symbole eines Widgets auf einer Website optisch konsistent.
• Größe SVGs in Ihrer CSS-Registerkarte. Hochgeladene SVGs kommen als Bilder an, geben Sie dem img-Zweig also eine Breite, damit beide Zweige auf dem gleichen Maßstab renderen.

Häufig gestellte Fragen #

Einwickelnd #

Das Feld Widget Builder Icons bringt die gesamte Elementor-Symbolbibliothek für den Preis eines kurzen Zweigs in ein benutzerdefiniertes Widget: value Als Klasse für Schriftartensymbole value.url Als Datei für SVGs, und einen Wächter um beide Koppeln Sie es mit dem Medienfeld Wenn ein Slot nach einem vollständigen Bild statt nach einem Symbol ruft Erkunden Sie den Rest des Master Addons Widgets und Erweiterungen, und sehen Sie sich die an Preisseite Für das, was jeder Plan beinhaltet.