Wer mit Builderius arbeitet, kennt die Möglichkeit, Designs pixelgenau umzusetzen. In diesem Tutorial zeige ich dir, wie du Überschriften automatisch mit einem Farb-Highlight versiehst – entweder das letzte Wort oder alles nach dem letzten Komma. Das funktioniert sowohl für manuelle Komponenten als auch automatisch in allen Blog-Beiträgen.

Was wir bauen

Ein kleines CSS- und JavaScript-Snippet färbt einen Teil jeder Überschrift in deiner Akzentfarbe ein – gesteuert über die CSS-Variable --secondary. Das Ergebnis: Überschriften wie „Schneller, moderner und zuverlässig“ zeigen den letzten Teil in deiner Markenfarbe.

Es gibt zwei Varianten:

Variante 1 – Letztes Wort: Färbt immer das letzte Wort ein, egal ob ein Komma vorhanden ist oder nicht.
Variante 2 – Nur nach Komma: Färbt nur den Teil nach dem letzten Komma ein. Überschriften ohne Komma bleiben unverändert.

Schritt 1: CSS-Variable einrichten

Öffne in Builderius die Global Settings → CSS Variables und lege die Variable --secondary mit deiner gewünschten Akzentfarbe an, zum Beispiel #e85d26. Diese Variable wird von beiden Varianten verwendet.

Schritt 2: CSS hinzufügen

Gehe zu Global Settings → Custom CSS und füge folgendes ein:

texth2.wp-block-heading .highlight,
h3.wp-block-heading .highlight {
  color: var(--secondary);
}

Dieser Code gilt für beide Varianten – du musst ihn nur einmal einfügen.

Schritt 3a: JavaScript – Variante 1 (letztes Wort)

Gehe zu Global Settings → Custom JS, wähle Inline JS, Position Footer, und füge folgenden Code ein:

textdocument.querySelectorAll('h2.wp-block-heading, h3.wp-block-heading').forEach(function (el) {
  if (el.dataset.highlighted) return;
  el.dataset.highlighted = true;

  var text = el.textContent;
  var commaIndex = text.lastIndexOf(',');
  var before, after;

  if (commaIndex !== -1) {
    before = text.slice(0, commaIndex + 1);
    after  = text.slice(commaIndex + 1);
  } else {
    var words = text.trimEnd().split(/\s+/);
    var lastWord = words.pop();
    before = words.join(' ') + (words.length ? ' ' : '');
    after  = lastWord;
  }

  el.innerHTML = before + '<span class="highlight">' + after + '</span>';
});

Diese Variante färbt immer etwas ein: Hat die Überschrift ein Komma, wird der Text dahinter hervorgehoben. Hat sie keines, wird das letzte Wort eingefärbt.

Schritt 3b: JavaScript – Variante 2 (nur nach Komma)

Möchtest du, dass nur Überschriften mit Komma einen Effekt bekommen, verwende stattdessen diesen Code:

textdocument.querySelectorAll('h2.wp-block-heading, h3.wp-block-heading').forEach(function (el) {
  if (el.dataset.highlighted) return;
  el.dataset.highlighted = true;

  var text = el.textContent;
  var commaIndex = text.lastIndexOf(',');

  if (commaIndex !== -1) {
    var before = text.slice(0, commaIndex + 1);
    var after  = text.slice(commaIndex + 1);
    el.innerHTML = before + '<span class="highlight">' + after + '</span>';
  }
});

Überschriften ohne Komma bleiben bei dieser Variante komplett unangetastet – ideal, wenn du gezielt nur bestimmte Überschriften hervorheben möchtest.

Variante als Builderius-Komponente

Wenn du den Effekt nicht global, sondern nur auf bestimmten Seiten oder als wiederverwendbare Komponente nutzen möchtest, gehe so vor:

  1. Ziehe ein Heading-Modul auf die Canvas und vergib die CSS-Klasse headline
  2. Klicke mit der rechten Maustaste → Convert to Component
  3. Füge eine Text-Property namens headline_text hinzu und binde sie an den Heading-Inhalt
  4. Füge das CSS und JS als HTML-Modul innerhalb der Komponente ein – das ist die zuverlässigste Methode, wenn der JS-Tab in deiner Builderius-Version nicht sichtbar ist

Passe den CSS-Selektor dabei von h2.wp-block-heading auf .headline an, damit er zur Komponente passt.

Ergebnis

Überschrift Variante 1 Variante 2
„Schnell, sicher, zuverlässig“ „zuverlässig“ wird eingefärbt „zuverlässig“ wird eingefärbt
„404-Fehler finden“ „finden“ wird eingefärbt Keine Änderung
„SEO verbessern, jetzt starten“ „jetzt starten“ wird eingefärbt „jetzt starten“ wird eingefärbt

Mit nur wenigen Zeilen CSS und JavaScript bekommst du einen eleganten Typografie-Effekt, der dein Design konsistent durch alle Blog-Beiträge zieht – vollständig automatisch und ohne Anpassungen pro Beitrag.