• 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

  • Wie du Widgets in WordPress hinzufügst und kreativ nutzt
  • Was du über WordPress Hosting wissen solltest
  • Wie du kinderleicht eine mehrsprachige Seite in WordPress erstellst
  • WordPress schneller machen – 6 Dinge, die du wissen solltest
  • Die wichtigsten WordPress Plugins 💨 in der Übersicht
  • Wie viele WordPress Plugins kann man installieren?
  • Nach der WordPress Installation – Was du als Erstes tun solltest

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

  • Wie du dir als Blogger ein passives Einkommen aufbaust
  • 6 gute Taten, die du täglich für dein Blog tun kannst
  • Das Lexikon der Bloggersprache – Wichtige Blogbegriffe verständlich erklärt
  • 40 Dinge, die du sofort für dein Blog tun kannst
  • Wie du mit einem Content Relaunch in 10 Schritten deinen Traffic verdoppelst
  • Wo finde ich was als Blogger? Hier ist deine gelbe Seite 🌟

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 12
  • Wordpress 24

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

Mehr zum Bloggen

  • DU, SIE, IHR? Wie spreche ich Blogleser am besten an?
  • Das Lexikon der Bloggersprache – Wichtige Blogbegriffe verständlich erklärt
  • Wie du wirkungsvolle Beitragsbilder erstellst
  • Content Recycling: So wird aus alten Inhalten neuer Traffic ♻️
  • Kostenlose Stockfotos in Bilddatenbanken — Die 59 besten Quellen