Icon-Liste in Elementor erstellen – einfache Anleitung

Elementor ist ein leistungsfähiger Page Builder für WordPress, der es dir ermöglicht, ansprechende Webseiten ohne Programmierkenntnisse zu gestalten. Eines der nützlichsten Elemente in Elementor ist die Icon-Liste. Mit dieser Funktion kannst du Informationen visuell ansprechend präsentieren, sei es für To-Do-Listen, Social Media-Links oder andere Inhalte. In dieser Anleitung zeige ich dir Schritt für Schritt, wie du eine ansprechende Icon-Liste erstellen und anpassen kannst.

Wichtigste Erkenntnisse

• Mit der Icon-Liste kannst du visuelle Elemente einfach hinzufügen.
• Jeder Eintrag kann individuell mit Text, Icons und Links versehen werden.
• Stil und Layout der Liste sind flexibel anpassbar.

Schritt-für-Schritt-Anleitung

Schritt 1: Elementor öffnen und Icon-Liste hinzufügen

Zunächst öffnest du den Elementor-Editor auf der Webseite, an der du arbeitest. Suche im Elementor-Widget-Bereich nach der Option „Icon-Liste“. Ziehe dieses Widget in den gewünschten Abschnitt deiner Seite.

Schritt 2: Elemente der Icon-Liste anpassen

Sobald das Widget platziert ist, siehst du standardmäßig einige Listenelemente. Du kannst die Anzahl der Icons und Textzeilen ändern, indem du die entsprechenden Optionen im linken Menü nutzt. Klicke auf „Listenelement 1“, um den Text zu bearbeiten. Hier kannst du beispielsweise „YouTube“ eingeben.

Schritt 3: Icons auswählen

Um ein passendes Icon für jeden Listeneintrag auszuwählen, klickst du auf den Icon-Bereich. Ein Fenster öffnet sich, in dem du aus einer umfangreichen Bibliothek auswählen kannst. Suche nach „YouTube“ und füge das gewünschte Icon hinzu.

Schritt 4: Links hinzufügen

Jedem Listenelement kannst du auch einen Link zuweisen. Klicke dafür auf das Feld „Link“ neben dem Text und füge den entsprechenden URL ein, wie z. B. den Link zu deinem YouTube-Kanal.

Schritt 5: Layout anpassen

Du kannst nun die Layout-Optionen konfigurieren. Wähle zwischen „Inline“ oder „Volle Breite“. Entscheide, wie du deine Icon-Liste visualisieren möchtest, um dem Gesamtstil deiner Webseite gerecht zu werden.

Schritt 6: Stil anpassen

Gehe zum Stil-Tab, um das Aussehen deiner Icon-Liste zu ändern. Hier kannst du den Abstand zwischen den einzelnen Zeilen festlegen, die Ausrichtung anpassen und eventuelle Trennelemente aktivieren. Wähle beispielsweise eine gestrichelte Linie als Trennzeichen für einen eleganten Look.

Schritt 7: Farben anpassen

Du kannst die Farben für deine Icons und den Text ändern. Wähle zum Beispiel eine grüne Farbe, wenn man mit der Maus über das Element fährt. Dies sorgt für eine interaktive Schattenwirkung, die deinen Besuchern auffällt.

Schritt 8: Schriftgrößen und Typografie einstellen

Um sicherzustellen, dass die Schriftgröße optisch zu den Icons passt, passe die Textgröße unter dem Reiter „Text“ an. Setze die Größe zum Beispiel auf 25 und wähle eine passende Schriftfarbe, um einen harmonischen visuellen Effekt zu erzielen.

Schritt 9: Vorschau und Speicherung

Wenn du mit deiner Icon-Liste zufrieden bist, klicke auf „Speichern“, um die Änderungen zu übernehmen. Beachte die Vorschau, um zu sehen, wie die Liste im Frontend aussieht.

Schritt 10: Test der Funktionalität

Teste die Links auf deiner veröffentlichten Seite, um sicherzustellen, dass alles wie gewünscht funktioniert. Überprüfe auch, ob die Hover-Effekte korrekt angezeigt werden, um sicherzustellen, dass die Interaktivität gegeben ist.

Zusammenfassung

In dieser Anleitung hast du gelernt, wie du Schritt für Schritt eine ansprechende und funktionale Icon-Liste mit Elementor für WordPress erstellen kannst. Du musst nur ein paar einfache Anpassungen vornehmen, um die Liste deinem Stil anzupassen und die Benutzererfahrung zu optimieren.