Blockquote Shortcode

Updated on December 29, 2017

The blockquote shortcode is a great tool to show sections that are quoted from another source as well as to give highlight to a block of texts. This shortcode basically shows your text in a styled box that divides it from other paragraphs.

To see the Blockquote shortcode in action, check out the demo page.

Blockquote Shortcode - demo

Displaying a Blockquote

To add a Blockquote shortcode to a page or post:

1Add a new page or edit an existing page.
2In Visual Composer section, Click on + button.

Blockquote Shortcode - visual composer screen

3In Add Element pop-up screen, search for Blockquote and click on it to be added to the page.

Blockquote Shortcode - add element

4When the shortcode is added, a new pop-up screen called Blockquote Settings opens. It allows you to configure the shortcode settings. Add your Blockquote message.

Blockquote Shortcode - Blockquote Settings

5Click Save Changes and Publish or Update the page to check the result.

Configuring the Design

Blockquote shortcode has two main styling options that let you change the shortcode according to your needs. First one is Layout style which lets you choose Quote or Line style. The second one is Text style options for Font family and Text size.

Configuring Layout Style

This is a setting in Blockquote Settings pop-up regarding the Blockquote layout style.

1Quote style

Blockquote Shortcode - quote style

2Line style

Blockquote Shortcode - line style

Configuring Text Style

There are some settings in Blockquote Settings pop-up regarding the Blockquote text style.

Setting Description

Font Family Sets the quote font family.
Font Size Sets the quote text size.
Force Responsive Font Size Sets different quote text sizes for different devices. When you enable this, 3 option will be appear right below. (Font Size For Small Desktops, For Tablet, For Mobile)

Configuring the Style with Custom CSS

If you need to go beyond the default settings to customize the look and feel of the item’s design, you may add a custom CSS class in Extra Class Name setting to be able to add specific styling through CSS to this shortcode. To find out more information, read Adding custom CSS class to a shortcode article.

Did this answer your question?