Text Block Shortcode

Updated on January 18, 2019

The text block shortcode allows you to add a text block through WPBakery Page Builder.

In this article, we’ll explain how to display a text block with the text block shortcode in the Jupiter WordPress theme.

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

Text Block Shortcode - demo


Displaying a Text Block Shortcode

To add the text block shortcode to a page:

1Add or edit an existing page.
2In the Visual Composer section, click on the + button.

Text Block Shortcode - visual composer section

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

4When the shortcode is added, a new pop-up screen called Text Block Settings open that allows you to configure the shortcode settings.

Configuring the Settings

SettingDescription

Text input Accepts HTML.
Title Displays a title above the content.
Title pattern Displays a pattern behind the title.
Text align Aligns the text.
Margin bottom Creates a margin below the content.
5Click on the Save Changes button and publish or update the page to check the result.

Configuring the Design

There are some options in the shortcode settings that let you configure the design.

1From the shortcode settings, click on the Design Options tab.

SettingDescription

CSS Box Lets you add margin, border and padding to the text block.
Border color Changes color of the border.
Border style Changes style of the border.
Border radius Sets a custom radius to the border.
Background Lets you add custom background.
Box controls If enabled, it simplifies the controls of the CSS Box.
2Click on the Save Changes button and publish or update the page to check the result.

Adding Icon into Text Block

If you want to show an icon in the Text block, you should follow these steps:

1Create a new page and add Font Icons shortcode.
2Add an icon and set the settings to your needs.

3Switch to Classic editor (text mode) and copy code portion of the icon.

4Paste the code into the Text block which you want to use.

5Save the changes and update the page.

You’ll get an icon in the Text block on frontend.

 

Did this answer your question?