Beautify quotes on your blog

I’m one of those designers who believes that templates aren’t evil. I think that they’re incredible building blocks that can save you time, which indirectly saves you money, and that they’re usually made by people who care far more about the subject matter than you, so they result in better quality.

I’d like to share some of my own templates with you because I want to see the web become a more beautiful place. Today’s topic is about making beautiful WordPress quotes.

For those of you who don’t know how to create a quote, it’s easy – just click the Blockquote button in the icon tray, like so:

wordpress-quote-gif

 Elegant Quote Style

Blockquote CSS - Ayn-min

To use this style, add this to the top of your CSS (tutorial):

@import url(https://fonts.googleapis.com/css?family=Lato:300italic);

And add this to the bottom of your CSS (tutorial):

blockquote {
  font-family: "Lato", sans-serif !important;
  font-weight: 300 !important;
  font-style: italic !important;
  font-size: 1.25em !important;
  font-color: #376280 !important;
  border-left: 5px solid #51CAF2 !important;
  padding: 9px 26px 9px 26px !important;
}

Strong Quote Style

Blockquote CSS - Tim-min

To use this style, add this to the top of your CSS (tutorial):

@import url(https://fonts.googleapis.com/css?family=Montserrat:700);

And add this to the bottom of your CSS (tutorial):

blockquote {
  padding: 15px 0px 15px 30px !important;
  border-radius: 10px !important;
  font-family: "Montserrat", sans-serif !important;
  border: none !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  color: #1170a9 !important;
  font-size: 1.35em !important;
  line-height: 110% !important;
}

Pinnacle Quote Style

Blockquote CSS - Paul-min

To use this style, add this to the top of your CSS (tutorial):

@import url(https://fonts.googleapis.com/css?family=Roboto:300italic);

And add this to the bottom of your CSS (tutorial):

blockquote {
  font-family: "Roboto", sans-serif !important;
  font-style: italic !important;
  color: #777777 !important;
  margin-left: 0 !important;
  border-left: 7px solid #cc0000 !important;
  padding-left: 26px !important;
  font-size: 1.2em !important;
  font-weight: 300 !important;
}

Statement Quote Style

Blockquote CSS - Elon-min

To use this style, add this to the top of your CSS (tutorial):

@import url(https://fonts.googleapis.com/css?family=Lato:700);

And add this to the bottom of your CSS (tutorial):

blockquote {
  font-family: "Lato", sans-serif !important;
  font-weight: 700 !important;
  color: #1f252b !important;
  border-left: 5px solid #21cbed !important;
  padding: 20px !important;
  background: #ededed !important;
  font-size: 1.05em !important;
}

Hello there, Divi designer!

Designing can be tough, but you can make it easier. Receive four free emails on eliminating stress, using Divi's magical powers to work smarter, raising your rates, and automating the administrative dullness in your practice so you can focus on doing what you love.

Learn More

Why is this popup so ugly?

Who knows. But you know what's not ugly? Getting tips from another Divi designer on having better clients, raising your rates, and getting more done while doing less work. Give us your email to get our five (completely free) emails! Freebies included.

Check your email for the first lesson! We're sure you'll love it.