H1 Überschriften mit dem Wordpress Editor attraktiv gestalten

Auf den richtigen Text kommt es an, wenn eine Überschrift Erfolg haben soll. Du kannst aber auch mit der Gestaltung etwas herausholen und deine Headlines auf diese Weise interessanter wirken lassen.

So werden deine Überschriften einzigartig.

Verwende die folgenden Ideen für die H1 Überschrift, aber nicht für den <title>-Tag. Ein SEO-Plugin hilft dir bei der Unterscheidung.

— Wordpress Sonderzeichen —

Das Potenzial der Sonderzeichen wird häufig vernachlässigt. Der Wordpress Editor verfügt sogar über eine passende Funktion. Klicke dazu auf das Omega Symbol Ω in der Iconleiste des Editors. Es öffnet sich dieses Popup-Fenster voll mit Sonderzeichen.

Aus Gründen, die ich nicht kenne, lassen sich die Sonderzeichen überall im Text platzieren, aber nicht in das für die H1 Überschrift vorgesehene Feld. Aber halb so wild. Setze sie irgendwo in den Fließtext und kopiere sie von dort in deine Überschrift. Das ist zwar ein wenig umständlich, aber funktioniert problemlos.

Hier ist ein Beispiel mit drei Sonderzeichen

Der Wordpress-Editor hält 243 Sonderzeichen bereit, von denen sich ein ordentlicher Teil durchaus als Schmuck oder Verstärkung des Titels eignen sollte. Probiere dein Geschick!

— HTML-Sonderzeichen —

Das tatsächliche Reservoir ist noch einmal entschieden größer. Moderne Browser nutzen sämtliche ASCII, UTF-8 und Unicode-Entitäten. Und das sind eine Menge. Ich weiß nicht, wie viele Zeichen es gibt. Es scheint nicht so einfach herauszufinden. Eine wohlsortierte Übersicht geeigneter Zeichen und Symbole findest du hier verlinkt.

Darunter ist eine beachtliche Kollektion von Sternen, Pfeilen, Zahlsymbolen und vieles mehr.

Alternativ kannst du die Zeichentabelle von OpenOffice (LibreOffice) verwenden. Auch dort ist es ein Omega Symbol, das dir eine Tabelle und weitere Optionen eröffnet. Dort sind weitere verwendbare Symbole zu finden. Nutze sie mit Copy & Paste. Begrenzt wird das alle durch den benutzten Font, der muss das ausgewählte Sonderzeichen auch darstellen können.

— Emojis —

Damit aber ist bei Weitem nicht Schluss. Schließlich gibt es noch die Emojis. Die sind vorrangig gedacht, um Chats und Tweets und andere elektronische Kommunikation aufzuhübschen. Die meisten davon funktionieren auch im Browser und deshalb auch in der Überschrift. Sie sehen übrigens auch im Fließtext und in allen anderen Überschriften gut aus – auch auf Buttons. Genau deshalb verwenden wir sie auch hier.

Viele Emojis sind farbig! Allein das macht sie zu etwas Besonderem und wertet jede Titelzeile auf. Sie passen sich wie schon die Sonderzeichen der jeweiligen Textgröße an.

Bitte bedenke: Für die Darstellung ist das jeweilige Anzeigegerät zuständig. Und da existieren es enorme Unterschiede zwischen Browsern und Handys, selbst zwischen Microsoft-, Apple- und Samsunggeräten. Das aber sollte dich nicht vom Einsatz abhalten.

—Shortcuts [icon id=“rotate-left“]—

Lassen sich prima in Zwischenüberschriften verwenden. Doch leider nicht in H1-Überschriften. Wer einen Weg kennt, es dennoch möglich zu machen, möge sich bitte melden. Eigentlich sollte es doch funktionieren, denn Verschachtelungen sind im HTML völlig in Ordnung. Hier im Beispiel in der orangenen H3 Zwischenüberschrift ist es rotate-left aus der genialen Sammlung von Font Awesome. Eingefügt mit dem Plugin Easy Responsive Shortcodes (es gibt viele andere).

— HTML —

HTML verwendet WordPress sowieso, also warum nicht auch in Überschriften? Und ja, es ist möglich, doch leider mit gravierenden Einschränkungen. Du kannst HTML oder CSS direkt in das Feld für die Überschrift schreiben. So sieht das dann aus:

H1 <mark>Überschriften</mark> im <em>Wordpress</em> Editor gestalten

Eingesetzt habe ich in dem Beispiel einen Textmarkereffekt und Kursivschrift.

Möglich sind außerdem:

• <strong> = fett
• <small> = kleine Buchstaben
• <del> = durchgestrichener Text
• <sub> = nach oben verschoben
• <sup> = nach unten verschoben
• <q> = Zitat

Das wird im Browser alles korrekt dargestellt, wenn es auch zwischen den verschiedenen Fabrikaten Unterschiede geben kann. Die Sache hat dennoch Nachteile. Die mit den Tags angereicherten Überschriften werden so überall im Backend gezeigt, also beispielsweise in der Artikelübersicht. Das stört massiv, die Übersicht und Erfassbarkeit leidet darunter. Dem Besucher wäre es allerdings egal, der kriegt nichts davon mit.

Man könnte sich vielleicht daran gewöhnen, doch werden auch Plugins, Widgets und möglicherweise Funktionen beeinträchtigt. Das habe ich mehrfach beobachtet überall da wo die Titel verwendet und ausgegeben werden.

— CSS —

CSS ist der Königsweg zur Formatierung. Eigentlich. Denn mit Cascading Stylesheets (CSS) geht noch weit mehr. Hier steht dir ein Füllhorn an Formatierungen zur Verfügung. Beispielsweise können unterschiedliche Farben in einer Überschrift eingesetzt werden. Mächtig, mächtig. Nur eben leider mit den oben schon genannten Nachteilen behaftet.

Schau dir das hier an:

H1 <span style=“color: #ff0000;“>Überschriften</span> im <span style=“border : 1px solid green;padding : 4px“;“>WordPress</span> Editor <span style=“text-shadow: 0.1em 0.1em 0.2em black“>gestalten</span>

Das kann CSS. Dir stünden ebenso zur Verfügung: Versalien, verschiedene Fettschriften, Unterstreichungen, punktierte Unterstreichungen, doppelte Unterstreichungen, Überstreichungen, Relief, Kontur, Kapitälchen und noch reichlich ein bisschen mehr. Möglicherweise funktionieren sogar Animationen. Damit hätten wir es wahrlich hemmungslos übertrieben. Siehe: Tricks mit Text

Übrigens: Alle Techniken lassen sich fröhlich miteinander kombinieren und auch in Zwischenüberschriften einsetzen. Vielleicht experimentierst du ein wenig damit und erzählst uns dann davon davon.

Werkstattbericht 🔧

Im Beitragsbild verwende ich die folgenden Google Fonts: Homenaje und Roboto. Das Public Domain Foto fand ich bei Pixabay.