Tutorial

How to Highlight Text on WordPress: Farbige Markierungen setzen [2025 Easy Guide]

Melden

Hier ist ein umfassendes, leicht verständliches Tutorial für das Jahr 2025, wie du Text in WordPress farbig markieren kannst.

In der heutigen Zeit ist die Aufmerksamkeitsspanne kurz. Farbige Textmarkierungen (Highlights) helfen dabei, wichtige Informationen hervorzuheben und die Lesbarkeit deiner Blogbeiträge zu verbessern. In diesem Guide zeige ich dir die drei einfachsten Wege, wie du das 2025 ohne Programmierkenntnisse umsetzen kannst.

Methode 1: Der Standard Gutenberg Editor (Kein Plugin nötig)

Seit den letzten Updates ist das Markieren von Text in WordPress direkt im Editor integriert. Dies ist der schnellste Weg.

Schritt-für-Schritt-Anleitung:

  1. Öffne deinen Beitrag oder deine Seite im WordPress Editor (Gutenberg).
  2. Markiere mit der Maus den Textabschnitt, den du farblich hervorheben möchtest.
  3. In der kleinen Werkzeugleiste, die über dem Text erscheint, klicke auf den Abwärtspfeil (Mehr).
  4. Wähle den Punkt „Hervorhebung“ (Highlight) aus.
  5. Es öffnet sich ein Farbfenster. Wähle den Reiter „Hintergrund“.
  6. Suche dir eine Farbe aus oder gib einen eigenen Hex-Code ein (z. B. ein helles Gelb: #fff176).

Pro-Tipp: Achte auf den Kontrast! Wenn du einen dunklen Hintergrund wählst, solltest du die Textfarbe auf Weiß umstellen, damit der Text lesbar bleibt.

Methode 2: Textmarker-Effekt mit Plugins (Mehr Style)

Wenn dir die Standard-Optionen nicht ausreichen und du einen echten "Textmarker-Look" (z. B. leicht schräge Linien oder animierte Highlights) möchtest, ist ein Plugin die beste Wahl.

Empfohlenes Plugin: EditorsKit oder Advanced Editor Tools

  1. Gehe zu Plugins > Installieren und suche nach „EditorsKit“.
  2. Installiere und aktiviere das Plugin.
  3. Markiere im Editor deinen Text.
  4. Diese Plugins fügen oft erweiterte Formatierungsoptionen hinzu, wie zum Beispiel einen speziellen "Marker"-Stil, der natürlicher aussieht als ein starrer farbiger Block.

Methode 3: Der Profi-Look mit CSS (Einmal einrichten, überall nutzen)

Möchtest du eine ganz bestimmte Marke-Farbe als Highlight definieren, die du immer wieder verwendest? Dann ist ein kleiner CSS-Schnipsel die sauberste Lösung.

So geht’s:

  1. Gehe in deinem WordPress-Dashboard zu Design > Customizer > Zusätzliches CSS.
  2. Füge den folgenden Code ein:
.mein-highlight {
    background-color: #ffeb3b; /* Dein Gelbton */
    padding: 0 4px;
    border-radius: 3px;
}
  1. Klicke auf Veröffentlichen.
  2. Um diesen Effekt zu nutzen, klicke im Editor auf den gewünschten Textblock.
  3. Wähle in der rechten Seitenleiste unter „Block“ den Bereich „Erweitert“.
  4. Schreibe bei „Zusätzliche CSS-Klassen“ einfach mein-highlight hinein.

Methode 4: Highlights in Elementor (Page Builder)

Falls du Elementor nutzt, ist der Prozess noch einfacher:

  1. Bearbeite deine Seite mit Elementor.
  2. Klicke auf das Text-Widget.
  3. Im Menü links kannst du entweder den gesamten Hintergrund des Text-Widgets unter Stil ändern oder im Reiter Inhalt HTML-Tags nutzen.
  4. Für gezielte Wörter nutzt du das "Inline-Highlighting": Markiere den Text und nutze die Farboptionen in der Text-Toolbar.

Fazit: Was ist die beste Methode?

  • Für schnelle Markierungen: Nutze die integrierte „Hervorhebungs“-Funktion des Gutenberg-Editors.
  • Für ein konsistentes Design: Nutze die CSS-Methode, damit alle Highlights auf deiner Website exakt den gleichen Farbton haben.
  • Für visuelle Spielereien: Nutze Plugins wie EditorsKit.

Bonus-Tipp für 2025: Übertreibe es nicht! Markiere maximal 1-2 Sätze pro Abschnitt. Zu viel Farbe wirkt unruhig und schreckt Leser eher ab.

Viel Erfolg beim Gestalten deiner WordPress-Seite!

0