The Scroll Box extension in Atomic Addons allows you to create custom scrollable content areas within your Elementor sections and containers without writing any code. It helps improve content organization and user experience by enabling smooth scrolling inside fixed-height layouts, making it easy to display lengthy content in a clean and organized way. With intuitive customization controls and flexible scrollbar styling options, you can seamlessly match the scroll box to your website’s design while ensuring a responsive experience across all devices. In this documentation, we’ll guide you through how to enable, configure, and customize the Scroll Box extension in Atomic Addons.
Enabling the Scroll Box Extension #
To use the Scroll Box Extension from Atomic Addons, first, you have to enable the extension.
- Go to WordPress dashboard → Atomic Addons Plugin dashboard.
- Then, click on the Elementor Tab and the sub items will open.
- Then, Click the Extensions Tab.
- Search for the Scroll Box Extension.
- Enable the Scroll Box Extension.
- Hit the Save Settings Button.
Primary 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.
Place to Find the Grid Line 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.
Using 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 Tutorial #
You can also watch the video tutorial to learn more about the Scroll Box extension.
Thanks for being with us.
