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.
Configuration for Blockquote
Blockquote is basically a indented content from original text. Find a good quote, select from styles we provide and you are 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 widgets panel.
After placing the widget you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.
Select your preferred layout for blockquote here. We provide two different styles, a simple and a modern one.
Text space to add author name of the original quote to display out.
Kind of main course, A text area to add the quote text.
Align quote content text in left, centre, right or justified manner from here.
The Style tab is used for customising the appearance of all the Blockquote get components. All these styling options include customising the fonts, colors, background, margins and padding which are common across all the widgets. So, we have created a single detailed article explaining these Styling Options.
View The Style Tab Article
Assign size, weight, spacing and much more to fonts.
A color picker to assign suitable color to the text.
A color picker to assign suitable color to the author text.
Quote Color (Style-2)
A color picker to assign suitable color to the quote icon.
Put-in some inner space to an element.
Put-in some outer space to an element.
Draw a border around the element and give width and color to it.
Set the radius curve of the element’s corner.
Apply suitable background like color/ gradient to an element.
Give Box/Text/Drop shadow effect and color to an element.