So ändern Sie die Linkfarbe in WordPress (Anfängerleitfaden)

„Wie mache ich meine Links auffällig?“ Das ist eine Frage, die wir regelmäßig von unseren WPBeginner-Lesern hören.

Auch wenn es wie ein kleines Detail erscheinen mag, spielen Linkfarben eine wichtige Rolle für die Benutzerfreundlichkeit und die Konversionsraten Ihrer Website. Deshalb verwenden wir bei WPBeginner die Farbe Orange für Links.

Die gute Nachricht ist, dass das Ändern von Linkfarben in WordPress viel einfacher geworden ist als früher. Sie müssen kein CSS-Experte sein oder einen Entwickler beauftragen – es gibt jetzt einfache Lösungen, die jeder nutzen kann, unabhängig von seinen technischen Fähigkeiten.

In dieser Anleitung führen wir Sie durch die genauen Schritte, um Ihre Linkfarben in WordPress zu ändern.

Warum die Linkfarbe in WordPress ändern?

Die Hauptgründe für die Änderung der Link-Farben in WordPress sind die Anpassung an Ihre Markenidentität und die Verbesserung der Lesbarkeit Ihrer Inhalte. Durch die Anpassung dieser Farben lenken Sie die Aufmerksamkeit Ihrer Besucher auf die wichtigsten Teile Ihrer Seite.

Hier sind einige spezifische Vorteile der Anpassung Ihrer Linkfarben:

• Bessere Barrierefreiheit: Erhöhen Sie den Farbkontrast zwischen Text und Hintergrund, um Ihre Website für Menschen mit Sehbehinderungen besser lesbar zu machen.
• Markenkonsistenz: Sie können Ihre Links mit Ihrem Logo und dem gesamten Farbschema abgleichen, um ein professionelles Aussehen zu erzielen.
• Höhere Klickraten: Die Verwendung einer bestimmten Farbe für Links (wie z. B. Schaltflächen oder Handlungsaufforderungen) ermutigt Besucher zum Klicken und steigert die Konversionen.

Nichtsdestotrotz wollen wir uns ansehen, wie Sie die Linkfarbe auf Ihrer WordPress-Website ändern können. Verwenden Sie einfach die folgenden Links, um direkt zu der von Ihnen bevorzugten Methode zu gelangen:

• So ändern Sie die Linkfarbe in klassischen WordPress-Themes
• Linkfarbe in WordPress Block Themes ändern
• Einzelne Linkfarben im Block-Editor ändern
• How to Change Link Color in WordPress With Code (All Themes)
• Video-Tutorial
• Häufig gestellte Fragen zum Ändern der Linkfarbe in WordPress

So ändern Sie die Linkfarbe in klassischen WordPress-Themes

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

Um zu sehen, ob Ihr Theme diese Option hat, gehen Sie zu Darstellung » Customizer. Suchen Sie dann nach einer Einstellung, die „Farben“ oder etwas Ähnliches besagt. Im Sydney Theme heißt sie einfach „Farben“.

Finden Sie als Nächstes eine Einstellung, die es Ihnen ermöglicht, Linkfarben zu ändern.

Sydney macht dies mit den Optionen „Linkfarbe“ für den Standard- und den Hover-Zustand einfach.

Die Link-Hover-Farbe ist diejenige, die erscheint, wenn ein Besucher mit der Maus über einen Link fährt. Sie ist also eine großartige Möglichkeit, seine 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 keine direkten Einstellungen für die Linkfarbe haben. Stattdessen kann die Linkfarbe global mit den primären oder sekundären Farben Ihres Themes verknüpft sein.

Wenn Ihr Theme keine direkte Anpassung der Linkfarbe bietet, machen Sie sich keine Sorgen! Sie können zur vierten Methode gehen, wo wir Ihnen zeigen, wie Sie Ihre Linkfarbe mit Code ändern können.

Linkfarbe in WordPress Block Themes ändern

Wenn Sie ein Block-Theme verwenden, müssen Sie den Full-Site-Editor verwenden, um Ihre Linkfarben anzupassen.

Gehen Sie in Ihrem WordPress-Dashboard zu Darstellung » Editor.

Sie sehen alle Menüs zur Anpassung des Erscheinungsbilds Ihrer Website.

Klicken Sie hier auf „Stile“.

Sie sehen die Standardstile Ihres Themes angezeigt.

Suchen Sie nach dem Stift-Symbol „Bearbeiten“ und klicken Sie darauf, um mit der Anpassung zu beginnen.

Der Full-Site-Editor wird mit einer Seitenleiste zum Bearbeiten der Stile Ihres Themes geöffnet.

Klicken Sie in dieser Seitenleiste auf „Farben“, um auf die Optionen zur Farbanpassung zuzugreifen.

Suchen Sie die Option Link und klicken Sie darauf, um die Farbeinstellungen für die Standard- und Hover-Zustände anzuzeigen. Sie sollten eine Farbe wählen, die zu Ihrem Website-Design passt.

Es ist jedoch auch wichtig, einen hohen Kontrast zwischen dem Hintergrund und der Linkfarbe sicherzustellen. Dies gewährleistet, dass Ihre Website für alle zugänglich und leicht lesbar ist.

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

Einzelne Linkfarben im Block-Editor ändern

Manchmal möchten Sie vielleicht die Farbe einzelner Links ändern. Zum Beispiel möchten Sie vielleicht die Aufmerksamkeit des Besuchers auf den Call to Action auf einer Landingpage lenken.

Markieren Sie dazu einfach den spezifischen Link, den Sie anpassen möchten.

Klicken Sie dann auf das Pfeilsymbol in der Symbolleiste und wählen Sie im Dropdown-Menü 'Hervorheben'.

Klicken Sie anschließend auf die Registerkarte 'Text'. Sie können nun die Farbe für diesen spezifischen Link auswählen.

Wenn Sie dies getan haben, wählen Sie 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 Ihre Änderungen live zu schalten.

So ändern Sie die Linkfarbe in WordPress mit Code (alle Themes)

Wenn Ihr Theme keine Option zum Ändern Ihrer Linkfarbe bietet, ist der einfachste Weg, benutzerdefiniertes CSS zu Ihrer WordPress-Website hinzuzufügen.

Oft finden Sie Code-Schnipsel in WordPress-Tutorials mit Anweisungen, diese zu Ihrer Theme-Datei functions.php hinzuzufügen.

Das größte Problem ist, dass selbst ein winziger Fehler im benutzerdefinierten Code-Snippet Ihre WordPress-Website zum Absturz bringen und unzugänglich machen kann. Außerdem verlieren Sie alle Ihre Anpassungen bei der nächsten Aktualisierung Ihres WordPress-Themes.

Hier kommt WPCode ins Spiel.

Nach gründlichen Tests sind wir zu dem Schluss gekommen, dass dies der sicherste und einfachste Weg ist, benutzerdefinierten Code zu Ihrer Website hinzuzufügen. Details finden Sie in unserem WPCode-Testbericht.

Das Erste, was Sie tun müssen, ist, das kostenlose WPCode Plugin zu installieren und zu aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.

Gehen Sie nach der Aktivierung zu Code Snippets » Add Snippet.

Bewegen Sie hier einfach die Maus über 'Benutzerdefinierten Code hinzufügen (Neues Snippet)'.

Klicken Sie dann auf die Schaltfläche „+ Benutzerdefiniertes Snippet hinzufügen“, wenn sie erscheint.

Als Nächstes müssen Sie „CSS-Snippet“ als Code-Typ aus der Liste der angezeigten Optionen auswählen.

Geben Sie danach einen Titel für den benutzerdefinierten Code-Snippet ein. Dies kann alles sein, was Ihnen hilft, das Snippet im WordPress-Dashboard zu identifizieren.

Sie können nun einen benutzerdefinierten CSS-Schnipsel in das Codefeld einfügen. Sehen wir uns einige der verschiedenen Schnipsel an, die Sie verwenden können.

Ändern Sie die Linkfarbe auf Ihrer gesamten WordPress-Website

Zunächst möchten Sie vielleicht die allgemeine Linkfarbe anpassen. Dies ist die Farbe, die Besucher sehen, bevor sie auf einen Link klicken.

Fügen Sie dazu einfach den folgenden Schnipsel in die WPCode-Codebox ein:

a {
     color: #FFA500;
}

Hinweis: Dieser CSS-Code ändert die Linkfarbe für Ihre gesamte Website. Dies schließt Navigationsmenüs, Schaltflächen und Fußzeilenlinks ein.

Im obigen Beispiel ändert der # Hex-Code die Linkfarbe in Orange, sodass Sie #FFA500 in die gewünschte Farbe ändern müssen.

Wenn Sie sich nicht sicher sind, welchen Hex-Code Sie verwenden sollen, können Sie verschiedene Farben erkunden und deren Codes auf der Website HTML Color Codes erhalten.

Wenn Sie mit dem Aussehen Ihres Codes zufrieden sind, klicken Sie auf den Schalter 'Inaktiv', sodass stattdessen 'Aktiv' angezeigt wird. Klicken Sie abschließend auf 'Snippet speichern', um das CSS-Snippet live zu schalten.

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

Link-Hover-Farbe in WordPress ändern

Um die Link-Hover-Farbe zu ändern, fügen Sie einfach den folgenden Ausschnitt in den Editor von WPCode ein:

a:hover {
     color: #FF0000;
     text-decoration: underline;
}

Der obige Code ändert die Linkfarbe zu Rot und unterstreicht den Text, wenn Besucher mit der Maus darüber fahren. Wie zuvor können Sie den Hex-Code #FF0000 in jede gewünschte Farbe ändern.

Wenn Sie bereit sind, live zu gehen, können Sie den Code-Snippet veröffentlichen, indem Sie denselben Prozess wie oben beschrieben befolgen.

Linkfarbe nach Besuch in WordPress ändern

Als Nächstes möchten Sie vielleicht die Linkfarbe ändern, nachdem ein Benutzer auf den Link geklickt hat. Dies kann Besuchern helfen, sich auf Ihrem WordPress-Blog zurechtzufinden, indem angezeigt wird, welche Links sie bereits angeklickt haben.

Sie können den folgenden CSS-Code verwenden, um die Farbe von besuchten Links zu ändern:

a:visited {
     color: #0000FF;
}

Stellen Sie wie immer sicher, dass Sie den blauen #0000FFHex-Code durch die Farbe ersetzen, die Sie in Ihren Links verwenden möchten.

Wenn das erledigt ist, klicken Sie auf den Schalter „Inaktiv“, sodass er zu „Aktiv“ wechselt. Klicken Sie dann einfach auf „Snippet speichern“, um den Code auf Ihrer Website, Ihrem Blog oder Ihrem Online-Shop live zu schalten.

Video-Tutorial

Wenn Sie keine schriftlichen Anleitungen mögen, können Sie sich stattdessen unser Video-Tutorial ansehen:

Häufig gestellte Fragen zum Ändern der Linkfarbe in WordPress

Hier sind einige häufig gestellte Fragen unserer Leser zum Ändern von Linkfarben auf ihrer Website:

Kann ich die Farbe eines Hyperlinks ändern?

Ja, die meisten WordPress-Themes erlauben es Ihnen, Hyperlinkfarben global über die Einstellungen für Erscheinungsbild oder den Website-Editor zu ändern. Sie können auch die Farbe einzelner Links direkt im Beitrageditor ändern, indem Sie den Link hervorheben und eine Farbe aus der Symbolleiste auswählen.

Wie passe ich einen Link in WordPress an?

Sie können einen Link anpassen, indem Sie ihn im Block-Editor auswählen und die Optionen der Symbolleiste verwenden. Dies ermöglicht es Ihnen, die Ziel-URL zu ändern, festzulegen, dass er in einem neuen Tab geöffnet wird, oder die Farb- und Stileinstellungen in der rechten Seitenleiste anzupassen.

Wie passe ich meinen URL-Link an?

Um den Text der URL selbst (den Slug) zu ändern, gehen Sie zu den „Post“-Einstellungen in der rechten Seitenleiste und suchen Sie nach dem Abschnitt „URL“. Wenn Sie ändern möchten, wie der Link visuell aussieht, z. B. Schriftart oder Farbe, verwenden Sie die „Stil“-Einstellungen im Block-Editor.

Für weitere Details siehe unser Tutorial zum Ändern Ihrer WordPress-Website-URLs.

Wie ändert man Links in WordPress?

Klicken Sie einfach auf den vorhandenen Linktext im Inhaltseditor und wählen Sie die Schaltfläche „Bearbeiten“ (Bleistiftsymbol) in der schwebenden Symbolleiste. Von dort aus können Sie eine neue URL einfügen oder den Text ändern, der Ihren Besuchern angezeigt werden soll.

Wie kann ich meinen Seitenlink ändern?

Sie können einen Seitenlink ändern, indem Sie den Permalink-Slug in der Seiten-Einstellungsleiste im Abschnitt „URL“ bearbeiten. Wenn die Seite bereits veröffentlicht ist, empfehlen wir das Einrichten einer 301-Weiterleitung, damit Besucher, die den alten Link verwenden, zur richtigen neuen Seite weitergeleitet werden.

Wie ändere ich das Link-Symbol in WordPress?

WordPress hat keine Standardeinstellung zum Hinzufügen oder Ändern von Link-Symbolen, daher benötigen Sie normalerweise ein Plugin. Plugins wie External Links können ausgehenden Links automatisch Symbole hinzufügen, oder Sie können Symbole manuell mit FontAwesome und benutzerdefiniertem CSS hinzufügen.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie die Linkfarbe in WordPress ändern. Möglicherweise möchten Sie auch unseren Leitfaden zum Ändern der Textfarbe in WordPress oder unseren ultimativen Leitfaden zu den effektivsten WordPress-Designelementen sehen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.