Symbole

Das Feld Symbole fügt den Symbolauswahler von Elementor zu einem benutzerdefinierten Widget hinzu, das mit den Master-Addons erstellt wurde Widget-builder. Redakteure wählen ein Symbol aus der Symbolbibliothek oder laden ihr eigenes SVG hoch, und Ihre Vorlage druckt es aus Verwenden Sie es für Funktionslisten, Infoboxen, Schaltflächen, soziale Links und wo sonst ein kleines Symbol hilft.

Icons 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 Feld Symbole bewirkt #

• Es fügt dem Panel Ihres Widgets in Elementor ein Symbolfeld mit Schaltflächen für die Symbolbibliothek und zum Hochladen eines SVG hinzu.
• Die Symbolbibliothek umfasst Font Awesome und die zusätzlichen Symbolsätze, die mit Master-Addons geliefert werden, wie Elementor-Symbole, einfache Zeilensymbole, lineare Symbole und Materialsymbole.
• Das Feld speichert zwei Dinge: value (die CSS-Klasse des Symbols oder die SVG-Datei für einen Upload) und library (von welchem Set es stammt).
• Ihre Vorlage druckt eine <i> Tag für Bibliothekssymbole und ein <img> Tag für hochgeladene SVGs.

Wenn Sie noch kein Widget gebaut haben, lesen Sie die Übersicht über Widget Builder Zuerst.

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, das im Widget Builder geöffnet wird Das Beispiel in diesem Handbuch ist ein Widget “Feature List”: ein Feld Symbole mit dem Namen feature_icon und ein Textfeld für den Titel.

So fügen Sie ein Symbolfeld hinzu #

1. Gehe zu Master-Addons > Widget Builder und öffnen Sie Ihr Widget.
2. Auf der Inhalt Tab, fügen Sie einen Abschnitt hinzu, zum Beispiel “Feature”.
3. Typ icons Im Feldsuchfeld links.
4. Ziehen Symbole In den Abschnitt Seine Einstellungen öffnen sich in der linken Seitenleiste.

Symbole Feldoptionen erklärt #

• Etikett Ist der Text über dem Icon-Feld in Elementor, zum Beispiel “Feature Icon”.
• Name Ist die eindeutige ID des Feldes und der Anfang seiner Token, so feature_icon gibt {{ feature_icon.value }}. Nur Buchstaben, Zahlen und Unterstriche.
• Beschreibung Unter der Kontrolle in Elementor erscheint.
• Haut Inline und Media bietet Es verändert, wie die Builder-eigene Vorschau das Feld zeichnet In unseren Tests hat Elementor die große Icon-Box so oder so gezeigt.
• Standardwert Ist das Symbol, mit dem eine neue Kopie des Widgets beginnt Klicken Sie Symbol ändern Eines auszuwählen, oder das kleine Kreuz, um es zu löschen Ohne Standardsatz beginnt das Feld mit dem Elementor-Logosymbol.

Symbol ändern öffnet den Symbol-Picker für Master-Addons Icon Wählen Sie links ein Set aus, suchen Sie nach Namen, klicken Sie auf ein Symbol und dann Einfügen.

Drucken Sie das Symbol in Ihrer Vorlage aus #

{{ feature_icon }} Für sich allein druckt nichts, denn das Feld hält zwei Werte Verwenden Sie stattdessen seine Teile:

• {{ feature_icon.value }} Ist die Symbolklasse für ein Bibliothekssymbol, wie z eicon eicon-check. Für eine hochgeladene SVG druckt sie die URL der Datei aus.
• {{ feature_icon.library }} Ist der eingestellte Name, wie eicons, simple-line-icons oder svg Für einen Upload.
• {{ feature_icon.value.url }} URL der SVG ist, wenn die Bibliothek svg.

Redakteure können beide Arten auswählen, also überprüfen Sie die Bibliothek und drucken Sie das richtige Tag aus. Verpacken Sie alles in einen Scheck auf einen leeren Wert, damit nichts gedruckt wird, wenn das Symbol entfernt wird:

{% if feature_icon.value %}
  <span class="feature-icon">
    {% if feature_icon.library == 'svg' %}
      <img src="{{ feature_icon.value.url }}" alt="">
    {% else %}
      <i class="{{ feature_icon.value }}" aria-hidden="true"></i>
    {% endif %}
  </span>
{% endif %}

Bibliothekssymbole sind Schriftglyphen, also nehmen sie die color und font-size Des Elements um sie herum Ein hochgeladenes SVG in einem <img> Tag behält seine eigenen Farben, also größen Sie es mit width und height Im Reiter CSS.

Klicken Sie auf Einstellungen speichern Wenn du fertig bist.

Verwenden Sie die Symbolsteuerung in Elementor #

Widget zu einer Seite hinzufügen, oder den Editor neu laden, wenn die Seite bereits geöffnet war Das Symbolfeld zeigt das aktuelle Symbol Bewegen Sie den Mauszeiger, um es zu sehen Symbolbibliothek und SVG hochladenund ein Papierkorbsymbol zum Entfernen des Symbols.

Symbolbibliothek Öffnet das Symbolfenster von Elementor Wählen Sie links eine Menge, filtern Sie nach Namen, klicken Sie auf ein Symbol und klicken Sie auf Einfügen. SVG hochladen Öffnet die Mediathek, damit Sie eine SVG-Datei hochladen oder auswählen können Elementor bittet Sie möglicherweise, SVG-Uploads beim ersten Mal zuzulassen.

Font Awesome-Symbole und Inline-Schriftartensymbole #

Auf unserer Testseite wurden Elementor-Symbole, einfache Zeilensymbole und hochgeladene SVGs alle auf der veröffentlichten Seite angezeigt, ein Font-Awesome-Symbol jedoch nicht. Elementors Inline-Schriftartensymbole Die Funktion ist standardmäßig aktiviert und verhindert das Laden des Font Awesome-Stylesheets <i> Tag aus dem Widget bleibt leer Gehe zu Elementor > Einstellungen > FunktionenInline-Schriftartensymbole auf setzen Inaktiv Und speichern. dann erschien das Font Awesome Icon, wenn ihr diese Funktion lieber anbehalten wollt, benutzt die anderen Icon-Sets oder einen SVG-Upload.

Häufige Anwendungsfälle #

• Funktionslisten und Infoboxen mit einem Symbol neben jeder Überschrift.
• Tasten mit einem führenden oder nachlaufenden Symbol.
• Soziale Links, Kontaktdaten und Listenaufzählungen.
• Markenzeichen, indem Sie das Logo als SVG hochladen.

Tipps für die Arbeit mit dem Feld Symbole #

• Behandeln Sie beide Fälle immer in der Vorlage: <i> Für Bibliothekssymbole und <img> Für SVG-Uploads.
• Wache mit {% if feature_icon.value %} Ein leeres Symbol hinterlässt also keinen leeren Wrapper.
• Legen Sie einen Standardwert fest, der zum Widget passt, sodass das Elementor-Logo nie zufällig angezeigt wird.
• Gestalten Sie den Wrapper, nicht das Symbol-Tag, sodass beide Symboltypen im selben Feld sitzen.
• Überprüfen Sie eine Auswahl von Font Awesome auf der Live-Seite, bevor Sie sich darauf verlassen (siehe Abschnitt oben).
• Für Bilder statt für Symbole verwenden Sie die Medienfeld.

Häufig gestellte Fragen #

Einwickelnd #

Fügen Sie das Feld Symbole hinzu, setzen Sie ein Standard-Symbol und drucken Sie es mit einer Vorlage aus, die sowohl Bibliothekssymbole als auch SVG-Uploads verarbeitet. Überprüfen Sie die Auswahl von Font Awesome auf der veröffentlichten Seite und schalten Sie Inline-Schriftartensymbole aus, wenn sie leer sind. Weitere Felder auf der Registerkarte Inhalt finden Sie auf der URL und Wählen Sie Felder, und überprüfen Preisbildung Für das, was jeder Plan beinhaltet.