Icons in Elementor – So optimierst du sie

Elementor bietet dir eine Vielzahl von Werkzeugen zur Gestaltung deiner WordPress-Seite, einer der grundlegenden Bausteine ist das Icon. Icons sind nicht nur dekorative Elemente, sie können auch funktionale Nutzererfahrungen verbessern und helfen, wichtige Informationen auf einen Blick zu kommunizieren. Lerne hier, wie du Icons in Elementor anwenden und anpassen kannst, um deine Webseite aufzuwerten.

Wichtigste Erkenntnisse

• Icons sind vielseitige Elemente, die sowohl künstlerische als auch informative Funktionen erfüllen können.
• Du kannst Icons individuell anpassen, einschließlich Farbe, Größe, Form und Animation.
• Eine Verlinkungsoption ermöglicht es, Icons effektiv zur Navigation zu nutzen.

Schritt-für-Schritt-Anleitung

Schritt 1: Icon hinzufügen

Um ein Icon in deinen Abschnitt einzufügen, ziehe das Icon-Widget in den gewünschten Bereich deiner Seite. Du wirst sehen, dass eine Vorauswahl angezeigt wird, meist ein Stern-Icon.

Schritt 2: Icon wechseln

Klicke auf das vorhandene Icon, um das Auswahlfenster zu öffnen. Hier kannst du aus einer Vielzahl von Icons wählen. Zum Beispiel, wähle ein Taxi-Icon, um deinem Inhalt ein spezifisches Thema zuzuordnen.

Schritt 3: Icon-Typ auswählen

Elementor bietet drei Typen von Icons an: reguläre Icons, solide Icons und Marken-Icons. Reguläre Icons sind meist nur mit einem Umriss versehen, während solide Icons vollständig ausgefüllt sind. Marken-Icons entsprechen bekannten Logos, wie z.B. von Amazon oder Apple.

Schritt 4: Anzeigeeinstellungen anpassen

Du kannst die Darstellung deines Icons auf verschiedene Weise anpassen – durch „Gestapelt“ (völlig ausgefüllt), „Gerahmt“ (mit Umriss) oder „Vorgabe“ (der angezeigte Hintergrund). Wähle die Option, die am besten zur Ästhetik deiner Webseite passt.

Schritt 5: Größe und Form des Icons anpassen

Ein weiterer wichtiger Punkt ist die Form des Icons. Du kannst wählen, ob es kreisförmig oder quadratisch sein soll. Ein Kreis wird oft als harmonischer empfunden, während ein Quadrat einen anderen grafischen Eindruck hinterlässt.

Schritt 6: Verlinkung einstellen

Um Interaktivität zu schaffen, kannst du eine Verlinkung setzen. Gib beispielsweise deine Homepage-Adresse ein, sodass Besucher beim Klicken auf das Icon dorthin geleitet werden.

Schritt 7: Stil anpassen

Unter „Stil“ hast du die Möglichkeit, die Primär- und Sekundärfarbe einzustellen. Für Effekte beim Hovern kannst du auch festlegen, wie die Farben wechseln sollen. Ändere die Primärfarbe beispielsweise in Rot und die Sekundärfarbe in Schwarz.

Schritt 8: Hover-Effekte definieren

Wenn du die Interaktivität verstärken möchtest, kannst du auch Animationseffekte für das Hover-Element hinzufügen. Diese beinhalten Optionen wie „Push“ oder „Grow“. Wähle einen gewünschten Effekt, um das Nutzererlebnis zu verbessern.

Schritt 9: Größe und Abstand definieren

Die Größe des Icons kannst du anpassen, während der Abstand, auch Padding genannt, dafür verantwortlich ist, wie viel Platz zwischen dem Icon und seinem inneren Rahmen vorhanden ist. Experimentiere mit diesen Werten, um die gewünschte Balance zu finden.

Schritt 10: Werte verknüpfen

Wenn du individuelle Einstellungen für verschiedene Ecken eines Icons vornehmen möchtest, kannst du die Werte verknüpfen oder separat anpassen. Verknüpfte Werte stellen sicher, dass Änderungen für alle Seiten simultan übernommen werden.

Schritt 11: Erweiterte Einstellungen überprüfen

Unter den erweiterten Einstellungen findest du dieselben Optionen wie bei den grundlegenden Einstellungen. Stelle sicher, dass alles korrekt konfiguriert ist, um eine konsistente Darstellung auf deiner Seite zu gewährleisten.

Zusammenfassung

In dieser Anleitung hast du die grundlegenden Schritte zum Hinzufügen und Anpassen von Icons in Elementor gelernt. Von der Auswahl des Icons bis hin zu Farbe, Größe und Verlinkung – mit diesen Techniken kannst du Webseiten gestalten, die sowohl ästhetisch ansprechend als auch funktional sind.