If you want to improve the visual appeal of your website and effectively engage your audience, adding a device slider module for Beaver Builder is the perfect solution!
The Device Slider Module for Beaver Builder allows you to present your content dynamically. With simple customization options, you can create amazing slide shows that captivate your audience and leave a lasting impression.
In this documentation, we will walk you through the process of installing and using the Xpro Image Slider Module in Beaver Builder. From installation to customization, we will walk you through everything you need to know to make the most of this feature.
Let’s get started with our image slider module to transform your website!
How to add and use the Image Slider module for Beaver Builder
There are some requirements to add and use the image slider module in Beaver Builder
Requirements
- Beaver Builder Page Builder
- Xpro Addons For Beaver Builder – FREE
- Xpro Addons For Beaver Builder – Pro
To add the device slider module for Beaver Builder, you need to install and activate the Beaver Builder page builder, Xpro Addons for Beaver Builder (free version), and Xpro Addons for Beaver Builder (pro version).
For more insight, view the video below.
To purchase the Pro version of Xpro addons for Beaver Builder, simply go to the Xpro Beaver addons website and select the Pro option.
Check out our installation guide on How To Install and Activate Xpro Addons For Beaver Builder Pro
If you have already installed the pro version of Xpro addons for Beaver Builder, navigate the dashboard to enable the image slider module for Beaver Builder before getting started.
Let’s get into the steps to add and use an image slider module.
Step 1: Enable the image slider module
- Go to your WordPress dashboard and click on the Xpro addons option given below in the navigation bar
- Click on the module tab of the Xpro addons Dashboard
- Search for the device slider module and enable it by clicking the button “ON.”
Step 2: Add a new page
- After enabling the module, go back to the WordPress dashboard and click on “pages.”
- Click on Add a New Page and launch Beaver Builder.
- If you have an existing page, edit it with Beaver Builder.
Step 3: Drag and Drop the Image slider module
To start adding the Device Slider module, select Xpro Addons from the list of standard modules.
In the media modules of Xpro addons, locate the Image Slider and drag and drop it onto your desired page, as shown in the video.
Once you drag and drop the module, a new customization tab will pop up so you can customize it.
Step 4: General Setting
In the general settings, you’ll find two options
a. Device Type: Here, you can choose which type of device to display in the slider. There are over 14 options available, including Chrome, iOS, Samsung, and other devices.
As demonstrated in the video, you can select any device you prefer.
b. Device Slider List: You can also choose which images from this list will be shown in the slider. Clicking on this option will open a new tab where you can change the background type. As shown in the video, you can select between image, video, or self-hosted video backgrounds.
In my case, I have used an image background.
Apart from these settings, you have the flexibility to add more sliders as needed.
Go on to the setting now.
- In this, you can choose how many items to show at a time. For example, you can choose to display 1, 2, or 3 items simultaneously.
- After that, you can enable loop, autoplay, navigation arrows, or dots as per your requirements.
- Once you have completed all the settings, don’t forget to save.
Step 5: Style Setting
Now let’s move on to the style settings.
- As you can see in the video below, you can set alignment and size in this section.
- You will notice an option for dots; by clicking on it, you can set the width, height, and background type of the dots.
- Additionally, you can change the background color, as I have chosen blue.
- Not only that, but you can also adjust the border and margin according to your preferences.
- So, your device slider will be tailored to your liking. Just remember to save your changes.
After saving, you’ll reach the final stage, where you’ll see a button labeled “Done” in the top right corner. Click on it to publish your changes.
Conclusion
Use the Beaver Builder Device Slider Module to improve the responsiveness and interactivity of your website. You can display your content in a way that is visually appealing and customized for different devices, like desktops, tablets, and phones, with the Device Slider Module.
This module allows you to create engaging presentations by providing options for various media types, such as images and videos, thereby increasing the overall visual impact of your website. With Xpro Addons for Beaver Builder, you can customize it as you prefer.
Get the pro version of Xpro Addons for Beaver Builder today and elevate your online presence with enhanced user engagement and seamless content display.
Furthermore, the Xpro Beaver Builder modules are designed to improve your Beaver Builder page on WordPress. Explore the various functionalities and possibilities that these addons provide for your website, and elevate your web design to the next level.
We value your feedback and are here to answer any questions you may have. Feel free to share your thoughts and questions in the comments section. Your feedback is extremely important to us, and we are committed to assisting you in optimizing your Beaver Builder experience.