Page Builder und Felder
Deine Easy SVG Pro Icons direkt in Elementor, WPBakery, ACF, Secure Custom Fields, Lazy Blocks, Meta Box und Timber/Twig auswählen.
Deine Kunden bauen Seiten in Elementor, WPBakery oder mit eigenen Feldern. Easy SVG Pro bringt deine Icon-Sets direkt in diese Werkzeuge, damit Redakteure ein Icon aus einer Liste wählen, statt Code zu kopieren. Diese Anleitung behandelt jede Integration.
Bevor du loslegst
- Deine Pro-Lizenz ist aktiv.
- Das Builder- oder Feld-Plugin ist installiert und aktiv.
- Sein Schalter ist unter Icons → Funktionen in der Gruppe Integrationen an. Jedes Werkzeug hat einen eigenen Schalter, und ein Schalter ist ausgeblendet, solange sein Plugin nicht aktiv ist.
Welche Integration macht was?
| Werkzeug | Schalter unter Icons → Funktionen | Was Redakteure bekommen |
|---|---|---|
| Elementor | Elementor-Icon-Auswahl | Deine Sammlungen als Tabs in Elementors eigener Icon-Bibliothek |
| WPBakery Page Builder | WPBakery-Icon-Element | Ein Element Easy-SVG-Icon und deine Icons in WPBakerys eigener Icon-Auswahl |
| Advanced Custom Fields, Secure Custom Fields | ACF-Icon-Auswahl | Einen Tab Easy SVG im Icon-Picker-Feld von ACF |
| Lazy Blocks | Lazy-Blocks-Icon-Steuerelement | Ein Steuerelement Easy SVG Icon für deine eigenen Blöcke |
| Meta Box | Meta-Box-Icon-Feld | Einen Feldtyp easy_svg_icon |
| Timber-/Twig-Themes | Timber / Twig | Zwei Twig-Funktionen für Templates |
Elementor
Einschalten
Schalte unter Icons → Funktionen die Elementor-Icon-Auswahl ein.
Ein Icon-Feld öffnen
Bearbeite in Elementor ein Widget mit Icon, zum Beispiel Icon, Icon-Box oder Button. Klicke auf das Icon-Feld und wähle die Icon-Bibliothek.
Icon wählen
Jede deiner Sammlungen erscheint links als eigener Tab, benannt wie das Set. Klicke ein Icon an und dann auf Einfügen.
Zeigt eine Seite auf ein Icon, das es nicht mehr gibt, zeigt der Elementor-Editor einen gestrichelten Rahmen und einen Platzhalter mit der Adresse des Icons. Besucher sehen dort nichts, der Rest der Seite bleibt unverändert.
WPBakery Page Builder
Zwei Wege, beide mit einem Schalter:
- Das Element Easy-SVG-Icon. Öffne im WPBakery-Fenster zum Hinzufügen von Elementen die Kategorie Easy SVG und füge Easy-SVG-Icon hinzu. Wähle das Icon in seinen Einstellungen.
- In WPBakerys eigener Icon-Auswahl. Elemente, die schon eine Icon-Einstellung haben, auch viele Elemente von Themes, bekommen eine zusätzliche Bibliothek Easy-SVG-Icons. Wähle sie im Auswahlfeld der Icon-Bibliothek des Elements.
Bereits veröffentlichte Seiten zeigen ihre Icons weiter, auch wenn du das Element später ausschaltest. Für neue Inhalte wird es dann nicht mehr angeboten.
ACF und Secure Custom Fields
Einschalten
Schalte die ACF-Icon-Auswahl unter Icons → Funktionen ein.
Ein Icon-Picker-Feld anlegen
Bearbeite in ACF eine Feldgruppe und füge ein Feld vom Typ Icon-Picker hinzu.
Den Tab Easy SVG nutzen
Wenn Redakteure das Feld ausfüllen, hat die Auswahl jetzt einen Tab Easy SVG mit all deinen Icons. Hast du die Tabs des Felds in seinen Einstellungen eingeschränkt, lass Easy SVG angehakt.
Secure Custom Fields ist ein Ableger von ACF und funktioniert genauso, mit demselben Schalter.
Lazy Blocks
Schalte das Lazy-Blocks-Icon-Steuerelement ein. Wenn du in Lazy Blocks einen Block baust, füge ein Steuerelement hinzu und wähle den Typ Easy SVG Icon. Redakteure wählen das Icon dann in der Seitenleiste des Blocks. Das Steuerelement speichert die Adresse des Icons.
Meta Box
Schalte das Meta-Box-Icon-Feld ein. Nimm in deiner Meta-Box-Felddefinition den Feldtyp easy_svg_icon. Redakteure bekommen eine Icon-Auswahl, und das Feld speichert die Adresse des Icons.
Timber und Twig
Schalte Timber / Twig ein. Zeichne in einem Twig-Template ein Icon über seine Adresse:
{{ easy_svg_icon('acme/front-door') }}
Prüfe vorher, ob es das Icon gibt:
{% if easy_svg_icon_exists('acme/front-door') %}
{{ easy_svg_icon('acme/front-door') }}
{% endif %}
easy_svg_icon funktioniert auch als Filter: {{ 'acme/front-door'|easy_svg_icon }}. Die Ausgabe ist als sicher markiert, Twig zeigt also das Icon statt seines Codes. Ein Icon, das es nicht mehr gibt, gibt nichts aus.
Und Redakteure?
Alle Auswahlen laden ihre Icons auch für Redakteure, nicht nur für Administratoren. Redakteure können Icons wählen, hinzufügen oder ändern dürfen sie nur Administratoren.
Gut zu wissen
- Jede Integration speichert die Adresse (
sammlung/name). Ersetzt du die Zeichnung eines Icons, ändert sie sich überall. Verschiebst du es in ein anderes Set, ändert sich die Adresse. - Keine zusätzlichen Dateien im Frontend. Icons werden als Inline-SVG ausgegeben, die Builder laden also keine Icon-Schrift.
- Shortcode als Ausweg. In jedem Builder ohne Integration nimmst du
[easy_svg_icon name="acme/front-door"]in einem Textelement.
Häufige Fragen
Passende Anleitungen
Block-Editor und Block-Themes
Schnell einfügen und der Icon-Block in Templates.
Funktionen einschalten
Alle Schalter erklärt.
Für Entwickler: Die Twig-Funktionen, der Shortcode und die Integrations-Hooks stehen in der Entwickler-Referenz.