Tutorial: Wie du eine SVG-Datei auf der Elementor-Seite anzeigen kannst

Eine Vielfalt von Geräten, Bildschirmgrößen und -Auflösungen macht eine hohe Skalierbarkeit und Reaktionsfähigkeit zu einer unerlässlichen Voraussetzung, um dem Online-Publikum ein optimales Nutzererlebnis bieten zu können. In Sachen Anpassbarkeit erweisen sich SVG-Bilder als besonders gut geeignet für Websites. Dieses Vektorgrafikformat steht für "scalable vector graphics" und wird für Illustrationen, Logos, Icons u.a. verwendet. Du kannst SVG-Bilder in Grafikeditoren Illustrator, Sketch oder Inkscape erstellen und bearbeiten. Skalierbare Grafiken auf der Website bringen viele Vorteile mit sich:

• Einfaches Editieren. Im Vergleich zu Rastergrafiken lassen sich die Position, Form, Größe, Proportionen, Farben und andere Eigenschaften des Bildes viel einfacher ändern.
• Bilder eignen sich für hochauflösende Bildschirme mit hoher Pixeldichte. Die Pixel für die Darstellung passen sich automatisch an die erforderliche Pixelgröße an.
• Schnelle Ladegeschwindigkeit. Designer sollten auch an die Ladegeschwindigkeit denken, denn je mehr Zeit die Anfragen zur Seitenanzeige in Anspruch nehmen, desto geringer ist die Conversion Rate eines Projekts.
• SVG-Bilder lassen sich einfach anpassen. Wenn du vereinfachte Version deines Logos anzeigen möchtest, ist das mit dem SVG-Format durch nur eine Serveranfrage möglich.
• Interaktivität. Es ist möglich, Links, Skripte, interaktive Teile und Animationen in das Bild einzubinden.
• SEO-Freundlichkeit. SVG-Bilder werden in XML-Textdateien definiert, so dass Keywords und Beschreibungen verwendet und von Suchmaschinen leichter erkannt werden können.
• Browserübergreifende Kompatibilität. SVGs werden in jedem Browser und auf jedem Device korrekt angezeigt,

Vektorbasierte Grafiken lassen sich beliebig ändern, ohne dass die Bildqualität beeinträchtigt wird. Du kannst Bilder auf deiner WordPress-Website nutzen und auf eine gewünschte Größe ohne Qualitätsverlust skalieren. Heute lernst du, wie du SVGs in Logos, Illustrationen, Diagramme usw. mit Hilfe vom Elementor-Page Builder und JetElements-Plugin einfügen kannst.

Dazu brauchst du das Inline SVG-Widget, das im JetElements-Plugin enthalten ist. Also, du sollst zuerst dieses leistungsstarkes Addon für Elementor installieren. Nachdem du damit fertig bist, gehe auf deine WordPress-Website mit Elementor und folge dieser Schritt-für-Schritt Anleitung.

1. Gib in die Suchzeile im Elements-Panel “SVG” ein.

2. Zieh dann das Widget und leg es im neuen Abschnitt rechts ab.

3. Links siehst du einfache Content-Einstellungen.

4. Klick auf das leere Feld, um die SVG-Datei hinzuzufügen - lade sie einfach aus der geöffneten Medienbibliothek hoch.

5. Um das Bild anklickbar zu machen, füge die URL in das Feld unter SVG ein.

6. Jetzt gehe auf den Style-Abschnitt. Hier kannst du eine benutzerdefinierte Breite und Skalierung des Bildes festlegen.

7. Wenn du die Option Seitenverhältnis auf "no" setzt, kannst du die Breite und Höhe manuell ändern.

8. Möchtest du das ursprüngliche Seitenverhältnis der SVG-Datei beibehalten, dann schalte diese Option einfach auf "ja" um. In diesem Fall ändert sich die Bildgröße unter Beibehaltung der Proportionen.

9. Die nächste Option ermöglicht es dir, benutzerdefinierte Farben für dein Bild zu verwenden. Du sollst aber beachten, dass es auf den Typ deiner SVG-Datei und die Anzahl der verwendeten Farben ankommt.

10. Auf dem Screenshot oben siehst du allerdings, dass du eine Farbe auf das gesamte SVG-Bild anwenden kannst.

11. Wenn in deinem Logo nur eine Farbe verwendet wird, kann diese Option für einen wirklich interessanten Effekt sorgen.

12. Eine weitere Option, die du im Widget findest, ist Remove Inline CSS. Sie erlaubt dir, Inline-Stile in der hochgeladenen SVG-Datei zu löschen.

13. Außerdem kannst du in diesen Block die Ausrichtung einstellen: links, zentriert oder rechts.

Fazit

Der Elementor Page-Builder ist ein ziemlich universelles Werkzeug, mit dem du auf der Website nahezu alles umsetzen kannst - von Blogbeiträgen über Animationen bis hin zur Darstellung von SVG-Bilddateien. Wenn du ein echter Fan von Elementor bist, dann könnte dich dieses Angebot interessieren: Vor kurzem hat TemplateMonster ein brandneues Abo namens ONE an den Start gebracht. Das ist der erste Service, der eine komplette Produktpalette von Plugins und Erweiterungen bis hin zu Vorlagen und Grafiken umfasst. Eine große Auswahl an Elementor Themes ist mit dabei. Die Nutzung dieser umfassenden Sammlung für Webdesigner kostet dich nur 19$ pro Monat. Der wichtigste ONE-Vorteil ist das, dass es dir frei steht, die ONE-Produkte für beliebig viele Projekte zu verwenden. Wer genauer wissen möchte, was das Abo bietet, kann auf der ONE-Seite vorbeischauen. Als Leser des deutschen Blogs von TemplateMonster kannst du zudem mit 5% Rabatt auf ONE rechnen. Gib einfach den den Promo-Code BecomeThe1 auf der Checkout-Seite ein und nutzen den Nachlass.

Wir haben dieses Tutorial aus dem Englischen übersetzt und angepasst. Der Originalbeitrag ist hier zu lesen.