Blockquote Shortcode

Last Updated on

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

In this article


Displaying a Blockquote

To add a Blockquote shortcode to a page or post:

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

Blockquote Shortcode - visual composer screen

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

Blockquote Shortcode - add element

4
When 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

x
Note: Default WordPress editor is available for this field. So you can do the basic styling of your text. If you are not sure “How to use default WordPress editor”, please read this tutorial.
5
Click 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.

1
Quote style

Blockquote Shortcode - quote style

2
Line 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.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket