Wie man sich verändertWordPress Link-Farben
WordPress bietet eine sofort einsatzbereite Formatierung für Hyperlinks. Das Link-Farbschema für einzelne Links oder für die gesamte Website kann über mehrere Optionen geändert werden: den Theme-Customizer, den WordPress-Standard-Block-Editor oder die Implementierung von benutzerdefinierten CSS.
Methode 1: Verwendung des WordPress Theme Customizer
Bitte beachten Sie, dass die Oberfläche des Customizers je nach verwendetem Theme leicht variieren kann. Im Folgenden finden Sie jedoch einen Überblick über die Schritte:
- Loggen Sie sich in Ihr WordPress-Admin-Dashboard ein und navigieren Sie zumErscheinungen > Personalisierungoder besuchen SieErscheinungsbild>Themenzum gewählten ThemaPersonalisierung.
- Wenn Sie sich im Theme Customiser befinden, scrollen Sie in der linken Navigationsleiste nach unten und klicken Sie auf "Farbe".
- Zugriff auf die Farben des WordPress-Themas über den Customizer.
- Blättern Sie erneut nach unten, bis Sie die Option Linkfarbe finden, und ändern Sie sie in den gewünschten Farbton.
- Ändern Sie die Farben der Links über den Theme-Customizer.
Die Ergebnisse sind nachstehend aufgeführt:
Verwenden Sie den Theme Customizer, um die Farben vor und nach den Links zu ändern.
Bitte beachten Sie, dass diese Methode am besten geeignet ist, um die Farben der Links auf der gesamten Website zu ändern. Es besteht keine Möglichkeit, Hyperlinks individuell zu gestalten.
Methode 2: Verwenden Sie den Standard-WordPress-Block-Editor
Gutenberg ist der standardmäßige blockbasierte Editor für WordPress. Er verwendet einzelne Inhaltsblöcke, um Layouts und andere benutzerdefinierte Einstellungen für Ihre Website zu erstellen. Das macht es einfach, Inhalte hinzuzufügen, zu verschieben und zu löschen, ohne sich um HTML oder CSS kümmern zu müssen.
Es ist auch möglich, die Farbe der einzelnen Links auf einer Website zu ändern - die Methode ist wie folgt:
- Navigieren Sie in Ihrem WordPress-Administrations-Dashboard zu "Schriftstücke">"Alle Artikel", dann klicken Sie unter dem Beitrag, dessen Linkfarbe Sie anpassen möchten, auf "Compiler".
- Suchen Sie den Block, den Sie ändern möchten, und klicken Sie ihn an, um die Bearbeitungsoptionen auf der rechten Seite anzuzeigen.
- Klicken Sie im Bereich Farben auf den Text und wählen Sie die gewünschte Farbe aus oder geben Sie ihren Code ein.
- Wenn Sie Ihre Änderungen abgeschlossen haben, klicken Sie auf die obere rechte Ecke der "Update"Knopf.
Methode 3: Benutzerdefiniertes CSS verwenden
Wenn Ihr WordPress-Theme keine integrierten Optionen zur Anpassung der Link-Farben bietet, können Sie benutzerdefinierte CSS hinzufügen, um die Link-Stile festzulegen. Dies wird wie folgt gemacht:
- Gehen Sie in Ihrem WordPress-Administrationsbereich zuErscheinungen > PersonalisierungScrollen Sie nach unten zur Option Zusätzliches CSS und klicken Sie darauf, um den CSS-Editor zu öffnen und Ihren eigenen Code hinzuzufügen.
- Fügen Sie dem Theme-Customizer zusätzliche CSS hinzu.
Um die Farben der Links auf der gesamten Website zu ändern, verwenden Sie lieber Tags als bestimmte Klassen oder IDs. zum Beispiel:
a {
color: #5246F1;
text-decoration: underline;
}
a:hover {
Farbe: #B4AFFF; Textdekoration: keine; } a:hover { Farbe: #B4AFFF; }
text-decoration: none; }
}
Dieser CSS-Code legt fest, dass alle Links auf der Website standardmäßig unterstrichen und in der Farbe #5246F1, also blau, dargestellt werden. Wenn der Mauszeiger über den Link bewegt wird, wechselt der Link zu einer helleren Farbe (#B4AFFF) und die Unterstreichung wird entfernt.
Du hast dich so entwickelt, wie es sein sollte:
Wenn Sie die Farbe eines bestimmten Links ändern möchten, verwenden Sie das Inspektionstool Ihres Browsers, um die Kategorie oder ID des Links, den Sie ändern möchten, zu überprüfen. Klicken Sie mit der rechten Maustaste auf den Link und wählen Sie Inspektion.
Fügen Sie benutzerdefinierten CSS-Code unter Verwendung des eindeutigen Identifikationsnamens des Links hinzu, wie unten gezeigt:
a.customise-unpreviewable {
color: #5246F1;
text-decoration: underline;
}
a.customize-unpreviewable:hover {
Farbe: #B4AFFF; Textdekoration: keine; }
text-decoration: none; }
}
Das Hinzufügen von benutzerdefiniertem CSS-Code ist zwar effektiv, erfordert aber einen erheblichen Aufwand und eine Reihe von Schritten. Wählen Sie diese Option nicht, wenn Ihnen das Fachwissen fehlt, um versehentlich die Ästhetik oder Funktionalität Ihrer Website zu ruinieren.
Zusammenfassung:
Mit diesen Methoden ist es möglich, die Link-Farben Ihrer WordPress-Website an Ihr Branding und die Bedürfnisse der Nutzer anzupassen. Ob über eine Theme-Anpassung, einen Block-Editor oder benutzerdefinierte CSS, die Sicherstellung, dass die Link-Farben mit dem Gesamtdesign und dem Branding Ihrer Website übereinstimmen, ist ein wichtiger Schritt zur Verbesserung der Benutzerfreundlichkeit.