Visual Composer – Background Bundle

Introduction to Visual Composer - Background Bundle

Visual Composer is a popular WordPress page builder plugin that allows you to create custom layouts and designs for your website without needing to write code. The Background Bundle is a collection of background options that can be used to add unique and creative backgrounds to your website's elements. In this tutorial, we will go through a step-by-step guide on how to use the Visual Composer - Background Bundle to add stunning backgrounds to your website.

Prerequisites

Before we start, make sure you have:

1. Visual Composer plugin installed and activated on your WordPress website.
2. A basic understanding of how to use Visual Composer to create layouts and designs.

Step 1: Installing the Background Bundle

To install the Background Bundle, follow these steps:

1. Log in to your WordPress dashboard and go to the Plugins menu.
2. Click on the "Add New" button to upload a new plugin.
3. Upload the Background Bundle plugin zip file (available in the Visual Composer download package) and install it.
4. Activate the plugin.

Step 2: Adding the Background Bundle to Your Visual Composer Layout

To add the Background Bundle to your Visual Composer layout, follow these steps:

1. Open a page or post in the Visual Composer editor.
2. Click on the "Elements" tab in the top menu.
3. Scroll down to the "Background" section and click on the "Background Bundle" element.
4. Drag and drop the "Background Bundle" element onto your layout.

Step 3: Configuring the Background Bundle

To configure the Background Bundle, follow these steps:

1. Click on the "Settings" icon (looks like a gear) on the top right corner of the "Background Bundle" element.
2. In the "Settings" panel, you will see various options for customizing the background:
   • Background Type: Choose from options such as "Image", "Color", "Gradient", "Video", and "Texture".
   • Background Image: Upload your own image or choose from a list of pre-installed images.
   • Background Color: Choose a color from the color picker or enter a custom hex code.
   • Background Gradient: Choose a gradient direction and adjust the color stops.
   • Background Video: Upload your own video or choose from a list of pre-installed videos.
   • Background Texture: Choose from a list of pre-installed textures.
3. Adjust the options to your liking and click "Save" to apply the changes.

Step 4: Adding a Background to a Specific Element

To add a background to a specific element, follow these steps:

1. Select the element you want to add a background to (e.g. a row, column, or module).
2. In the "Element Settings" panel, click on the "Background" tab.
3. In the "Background" tab, you will see options to apply the Background Bundle settings you configured earlier.
4. Choose the background type, image, color, gradient, video, or texture you want to apply to the element.
5. Adjust the options as needed and click "Save" to apply the changes.

Step 5: Previewing and Publishing Your Design

Once you have configured the Background Bundle and added backgrounds to your elements, you can preview your design by clicking on the "Preview" button.

If you are satisfied with your design, you can publish it by clicking on the "Publish" button.

Conclusion

In this tutorial, we have covered the basics of using the Visual Composer - Background Bundle to add unique and creative backgrounds to your website. By following these steps, you should be able to create stunning backgrounds and enhance the visual appeal of your website. Remember to experiment with different options and settings to achieve the desired look and feel for your website.