Verleihe Zitaten in WordPress mehr Wirkung: So gestaltet man Blockquotes in WordPress mit CSS! Blockquotes können eine großartige Möglichkeit sein, um Zitate und wichtigen Aussagen auf einer Website hervorzuheben. In dieser Schritt-für-Schritt-Anleitung erfährst Du Tipps, wie man Blockquotes in WordPress mit grundlegenden CSS-Regeln ganz einfach umgestalten kann, um ihnen mehr Wirkung zu verleihen.
Was sind Blockquotes?
Blockquotes sind eine Formatierungsoption für Text, die verwendet wird, um Zitate oder Aussagen von anderen Personen oder Quellen innerhalb eines Textes hervorzuheben. Sie werden normalerweise verwendet, um eine visuelle Trennung zwischen dem zitierten Text und dem Rest des Textes zu schaffen und um zu signalisieren, dass dieser Text von einer anderen Quelle stammt.
In der Regel wird der zitierte Text in einer Blockquote eingerückt und oft in Anführungszeichen gesetzt, um deutlich zu machen, dass er eine wörtliche Wiedergabe oder Paraphrase eines anderen Textes ist. Blockquotes werden häufig in wissenschaftlichen Arbeiten, journalistischen Berichten oder auch auf Webseiten verwendet, um die Wichtigkeit oder den Einfluss eines bestimmten Zitats oder einer Aussage zu unterstreichen. Nun ist der Standardstil für Blockzitate in den WordPress-Themes leider nicht immer sehr ansprechend gestaltet. Manchmal mag man es auffälliger, manchmal dezenter in der Gestaltung, als das Theme von Haus aus mitbringt.
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
Um Blockquotes in WordPress mit CSS zu gestalten, kannst Du entweder den folgenden Code in das WordPress Customizer CSS-Feld oder alternativ direkt in die Style.css-Datei deines WordPress-Themas schreiben. So kannst du z.B. folgenden CSS-Code verwenden, um Blockquotes schöner zu gestalten:
blockquote { background-color: #f9f9f9; border-left: 10px solid #ccc; margin: 1em 10px; padding: 0.5em 10px; }Dieser Code fügt einen grauen linken Rand hinzu und färbt den Hintergrund des Blockquotes in ein helles Grau. Der margin-Wert sorgt dafür, dass der Blockquote genügend Abstand vom Text erhält und der padding-Wert gibt ihm etwas Raum, um Text und andere Inhalte darin zu platzieren.
Natürlich kannst du diese CSS-Regeln anpassen, um das Aussehen des Blockquotes anzupassen. Wenn du beispielsweise den Hintergrund des Blockquotes in eine andere Farbe ändern möchtest, kannst du einfach die Hex-Farbcodes im CSS-Code abändern. Sobald du die CSS-Regeln für Blockquotes in der Style.css-Datei deines WordPress-Themas eingefügt hast, werden alle Blockquotes auf deiner Website automatisch entsprechend gestaltet.
Wo finde ich den Punkt „Zusätzliches CSS“ im WordPress Customizer?
Im WordPress Customizer gibt es das Feld namens „Zusätzliches CSS“, in dem du CSS-Code eingeben und anwenden kannst. Dieses Feld ist ein einfacher Weg, um schnell Änderungen an der visuellen Darstellung deiner Website vorzunehmen, ohne dass du die Style.css-Datei bearbeiten musst.
Um das „Zusätzliches CSS“-Feld zu finden, öffne deinen WordPress-Adminbereich und klicke auf „Design“ > „Anpassen“. Dann klicke auf „Zusätzliches CSS“, um das Feld zu öffnen.
Dort kannst du CSS-Code eingeben und mit der Live-Vorschau arbeiten, um die Auswirkungen deiner Änderungen auf deine Website zu sehen. Sobald du mit den Änderungen zufrieden bist, klicke auf „Veröffentlichen“, um sie auf deiner Website anzuwenden.
Beachte jedoch, dass Änderungen, die du im „Zusätzliches CSS“-Feld vornimmst, nur auf deinem aktuellen WordPress-Theme angewendet werden und nicht auf andere Themes oder Plugins. Wenn du das Aussehen deiner Website gründlicher anpassen möchtest, ist es immer empfehlenswert, einen Kind-Theme zu erstellen und die CSS-Änderungen direkt in der Style.css-Datei des Themes vorzunehmen, um sicherzustellen, dass sie auch nach einem Theme-Update erhalten bleiben.