How to Add a Terms and Conditions Popup with Smooth Scroller and Colored Scrollbar in Elementor

Creating a user-friendly and visually appealing terms and conditions popup can enhance the usability of your website. In this post, I’ll guide you on how to create a terms and conditions popup in Elementor with a smooth scroller and a custom-colored scrollbar.

Step 1: Creating the Popup

1. Navigate to Elementor > Templates > Popups.
2. Click Add New, select Popup, and give it a descriptive name like "Terms and Conditions Popup."
3. Design the popup using Elementor's drag-and-drop builder. Use a Text Editor widget to add the terms and conditions content.

Step 2: Adding Smooth Scrolling

To make the terms and conditions content scrollable:

Add a Scrollable Container:

• In the Text Editor widget inside your popup, wrap the terms and conditions text in a <div> with the class scrollable-content:

    
Your terms and conditions content here...

Add the CSS:

• Go to your WordPress Dashboard > Appearance > Customize > Additional CSS, and paste the updated CSS above.
• Alternatively, if you use Elementor Pro, you can add the CSS directly to the Popup Settings > Custom CSS section.

.scrollable-content {
    max-height: 400px; /* Adjust the height */
    overflow-y: auto;  /* Enable vertical scrolling */
    scroll-behavior: smooth; /* Smooth scrolling effect */
    padding-right: 10px; /* Avoid content cutoff */
}

Step 3: Customizing the Scrollbar

To enhance the aesthetics, style the scrollbar with custom colors:

.scrollable-content::-webkit-scrollbar {
    width: 10px; /* Scrollbar width */
}

.scrollable-content::-webkit-scrollbar-track {
    background: #f1f1f1; /* Track background color */
    border-radius: 10px; /* Rounded corners */
}

.scrollable-content::-webkit-scrollbar-thumb {
    background: #007bff; /* Scrollbar thumb color */
    border-radius: 10px; /* Rounded thumb */
}

.scrollable-content::-webkit-scrollbar-thumb:hover {
    background: #0056b3; /* Darker shade on hover */
}

Step 4: Adding the Popup Trigger

1. Add a Button widget on your page to trigger the popup.
2. Set the Link field to # and choose the Popup action in the Button Settings under the "Actions After Click" section.

Step 5: Preview and Finalize

1. Test the popup to ensure the scrolling and colored scrollbar work seamlessly.
2. Adjust the colors and dimensions of the scrollbar to match your website’s theme.

Conclusion

With Elementor and a bit of CSS, you can easily create an interactive terms and conditions popup that’s both functional and visually appealing. This guide ensures that your popup stands out with a smooth scroller and a stylish scrollbar.

Have questions or feedback? Drop a comment below!