Wenn du mit Elementor arbeitest, möchtest du Links oft farblich an dein Design anpassen. Manchmal übernimmt Elementor jedoch die Standardfarbe deines Themes oder die Linkfarbe lässt sich nicht direkt ändern. In diesem Tutorial zeige ich dir, wie du die Elementor Link Farbe ändern kannst und welche Einstellungen dafür wichtig sind.
Link Farbe direkt im Elementor Widget ändern
Die einfachste Möglichkeit, die Elementor Link Farbe zu ändern, ist direkt im jeweiligen Widget. Das funktioniert zum Beispiel im Text-Editor Widget, aber auch in vielen anderen Widgets, die Links enthalten.
Schritt 1: Widget auswählen
Öffne die Seite im Elementor Editor und klicke auf das Widget, in dem sich dein Link befindet. Häufig ist das der Text-Editor.
Schritt 2: Stil-Tab öffnen
Wechsle anschließend in der linken Seitenleiste zum Tab Stil.
Dort findest du unter Textfarbe die Einstellung für die Farbe deines Textes.
Schritt 3: Linkfarbe ändern
Wenn dein Text einen Link enthält, übernimmt dieser normalerweise die Linkfarbe aus den globalen Einstellungen. In manchen Widgets, wie dem Text-Editor kannst du die Linkfarbe jedoch auch direkt im Widget anpassen.
Wähle einfach eine neue Farbe aus, um die Link Farbe in Elementor zu ändern.
💡 Expertentipp: Wenn sich die Linkfarbe im Widget nicht ändern lässt, wird sie oft von den globalen Elementor Farben oder vom Theme gesteuert. In diesem Fall solltest du die Linkfarbe in den Website-Einstellungen von Elementor anpassen.
Globale Linkfarbe in Elementor ändern
Wenn du die Link Farbe in Elementor für die gesamte Website ändern möchtest, kannst du das über die globalen Einstellungen machen. Dadurch werden alle Links automatisch in der gleichen Farbe dargestellt.
Schritt 1: Website-Einstellungen öffnen
Öffne eine Seite im Elementor Editor und klicke oben links auf das Hamburger-Menü (die drei Linien).
Dort findest du den Punkt Website-Einstellungen:
Schritt 2: Globale Farben öffnen
In den Website-Einstellungen gehst du zu:
Theme Stil → Typografie
Schritt 3: Linkfarbe anpassen
Passe hier die Farbe für Links an oder ändere eine der globalen Farben, die für Links verwendet wird.
Im Reiter Hover kannst du die Linkfarbe bei Mausberührung festlegen.
Sobald du die Änderung speicherst, wird die Linkfarbe auf allen Seiten deiner Website aktualisiert.
💡 Expertentipp: Globale Typografie sind besonders praktisch, wenn du dein Design später anpassen möchtest. Ändert sich die Farbe einmal, wird sie automatisch auf allen Elementor Seiten aktualisiert.
Link Hover Farbe ändern
Neben der normalen Linkfarbe kannst du in Elementor auch die Hover Farbe von Links anpassen. Diese Farben bestimmen, wie sich ein Link verhält, wenn Besucher mit der Maus darüberfahren oder ihn anklicken.
Hover Farbe ändern
Öffne im Elementor Editor das Widget, in dem sich dein Link befindet, zum Beispiel den Text Editor oder einen Button.
Wechsle anschließend zum Tab Stil. Dort findest du in vielen Widgets separate Einstellungen für:
- Normal
- Hover
Im Bereich Hover kannst du die Farbe festlegen, die angezeigt wird, wenn Besucher mit der Maus über den Link fahren.
💡 Expertentipp: Eine leicht veränderte Hover Farbe hilft Besuchern zu erkennen, dass ein Text anklickbar ist. Besonders bei Buttons und Navigationen verbessert das die Benutzerfreundlichkeit deiner Website deutlich. Die Hover-Farbe spielt auch eine Rolle bei der Barrierefreiheit.
Link Farbe mit CSS ändern
Wenn sich die Linkfarbe in Elementor nicht über die Widget- oder globalen Einstellungen ändern lässt, kannst du sie auch direkt mit CSS anpassen. Das ist besonders hilfreich, wenn dein Theme die Linkfarbe überschreibt.
CSS Code für Linkfarbe hinzufügen
Füge dazu folgenden CSS-Code hinzu:
a {
color: #0073ff;
}
a:hover {
color: #ff6600;
}
Damit legst du fest:
- Normale Linkfarbe: blau (
#0073ff) - Hover Farbe: orange (
#ff6600)
CSS in WordPress einfügen
Du kannst den CSS-Code zum Beispiel hier hinzufügen:
Design → Customizer → Zusätzliches CSS
Alternativ kannst du das CSS auch über Elementor → Website-Einstellungen → Custom CSS einfügen.
💡 Expertentipp: Wenn du nur Links in einem bestimmten Bereich ändern möchtest, solltest du den CSS-Code auf einen Container oder eine Klasse beschränken. So verhinderst du, dass sich die Linkfarbe auf der gesamten Website verändert. Du knanst auch direkt ein einzelnes Elementor Widget auswählen und dort dann in Erweitert → Individuelles CSS mit selector arbeiten.
Typische Probleme
Beim Ändern der Link Farbe in Elementor treten immer wieder ein paar typische Probleme auf. Die häufigsten Ursachen findest du hier.
Linkfarbe ändert sich nicht
Wenn sich die Linkfarbe trotz deiner Änderung nicht sichtbar anpasst, liegt das oft daran, dass die Farbe an einer anderen Stelle definiert wird.
Prüfe deshalb zuerst:
- ob du das richtige Widget bearbeitest
- ob die Linkfarbe vielleicht über globale Farben gesteuert wird
- ob nach der Änderung noch ein Cache aktiv ist
Manchmal hilft es schon, die Seite neu zu laden oder den Cache von WordPress, dem Browser oder einem Caching-Plugin zu leeren. Du kannst die Seite auch testweiße über den Inkognito Browser abrufen.
Theme überschreibt Elementor
Ein weiteres typisches Problem ist, dass dein WordPress Theme die Linkfarben vorgibt. In diesem Fall werden deine Elementor Einstellungen teilweise oder komplett überschrieben.
Das passiert vor allem bei Themes mit eigenen globalen Typografie- oder Farboptionen.
Prüfe deshalb zusätzlich:
- die Customizer-Einstellungen deines Themes
- globale Typografie- oder Linkfarben im Theme
- ob du die Farbe notfalls per CSS überschreiben musst
💡 Expertentipp: Wenn du Elementor möglichst frei gestalten möchtest, funktioniert das am saubersten mit einem schlanken Theme wie Hello Elementor. Dadurch gibt es deutlich weniger Konflikte bei Farben, Typografie und Abständen.
Elementor Link Farbe ändern – kurz zusammengefasst
Die Link Farbe in Elementor kannst du auf verschiedenen Wegen anpassen. Am einfachsten funktioniert es direkt im jeweiligen Widget über den Stil-Tab. Wenn du die Linkfarbe für mehrere Seiten gleichzeitig ändern möchtest, kannst du stattdessen die globalen Farben in den Elementor Website-Einstellungen verwenden.
Sollte dein Theme die Farben überschreiben oder sich die Änderung nicht anwenden lassen, kannst du die Linkfarbe zusätzlich mit CSS anpassen. So stellst du sicher, dass deine Links immer zu deinem Design passen.
