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.
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 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
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.
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
- Einen interessanten und umfangreichen Artikel zum Thema Block- und Pull Quotes kannst du dir bei Smashing Magazine anschauen: »Block Quotes and Pull Quotes: Examples and Best Practices«.
- Ein tolles kleines Einsteigerbuch zum Thema Typografie allgemein ist außerdem »Buchstaben kommen selten allein: Ein typografisches Handbuch« von Indra Kupferschmid.
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!
Klasse! Danke für den guten Tipp.
Super Tipp! Aber verwendet du auf Elmastudio die »Pull Quotes«?
Grüße, Vincent
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
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?
Hallo Gerhard,
vielen Dank für deinen Hinweis, ich habe die CSS-Styles gerade noch einmal im Artikel gekürzt, so ist das natürlich eleganter :)
Für Silbentrennung nutzten wir im Nori-Theme CSS hyphens (mehr Infos hier: http://trentwalton.com/2011/09/07/css-hyphenation/ ):
p { -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }Alternativ kann die Silbentrennung auch mit Hilfe des WP Typography Plugins eingestellt werden.
Viele Grüße,
Ellen
So dann kann ich die neuen Mittel auf meiner Homepage einfach und individuell selbst darstellen. Super und vielen Dank nochmal für den Tipp!
Danke für den super Tipp und: SInd echt toll Deine Themes :-)
lg
Thomas
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. :)
Hallo Coca,
vielen Dank für dein Feedback. Ja das stimmt, das AddQuicktag-Plugin ist noch eine gute Ergänzung. So kann man sich einen extra Button im Editor für Pullquotes anlegen.
Viele Grüße,
Ellen
Danke für den Tip, werd ich mal probieren..
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!
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.
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!
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