Conterest ツ

Clever Bloggen

  • Blogtipps
  • Blogstart
    • Anleitung in 18 Schritten
    • Blog schreiben für Einsteiger
  • Blogtraffic
  • Gratisbuch
  • Archiv
    • Liste absolut aller Blogbeiträge
  • 1001 Gründe
    • Warum es gut und richtig ist ein Blogger zu sein

H1 Überschriften mit dem Wordpress Editor attraktiv gestalten

Stand 21.06.2017 | Erschienen 9.04.2016 | von Sven Lennartz |

  • merken  42 
  • teilen  
  • twittern  
  • teilen 

H1 Überschriften im Wordpress Editor 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.

Inhalt

  • — Wordpress Sonderzeichen —
  • — HTML-Sonderzeichen —
  • — Emojis —
  • —Shortcuts [icon id=“rotate-left“]—
  • — HTML —
  • — CSS —
  • Werkstattbericht 🔧

— 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.

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 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.

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 [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.

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.

Schon gewusst?  Die Wahrheit über Wordpress Plugins. Welche sollte ich auf einem neuen Blog installieren? ❌ Und warum

Kategorie: Wordpress | ** Blogarchiv

Conterest ist als Projekt beeendet, bleibt aber online

Aus diesem Grund gibt es keine Kommentare mehr. Danke an alle für das Lesen! Ich habe mich in der Zwischenzeit als Schriftsteller Lenny Löwenstern neu erfunden. In meiner Freizeit kümmere ich mich um schöne Wörter. Hier zum Beispiel:

Tannenduft & Lichterglanz - 139 Wunderschöne Wörter für Weihnachten

Die Themen

  • Bloggen
  • Blogstart
  • Blogtraffic
  • Pinterest
  • Schreiben
  • Schrift & Grafik
  • Wordpress

Blogtipps

  • Blog Traffic: 100 Ideen für mehr Besucher im Blog
  • Erfolg mit Pinterest: Repinnen ist Trumpf
  • 15 Ideen, mit denen du wieder mehr Spaß am Bloggen haben kannst
  • Bittere Bloggerwahrheiten (Nr. 4) Das Design ist nicht entscheidend

Die schönsten Wörter der deutschen Sprache in einem Buch

Es gibt sie noch, die schönen Wörter. Begriffe mit dem besonderen Klang. Wörter, die Sehnsüchte und Erinnerungen in uns hervorrufen. Eine wunderfrohe Blütenlese mit den schönsten, treffendsten und originellsten Wörtern der deutschen Sprache. Mehr

Schöne Wörter Buch

Favoriten der Redaktion

  • Gastbloggen Gratis Badges
  • Langzeitmotivation
  • Von Links profitieren
  • Wieso Bloggen?
  • Warum Blogger SEO brauchen
  • Was du mit 100€ fürs Blog tun kannst

Meine Empfehlung

Raidboxes Managed WordPress Hosting

Beliebt

  • Blog schreiben für Einsteiger
  • 23 Zitate von Bloggern
  • Tricks mit Text
  • Schnelleinstieg mit WordPress

Empfehlungen

  • Der perfekte Blog Post
  • Lexikon Bloggersprache
  • Beitragsbilder erstellen
  • Ideen finden

Auch interessant

  • Mein Blogger Kodex
  • Ist eine Sidebar nötig?
  • Alltag der Vollzeitblogger
  • Logo selbst machen

conterest.de · Das Blog für Blogger von Sven Lennartz · ESTD 2015 · Clever Bloggen · Datenschutz · Impressum