Erinnern Sie sich, wie Sie mit einem gelben Textmarker wichtige Passagen in Lehrbüchern markiert haben? Das digitale Äquivalent in WordPress ist genauso nützlich, um wichtige Informationen auf Ihrer Website hervorzuheben.
Aber viele Anfänger erkennen nicht, wie einfach es ist, diese Formatierung zu ihren Inhalten hinzuzufügen.
Im Laufe unserer Zeit bei WPBeginner haben wir festgestellt, dass einfache Techniken wie das Hervorheben von Text oft den größten Unterschied darin machen, wie Leser mit Inhalten interagieren.
Strategisch eingesetzt, kann hervorgehobener Text Besucher zu Ihren wichtigsten Punkten leiten und die Behaltensrate der Botschaft verbessern.
In diesem Leitfaden zeigen wir Ihnen mehrere einfache Methoden, um Text in WordPress hervorzuheben.
⚡Schnelle Antwort: So heben Sie Text in WordPress hervor
In Eile? Schauen Sie sich schnell die einfachsten Möglichkeiten an, Text in WordPress hervorzuheben:
- Verwenden Sie die native Hervorhebungsoption (Methode 1), wenn Sie nur ein paar Wörter oder Sätze in einzelnen Beiträgen hervorheben müssen.
- Verwenden Sie WPCode, um eine globale CSS-Hervorhebungsklasse hinzuzufügen (Methode 2), wenn Sie einen konsistenten, gebrandeten Hervorhebungsstil auf Ihrer gesamten Website wünschen.
Warum und wann Text in WordPress hervorheben
Text-Hervorhebung ist eine einfache Möglichkeit, wichtige Informationen in Ihren Inhalten hervorzuheben. Sie lenkt die Aufmerksamkeit des Benutzers auf Details, die er nicht verpassen soll.
Zum Beispiel wird das Hervorheben eines Rabattangebots auf Ihrer WordPress-Website in einer anderen Farbe die Aufmerksamkeit des Lesers darauf lenken und Ihnen helfen, mehr Verkäufe zu generieren.
Hier ist ein Beispiel dafür, wie Text-Hervorhebung in einem Blogbeitrag aussehen könnte:
Das Hervorheben von Text in einer anderen Farbe kann auch Benutzern mit Sehbehinderungen oder Leseschwierigkeiten helfen, sich im Inhalt zurechtzufinden und ihn leichter zu verstehen. Es kann sogar das Erscheinungsbild Ihres Inhalts verbessern und ihn optisch ansprechender gestalten.
Wenn Sie jedoch zu viel Text auf Ihrer Seite hervorheben, kann dies ablenken und die Wirksamkeit verringern. Deshalb empfehlen wir, nur wichtige Informationen hervorzuheben, wie z. B. Handlungsaufforderungen, Warnungen und andere Details, auf die die Leser achten sollten.
Nun, da dies gesagt ist, schauen wir uns an, wie man Text in WordPress einfach hervorhebt. Sie können die folgenden Schnelllinks verwenden, um zu der Methode zu springen, die Sie verwenden möchten:
- Methode 1: Text in WordPress mit dem Block-Editor hervorheben
- Method 2: Highlight Text in WordPress Using WPCode (Recommended)
- Bonus: Verwenden Sie SeedProd, um wichtige Seiten auf Ihrer Website hervorzuheben
Methode 1: Text in WordPress mit dem Block-Editor hervorheben
Diese Methode ist für Sie, wenn Sie Text in WordPress einfach mit dem Blockeditor (Gutenberg) hervorheben möchten.
Zuerst müssen Sie einen vorhandenen oder neuen Beitrag im Inhaltseditor aus der WordPress-Admin-Seitenleiste öffnen.
Dort angekommen, wählen Sie einfach den Text aus, den Sie hervorheben möchten. Klicken Sie dann auf das Pfeil-nach-unten-Symbol in der Block-Symbolleiste, um weitere Optionen anzuzeigen.
Dies öffnet ein Dropdown-Menü, in dem Sie die Option „Hervorheben“ aus der Liste auswählen müssen.
Ein Farbwähler-Tool wird nun auf Ihrem Bildschirm geöffnet. Von hier aus müssen Sie zuerst zum Tab 'Hintergrund' wechseln.
Wählen Sie danach eine Standard-Hervorhebungsfarbe aus den gegebenen Optionen aus.
Sie können auch eine benutzerdefinierte Farbe zum Hervorheben von Text auswählen, indem Sie auf die Option „Benutzerdefiniert“ klicken, um ein „Pipette“-Werkzeug zu starten.
Vergessen Sie schließlich nicht, auf die Schaltfläche „Veröffentlichen“ oder „Aktualisieren“ zu klicken, um Ihre Änderungen zu speichern.
Sie können nun Ihren WordPress-Blog besuchen, um den hervorgehobenen Text in Aktion zu sehen.
Methode 2: Text in WordPress hervorheben mit WPCode (empfohlen)
Wenn Sie eine bestimmte Farbe konsistent zum Hervorheben von Text auf Ihrer gesamten WordPress-Website verwenden möchten, dann ist diese Methode genau das Richtige für Sie.
Der Hauptvorteil dieser Methode ist die globale Kontrolle. Wenn Sie sich jemals entscheiden, die Hervorhebungsfarbe zu ändern, müssen Sie den Code-Snippet nur einmal aktualisieren. Die Hervorhebungsfarbe wird automatisch auf Ihrer gesamten Website aktualisiert.
Sie können Text in WordPress ganz einfach hervorheben, indem Sie CSS-Code zu Ihren Theme-Dateien hinzufügen. Der kleinste Fehler bei der Eingabe des Codes könnte jedoch Ihre Website beschädigen und sie unzugänglich machen.
Deshalb empfehlen wir die Verwendung von WPCode, dem besten WordPress-Code-Snippet-Plugin auf dem Markt.
Nach gründlichen Tests haben wir festgestellt, dass dies der einfachste und sicherste Weg ist, Code zu Ihrer Website hinzuzufügen, ohne Ihre Theme-Dateien direkt zu bearbeiten. Details finden Sie in unserem WPCode-Testbericht.
Erstellen Sie ein Code-Snippet mit WPCode
Zuerst müssen Sie das WPCode Plugin installieren und aktivieren. Weitere Anweisungen finden Sie in unserem Anfängerleitfaden zur Installation eines WordPress-Plugins.
Hinweis: WPCode bietet auch einen kostenlosen Plan, den Sie für dieses Tutorial verwenden können. Ein Upgrade auf den kostenpflichtigen Plan schaltet jedoch weitere Funktionen frei, wie z. B. eine Cloud-Bibliothek mit Code-Snippets, intelligente bedingte Logik und mehr.
Nach der Aktivierung gehen Sie im WordPress-Admin-Seitenmenü zu Code Snippets » + Snippet hinzufügen.
Klicken Sie als Nächstes einfach auf die Schaltfläche „Benutzerdefiniertes Snippet hinzufügen“ unter der Option „Eigene benutzerdefinierte Codes hinzufügen (Neues Snippet)“.
Dann müssen Sie einen Codetyp auswählen. Wählen Sie für dieses Tutorial die Option „CSS-Snippet“.
Geben Sie danach einen geeigneten Namen für Ihren Code-Snippet ein.
Dies führt Sie zur Seite „Benutzerdefiniertes Snippet erstellen“, wo Sie mit der Eingabe eines Namens für Ihr Code-Snippet beginnen können.
Der Name dient nur Ihrer Referenz und kann beliebig gewählt werden, damit Sie sich leichter merken können, wofür der Code bestimmt ist.
Kopieren Sie als Nächstes den folgenden Code und fügen Sie ihn in das Feld „Code-Vorschau“ ein:
mark {
background-color: #ffd4a1;
}
Sobald Sie dies getan haben, fügen Sie den Hex-Code für Ihre bevorzugte Hervorhebungsfarbe neben der Zeile background-color im Code ein.
In unserem Beispiel verwenden wir #ffd4a1, eine hellbraune Farbe.
Scrollen Sie danach nach unten zum Abschnitt „Einfügen“.
Wählen Sie hier die Methode „Automatisch einfügen“, um den Code nach der Aktivierung auszuführen.
Gehen Sie dann zum oberen Rand der Seite und schalten Sie den Schalter von „Inaktiv“ auf „Aktiv“.
Klicken Sie abschließend auf die Schaltfläche „Snippet speichern“, um Ihre Änderungen zu speichern.
Text im Block-Editor hervorheben
Nachdem der CSS-Snippet aktiviert wurde, müssen wir die Formatierung anwenden. Da es sich um einen benutzerdefinierten Stil handelt, wechseln wir kurz zur HTML-Ansicht für einen bestimmten Block, um den Text einzuschließen.
Öffnen Sie zuerst einen vorhandenen oder neuen Beitrag im WordPress Block-Editor.
Klicken Sie von hier aus in der Block-Symbolleiste oben auf das Symbol „Optionen“. Dies öffnet ein neues Dropdown-Menü, in dem Sie die Option „Als HTML bearbeiten“ auswählen müssen.
Sie sehen nun den Blockinhalt im HTML-Format.
Hier umschließen Sie den Text, den Sie hervorheben möchten, einfach mit den <mark> </mark> Tags wie folgt:
<mark>highlighted-text</mark>
Dies hebt den Text in der Hex-Farbe hervor, die Sie in Ihrem WPCode-Snippet ausgewählt haben.
Klicken Sie danach in der Block-Symbolleiste auf die Option „Visuell bearbeiten“, um zum visuellen Editor zurückzukehren.
Wenn Sie fertig sind, klicken Sie auf die Schaltfläche „Aktualisieren“ oder „Veröffentlichen“, um Ihre Änderungen zu speichern.
Jetzt können Sie Ihre Website besuchen, um den hervorgehobenen Text in Aktion zu sehen.
Bonus: Verwenden Sie SeedProd, um wichtige Seiten auf Ihrer Website hervorzuheben
Wir haben besprochen, wie bestimmte Wörter in Ihren Inhalten formatiert werden. Manchmal möchten Sie jedoch ganze Abschnitte oder Seiten auf Ihrer Website hervorheben, z. B. ein Kontaktformular oder einen Geschenkgutschein.
Wenn Sie beispielsweise einen Online-Shop haben und gerade einen Sonderverkauf gestartet haben, möchten Sie dieses Angebot möglicherweise auf Ihrer Website hervorheben.
Sie können diese Abschnitte hervorheben, indem Sie Landing Pages dafür erstellen. Dies sind eigenständige Seiten auf Ihrer Website, die darauf ausgelegt sind, Leads zu generieren.
Um visuell ansprechende Landing Pages für Ihre Website zu erstellen, empfehlen wir die Verwendung von SeedProd. Es ist der beste WordPress Landing Page Builder auf dem Markt, der über einen Drag-and-Drop-Builder, über 350 vorgefertigte Vorlagen und über 90 Blöcke verfügt.
Mehrere unserer Partner-Marken haben ihre gesamten Websites damit erstellt und hatten großartige Erfahrungen. Details finden Sie in unserem SeedProd-Testbericht.
Das Plugin erleichtert die Erstellung attraktiver Landingpages, die wichtige Bereiche Ihrer Website hervorheben, wie z. B. ein Kontaktformular, Verkaufsankündigungen, Verlosungen, Testimonials, Opt-in-Formulare, Anmeldeseiten und mehr.
Darüber hinaus können Sie SeedProd auch verwenden, um benutzerdefinierte Themes, „Coming Soon“-Seiten, Wartungsseiten und vieles mehr zu erstellen.
Details finden Sie in unserem Tutorial zum Erstellen einer Landingpage in WordPress.
Wir hoffen, dieser Leitfaden hat Ihnen geholfen zu lernen, wie Sie Text in WordPress hervorheben. Möglicherweise möchten Sie auch unseren Schritt-für-Schritt-Leitfaden zum Thema Anpassen von Farben in WordPress lesen, um Ihre Website ästhetisch ansprechender zu gestalten, und unseren Vergleich der besten KI-Website-Builder für WordPress.
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.
Jiří Vaněk
Das Hervorheben von Text ist großartig, um Aufmerksamkeit zu erregen. Bis jetzt hatte ich nur Unterstreichungen verwendet, aber aus mehreren Kommentaren zu meinen Artikeln erhielt ich Feedback, dass einige Benutzer sie übersehen hatten. Deshalb ist es für mich sinnvoller, die Bedeutung des Textes auf diese Weise zu betonen. Ich habe ein Snippet im WP Code Plugin und die Tags verwendet. Es funktioniert großartig, und dank des Snippets konnte ich auch eine Farbe verwenden, die zum Design meiner Website passt.
Mrteesurez
Während ich Ihren Beitrag zum Textgrößenänderung las, sehe ich darin einen Vorteil für meine Bildungswebsite, da ich mich um Benutzer kümmere, die möglicherweise Sehbehinderungen oder Leseschwierigkeiten haben. Das Hervorheben von Text ist eine weitere großartige Möglichkeit, die ich nutzen kann, um wichtigen Text für Benutzer klarer hervorzuheben.
Ich schätze diesen Leitfaden, danke WPbeginner!
Dennis Muthomi
Wenn ich eine benutzerdefinierte Farbe für die Hervorhebung auswähle, wie kann ich eine benutzerdefinierte Farbe meiner Wahl hinzufügen, die in den standardmäßigen 5 Farboptionen am unteren Rand des Farbwählers angezeigt wird.
Es wäre hilfreich, wenn ich eine benutzerdefinierte Hex-Farbe speichern könnte, um sie einfach wiederverwenden zu können, anstatt sie jedes Mal manuell eingeben zu müssen.
WPBeginner Support
Es gibt derzeit keine einfache Methode, die wir empfehlen würden, aber wenn wir eine finden, werden wir sie auf jeden Fall mitteilen!
Admin
Dennis Muthomi
Hallo, danke, dass Sie sich die Zeit zum Antworten genommen haben. Ich werde auf jeden Fall Ausschau halten, falls Sie in Zukunft eine gute Methode entdecken.
Jiří Vaněk
In diesem Fall würde ich stattdessen die Verwendung eines Page Builders empfehlen. Zum Beispiel hat Elementor eine ähnliche Funktion, und ich verwende sie auf Websites, auf denen Elementor installiert ist. Sie können eine benutzerdefinierte Farbpalette einrichten, die sich Elementor merkt, und sie dann zum Hervorheben verwenden.
Ralph
So eine einfache Möglichkeit, etwas hervorzuheben! Großartig!
Das muss mit meiner Theme-Anpassung zusammenhängen, aber wenn ich Text oder Hintergrund hervorhebe, ändert sich die Schriftart. Was seltsam ist, da ich bei der Anpassung alle Schriftarten in allen Szenarien auf nur 2 Schriftarten eingestellt habe. Erstens für Überschriften und zweitens für alles andere. Ich muss wohl noch einen Abend damit verbringen.
WPBeginner Support
Das ist sehr seltsam, wir empfehlen Ihnen, sich an den Support Ihres Themes zu wenden, um zu sehen, ob es eine Art von Styling-Konflikt gibt.
Admin
Prakash Joshi
Hallo,… danke für den Beitrag.
Ich habe versucht, HTML-Markierungen und erweiterte Editor-Tools zu verwenden. Aber es gibt ein Problem. Der hervorgehobene Text wird automatisch fett gedruckt. Warum passiert das? Haben Sie Lösungen??
WPBeginner Support
Wenn dies automatisch geschieht, sollten Sie den Support Ihres spezifischen Themes konsultieren, um sicherzustellen, dass es sich nicht um einen Konflikt mit dem Standard-Styling des Themes handelt.
Admin
Luqman khokhar
Guter Beitrag dazu, den spezifischen Text hervorzuheben. Meiner Erfahrung nach sind die 2. und 3. Option gut, da viele Plugins kein guter Ansatz sind. Sie können Ihre Website verlangsamen.
WPBeginner Support
Vielen Dank, aber die Anzahl der Plugins ist nicht der Hauptfaktor für die Geschwindigkeit Ihrer Website. Wir empfehlen Ihnen, sich unsere Empfehlungen unten anzusehen:
https://www.wpbeginner.com/opinion/how-many-wordpress-plugins-should-you-install-on-your-site
Admin