WPBakery Page Builder Add-on – Parallax

Introduction to WPBakery Page Builder Parallax Add-on

WPBakery Page Builder Parallax Add-on is an amazing feature that allows you to add a sense of depth and visual interest to your website by creating stunning parallax effects. In this tutorial, we'll explore how to use the WPBakery Page Builder Parallax Add-on to create engaging and immersive website experiences.

Why use Parallax in WordPress?

Parallax effects are becoming increasingly popular in website design due to their ability to create a sense of movement and depth. They can add visual interest to a page, making it more engaging and interactive for users. Parallax effects are also great for highlighting important information, such as CTAs or promotions, by layering them on top of moving backgrounds.

Before We Begin

To complete this tutorial, you'll need:

1. WPBakery Page Builder installed and activated on your WordPress website
2. WPBakery Page Builder Parallax Add-on installed and activated on your WordPress website
3. Basic understanding of WordPress and the WPBakery Page Builder

Step-by-Step Tutorial: Creating a Parallax Effect

In this tutorial, we'll create a simple parallax effect using the WPBakery Page Builder Parallax Add-on.

Step 1: Add a New Row to Your Page

1. Open your WordPress page and edit it using the WPBakery Page Builder.
2. Click on the Row button to create a new row.
3. Drag and drop the Row element to your desired location on the page.

Step 2: Add a Parallax Background

1. Within the Row, click on the Elements tab.
2. Scroll down to the Parallax section.
3. Click on the Parallax Background element.
4. The Parallax Background element has three options:
   • Image: Upload or select an image to use as the parallax background.
   • Color: Choose a solid color to use as the parallax background.
   • Video: Upload or select a video to use as the parallax background.

For this example, we'll use an Image as our parallax background.

Step 3: Configure Parallax Settings

1. Once you've selected the Parallax Background element, configure the settings as desired.
2. Offset X and Offset Y: Adjust these settings to control the direction and speed of the parallax effect.
3. Duration: Set the duration of the parallax effect in seconds.
4. Easing: Choose from a variety of easing effects to control the pace of the parallax movement.
5. Pause On Scroll: Enable or disable pausing the parallax effect when the user scrolls.

Step 4: Add Content Layers

1. Within the same Row, click on the Elements tab.
2. Drag and drop the Element you want to add (e.g., Text, Image, Button, etc.) above the Parallax Background element.
3. Configure the content layer settings as desired.
4. Repeat Step 2 for each element you want to add above the parallax background.

Step 5: Adjust Layer Settings

1. To adjust the position, size, and z-index of each content layer, click on the three-dot menu next to the Element and select Layer Settings.
2. Adjust the Layer Offset X and Layer Offset Y settings to control the positioning of each content layer relative to the parallax background.

Step 6: Save and Preview

1. Save your page to see the parallax effect in action.
2. Preview your page to make sure the parallax effect is working as expected.

Tips and Variations

• To create a scrolling parallax effect, make sure to enable the Pause On Scroll setting.
• Experiment with different parallax background settings and content layer positions to achieve unique effects.
• Combine parallax effects with other WPBakery Page Builder elements, such as animations and hover effects, to create complex and engaging website experiences.

Congratulations! You've successfully created a parallax effect using the WPBakery Page Builder Parallax Add-on. With this knowledge, you can take your website design to the next level and create stunning visual effects that engage and delight your users.