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-
%20(1).png?alt=media&token=8429511f-0e21-48a2-9575-0f603b1b5caa)
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.
%20(1).png?alt=media&token=0009b023-a236-4ce7-9bdb-7be8433d8d7c)
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.
%20(1).png?alt=media&token=f1d12a5e-0574-4763-9477-03924b154ba7)
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.
%20(1).png?alt=media&token=1b0f3c74-85cb-4510-9784-583f6defc24f)
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.
%20(1).png?alt=media&token=6b53ebb9-afe3-4002-8e1a-b27e78cbbae3)
Spacing
The spacing tab offers options to customize the top, bottom, left, and right responsive padding options for the block and text.
%20(1).png?alt=media&token=445a601a-b6eb-4fa5-b151-e02a07419438)
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.
