Lesefortschritt:

Fünf Varianten, um Online-Texte zu highlighten

28. Februar 2024 | CSS-Stylesheet, Divi-Theme, HTML

Dieser Beitrag beinhaltet 1517 Wörter. – Geschätzte Lesezeit: ca. 8 Minuten.

Mal eben mit dem Textmarker was markieren – das sollte man natürlich am Monitor nicht tun. Trotzdem zeigen wir Ihnen, wie Sie Text-Highlights hinzufügen können. Gleich fünf Varianten haben wir am Start.

1. Mehrzeiliger Text mit farbigem Hintergrund

Das erste Beispiel für Texthervorhebungen im Divi-Theme ist auf modernen Websites ziemlich beliebt. Um eine mehrzeilige farbige Hintergrundmarkierung zu erstellen, fügen Sie einfach eine CSS-Klasse im Text-Modul hinzu: Im «Erweitert»-Tab, «CSS-ID & Klassen» und dort im Textfenster «CSS-Klasse». In diesem Beispiel verwenden wir die Klasse «multi-line-highlight».

Dazu noch ein wenig CSS-Code, den Sie unter Design/Customizer/Zusätzliches CSS hinzufügen;

.multi-line-highlight h5 {
  color: #ffffff;
  background-color: #59B14B;
  line-height: 1.7em;
  padding-bottom: 0px;
  display: inline;
  box-shadow: 10px 0 0px 0px #59B14B, -10px 0 0px 0px #59B14B;
  box-decoration-break: clone;
}

Dies ergibt dann eine solche Darstellung:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.

Beachten Sie, dass der CSS-Code nur die Überschriftgrösse h5 anspricht. Falls Ihnen dies nicht zusagt, müssten Sie den Code in Zeile 2 anpassen. Natürlich können Sie auch die Farben (in Zeilen 2, 3 und 7) anders definieren.

2. Der Textausruf

Der Textaufruf eignet sich hervorragend, um wichtige Dinge in Ihrem Text hervorzuheben, z. B. einen Hinweis, eine Warnung oder einfach nur einen lustigen Akzent. Hierfür müssen Sie das Wort oder die Wörter, die hervorgehoben werden sollen, mit <span>-Tags angeben und die richtige CSS-Klasse benennen. Sie können diese Texthervorhebungen und Akzente in jeder Divi-Überschrift oder jedem Text hinzufügen. Wir haben gleich zwei Callout-Klassen vorbereitet.

Der nötige CSS-Code gleich nachfolgend – fügen Sie ihn in das CSS-Stylesheet unter Design/Customizer/Zusätzliches CSS ein:

.callout-1 {
  position: relative;
  color: #ffffff;
  background-color: #59B14B;
  font-size: inherit;
  padding: .2em .4em;
  border-radius: 6px;
  margin: 0 6px;
}
.callout-2 {
  position: relative;
  color: #ffffff;
  background-color: #293280;
  font-size: inherit;
  padding: .2em .4em;
  border-radius: 6px;
  margin: 0 6px 0 0;
  font-weight: bold;
}

Auch diese Farben und Style können Sie natürlich anpassen – in den Zeilen 3, 4, 12 und 13.

Nun können Sie den Text im HTML-Editor bearbeiten. Hier ein Beispiel:

Lorem ipsum <span class="callout-1">dolor sit amet,</span> consetetur sadipscing <span class="callout-2">elitr, sed diam</span> nonumy eirmod.

Das schaut dann so aus:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.

3. Farbige Hervorhebungen im Text

Dieser Textaufruf eignet sich hervorragend, um wichtige Dinge in Ihrem Text hervorzuheben. Auch hierfür müssen Sie das Wort oder die Wörter, die hervorgehoben werden sollen, mit <span>-Tags angeben. Sie können diese Texthervorhebungen und Akzente jeder Divi-Überschrift oder jedem Text hinzufügen.

Um diese farbliche Hervorhebung zu erstellen, fügen Sie dem <span>-Tag einfach eine CSS-Klasse bei. In diesem Beispiel verwenden wir die Klasse «color-highlight».

Den zugehörigen CSS-Code fügen Sie in das CSS-Stylesheet Ihrer Website ein – unter Design/Customizer/Zusätzliches CSS:

.color-highlight {
    text-decoration: none;
    box-shadow: inset 0 -.5em 0 rgba(89,177,75,0.75);
    color: inherit;
}

In die HTML-Ansicht des Texteditors fügen Sie nun noch den Text ein. Unser Beispiel:

Lorem ipsum dolor sit amet, <span class="color-highlight">consetetur sadipscing elitr,</span> sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.

Die Ansicht, die so entsteht:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.

Natürlich können Sie auch diese Farben anpassen – beachten Sie Zeile 3 des CSS-Codes.

4. Hervorheben eines halbfetten Texts

Das Highlighten eines Texts lässt sich auch mit einer anderen CSS-Klasse oder einem Tag verbinden. Beispielsweise mit dem Tag <strong>, welcher Texte halbfett auszeichnet.

Wir verwenden dafür die CSS-Klasse «bold-highlight». Diese tragen wir in einem Text-Modul ein – im Tab «Erweitert», unter «CSS-ID & Klassen» und dort im Textfenster «CSS-Klassen».

Weiter folgt auch hier ein Code-Block, welchen Sie ins CSS-Stylesheet (unter Design/Customizer/Zusätzliches CSS) einfügen:

.bold-highlight p strong, .bold-highlight h2 strong {
    padding: 0 5px;
    background-color: rgba(89,177,75,0.5);
}

Der Code spricht alle p- und h2-Tags ebendieses Textmoduls an und wird aktiv, sobald einer dieser Tags halbfett (<strong>) ausgezehnet wird. Das können Sie freilich anpassen. Ebenso die Farbe in Zeile 3.

Nun verwenden wir eine Beispielzeile in HTML. Etwa so:

Lorem ipsum dolor <strong>sit amet,</strong> consetetur sadipscing elitr, <strong>sed diam nonumy</strong> eirmod tempor invidunt ut labore et dolore magna.

Eingefügt in einen HTML-Editor ergibt dies folgendes Resultat:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.

5. Einfaches HTML-Highlight

Die letzte Variante ist noch einfacher: Auch HTML kann nämlich von Haus aus highlighten und tut dies in einem knalligen Gelbton. Der Tag heisst sinnigerweise <mark>. Der Code dafür:

Lorem ipsum dolor sit amet, <mark>consetetur sadipscing elitr,</mark> sed diam nonumy eirmod <mark>tempor invidunt ut labore</mark> et dolore magna.

Eingefügt in die HTML-Ansicht eines Texteditors, zeigt sich dieses Beispiel folgendermassen:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.

Ziemlich einfach und vielfältig. Oder?

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This