Blockquote

Blockquote

Blockquote is used to indicate the quotation of a large section of text from another source.

Suppose you are reading some amazing book and you find some amazing quote by elon musk. You want to share it, but people would have to know that it is said/ written by elon musk. Use blockquote and state it out straight in your writing.

Pro tip
Get credit for just finding some good quote which is originally written by someone else. And you can definitely use it without any hesitation.

How to use the Blockquote block of The Plus Addons For Gutenberg

The Blockquote block comes with multiple functions. Let’s understand how to use this block in the tutorial below.

Table Of Contents

Setting up

Gutenberg gives multiple ways to add Blockquote into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Blockquote after “/” sign, eg.“/Blockquote”, in the content area. Gutenberg also provides drag & drop after opening the list of blocks panel.

After placing the block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout

Content

Style

Select your preferred layout for blockquote here. We provide two different styles, a simple and a modern one.

Author (Style-2)

Text space to add the author name of the original quote to display out.

Quote Content

Kind of the main course, A text area to add the quoted text.

Alignment

Align quote content text in left, center, right or justified manner from here.

2. Style

The Style tab is used for customizing the appearance of all the Blockquote get components. All these styling options include customizing the fonts, colors, background, margins and padding which are common across all the blocks. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

Content

Typography

Assign a size, weight, spacing and much more to fonts.

Text Color

A color picker to assign a suitable color to the text.

Author Color (Style-2)

A color picker to assign a suitable color to the author’s text.

Quote Color (Style-2)

A color picker to assign a suitable color to the quote icon.

Padding

Put in some inner space to an element.

Margin

Put in some outer space to an element.

Background

Border

Draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Box Background

Apply suitable background like color/ gradient to an element.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

3. Advanced

Advanced Tab Options are common across all the blocks. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.