How to Text highlighten und hervorheben

Manchmal möchtest Du Textteile auf Deiner Website besonders hervorheben. Wie Du das ganz einfach mit CSS à la Textmarker machen kannst, zeige ich Dir im Video.

Highlight it! 🟨

Wenn Du Textteile hervorheben willst, kannst Du das machen, indem Du den Text fett oder kursiv machst, unterstreichst oder ihm eine andere Farbe gibst.

Oder mit ein bisschen CSS kannst Du auch den Hintergrund ändern, dann hast Du zum Beispiel einen Textmarker Effekt.

Wie das geht, zeige ich Dir im Video. Den Code dazu findest Du unten.

Tool-Tipps

Elementor Pro*

*Affiliate-Link. Wenn Du über diesen Link etwas kaufst, kostet es Dich nichts extra, aber ich erhalte eventuell eine kleine Provision, die ich direkt in mein Galão Projekt reinvestiere 😊

Code

CSS für das individuelle CSS:

.highlight {
  background-color: #FBF719;
  padding: 0 6px;
}

Einfügen entweder auf Widget Ebene im Text-Editor Widget unter Einstellungen > Erweitert > Eigene CSS oder seitenübergreifend im Elementor Menü oben links > Drei Striche > Website Einstellungen > Individuelle CSS.

HTML Code für den Text, den Du highlighten möchtest:

<span class="highlight">DEIN TEXT</span>

Einfügen im Text-Editor Widget > Content > Text-Editor > Tab Text.

Hex Codes für die Neonfarben

Neon Rot: #FF0000
Neon Orange: #FF5F1F
Neon Gelb: #FFFF00
Neon Grün: #00FF00
Neon Blau: #0000FF
Neon Pink: #FF00FF
Neon Violett: #BC13FE