WPBakery Page Builder Add-on – Separator with Icon

Introduction

The WPBakery Page Builder is a popular and powerful page builder plugin for WordPress, allowing you to create stunning and custom websites without any coding knowledge. One of the most versatile and useful elements in WPBakery Page Builder is the Separator with Icon add-on. This add-on allows you to separate sections of your page or post with a custom icon, adding a touch of visual flair to your content. In this tutorial, we will walk you through how to use the WPBakery Page Builder Add-on - Separator with Icon to enhance your page or post design.

Tutorial: Using the WPBakery Page Builder Add-on - Separator with Icon

Step 1: Installing the Add-on

Before we can start using the Separator with Icon add-on, we need to install it. You can do this by following these steps:

• Log in to your WordPress dashboard and navigate to the "Plugins" page.
• Click on the "Add New" button at the top of the page.
• Search for "WPBakery Page Builder Add-on - Separator with Icon" in the search bar.
• Click on the "Install Now" button to install the add-on.
• Activate the add-on by clicking on the "Activate" button.

Step 2: Adding the Separator with Icon

Once the add-on is installed and activated, you can start using it. Here's how:

• Create a new page or post in your WordPress dashboard or edit an existing one.
• Click on the "WPBakery Page Builder" button to enter the page builder mode.
• In the page builder, click on the "Elements" tab and then scroll down to the "Add-ons" section.
• Click on the "Separator with Icon" add-on to add it to your page or post.

Step 3: Customizing the Separator with Icon

Once you've added the Separator with Icon to your page or post, you can customize it to your liking. Here's how:

• Click on the "Separator with Icon" element to open its settings panel.
• In the settings panel, you can customize the following options:
  • Icon: Choose an icon from the built-in icon library or upload your own custom icon.
  • Icon size: Adjust the size of the icon.
  • Icon color: Change the color of the icon.
  • Background color: Change the background color of the separator.
  • Separator width: Adjust the width of the separator.
  • Separator height: Adjust the height of the separator.
• Click on the "Save" button to save your changes.

Step 4: Placing the Separator with Icon

Once you've customized the Separator with Icon, you can place it anywhere on your page or post. Here's how:

• Click and drag the Separator with Icon element to the desired location on your page or post.
• Release the element when you're happy with its placement.
• Use the page builder's alignment tools (such as "Align Left", "Align Center", "Align Right") to adjust the position of the separator as needed.

Step 5: Using the Separator with Icon

The final step is to use the Separator with Icon to separate sections of your page or post. Here's how:

• Place multiple elements (such as text, images, or other WPBakery Page Builder elements) above and below the Separator with Icon element.
• Use the Separator with Icon to visually separate these sections of content.

Conclusion

In this tutorial, we've learned how to use the WPBakery Page Builder Add-on - Separator with Icon to enhance the design of our page or post. By following these simple steps, you can add a custom icon to separate sections of your content and create a visually appealing and engaging website.