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