Info Box For WPBakery Page Builder

Introduction

The Info Box element in WPBakery Page Builder (previously known as Visual Composer) is a versatile and powerful tool that allows you to display information in a compact and stylish manner on your WordPress website. With its many settings and customization options, you can tailor the info box to fit your website's design and create a unique visual representation of information. In this tutorial, we'll dive into the world of WPBakery Page Builder and learn how to use the Info Box element like a pro.

Step 1: Preparing the Element

To add the Info Box element to your WordPress website, follow these steps:

1. Log in to your WordPress dashboard and navigate to the WPBakery Page Builder backend.
2. Click on the "Elements" tab and scroll down to the "Columns" section.
3. Find the "Info Box" element and click on the "+" symbol to add it to your page.
4. After adding the element, a settings modal will appear. In this modal, we'll configure the settings for our Info Box.

Step 2: Configuring the Title and Text

In this step, we'll configure the title, text, and other settings for the Info Box.

1. In the settings modal, select the "Title" option and enter the desired text for your Info Box. This could be a heading, a tagline, or any other text you want to display.
2. Below the title field, select the "Text" option and enter the desired text. This could be a description, instructions, or any other information you want to share with your visitors.
3. Use the toolbar above the text field to format the text as needed. You can use font styles, sizes, and colors to match your website's design.
4. Click on the "Insert" button to save your changes and return to the main page builder interface.

Step 3: Configuring the Icon

The icon section allows you to add a custom icon or avatar to your Info Box. This adds a visual element to the box and makes it stand out.

1. In the settings modal, select the "Icon" option.
2. Choose from a wide range of icons from Font Awesome and Material Design icons.
3. You can also upload your own custom icon by clicking on the "Upload Custom Icon" button.
4. Click on the "Insert" button to save your changes.

Step 4: Configuring the Visual Settings

In this step, we'll customize the visual settings of the Info Box.

1. In the settings modal, navigate to the "Visual Settings" section.
2. Select the desired color for the box and its background. You can choose from a range of colors or upload a custom color.
3. Set the padding, margin, and border for the box by adjusting the corresponding settings.
4. If you want to add a custom hover effect, select the "Add Custom Hover Effect" option and adjust the settings.

Step 5: Customizing the Layout

In this step, we'll customize the layout of the Info Box to suit our needs.

1. In the main page builder interface, hover over the Info Box element and click on the gear icon.
2. In the popup, you can adjust the element's positioning, width, and other layout-related settings.
3. To adjust the horizontal alignment of the text and icon, select the "Alignment" option and choose from various options.

Step 6: Adding the Info Box to Your Website

Now that we've customized the Info Box element, let's add it to our website.

1. Click and drag the Info Box element to your page where you want it to appear.
2. Adjust the element's positioning and other settings as needed.
3. Save and update your page to see the Info Box live on your website.

That's it! With these steps, you should now be well-versed in how to use the Info Box element in WPBakery Page Builder. Remember to experiment with the many settings and customization options available to create unique visual representations of information on your WordPress website. Happy building!