Highlight significant parts of a post or a page with the Gutenberg Blockquote block. Maximize visibility using different quote styles.
- 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-
Under the ‘Content’ tab, you will find the Alignment & Quotation Mark settings.
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.
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.
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.
You can select a background type for the block from here. The options available are:
Opacity: You can set opacity from here for the block background.
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.
The spacing tab offers options to customize the top, bottom, left, and right responsive padding options for the block and text.
Under the Colors tab, the color option is available for Text.
Under the Typography tab, options for font family, font size, font-weight, and line-height are available for Blockquote.