How to style Blockquotes

Design help General
1

Hi!

I’d like to use large quotation marks before and after a blockquote, and I’m not sure how.

I found this post: Blockquote with webflow - #4 by vincent - General - Forum | Webflow, and it has a partial example of what I’m talking about:

I tried inserting an image of quotation marks into a paragraph block, and Webflow wouldn’t let me do that. I tried adding a png of the quotes to the background, and that sort of works for the beginning quotes, but there are no end quotes…

This is what I have right now:

772×108 6.27 KB

So, it’s pretty close, but just missing the end quotes.

If you have any other nifty blockquote designs, I’d love to see them and hear how you created them in Webflow.

Thank you!

2

Hi, the best way to do that is to actually use a text block with an actual quote mark in it. Style it so it’s as large as you want. Then put it before the block quote and set it’s position to relative and move it to where you want it to be. Post your public link if you want more detailed help.

3

I was able to get a look that I’m happy with:

876×322 34.9 KB

I ended up using a div (with the right quotation marks) inside a div (with the left quotation marks). The quotation marks are background images. (I couldn’t get the positioning right using a text block.)

Yay! :grinning:

4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.