Anpassen des Blockquotes-Stils in WordPress-Themes

Suchen Sie nach einer Möglichkeit, den Stil von Blockquotes in WordPress-Themes anzupassen?

Zitate sind oft der einprägsamste Teil eines Artikels. Sie sind auch der meistgeteilte Teil eines Blogbeitrags oder einer Seite. Aus diesem Grund passen Zeitungen und Mainstream-Medien-Websites ihren Blockquote-Stil an, um ihn hervorzuheben.

In diesem Artikel zeigen wir Ihnen, wie Sie den Stil von Blockquotes in WordPress-Themes leicht anpassen können.

Warum sollten Sie den Blockquotes-Stil in WordPress verwenden und anpassen?

Die Verwendung von Blockzitaten in Ihren Inhalten kann das Benutzererlebnis auf Ihrer WordPress-Website verbessern. Sie können sie verwenden, um einen ausgewählten Textabschnitt vom Rest des Inhalts abzuheben und die Aufmerksamkeit Ihrer Leser zu erregen.

So können Sie beispielsweise Blockzitate für Zitate von Autoren und Meinungsbildnern, Zitate aus Veröffentlichungen, Erfahrungsberichte Ihrer Kunden oder zur Hervorhebung wertvoller Informationen für die Besucher Ihres WordPress-Blogs verwenden.

Ein weiterer Vorteil der Verwendung von Blockzitaten ist, dass sie das soziale Engagement erhöhen können. Wenn Sie Nutzern erlauben, ein Zitat auf Twitter oder Facebook zu teilen, können Sie mehr Follower gewinnen und die Sichtbarkeit Ihrer Marke in den sozialen Medien verbessern.

WordPress bietet standardmäßig einen Zitat-Block im Inhaltseditor. Um ihn hinzuzufügen, gehen Sie einfach zum WordPress-Editor und fügen den Zitat-Block an der gewünschten Stelle im Inhalt ein.

Der Standard-Zitatblock bietet jedoch nicht viele Optionen für die Anpassung. Sie können nur die Größe des Textes ändern und aus den Standardstilen in WordPress wählen.

Schauen wir uns also an, wie Sie den Stil von Blockquotes in WordPress-Themes anpassen können. Wir zeigen Ihnen, wie Sie den Stil von Blockquotes mit einem WordPress-Plugin und auch mit benutzerdefiniertem CSS ändern können:

Methode 1: Anpassen des Stils von Blockquotes mit einem Plugin

Eine einfache Möglichkeit, die Blockquotes auf Ihrer WordPress-Website anzupassen, ist die Verwendung eines Plugins wie Spectra – WordPress Gutenberg Blocks. Es ist ein kostenloses WordPress-Plugin, das zusätzliche Blöcke im WordPress-Inhaltseditor hinzufügt, einschließlich anpassbarer Blockzitate.

Zunächst müssen Sie das Plugin Spectra – WordPress Gutenberg Blocks installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Besuchen Sie nach der Aktivierung die Seite Spectra “ Blocks in der WordPress-Admin-Seitenleiste.

Hier sehen Sie, dass das Plugin alle zusätzlichen Blöcke, einschließlich des Blockquote-Blocks, standardmäßig aktiviert hat.

Von hier aus können Sie alle unnötigen Blöcke deaktivieren, indem Sie den Schalter neben diesen Optionen umlegen.

Danach öffnen Sie eine Seite oder einen Beitrag Ihrer Wahl im Block-Editor.

Klicken Sie anschließend auf die Schaltfläche „+“ in der oberen linken Ecke des Bildschirms, um den Blockquote-Block an einer beliebigen Stelle in Ihrem Inhalt einzufügen.

Danach können Sie den Text in den Blockquote-Bereich eingeben.

Danach können Sie das Blockquote-Layout über das Bedienfeld auf der rechten Seite konfigurieren.

Hier können Sie die Option „Rahmen“ für ein einfaches Layout und die Option „Zitat“ wählen, wenn Sie Anführungszeichen hinzufügen, die Textausrichtung auswählen und vieles mehr möchten.

Sie können auch ein Autorenbild hinzufügen, um Ihren Blockquote-Block weiter zu gestalten.

Wechseln Sie dann zur Registerkarte „Stil“ im Blockbedienfeld, um die Größe des Zitatensymbols, die Hintergrundgröße und mehr zu ändern.

Auf dieser Registerkarte können Sie auch die Farbe des Zitats, die Typografie, die Farbe des Autors und die Abstände Ihres Blocks ändern.

Klicken Sie schließlich oben auf die Schaltfläche „Veröffentlichen“ oder „Aktualisieren“, um Ihre Einstellungen zu speichern.

Jetzt können Sie Ihren WordPress-Blog besuchen, um den Blockquote-Block in Aktion zu sehen.

Methode 2: Hinzufügen von benutzerdefiniertem CSS zum Anpassen des Stils von Blockquotes mit WPCode

Wenn Sie kein WordPress-Plugin verwenden möchten, ist das Hinzufügen von benutzerdefiniertem CSS eine weitere Möglichkeit, Ihre Blockquote anzupassen.

Die einfachste Möglichkeit, benutzerdefinierten CSS-Code zu Ihrer Website hinzuzufügen, ist das WPCode-Plugin, das beste Plugin für Code-Snippets auf dem Markt.

Zunächst müssen Sie das WPCode-Plugin installieren und aktivieren. Detaillierte Anweisungen finden Sie in unserem Leitfaden für Einsteiger zur Installation eines WordPress-Plugins.

Besuchen Sie nach der Aktivierung die Seite Code Snippets “ + Add Snippet in der WordPress-Admin-Seitenleiste.

Klicken Sie anschließend auf die Schaltfläche „Snippet verwenden“ unter der Option „Eigenen Code hinzufügen (neues Snippet)“.

Dies führt Sie zur Seite „Benutzerdefiniertes Snippet erstellen“, wo Sie zunächst einen Namen für Ihr Code-Snippet eingeben können.

Wählen Sie dann aus dem Dropdown-Menü in der rechten Ecke des Bildschirms „CSS Snippet“ als Codetyp aus.

Danach können Sie einen der folgenden benutzerdefinierten CSS-Codeausschnitte in das Feld „Codevorschau“ eingeben, um das Aussehen und den Stil der Blockquote zu ändern.

Beachten Sie, dass diese Einstellungen das Erscheinungsbild des standardmäßigen „Zitat“-Blocks in WordPress verändern werden.

Hier sind einige Blockquote-Stile, die Sie auf Ihrer Website verwenden können.

1. Klassische CSS-Blockquote

Normalerweise verwendet man CSS-Hintergrundbilder, um große Anführungszeichen in Blockquotes einzufügen. In diesem Beispiel haben wir CSS verwendet, um große Anführungszeichen hinzuzufügen.

blockquote {
	font-family: Georgia, serif;
	font-size: 18px;
	font-style: italic;
	width: 450px;
	margin: 0.25em 0;
	padding: 0.25em 40px;
	line-height: 1.45;
	position: relative;
	color: #383838;
	background:#ececec;
}

blockquote:before {
	display: block;
	content: "\201C";
	font-size: 80px;
	position: absolute;
	left: -10px;
	top: -10px;
	color: #7a7a7a;
}

blockquote cite {
	color: #999999;
	font-size: 14px;
	display: block;
	margin-top: 5px;
}

blockquote cite:before {
	content: "\2014 \2009";
}

2. Klassisches Blockquote mit Bild

In diesem Beispiel haben wir ein Hintergrundbild für Anführungszeichen verwendet.

blockquote {
	font: 16px italic Georgia, serif;
	width:450px;
	padding-left: 70px;
	padding-top: 18px;
	padding-bottom: 18px;
	padding-right: 10px;
	background-color: #dadada;
	border-top: 1px solid #ccc;
	border-bottom: 3px solid #ccc;
	margin: 5px;
	background-image: url(http://example.com/wp-content/themes/your-theme/images/gray-georgia.png);
	background-position: middle left;
	background-repeat: no-repeat;
	text-indent: 23px;
} 

blockquote cite {
	color: #a1a1a1;
	font-size: 14px;
	display: block;
	margin-top: 5px;
}

blockquote cite:before {
	content: "\2014 \2009";
}

3. Einfaches Blockquote

In diesem Beispiel haben wir eine Hintergrundfarbe und einen gestrichelten linken Rand anstelle von Blockquotes hinzugefügt. Sie können gerne mit den Farben spielen.

blockquote {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
width: 500px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #383838;
border-left:3px dashed #c1c1c1;
background:#eee;
}

blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}

blockquote cite:before {
content: "\2014 \2009";
}

4. Weiß, Blau und Orange Blockquote

Blockquotes können so gestaltet werden, dass sie hervorstechen, und sie können so bunt sein, wie Sie es wünschen.

blockquote {
font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
width: 450px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #FFF;
border-left:5px solid #FF7F00;
background:#4b8baf;
}

blockquote cite {
color: #efefef;
font-size: 14px;
display: block;
margin-top: 5px;
}

blockquote cite:before {
content: "\2014 \2009";
}

5. Verwendung von Google Web Fonts für Blockquotes in CSS

In diesem CSS-Beispiel für blockquote haben wir die Schriftart Droid Serif aus der Google Webfonts-Bibliothek verwendet.

Sie können jede beliebige benutzerdefinierte Schriftart verwenden, die Sie wünschen. Ersetzen Sie einfach die Schriftart im Code durch die gewünschte Schriftfamilie.

blockquote {
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400italic);
font-family: 'Droid Serif', serif;
font-size:16px;
font-style:italic;
width:450px;
background-color:#fbf6f0;
border-left:3px dashed #d5bc8c;
border-right:3px dashed #d5bc8c;
text-align:center;
}
blockquote cite {
color: #a1a1a1;
font-size: 14px;
display: block;
margin-top: 5px;
}

blockquote cite:before {
content: "\2014 \2009";
}

6. Runde Ecke Blockquote

In diesem Beispiel haben wir ein Blockquote mit abgerundeten Ecken, und wir haben Schlagschatten für Ränder verwendet.

blockquote {
width: 450px;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote cite:before {
content: "\2014 \2009";
}

7. Farbverlauf als Hintergrund für Blockquote verwenden

In diesem CSS-Blockquote-Beispiel haben wir CSS-Farbverläufe verwendet, um den Hintergrund eines Blockquote zu verbessern.

CSS-Farbverläufe sind wegen der browserübergreifenden Kompatibilität problematisch. Wir empfehlen die Verwendung eines CSS-Gradienten-Generators, wie CSS Gradient.

blockquote {
width: 450px;
color:#FFF;
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote cite:before {
content: "\2014 \2009";
}

8. Blockquote mit Hintergrundmuster

In diesem Beispiel haben wir ein Hintergrundbild als Muster für Blockquote verwendet.

blockquote {
width: 450px;
background-image:url('http://example.com/wp-content/themes/your-theme/images/lined_paper.png');
border: 1px solid #ccc;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote cite:before {
content: "\2014 \2009";
}

Hinweis: Sie müssen die URL des Hintergrundbildes im CSS-Code durch die URL des Bildes ersetzen, das Sie auf Ihre WordPress-Website hochgeladen haben.

9. Mehrere Bilder im Blockquote-Hintergrund verwenden

Sie können mit CSS mehrere Bilder für den Hintergrund von blockquote verwenden. Wir haben zum Beispiel blockquote:before als Pseudo-Element verwendet, um dem blockquote ein weiteres Hintergrundbild hinzuzufügen.

blockquote {
width: 450px;
background-image:url('http://example.com/wp-content/themes/your-theme/images/lined_paper.png');
border: 1px solid #ccc;
box-shadow: 1px 1px 1px #ccc;
font-style: italic;
}
blockquote:before{
position:absolute;
margin-top:-20px;
margin-left:-20px;
content:url('http://example.com/wp-content/themes/your-theme/images/pin.png');
}
blockquote cite:before {
content: "\2014 \2009";
}

Hinweis: Sie müssen die URLs der Hintergrundbilder im CSS-Code durch die Bilder ersetzen, die Sie auf Ihre Website hochgeladen haben.

Code hinzufügen und Snippet speichern

Sobald Sie einen Blockquote-Stil ausgewählt und den CSS-Code in das Feld „Codevorschau“ eingefügt haben, scrollen Sie nach unten zum Abschnitt „Einfügen“.

Wählen Sie hier den Modus „Automatisch einfügen“, damit der Code bei Aktivierung automatisch das Aussehen des Zitatblocks ändert.

Blättern Sie schließlich zurück zum Anfang der Seite, um den Schalter „Inaktiv“ auf „Aktiv“ umzuschalten.

Klicken Sie anschließend auf die Schaltfläche „Snippet speichern“, um Ihre Einstellungen zu speichern.

Sie können jetzt einen Zitatblock in eine WordPress-Seite oder einen Beitrag einfügen.

Anschließend können Sie Ihre WordPress-Website besuchen, um Ihren stilisierten Zitatblock anzuzeigen.

Bonus: Anzeige zufälliger Zitate in der WordPress-Seitenleiste

Wenn Sie möchten, können Sie auch Zitate von zufriedenen Kunden in Ihrer WordPress-Seitenleiste anzeigen. Dies motiviert die Nutzer, Ihre Website zu erkunden, und sie können schließlich einen Kauf tätigen oder sich für Ihren Newsletter anmelden.

Um zufällige Zitate anzuzeigen, müssen Sie das Plugin “ Quotes and Tips “ installieren und aktivieren. Weitere Informationen finden Sie in unserem Leitfaden für Anfänger zur Installation eines WordPress-Plugins.

Nach der Aktivierung besuchen Sie die Seite Angebote “ Neu hinzufügen, wo Sie das vom Kunden hinterlassene Angebot in den Texteditor eingeben können. Klicken Sie anschließend auf die Schaltfläche „Veröffentlichen“.

Sobald Sie das getan haben, gehen Sie im WordPress-Dashboard auf die Seite Zitate “ Einstellungen und kopieren Sie den Shortcode in den Abschnitt „Zitate und Tipps“.

Sie können diesen Shortcode dann in die Seitenleiste oder einen beliebigen Widget-Bereich einfügen.

Daraufhin sehen die Besucher in Ihrer WordPress-Seitenleiste zufällige Zitate von Kunden.

Eine ausführliche Anleitung finden Sie in unserem Tutorial, wie man zufällige Zitate in der WordPress-Seitenleiste anzeigt.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie man den Stil von Blockquotes in WordPress-Themes anpasst. Sehen Sie sich auch unseren Leitfaden zur Auswahl der besten Design-Software und der besten kostenlosen Website-Hosting-Dienste an.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.