Highlight significant parts of a post or a page with the Gutenberg Blockquote block. Maximize visibility using different quote styles.
How To Add The Blockquote Block #
- 1.Open a page or a post and click on the plus icon to add a new block and look for the Blockquote or you can search for it if it doesn’t pop up quickly for you.
- 2.By default, you’ll get the below design-
How To Configure The Blockquote Block #
Under the ‘Content’ tab, you will find the Alignment & Quotation Mark settings.
General #
Under the General tab, you’ll see the option to set your Blockquote alignment. You can choose to keep it as left, center or right-aligned.
Quotation Mark #
Hide or Display Quotation Mark of the block.
Choose an icon for a quotation mark from a number of options.
Size – Choose a size for the quote.
Quote Color – Select a color for the quote.
Horizontal Position: Increase or decrease the space to control quotation marks horizontally.
Vertical Position: Increase or decrease the space to control quotation marks vertically.
Opacity – Set the color opacity from here for the quotation mark of the block.
How To Style The Blockquote Block #
Switch to the ‘Style’ tab to style all the elements of Blockquote. You can add and customize ‘Background’, ‘Border’, ‘Spacing’ & ‘Color & Typography’ as per your preference.
Background #
You can select a background type for the block from here. The options available are:
- 1.Color
- 2.Gradient
- 3.Image
- 4.Video
Opacity: You can set opacity from here for the block background.
Border #
Border Style – You can select the style of the border as solid, dotted, rigged, double, dashed, etc. You can also choose to hide it
Border Width – Set a width for the border from here.
Border Color – Set color to the border from here.
Border Radius – You can give border-radius to the box from here.
Box Shadow – You can give box-shadow to the block with a number of options available for customization such as color, blur, spread, position, etc.
Spacing #
The spacing tab offers options to customize the top, bottom, left, and right responsive padding options for the block and text.
Color Settings #
Under the Colors tab, the color option is available for Text.
Typography
Under the Typography tab, options for font family, font size, font–weight, and line-height are available for Blockquote.