Webtypografie-Tipp: Pull Quotes umsetzen

Ein Pull Quote (auch Seitenansprache genannt) ist ein praktisches typografisches Mittel, um den Inhalt eines Textes hervorzuheben und den Leser so auf den Text neugierig zu machen. Im Gegensatz zum Zitat (Block Quote) werden Pull Quotes rechts- oder linksbündig am Textrand platziert. Ein kurzer, für den Text besonders relevanter Satz oder Absatz, wird also noch einmal extra aus dem Text herausgezogen (daher „to pull“) und somit besonders betont.

Pull Quotes im Webdesign umsetzen

Im Printbereich werden Pull Quotes häufiger verwendet. Doch auch im Web können Pull Quotes genutzt werden, um lange Texte spannender zu gestalten und die Botschaft eines Textes noch besser zu vermitteln. Für die Umsetzung von Pull Quotes kannst du ein individuelles CSS Styling anlegen. Falls du mit WordPress arbeitest, gibt es sogar praktische Plugins, mit denen sich Plull Quotes leicht umsetzen lassen.

Eigene Plull Quotes erstellen

Indem du eine eigene CSS-Klasse für Pull Quotes verwendest (z.B. pull), kannst du standardmäßige Block Quotes <blockquote> ganz leicht zu Pull Quotes umfunktionieren.

<blockquote class="pull">Das ist ein Plull Quote.</blockquote>

Um die Position des Pull Quotes zu bestimmen, kannst du zusätzlich CSS-Klassen für Rechts- oder Linksbündigkeit nutzen (alignright und alignleft).

<blockquote class="pull alignright">Plull Quote rechts.</blockquote>
<blockquote class="pull alignleft">Plull Quote links.</blockquote>

Die benötigten CSS-Styles kannst du dann in deinem Stylesheet ungefähr so aussehen (du kannst das Styling deiner Pull Quotes natürlich mit Rändern, Schriftarten oder anderen Styles noch individualisieren):

blockquote.pull {
	width: 33%;
	margin: 0 0 1.4em;
	padding:0;
	display:inline;
	font-size:1.1em;
	text-align: center;
	border:none;
}
blockquote.pull.alignleft {
	margin: 0 1.4em 0.5em 0;
	float:left;
	text-align: right;
}
blockquote.pull.alignright {
	margin: 0 0 0.5em 1.4em;
	float:right;
	text-align: left;
}

WordPress-Plugins für Pull Quotes

Wenn du WordPress nutzt, kannst du alternativ zu einer individuellen Umsetzung auch eines der vorbereiteten Pull Quote-WordPress Plugins nutzen. Ich habe folgende Plugins getestet:

Simple Pull Quote Plugin

Simple Pull Quote WordPress Plugin Beispiel

Simple Pull Quote nutzt den Shortcode [pullquote], um Pull Quotes umzusetzen. Im visuellen Editor steht ein Icon zur Verfügung, um die Pull Quotes zu markieren. Es ist ein Style vorbereitet. Um diesen individuell anzupassen, müsstest du das Stylsheet aus dem Plugin-Ordner kopieren und in dein eigenes HauptStylesheet einfügen. Anpassungsoptionen gibt es beim Plugin ansonsten keine. Der Nachteil des Plugins ist, dass nach der Deaktivierung die Shortcodes im Artikel stehen bleiben.

Graceful Pull-Quotes Plugin

Gracefull Pull-Quote WordPress Plugin Etwas praktischer finde ich daher das Gracefull Pull-Quote Plugin. Hier gibt es eine Settings-Seite (unter Design / Pull Quotes), auf der du einige Einstellungs-Optionen für die Darstellung der Pull Quotes hast. Es gibt beispielsweise mehrere Pull Quote-Styles zur Auswahl, die man sich sogar in einer kleinen Vorschau anschauen kann. Außerdem kannst du bestimmen, ob du den HTML-tag <blockquote> + eine CSS-Klasse oder einen div-tag + CSS-Klasse für die Umsetzung der Pull Quotes nutzen möchtest. Auch die Bezeichnung der CSS-Klasse ist frei wählbar.

Settings des Gracefull Pull Quote Plugins
Einstellungs-Optionen des Gracefull Pull Quote WordPress-Plugins

Auf diese Weise hast du etwas mehr Kontrolle über die Integration deiner Pull Quotes. Und wenn du das Plugin später deaktivueren möchtest, werden deine Quotes entweder zu Zitaten (blockquotes) umgestylt oder bei der Nutzung eines Div’s nicht mehr für den Leser sichtbar angezeigt.

Tipps zum Weiterlesen

Kennst du weitere Ergänzungen zum Thema Pull Quotes beitragen oder kennst du besonders schöne Umsetzungen von Pull Quotes im Web? Über dein Feedback freue ich mich sehr!

19 Kommentare

    • Hallo Vincent,

      wir haben das Feature erst seit dem Nori-Theme im CSS integriert, habe es aber schon 1,2 mal genutzt. Ich finde Pull Quotes gerade bei langen Texten wirklich sehr schön :)

      Viele Grüße,
      Ellen

  1. Hej, schöner Tipp!

    Deinen Code könntest du noch um einige Zeilen verkürzen, indem du gemeinsame Stile von rechten und linken Seitenansprachen mit in die Klasse pull packst. Das wären „width: 33%; padding:0; display:inline; font-size:1.1em; border:none;“. Dann bleiben für die beiden Ausrichtungsklassen nur die Angaben zu margin, float und text-align übrig.

    Nebenbei: Klasse, dass der Text in deinem Blog Silbentrennung hat, sogar hier im Kommentarfeld. Wie hast du das gemacht?

  2. So dann kann ich die neuen Mittel auf meiner Homepage einfach und individuell selbst darstellen. Super und vielen Dank nochmal für den Tipp!

  3. Danke für die kleine Anleitung, hat mir sehr geholfen bei der Umsetzung. :) Mir reichte da die Umsetzung per CSS, so hab ich im Endeffekt die beste Kontrolle über Darstellung etc. und per AddQuicktag Plugin von Frank Bültge landet das Ganze dann auch sauber als Button im TinyMCE Editor. :)

  4. Manchmal sieht man scheinbar die einfachsten Dinge nicht. Nun ist es ja so, dass ein Blog recht textlastig ist. Da kann man schnell auf die Ideen kommen, Bilder für die Auflockerung zu verwenden. Doch das ist auch nicht immer sehr einfach. Manche Themen geben halt nicht so viel Visuelles her.

    Warum verwendet man also nicht PullQuotes? Ich für meinen Teil halte das für eine sehr gute Idee. Mal schauen, vielleicht lässt sich was daraus machen.

    Vielen Dank!

  5. Hallo, guter Hinweis. Nur beim CSS komme ich nicht ganz klar. Ich habe das Graceful-Plugin eingesetzt, zum Beispiel hier – http://www.velofahrer.ch/2012/02/20/das-velo-verursacht-nur-bescheidene-verkehrskosten/ – aber es sieht nicht schön aus: Oben nicht bündig mit der Zeilenoberkante und der Text des Quotes klebt beinahe an der oberen Linie. Kann mir jemand genau sagen, wo ich die entsprechenden CSS-Codes eingeben muss, um das zu korrigieren? VIelen Dank und herzliche Grüsse, Dominik

    • Erstell in Deiner style.css des Themes folgende Klasse:

      blockquote.pullquote p, div.pullquote p {
      }

      Dort dann ein padding-top setzen mit dem Wert, den Du haben willst. Ich brauchte gerade mit Chrome dazu noch den !important Wert.

      Denke mal folgendes sollte gut passen:

      blockquote.pullquote p, div.pullquote p {
      padding-top: 20px !important;
      }

      • Hallo Coca, danke, hat indirekt funktioniert: Ich musste den Code direkt in die entsprechende style.css des Plugins schreiben. Jetzt ist nur noch unschön, dass die obere Doppellinie nicht bündig mit der Schriftoberkante ist. Hast Du dafür auch noch eine Idee?
        Mag ein bisschen pingelig erscheinen, aber mir gefällts nun mal genau.

        Danke!

        • Keine Sorge, das mit den Pingeligkeiten kenn ich von mir nur zu gut. ;)

          Meiner Ansicht nach ist das über die default.css in Zeile 30 des Plugins am einfachsten:

          blockquote.pqRight, div.pqRight {
          margin-top: 0 !important;
          }

          • Nee, diesmal hats nicht hingehauen. Dein Code bewirkte, dass das Quote unschön einige Pixel über den Zeilenradn hinaus ragte – also genau das Gegenteil. Und zwar unabhängig davon. ob darüber ein Zwischentitel stand oder nicht. Hab den Code deshalb wieder rausgenommen. Nun, es kann auch so bleiben, sooooo gravierend ists ja auch wieder nicht.

            Ausser Du hast noch ne Idee. Ich schau dann morgen wieder rein.

    • Achja, die Klasse auf jeden Fall VOR dem ersten Media Query einsetzen, damit der Wert auch auf hochauflösenden Desktops wirkt.

  6. Einfach klasse. Ich mag dieses „Stilmittel“ auch in Print sehr und freue mich schon, die Pull-Quotes demnächst einmal in meinem Blog zu testen.

    Eröffnet auch stilistisch ganz neue Möglichkeiten um den Leser neugierig zu machen.

    Vielen Dank!

  7. Hab es jetzt einmal getestet: http://bit.ly/AxEbX5

    Sieht schon ganz gut aus, jedoch klebt der Text etwas an der grauen Linie. Hatte es mit padding-left probiert, da passierte aber nichts.

    Weiß jemand Rat? Mir würde an Stelle der Linie auch ein farbiger Kasten gut gefallen…

    Schon mal Danke und Grüße

Hinterlasse eine Antwort

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