How to: Hervorheben von Text mit CSS (Highlight Effect)

·

Wenn man seiner Website einen kleinen Branding-Touch geben will, dann kommt sicherlich bald die Idee auf Text teile hervorzuheben. Während es einfach ist ein paar Wörter einfach fett zu schreiben, kursiv oder auch in Farbe – bei anderen Funktionen braucht man ziemlich schnell CSS.

Und genau so ging es mir vor kurzen mit einem Kunden. Er wollte den letzten Touch in seiner Website hineinbringen und dazu den Text farblich, halbhoch hinterlegen. So wie man es öfter auf verschiedenen Websites sieht-

Kurze Panik, verzweifelte Stunden das Ergebnis auf Google zu finden und diverse CSS Codes in das backend von WordPress einbauen – hab ich es am Schluss geschafft und endlich ist dieser coole Highlight-Effekt kein Mysterium mehr für mich. Und für dich bald auch nicht mehr.

Texte hervorheben in WordPress

Standardmäßig kann man in WordPress mit den Überschriften oder Paragraf Block einen Text oder Teile davon auf folgende weiße einfach hervorheben:

  • Fett schreiben
  • Kursive Schreiben
  • Durchstreichen
  • In Farbe schreiben

Wenn man allerdings einen aufwändigen und cooleren Effekt will, ist man bald am Ende angelangt, mit den Standardfunktionen. Dann bleiben einem zwei Möglichkeiten:

  • Ein Plugin zu suchen, welches dir den gewünschten Effekt gibt
  • Ein kleinen HTMLcode einbauen, der dir den gewünschten Effekt gibt.

Klar ist hier, dass zweiteres einfacher und weniger auf deiner Website und deren Performance lastet. Daher hab ich mich im Internet schlau gemacht, wie ich diesen Effekt erzeugen kann, mit einem HTML Code.

HTML bietet uns die Möglichkeit, mit einem ganz einfachen Codeschnipsel verschiedene Text Highlights einzufügen. Mit dem <span> Element kannst du nämlich CSS Code einbinden. Und CSS ist prinzipiell zuständig dafür, deine Website zu gestalten. 

Erstellen wir nun unseren HTMLcode:

Schritt 1: Die Basics

Zuerst müssen wir ein Grundelement für unseren HTMLcode auswählen, den der “span”-tag ist nur ein Inline Tag und muss innerhalb eines anderen verwendet werden. Das heisst wir entscheiden uns, ob wir eine Überschrift oder einen normalen Text wollen.

Überschriften sind folgende: h1, h2, h3, h4, h5 und h6
H1 ist dabei eine Überschrift 1, h2 eine Überschrift 2, usw. 
Wie, wenn du in Word eine Überschrift auswählst.

Ein Absatz, also normaler Text, wäre ein <p> für paragraf. 

Wir verwenden für unser Beispiel eine Zwischenüberschrift <h2>:

<h2> Ich liebe Pizza </h2>

Vergiss nicht, das Element am Ende des Textes wieder zu schliessen, wie ich das gemacht habe. 

Schritt 2: Gestaltungselement hinzufügen

Nun fügen wir den span-tag hinzu, der es uns ermöglicht den Text zu gestalten mit CSS Code. 

<h2> <span> Ich liebe Pizza </span> </h2>

Allerdings macht dieser noch nicht wirklich viel. Den jetzt gehts zum wichtigsten Schritt: dem Gestalten des Textes.

Schritt 3: Style it!

Prinzipiell kannst du jeglichen CSS code nun in das span Element einfügen. Hier ein paar Beispiele:

<h2><span style="background: #f5c143;">Ich liebe Pizza</span></h2>

Ich liebe Pizza

<h2><span style="text-decoration: underline 5px #F9D058 !important;">Ich liebe Pizza</span></h2>

Ich liebe Pizza

Was wir jetzt aber wollen, ist einen coolen Hintergrund als Highlight.

<h2><span style=" background: linear-gradient(120deg, #F9D058 0%, #F9D058 100%); background-repeat: no-repeat; background-size: 100% 20%; background-position: 0 60%;">Ich liebe Pizza</span></h2>

Ich liebe Pizza

Trage dich in meine Liste ein, um zu lernen wie du auf Google weiter vorne landest:

Jetzt geht der Spass aber erst richtig los, indem wir einfach herumprobieren, was passiert, wenn wir etwas ändern.

Dickere Linie? Kein Problem, du musst nur «background-size» raufstellen:

<h2><span style=" background: linear-gradient(120deg, #F9D058 0%, #F9D058 100%); background-repeat: no-repeat; background-size: 100% 50%; background-position: 0 60%;">Ich liebe Pizza</span></h2>

Ich liebe Pizza

Dünnere Linie? Kein Problem, wir machen einfach das Gegenteil, nämlich «background-size» runterstellen:

<h2><span style=" background: linear-gradient(120deg, #F9D058 0%, #F9D058 100%); background-repeat: no-repeat; background-size: 100% 10%; background-position: 0 60%;">Ich liebe Pizza</span></h2>

Ich liebe Pizza

Nur am oberen Teil der Farbe? Das kannst du mit der «background-position» bestimmen:

<h2><span style=" background: linear-gradient(120deg, #F9D058 0%, #F9D058 100%); background-repeat: no-repeat; background-size: 100% 40%; background-position: 0 30%;">Ich liebe Pizza</span></h2>

Ich liebe Pizza

Nur am unten Farbe? Auch das kannst du mit der «background-position» bestimmen:

<h2><span style=" background: linear-gradient(120deg, #F9D058 0%, #F9D058 100%); background-repeat: no-repeat; background-size: 100% 40%; background-position: 0 90%;">Ich liebe Pizza</span></h2>

Ich liebe Pizza

Schritt 4: Advanced

Naja ganz so fortgeschritten wirds nun auch wieder nicht. Aber was ist, wenn wir zum Beispiel in einem Text nur ein Wort hervorheben wollen. Das Wort Pizza in unserem Falle:

<h2>Ich liebe <span style=" background: linear-gradient(120deg, #F9D058 0%, #F9D058 100%); background-repeat: no-repeat; background-size: 100% 40%; background-position: 0 90%;">Pizza</span></h2>

Ich liebe Pizza

Ganz einfach: wir schreiben nur das Wort Pizza in unserem «span»-tag, also genau zwischen dem öffnen und dem Schliessen dieses Tags.

Oder wir wollen einen Gradient Effekt über die ganze Überschrift:

<h2>Ich liebe <span style=" background: linear-gradient(120deg, #eb8080 0%, #F9D058 100%); background-repeat: no-repeat; background-size: 100% 40%; background-position: 0 90%;">Pizza</span></h2>

Ich liebe Pizza

Wir ändern also einfach die Farbe, mit der wir starten oder enden.

HTML Block im Gutenberg

Nachdem wir nun unseren tollen Codeschnipsel haben, stellt sich nur noch die Frage, wie wir das Ganze in Gutenberg einbinden. Dazu findest du einen “HTML” Block, mit dem du diesen Code einfach einbinden kannst. 

HTML Gutenberg Block

In diesem kannst du ganz einfach deinen Code hineinkopieren und diesen dann sogar im Editor von WordPress anzeigen lassen.

Meine Quelle

Prinzipiell findet man zu dem ganzen sehr viel im Internet und das meiste nicht allzu sinnvoll. Was mir geholfen hat, war dieser wundervolle Beitrag von Shannon Payne.


Avatar von Dani Leitner

Autor:


Noch mehr Wissen über SEO?
Dann meld dich für meinen Newsletter an. Täglich wie die Zeitung, nur unterhaltsamer und viel weniger deprimierend. Mit 3 Minuten am Tag SEO lernen.
Worauf wartest du noch?