Automatische Verkleinerung langer Wörter in Überschriften

Automatische Verkleinerung langer Wörter in Überschriften

Mai 25, 2023

Automatische Verkleinerung langer Wörter in Überschriften

In diesem Tutorial zeigen wir dir, wie du Wörter mit mehr als 13 Zeichen in h1-h4 Überschriften automatisch um 20% verkleinerst – ohne das gesamte Titel-Element zu verändern. Die Lösung funktioniert mit dem Plugin „Custom CSS & JS„.

Schritt 1: Plugin installieren

1. Gehe zu „Plugins → Installieren“
2. Suche nach „Custom CSS & JS“
3. Installiere und aktiviere das Plugin

Schritt 2: JavaScript-Code hinzufügen

1. Gehe zu „Custom CSS & JS → Add Custom JS“
2. Titel: „Long Words Reducer“
3. Füge diesen Code ein:

Copy to Clipboard

4. Wähle bei „Where“: Footer
5. Wähle bei „Type“: Script
6. Klicke auf Publish

Schritt 3: CSS-Code hinzufügen

1. Gehe zu „Custom CSS & JS → Add Custom CSS“
2. Titel: „Long Words Styling“
3. Füge diesen Code ein:

Copy to Clipboard

4. Wähle bei „Where“: Head
5. Klicke auf Publish

Funktionsweise und Tipps

• Verkleinert nur Wörter >13 Zeichen in h1-h4
• Funktioniert mit Umlauten (ä, ö, ü, ß)
• Behält bestehende Formatierungen bei
• Responsive für Mobilgeräte
• SEO-freundlich (keine Inhaltsänderung)

Troubleshooting:
– Cache leeren nach Installation
– Browser-Konsole prüfen (F12)
– Plugin-Konflikte prüfen

Beispiel: Das Wort „Implementationsprozess“ (14 Zeichen) wird automatisch verkleinert.

Um die Funktionsweise der automatischen Verkleinerung noch besser zu verdeutlichen, hier weitere praktische Beispiele aus verschiedenen Anwendungsbereichen:

  1. Wort: Wissenschaftskommunikation (22 Zeichen)
    Beispiel-Satz: Die Wissenschaftskommunikation spielt eine zentrale Rolle, um komplexe Inhalte verständlich zu vermitteln.

  2. Wort: Elektrizitätswirtschaft (21 Zeichen)
    Beispiel-Satz: Die Elektrizitätswirtschaft befindet sich im Wandel durch den verstärkten Einsatz erneuerbarer Energien.

  3. Wort: Arbeitsunfähigkeitsbescheinigung (29 Zeichen)
    Beispiel-Satz: Die Arbeitsunfähigkeitsbescheinigung muss vom Arzt korrekt ausgefüllt werden, um beim Arbeitgeber anerkannt zu werden.

  4. Wort: Gesundheitsförderungsprogramme (27 Zeichen)
    Beispiel-Satz: Gesundheitsförderungsprogramme tragen dazu bei, das Wohlbefinden am Arbeitsplatz nachhaltig zu verbessern.

  5. Wort: Nachhaltigkeitsstrategien (22 Zeichen)
    Beispiel-Satz: Unternehmen entwickeln immer öfter umfassende Nachhaltigkeitsstrategien, um ökologisch und sozial verantwortungsvoll zu handeln.

Diese Beispiele zeigen, wie vielfältig und unterschiedlich lange Wörter sein können, die in Überschriften auftauchen. Mit der hier vorgestellten Methode werden solche Wörter gezielt verkleinert, damit die Lesbarkeit erhalten bleibt und die Gestaltung der Überschrift optisch harmonisch wirkt – ohne die SEO zu beeinträchtigen.

Visualisierung der Verkleinerung

One Comment

  1. danyduchaine Mai 26, 2023 at 3:17 p.m.

    .long-word {
    font-size: 0.8em; // 80% der Eltern-Schriftgröße
    }
    @media (max-width: 768px) {
    .long-word {
    font-size: 0.75em; // 75% der Eltern-Schriftgröße
    }
    }

Leave A Comment

Professionelle Webentwicklung auf höchstem Niveau

Hallo! Wir sind kreative Webdesigner und erfahrene Entwickler.

Wir gestalten professionelle Websites, die auf allen Geräten überzeugen – suchmaschinenoptimiert, benutzerfreundlich und technisch auf dem neuesten Stand. Unser Ziel: Mehr Sichtbarkeit, mehr Kunden, mehr Erfolg für Ihr Unternehmen.