Blockquotes eignen sich hervorragend, um Zitate und wichtige Aussagen auf einer Website hervorzuheben. Sie schaffen eine visuelle Trennung zum restlichen Text und signalisieren, dass es sich um Inhalte aus einer anderen Quelle handelt. Im Folgenden wird erklärt, was Blockquotes sind und wie sie in WordPress mit CSS angepasst werden können, um ihnen mehr Wirkung zu verleihen.
Was sind Blockquotes?
Blockquotes sind eine Formatierungsoption, die verwendet wird, um Zitate oder markante Aussagen strukturell hervorzuheben. Sie werden normalerweise verwendet, um eine visuelle Trennung zwischen dem zitierten Text und dem Rest des Textes zu schaffen. Sie sind meist eingerückt und häufig zusätzlich durch Anführungszeichen oder besondere Formatierungen gekennzeichnet.
Blockquotes werden häufig in wissenschaftlichen Arbeiten, journalistischen Berichten oder auch auf normalen Webseiten verwendet, um die Wichtigkeit oder den Einfluss eines bestimmten Zitats oder einer Aussage zu unterstreichen.
Der Standardstil vieler WordPress-Themes ist jedoch nicht immer ideal, sodass eine individuelle Gestaltung oft sinnvoll ist, je nachdem, ob eine auffällige oder dezente Darstellung bevorzugt wird.
Dieses ist ein Blockquote Beispiel. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Verwendung von CSS-Code zur Gestaltung von Blockquotes
Blockquotes lassen sich in WordPress auf zwei Wegen per CSS anpassen: über das Feld „Zusätzliches CSS“ im WordPress Customizer oder direkt in der style.css des aktiven Themes bzw. Child-Themes.
blockquote {
background-color: #f9f9f9;
border-left: 10px solid #ccc;
margin: 1em 10px;
padding: 0.5em 10px;
}Dieser CSS-Code ergänzt einen grauen linken Rand, fügt einen hellen Hintergrund ein und sorgt durch margin- und padding-Werte für eine harmonische räumliche Abgrenzung zum restlichen Text.
Die Werte lassen sich beliebig anpassen. Beispielsweise kann der Hintergrund durch Ändern des Farbwertes in eine andere Farbe geändert werden. Nach dem Einfügen des Codes in die style.css oder den Customizer werden alle Blockquotes der Website entsprechend neu dargestellt.
Wo findet man das Feld „Zusätzliches CSS“ im WordPress Customizer?
Der WordPress Customizer bietet das Feld „Zusätzliches CSS“, über das CSS-Anpassungen schnell und ohne direkte Bearbeitung der style.css vorgenommen werden können.
So lässt sich das Feld finden:
- Im WordPress-Dashboard „Design“ – „Anpassen“ auswählen.
- Den Menüpunkt „Zusätzliches CSS“ öffnen.
- Den gewünschten CSS-Code einfügen und in der Live-Vorschau testen.
- Über „Veröffentlichen“ die Änderungen übernehmen.
Zu beachten ist, dass die im Feld „Zusätzliches CSS“ vorgenommenen Anpassungen nur für das aktuell aktive Theme gelten. Sollen Änderungen dauerhaft und updatesicher sein, empfiehlt sich die Nutzung eines Child-Themes sowie die direkte Bearbeitung der entsprechenden style.css-Datei. Dadurch bleiben eigene Anpassungen auch nach Theme-Updates erhalten.