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.
x
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.
In this article
Displaying a Text Block Shortcode
To add the text block shortcode to a page:
1
Add or edit an existing page.
2
In the Visual Composer section, click on the + button.
3
In the Add Element pop-up screen, search for Text Block and click on it to be added to the page.
4
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
| Setting | Description |
|---|---|
| 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. |
5
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.
1
From the shortcode settings, click on the Design Options tab.
| Setting | Description |
|---|---|
| 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. |
2
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:
1
Create a new page and add Font Icons shortcode.
2
Add an icon and set the settings to your needs.
3
Switch to Classic editor (text mode) and copy code portion of the icon.
4
Paste the code into the Text block which you want to use.
5
Save the changes and update the page.
You’ll get an icon in the Text block on frontend.
