The Scroll Box extension in Wow Elements allows you to create custom scrollable content areas within your website sections and widgets without any coding. It helps improve content organization and user experience by enabling smooth scrolling inside containers with fixed height layouts. With flexible customization controls and stylish scrollbar options, you can easily display large amounts of content in a clean and interactive way on your Elementor website. In this documentation, we will guide you through how to use and customize the Scroll Box extension in Wow Elements.
Enabling the Scroll Box Extension #
To use the Scroll Box Extension from Wow Elements Pro, first, you have to enable the extension.
- Go to WordPress dashboard → Wow Elements Plugin dashboard.
- Then, Click the Extension Tab.
- Search the Scroll Box Extension Name.
- Enable the Scroll Box Extension.
- Hit the Save Settings Button
Initial Setup for Scroll Box Extension #
Before using the Scroll Box extension, you first need to create or select an existing design where you want to apply the extension. To show you an example we have taken below steps –
1. Select the Text Editor widget and navigate to the Content Tab.
2. Open the Text Editor Tab of Content Tab.
3. Add as many content you want to add to the text editor.
Where To Find Scroll Box Extension #
To find the Scroll Box Extension, you must need to select the element where you want to use the extension. As we have shown you the text editor widget above so let’s continue with that –
1. Click on the element which you want to configure by the Scroll Box.
2. Now move to the Style tab.
3. You will find the Scroll Box extension here along with the Wow Elements logo.
Configuring the Scroll Box Extension #
1. Scroll Box: Enable the switcher to get all the options to customize the scroll box extension.
2. Max Height: You can adjust the scroll box content field height with this option.
3. Width: You can set the thickness of the scroll bar with this option.
4. Border Type: You can add and change the border types with this option. You can choose between default, none, solid, dotted, doubled, dashed and groove.
5. Border Width: You can set the thickness of the border with this option.
6. Border Color: You can make changes to the border color with this option.
7. Border Radius: You can control the roundness of the border with this option.
In this section. we have two more tabs. These are Thumb and Track. Let’s start with the Thumb Tab first –
1. Background Type: You can change the background to be classic or gradient with this option. Here we have selected the background type as Classic.
2. Color: You can change the background color of the thumb with this option.
3. Image: You can change the background image of the thumb with this option.
4. Box Shadow: You can add a shadow effect to the thumb with this option.
Now let’s proceed to the Track Tab –
5. Background Type: You can change the background of the track to be classic or gradient with this option. Here we have selected the background type as Classic.
6. Color: You can change the background color of the track with this option.
7. Image: You can change the background image of the track with this option.
8. Box Shadow: You can add a shadow effect to the track with this option.
All done, You have successfully customised the Scroll Box Extension on your website.
Video Assist #
You can also watch the tutorial video about the Scroll Box Extension. Please visit the demo page for examples.
Thanks for staying with us.
