• Zur Hauptnavigation springen
  • Skip to main content
  • Zur Hauptsidebar springen

Conterest Blog

Alles für Blogger

  • Bloggen
  • Blogstart
  • Grafik
  • Geldverdienen
  • Kostensparen
  • SEO
  • WordPress

Überschriften mit dem WordPress Editor spielerisch gestalten

Überschriften mit dem WordPress Editor spielerisch gestalten

Auf den richtigen Text kommt es an, wenn deine Überschrift Erfolg haben soll. Du kannst aber auch mit der Gestaltung etwas herausholen und deine Headlines auf verschiedene 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.

Inhaltsverzeichnis
— WordPress Sonderzeichen —
— HTML-Sonderzeichen —
— Emojis —
— Shortcuts —
— HTML —
— CSS —
Werkstattbericht 🔧

— WordPress Sonderzeichen —

Das Potenzial der Sonderzeichen wird häufig vernachlässigt. Der alte 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.

sonderzeichen-wordpress

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

sonderzeichen-editor

Der WordPress-Editor hält 243 Sonderzeichen bereit, von denen sich ein ordentlicher Teil durchaus als Schmuck oder Verstärkung des Titels eignen dürfte. 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.

sonderzeichen-editor-html

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.

emojis-headline

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.

emojis

— Shortcuts —

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.

html-text

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>

css-h1

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.

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 5 / 5. Anzahl Bewertungen: 1

Bisher keine Bewertungen! Sei der Erste, der diesen Beitrag bewertet.

Autor Sven E. Lennartz Erschienen am 9.04.2016 Stand vom 26.09.2022

Hier geht es weiter

  • Überschriften mit dem WordPress Editor spielerisch gestalten
  • 15 praktische und nützliche WordPress Plugins
  • 10 nervende WordPress Eigenschaften und wie ich sie gelöst habe
  • Darf ich Logo, Name oder Farben von WordPress verwenden?
  • WordPress Login Problem – Hilfe, ich habe mich selbst ausgesperrt
  • Was sind Pingbacks und Trackbacks?
  • Die Wahrheit über WordPress Plugins. Welche sollte ich auf einem neuen Blog installieren? ❌ Und warum

Leser-Interaktionen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Haupt-Sidebar

Favoriten

  • WordPress Shortcuts
  • Online Schreibprogramme
  • Die schönsten Google Fonts
  • Worüber schreiben? 43 Vorschläge
  • Der perfekte Blog Post

Suche

Inhalt ** Archiv

Inhaltsverzeichnis

Aus dem Archiv

  • Geldverdienen als Blogger — Kurse, Seminare, Workshops und Events
  • Wie du mit einem Content Upgrade Besucher bindest
  • 15 praktische und nützliche WordPress Plugins
  • Wo finde ich was als Blogger? Hier ist deine gelbe Seite 🌟
  • Blogs nerven, wenn sie das hier tun. 16 völlig irre Dinge, die Blogger und Seitenbetreiber machen, um weniger Traffic zu erhalten
  • Wie du reichhaltige & lange Blogartikel schreibst

Explore more

Conterest Logo

Footer

Conterest – ein Blog für Blogger

  • Bloggen 63
  • Blogstart 35
  • Geldverdienen 14
  • Kostensparen 12
  • Schreiben 11
  • Schrift & Grafik 22
  • SEO 18
  • Social Media 11
  • Wordpress 24

conterest.de · ESTD 2015 · Kostenrunter · Bildungssprache · Datenschutz · Impressum

Mehr zum Bloggen

  • Bloggen für Anfänger – 27 wichtige Begriffe erklärt
  • Post löschen, Blog archivieren oder komplett löschen? Ein Blog für die Ewigkeit
  • Die Schönheit des Hashtags (#) in 26 Google Fonts
  • Blogs nerven, wenn sie das hier tun. 16 völlig irre Dinge, die Blogger und Seitenbetreiber machen, um weniger Traffic zu erhalten
  • Was ist eine Sidebar? Und brauche ich sie?