Letar du efter ett sätt att customize blockquotes-stil i WordPress teman?
Citat är ofta den mest minnesvärda delen av din artikel. De är också den mest delade delen av ett blogginlägg eller en page. Det är därför tidningar och webbplatser för vanliga medier customize sin blockquote-stil för att få den att sticka ut.
I den här artikeln visar vi dig hur du enkelt customize blockquotes-stil i WordPress teman.
Varför använda och customize Blockquotes Styling i WordPress?
Genom att använda blockcitat i ditt content kan du förbättra upplevelsen för användarna på din website i WordPress. Du kan använda dem för att få en vald section av text att sticka ut från resten av innehållet och fånga dina läsares uppmärksamhet.
You can for example use blockquotes for quotations from authors and influencers, citations from publications, testimonials from your customers, or highlight valuable information to your WordPress blog visitors.
En annan fördel med att använda blockcitat är att de kan öka det sociala engagemanget. Att allow användare att dela ett citat på Twitter eller Facebook kan hjälpa you att få fler följare och förbättra ditt varumärkes synlighet i sociala medier.
Som standard erbjuder WordPress ett Quote-block i content editor. För att add to det är det bara att heada till WordPress Editor och infoga Quote-blocket där du vill ha det i innehållet.
Standard citat block erbjuder dock inte många alternativ för customize. Du kan bara ändra storleken på texten och välja bland standardstilarna i WordPress.
Med detta sagt, låt oss ta en titt på hur du kan customize blockquotes-stilen i WordPress teman. Vi kommer att visa dig hur du ändrar stilen på blockquotes med hjälp av ett WordPress plugin och även med hjälp av custom CSS:
Metod 1: Customize Blockquotes Style med hjälp av ett plugin
Ett enkelt sätt att customize blockquotes på din WordPress website är att använda ett plugin som gillar Spectra – WordPress Gutenberg Blocks. Det är ett gratis plugin för WordPress som add to ytterligare block i WordPress content editor, inklusive anpassningsbara blockquotes.
För mer information kan du kontrollera vår detaljerade Spectra review.
Först måste du installera och aktivera Spectra – WordPress Gutenberg Blocks plugin. För mer detaljer, vänligen se vår Step-by-Step guide om hur du installerar ett WordPress plugin.
Efter aktivering, besök Spectra ” Blocks page från WordPress admin sidebar.
Here, you will see that the plugin has activated all the additional blocks, including the Blockquote block by standard.
Härifrån kan du deactivate alla onödiga block genom att toggle omkopplaren bredvid dessa alternativ.
Efter det, öppna en page eller post som du gillar i block editor.
Klicka sedan på knappen ”+” i det övre vänstra hörnet av vyn för att add to Block quote blocket var som helst i ditt content.
Efter det kan du enter texten i Blockquote area.
När du har gjort det kan du konfigurera Blockquote-layouten från panelen till höger.
Härifrån kan du välja alternativet ”Border” för en enkel layout och alternativet ”Quotation” om du vill add to citattecken, select textjustering med mera.
You can also add an author image to further style your Blockquote block.
Gå sedan till tabben ”Styling” i panelen Block för att ändra storleken på ikonen för citatet, storleken på bakgrunden och mycket mer.
You can also change the quote color, typography, author color, and spacing of your block from this tabs.
Klicka slutligen på knappen ”Publicera” eller ”Update” högst upp för att store dina settings.
Nu kan du besöka din WordPress blogg för att view Blockquote blocket i action.
Metod 2: Lägg till Custom CSS för att Customize Blockquotes Style med WPCode
Om du inte vill använda ett plugin för WordPress kan du lägga till custom CSS som ett annat sätt att customize your blockquote.
Det enklaste sättet att lägga till customize CSS-kod på din website är WPCode plugin, som är det bästa code snippets plugin på marknaden.
Först måste du installera och aktivera WPCode plugin. För detaljerade instruktioner kan du läsa vår guide för nybörjare om hur du installerar ett plugin för WordPress.
Note: WPCode har också en gratis version. Du behöver dock premiumpaketet för pluginet för att låsa upp alternativet ”CSS Snippet”.
Efter aktivering, besök Code Snippets ” + Add Snippet page från WordPress admin sidebar.
Klicka sedan på knappen ”Use Snippet” under alternativet ”Add Your Custom Code (New Snippet)”.
Detta tar dig till sidan ”Create Custom Snippet”, där du kan börja med att skriva ett namn för ditt code snippet.
Därefter väljer du ’CSS Snippet’ som code type från dropdown-menyn i det högra hörnet av vyn.
Följaktligen kan du enter någon av följande custom CSS code snippets i ”Code Preview” boxen för att ändra utseendet och stilen på blockcitatet.
Tänk på att dessa settings kommer att ändra utseendet på standardblocket ”Quote” i WordPress.
Här är några blockquote-stilar som du kan använda på din website.
1. Klassisk CSS blockcitat
Vanligtvis använder folk CSS background-image för att add to stora citattecken i blockquotes. I det här exemplet har vi använt CSS för att add to stora citationstecken.
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. Klassisk blockcitat med image
I det här exemplet har vi använt en bakgrundsbild för citattecken.
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. Enkel blockcitat
I det här exemplet har vi add to en bakgrundsfärg och en streckad vänsterkant i stället för blockquotes. Lek gärna gratis med färgerna.
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. Vit, blå och orange blockcitat
Blockquotes kan göras så att de sticker ut, och de kan vara precis så färgglada som you vill att de ska vara.
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. Använda Google Web Fonts för blockcitat i CSS
I detta exempel på CSS för blockquote har vi använt fonten Droid Serif från Googles bibliotek med webbtypsnitt.
Du kan använda vilket customize font du vill. Ersätt bara fonten i koden med den typsnittsfamilj du vill använda.
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. Runda hörnet Blockcitat
I det här exemplet har vi en blockquote med rundade hörn, och vi har använt Drop Shadow för kanter.
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. Använda Gradient som bakgrund för Blockquote
I detta exempel på CSS-blockcitat har vi använt CSS-gradient för att förbättra bakgrunden till ett blockcitat.
CSS-gradienter är knepiga på grund av kompatibilitet mellan webbläsare. Vi rekommenderar att du använder en CSS-gradient generator, gillar 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. Blockcitat med bakgrundsmönster
I det här exemplet har vi använt en bakgrundsbild som mönster för blockquote.
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";
}
Note: Du måste ersätta URL:en för bakgrundsbilden i CSS-koden med URL:en för den image som du har uploadat till din website i WordPress.
9. Använda flera images i Blockquote-bakgrund
Du kan använda flera images i blockquotes bakgrund med hjälp av CSS. Vi har till exempel använt blockquote :before ett pseudoelement för att add to en annan bakgrundsbild till blockquoten.
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";
}
Note: Du måste ersätta URL:erna för bakgrundsbilderna i CSS-koden med de images som du har uploadat till din website.
Add Code och save ditt snippet
När du har valt en blockquote-stil och lagt till dess CSS-kod i boxen ”Code Preview” rullar du ner till sectionen ”Insertion”.
Härifrån väljer du läget ”Auto Insert” så att koden automatiskt ändrar Quote-blockets appearance vid aktivering.
Slutligen rullar du tillbaka högst upp på sidan för att toggla omkopplaren ”Inaktiverad” till ”Aktiv”.
Klicka sedan på knappen ”Save Snippet” för att spara dina Settings.
Du kan nu insert ett Quote-block i en WordPress page eller post.
Sedan kan du besöka din WordPress site för att viewa ditt stiliserade Quote block.
Bonus: Display Random Quotes i sidebaren i WordPress
Om du vill kan du också displayed citat från nöjda customers i din WordPress sidebar. Detta motiverar användarna att utforska din site, och det kan sluta med att de gör ett köp eller anmäler sig till ditt nyhetsbrev.
För att visa slumpmässiga citat måste du installera och aktivera pluginet Citat och tips. För detaljer, se vår guide för nybörjare om hur du installerar ett plugin för WordPress.
Efter aktivering, besök Quotes ” Add New page där du kan skriva in den offert som kunden lämnat i textredigeraren. Därefter klickar du på knappen ”Publicera”.
När du har gjort det, head över till Quotes ” Settings page från WordPress dashboard och kopiera shortcode i ”Quotes and Tips” section.
Du kan sedan klistra in denna shortcode i sidebar eller något widgetar area som du gillar.
När du gör det kommer besökarna nu att se slumpmässiga citat i din WordPress sidebar av customers.
Detaljerade instruktioner hittar du i vår tutorial om hur du visar slumpmässiga citat i sidebaren i WordPress.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du customize blockquotes-stil i WordPress teman. You can also see our guide on how to choose the best design software and the best free website hosting services services.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Syams Qomar says
How to make it responsive?
WPBeginner Support says
It would depend on your theme but the blockquotes should be responsive by default.
Administratör
JULIE says
Hi
This is great, but how do you make it mobile responsive?
thanks
Julie
WPBeginner Support says
The quotes should be relatively responsive without any changes
Administratör
Sachin Nayi says
is there any way to add social media share button at each blockquote?
WPBeginner Support says
Unless I hear otherwise, our previous plugin we recommended for that is no longer available and we have not found an alternative.
Administratör
Rubnawaz Quraishi says
Can we use blockquotes with author image?
Vishwas says
Thanks a ton, man! You’re a saviour.
Aakash Waghmare says
Very thank’s Sir. You are always give me a right information. Thanks a lot Sir.
Per Thomsen says
Fantastic article, thanks for sharing.
I’ve been trying to use the classic CSS style but i can’t seem to get the ” to come up at the start of the quote. Would you have any suggestions for what it might be?
Thanks
David Riewe says
Makes sense but does not work with the tesseract theme.
Catherine says
Hi,
I love this. I used example #5, it looks great on desktop but cuts off on mobile. Any suggestions?
steve says
The problem that I have is:
I had a list of links (URLs) on a page, that weren’t displayed as links (were not clickable), but after an WP update, a lot of them, gut not all, are suddenly displayed as blockquotes (so they are clickable). As I don’t want to have clickable links on that page – how can I reverse this effect?
WPBeginner Support says
Since WordPress 4.4, WordPress started automatically embedding URLs from other WordPress sites. Here is how to turn off post oEmbed feature on your site.
Administratör
Barb Keck says
How do you add a closing quote?
Giampaolo says
Thank’s very helpful.
Sameer Panda says
Very helpful. I used the left border one. Thanks for sharing.
Chuka says
These blockquote styles are not responsive, works perfectly on desktop but they get cut off on mobile, any idea on what to do to make it responsive?
Sameer Panda says
Hey CHUKA, it’s working perfect on mobile too.
Helmut Schütz says
I used the Round Corner Blockquote, but only lines 1 and 2 to 8, to put it into my Leeway Child theme – and it works on all devices responsively. You merely must omit line 2 with the absolute width!
But can anyone help me to make it possible to adjust the width of the box according to the width of the text? Sometimes I quote poems with only some words in one line, and if I center them, there is too much place around them on the PC monitor. But I don’t want to insert absolut width-value because normally I want to habe the blockquote full width from left to right.
Best regards, Helmut
Kelli says
This is really helpful!
My only question is how can I get rid of the ”” at the beginning of the quote? I plugged in the code for #5 and it looks great, but everytime I type something inside it I am stuck with a quotation mark at the beginning.
Leah says
A million blessing for a thousand ages to you and yours. (Seriously, this post was THAT helpful!)
Thanks for making it simple, easy to understand and implement.
Carolina says
This is great however it is not working for me at all – where am I supposed to put the codes?
Prabin Parajuli says
Inside your child theme’s style.css
Jessica says
#8 does exactly what I need it to do…except it repeats the image if my quote gets too long. Is there a way to turn off the repeat? I’ve already tried putting ’background-repeat: no repeat;’ right under the background url, but to no avail.
Thank you so much! I’ve bookmarked your site and can tell it’s going to be SO helpful
Scarlet says
With #4, if I wanted to add quotation marks to that, how would I go about doing it? And if I wanted the box to have rounded edges instead of square, how would I go about doing that as well?
Akash KB says
Is it possible to use 2 types of blockquotes on a single blog?
gWorldz says
Yes, you could use more than 1 style for your blockquotes by adding css classes to your blockquotes using the html editor.
Example:
<blockquote class=”my-style-1″>QUOTE</blockquote>
<blockquote class=”my-style-2″>QUOTE</blockquote>
Then in the css above (or your own) add .my-style-1 to one and .my-style-2 to another right behind blockquote (no space) in the css.
Example:
blockquote.my-style-1 { /*Properties: Values;*/ }
blockquote.my-style-1:before{ /*Properties: Values;*/ }blockquote.my-style-1 cite:before { /*Properties: Values;*/ }
blockquote.my-style-2 { /*Properties: Values;*/ }
blockquote.my-style-2:before{ /*Properties: Values;*/ }blockquote.my-style-2 cite:before { /*Properties: Values;*/ }
Eleanore says
How exactly do you use these codes to make a block quote? Where do you insert your text inwhich you wish to be in a block? Does this only work for posts or can you use it in a page in an article on a page?
Anant Vijay Soni says
You can add in your Website CSS.
Mostly theme structure:
Go to admin > Appearance > Customize > Additional CSS
Chris says
I tried the first example in the live css editor in Headway 3.6. It showed the text 201C instead of the quotation marks. It was also centered over the entire quote instead of the top left. And there was a light gray left border that I couldn’t get rid of.
Adrian Robertson says
Time and again when looking for how to implement something, invariably I end up at this site (and must admit to looking for Syed’s picture in the Google results, so I know I am getting to the right place) .
Your tutorials are fantastic.
Abdul Samad says
Thanks Man For This Article
Preston Ehrler says
I don’t have the coding capability to execute these. Is there a plugin that will do the same job?
Leonard Grossman says
Question: blockquote in WP defaults to italics Is there a way to turn that off?
Thanks,
Len
Editorial Staff says
It doesn’t default to italics. It is probably a styling thing in your theme.
Administratör
Leonard Grossman says
Look at all the examples in this article. In each the text within the blockquotes appears in italics. That is what I am taking about. How can I use blockquotes without the resulting italics.
Thanks.
Len
Kanan says
It is not working in thesis 2.0? any suggestion?
Editorial Staff says
See what thesis is using for their blockquote styles.
Administratör
Khürt Williams says
“This will add a little HTML in your post that we can use to customize the styling. Note: we are using the text mode in WordPress post editor. Below is an example of the HTML that you should see.”
Your statement seems to indicate that the b- quote button add the <cite> tag. It does not.
Khürt Williams says
”This will add a little HTML in your post that we can use to customize the styling. Note: we are using the text mode in WordPress post editor. Below is an example of the HTML that you should see.”
Your statement seems to indicate that the b- quote button add the tag. It does not.
Ambika Choudhary Mahajan says
Absolutely brilliant!!
Thanks a ton for sharing. I’d been wanting to do something like that with the blockquotes on my blog. But didnt know how to go about it!
Now, I do.
Jack says
Thanks so much for this.
Akhil Gupta says
Thanks for this beautiful Article, now i have many ideas to customize blockquotes.
Sue Surdam says
Great collection of block quote effects! With so many plugins around, it is easy to forget what a few lines of css can do to create magic.
Zimbrul says
Absolutely agree with your statement. And doing so you can learn by doing it.
Thanks WP Beginner for the article, it goes into my Instapaper
Reid Peterson says
Many thanks for these tips! I mixed tips 4 and 6 and had a really nice result!
Andre Costa says
Thank you for these tips. I have used blockquotes in the past, and it is wonderful to find out about the different possibilities.