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 inputAccepts HTML.
TitleDisplays a title above the content.
Title patternDisplays a pattern behind the title.
Text alignAligns the text.
Margin bottomCreates 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 BoxLets you add margin, border and padding to the text block.
Border colorChanges color of the border.
Border styleChanges style of the border.
Border radiusSets a custom radius to the border.
BackgroundLets you add custom background.
Box controlsIf 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?