A Blockquote refers to a section of text quoted from another source or text pulled from the content. BlockArt allows adding the quote on one of its blocks named Blockquote.
After you have chosen the Blockquote block, you’ll get a block editing panel on the right-hand side. It has three options, i.e., General, Style, and Advanced. These options customize the design and other elements of the block. Let’s explore one by one below:
General #
Layout #
- Style – It allows changing the style of the block with a Border or Quote.
Style #
It provides the following styling options for the Blockquote Block. These are listed below:
Properties #
- Text Alignment – It sets the alignments for the Blockquote Block. You can set the alignments as Left, Center, Right, and Justify. Moreover, you can also set the alignment position on different devices (Desktop, Tablet, and Mobile).
Layout #
Under the Layout settings, you can change the Border and Quote styles. The options are listed below:
- Style -You can choose the blockquote styles to be either border or quote. If you choose Border, the following styling options will appear:
- Type – You can set the border type as Solid, Dotted, Dashed, Double, etc. Moreover, select the border type to be None if you do not want to add any borders.
- Color – It allows you to choose the appropriate border color.
- Size – It provides the option to select the border size.
- Radius – It allows you to fix the radius value to make the round corners for the Border.
However, if you choose the Quote styling, the following options will be available.
- Quote Mark Size – It determines the size of the quote added inside the block.
Quote #
It changes the styling of the quoted text added inside the block and provides the following options:
- Typography – It allows you to control the Typography, such as font family, weight, font size, line height, and other related styling properties for the text. The options are listed below:
- Font Family – The option allows you to choose the appropriate font family for the quoted text.
- Weight – It refers to the thickness or boldness of the quoted text.
- Size – It controls the font size of the quoted text.
- Line Height – It manages the space above and below the quoted text.
- Letter Spacing – It controls the amount of space between characters in the quoted text.
- Style – Using the property, you can set the quote text to be Italic or Oblique.
- Transformation – It changes the case of the quoted text, such as lowercase, uppercase, and capitalize.
- Decoration – The styling is applied to the quoted text to make it more visually appealing. The options include underline, overline, and line through.
- Margin – It manages the spacing of the text on all four sides of the quoted text.
Author #
It styles the name of the Author appearing on the Blockquote block. Under the settings, you can find the following options:
- Alignment– It sets the alignments for the Author Name. You can set the alignments as Left, Center, or Right. Moreover, you can set the alignment position on different devices (Desktop, Tablet, and Mobile).
- Typography – It controls the author name typography options, such as Font Family, Font Size, Line Spacing, and Text Decoration.
- Margin – It manages the author’s spacing on all four sides.
Color #
- Text Color – It changes the color of the Author’s Name.
- Quote Color – It changes the color of the quote if you have chosen the style to be quoted rather than the border.
Background #
- Type – It sets the background color of the Block. You can change the visual appearance of the background by changing its color or adding an image. Moreover, you can set the different background colors on Normal and Hover Modes.
Advanced #
The Advanced section consists of four customization options for the Blockquote Block.
Spacing #
Under the spacing section, you can find the following options available:
- Block Margin – According to the site requirement, you can assign a specific margin value to the block along with units like px, em, %, and rem. Moreover, you can set different margin values for various devices (Desktop, Tablet, and Mobile).
- Block Padding – According to the site requirement, you can assign a specific padding value to the block along with units like px, em, %, and rem. Moreover, you can set different padding values for various devices (Desktop, Tablet, and Mobile).
Z-Index #
It allows you to set the priority of the Blockquote Block according to the site requirement.
Responsive Condition #
Using the option, you can enable/disable displaying the block on various screen sizes:
- Hide on Desktop – It hides the Blockquote block on the Desktop.
- Hide on Tablet – It hides the Blockquote block on the Tablet.
- Hide on Mobile – It hides the Blockquote block on the Mobile.
Advanced #
Under the option, you can set the CSS ID and Classes for this particular Blockquote block. The available options are listed below:
- CSS ID – It allows you to set specific IDs to style this particular block. Once you have set the ID, you can write the CSS Code to style the block using that particular ID.
- Additional CSS Class(es) – It allows you to add a CSS class to your block and write custom CSS to style this particular block.
After creating the separate ID and Classes, visit your CSS editor and write a style for the ID and class
