Wie man die Linkfarbe in WordPress ändert (Anleitung für Anfänger)

Als wir anfingen, WordPress Websites individuell anzupassen, dachten wir, Link-Farben seien nur ein kleines Design-Detail. Aber nach jahrelangem Testen und Optimieren haben wir gelernt, dass etwas so Einfaches wie die Farbe eines Links die Benutzerfreundlichkeit Ihrer Website beeinflussen kann.

Denken Sie darüber nach. Ihre Links führen die Besucher durch Ihre Website, heben wichtige Inhalte hervor und spiegeln Ihre Markenidentität wider. Die falsche Farbwahl kann dazu führen, dass Links schwer zu erkennen sind oder mit Ihrem Design kollidieren, während die richtige Wahl auf natürliche Weise Aufmerksamkeit erregt und zum Klicken anregt.

In diesem Leitfaden zeigen wir Ihnen verschiedene Möglichkeiten, wie Sie die Farben Ihrer Links in WordPress ändern können, von den einfachsten Methoden bis hin zu individuellem Code.

Warum sollte man die Linkfarbe in WordPress ändern?

Wenn Sie in WordPress einen Link hinzufügen, bestimmt Ihr Theme automatisch die Farbe dieses Links. Manchmal sind die Standard-Farben Ihres WordPress-Themes genau das, was Sie wollen, aber Sie brauchen vielleicht mehr Kontrolle darüber, wie die Links aussehen.

Sie könnten zum Beispiel die Farbe der Links ändern, um sie an Ihre Marke oder Ihr eigenes Logo anzupassen. Oder Sie möchten den Farbkontrast erhöhen, um Ihre Website für Leser mit eingeschränktem Sehvermögen besser zugänglich zu machen.

Sehen wir uns also an, wie Sie die Farbe der Links auf Ihrer WordPress-Website ändern können, unabhängig davon, welches Theme Sie verwenden. Verwenden Sie einfach die unten stehenden Links, um direkt zu der gewünschten Methode zu gelangen:

Link-Farbe in WordPress Classic Themes ändern

Einige klassische Themes verfügen über integrierte Optionen zum Ändern von Link-Farben, aber Sie müssen zuerst die Einstellungen Ihres spezifischen Themes überprüfen.

Um zu sehen, ob Ihr Theme über diese Option verfügt, gehen Sie zu Design ” Customizer. Suchen Sie dann nach einer Einstellung, auf der “Farben” oder etwas Ähnliches steht. In OceanWP ist sie einfach mit “Farben” beschriftet.

Hinweis: Wenn Ihr WordPress Theme Customizer nicht vorhanden ist, verwenden Sie höchstwahrscheinlich ein Block-Theme und müssen zum nächsten Abschnitt übergehen.

Suchen Sie dann nach einer Einstellung, mit der Sie die Farben der Links ändern können.

OceanWP macht dies mit den Optionen für die Link-Farbe sowohl für den Standard- als auch für den Mauszeigerkontakt ganz einfach. Die Link-Hover-Farbe ist diejenige, die erscheint, wenn ein Besucher mit der Mauszeigerkontakt über einen Link fährt. Es ist also eine großartige Möglichkeit, ihre Aufmerksamkeit zu erregen und Ihre Klickrate zu verbessern.

Sie können dann auf “Veröffentlichen” klicken, um Ihre Änderungen zu speichern.

Beachten Sie, dass einige Themes, wie z. B. Neve, keine direkten Link-Farbeinstellungen haben. Stattdessen kann die Farbe des Links global an die Primär- oder Sekundärfarben Ihres Themes gebunden sein.

Wenn Ihr Theme keine Möglichkeit bietet, die Farbe der Links direkt individuell anzupassen, machen Sie sich keine Sorgen! Sie können zur vierten Methode übergehen, bei der wir Ihnen zeigen, wie Sie die Farbe Ihres Links mithilfe von Code ändern können.

Link-Farbe in WordPress Block-Themes ändern

Wenn Sie ein Block-Theme verwenden, müssen Sie den Editor für die gesamte Website verwenden, um die Farben Ihrer Links individuell anzupassen.

Gehen Sie in Ihrem WordPress-Dashboard auf Design ” Editor.

Sie werden alle Menüs sehen, mit denen Sie das Design Ihrer Website individuell anpassen können.

Klicken Sie hier auf “Stile”.

Sie sehen die Standard-Themes Ihres Themes angezeigt.

Suchen Sie den Button ‘Bearbeiten’ und klicken Sie darauf, um mit der individuellen Anpassung zu beginnen.

Der Editor für die gesamte Website öffnet sich mit einer Seitenleiste zur Bearbeitung der Stile Ihres Themes.

Klicken Sie in dieser Seitenleiste auf “Farben”, um Optionen zur individuellen Anpassung der Farben aufzurufen.

Suchen Sie die Option Link und klicken Sie darauf, um die Farbeinstellungen für den Standard- und Mauszeigerkontakt anzuzeigen. Achten Sie darauf, dass Ihre Farbauswahl dem Design Ihrer Website entspricht.

Wenn Sie mit Ihren Änderungen zufrieden sind, klicken Sie einfach auf “Speichern”, um sie auf Ihrer Website zu aktivieren.

So ändern Sie die Farben einzelner Links im Block-Editor

Manchmal möchten Sie vielleicht die Farbe einzelner Links ändern. Zum Beispiel können Sie die Aufmerksamkeit des Besuchers auf die Aufforderung zum Handeln auf einer Landing Page lenken.

Markieren Sie dazu einfach den Link, den Sie individuell anpassen möchten. Klicken Sie dann auf das Pfeilsymbol in der Mini-Werkzeugleiste und wählen Sie “Hervorheben”.

Sie können nun entweder “Hintergrund” oder “Text” auswählen, je nachdem, welche Änderung Sie vornehmen möchten.

Wählen Sie nun die gewünschte Farbe aus.

Um weitere Links anzupassen, wiederholen Sie einfach diese Schritte.

Wenn Sie mit dem Aussehen der Links zufrieden sind, klicken Sie auf “Speichern”, um die Änderungen zu aktivieren.

Link-Farbe in WordPress mit Code ändern (alle Themes)

Wenn Ihr Theme keine Option zum Ändern der Link-Farbe bietet, ist es am einfachsten, Ihrer WordPress Website individuelles CSS hinzuzufügen.

Oft finden Sie in WordPress-Tutorials Code-Schnipsel mit Anweisungen, wie Sie diese in die Datei functions.php Ihres Themes einfügen können.

Das größte Problem ist, dass schon ein kleiner Fehler im benutzerdefinierten Codeschnipsel Ihre WordPress-Website zerstören kann und sie unzugänglich macht. Außerdem gehen alle Ihre Anpassungen verloren, wenn Sie Ihr WordPress-Theme das nächste Mal aktualisieren.

An dieser Stelle kommt WPCode ins Spiel.

Mit diesem kostenlosen Plugin können Sie problemlos benutzerdefinierte CSS hinzufügen, ohne Ihre Website zu gefährden.

Als Erstes müssen Sie das kostenlose WPCode-Plugin installieren und aktivieren. Weitere Einzelheiten finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Nach der Aktivierung gehen Sie zu Code Snippets ” Snippet hinzufügen.

Bewegen Sie den Mauszeigerkontakt einfach auf “Fügen Sie Ihren individuellen Code hinzu (neues Snippet)”.

Klicken Sie dann auf den Button “+ Individuelles Snippet hinzufügen”, wenn er erscheint.

Als Nächstes müssen Sie in der Liste der Optionen, die auf der Ansicht angezeigt werden, “CSS Snippet” als Codetyp auswählen.

Danach geben Sie einen Titel für das individuelle Code-Snippet ein. Dies kann alles sein, was Ihnen hilft, das Snippet im WordPress-Dashboard zu identifizieren.

Sie können nun ein benutzerdefiniertes CSS-Snippet in das Codefeld einfügen. Schauen wir uns einige der verschiedenen Snippets an, die Sie verwenden können.

Ändern Sie die Linkfarbe auf Ihrer WordPress-Website

Als erstes sollten Sie die Farbe des Links anpassen. Dies ist die Farbe, die Besucher sehen, bevor sie auf einen Link klicken.

Fügen Sie dazu einfach das folgende Snippet in das WPCode-Codefeld ein:

Im obigen Beispiel ändert der Hexadezimalcode # die Farbe des Links in Orange, so dass Sie#FFA500 in die gewünschte Farbe ändern müssen.

Wenn Sie sich nicht sicher sind, welchen Hexadezimalcode Sie verwenden sollen, können Sie sich auf der Website HTML Color Codes über verschiedene Farben und deren Codes informieren.

Wenn Sie mit dem Aussehen Ihres Codes zufrieden sind, klicken Sie auf den Schalter “Inaktiv”, damit er stattdessen “Aktiv” anzeigt. Klicken Sie schließlich auf “Snippet speichern”, um das CSS-Snippet zu aktivieren.

Wenn Sie nun Ihre WordPress-Website besuchen, werden Sie die neue Linkfarbe in Aktion sehen.

Ändern der Link-Hover-Farbe in WordPress

Um die Farbe des Links bei Mauszeigerkontakt zu ändern, fügen Sie einfach das folgende Snippet in den Editor von WPCode ein:

Der obige Code ändert die Farbe des Links in Rot und unterstreicht den Text, wenn Besucher mit dem Mauszeiger darüber fahren. Wie zuvor können Sie den Hexadezimalcode #FF0000 in eine beliebige Farbe umwandeln, die Sie verwenden möchten.

Wenn Sie bereit sind, live zu gehen, können Sie das Code-Snippet nach dem gleichen Verfahren wie oben beschrieben veröffentlichen.

Ändern Sie die Linkfarbe nach dem Besuch in WordPress

Als Nächstes können Sie die Farbe des Links ändern, nachdem ein Benutzer auf den Link geklickt hat. Dies kann Besuchern helfen, sich in Ihrem WordPress-Blog zurechtzufinden, indem sie sehen, welche Links sie bereits angeklickt haben.

Sie können den unten stehenden CSS-Code verwenden, um die Farbe des besuchten Links zu ändern:

Wie immer sollten Sie den blauen Code #0000FFhexin die Farbe ändern, die Sie für Ihre Links verwenden möchten.

Klicken Sie anschließend auf den Schalter “Inaktiv”, damit er sich in “Aktiv” ändert. Klicken Sie dann einfach auf “Snippet speichern”, um den Code auf Ihrer Website, Ihrem Blog oder Ihrem Online-Shop zu aktivieren.

Video-Anleitung

Wenn Sie keine Lust haben, schriftliche Anweisungen zu befolgen, können Sie sich stattdessen unser Video-Tutorial ansehen:

Subscribe to WPBeginner

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie man die Farbe der Links in WordPress ändert. Vielleicht interessieren Sie sich auch für unseren Leitfaden zum Ändern der Textfarbe in WordPress oder unseren ultimativen Leitfaden zu den effektivsten WordPress-Design-Elementen.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.