Text Block Shortcode

Last Updated on

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.

Note: If you wish to add HTML code (such as forms, embed codes or iframes) use Html Raw shortcode instead of Text Block shortcode.

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

Text Block Shortcode - demo

In this article

Displaying a Text Block Shortcode

To add the text block shortcode to a page:

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

Text Block Shortcode - visual composer section

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

When 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

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.
Click 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.

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

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.
Click 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:

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

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

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

Save the changes and update the page.

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


Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket