How to Create Sliding Box Effect in Elementor?

Updated onApril 9, 2026By

Key Takeaways

  • The Plus Addons for Elementor includes the Animated Service Boxes widget for creating a sliding box effect.
  • Users can select a predefined style and manage the number of sliding boxes in a row for tablet and mobile separately.
  • The Animated Service Boxes widget allows users to add titles, subtitles, descriptions, and images for each sliding box.
Table Of Content

Are you looking to create a beautiful content sliding box effect in Elementor? This effect allows an image to slide in or out to show the content when you hover over it. This unique design can add an interactive touch to your website and improve the user experience.

With the Animated Service Boxes widget from The Plus Addons for Elementor, you can easily create a sliding box effect in Elementor.

To check the complete feature overview documentation of The Plus Addons for Elementor Animated Service Boxes widget, click here.

Requirement  – This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.

LIVE WIDGET LINK

To do this, add the Animated Service Boxes widget to a page and follow the steps –

1. Select Sliding Boxes from the Main Style dropdown.

From the Style dropdown, you can select a predefined style.

Then from the Active Slide section, you can select a particular slide to be active by default or make all the slides equal.

You can select the image size from the Image Resolution dropdown.

By enabling the Button toggle you can add a button to the sliding boxes.

When enabled you can select a button style from the Button Style dropdown.

2. Then in the Animated Service Boxes section, you have to add the content for the sliding boxes. By default, you’ll find three items, open one item.

3. Add the title, subtitle and description in the Title, Sub Title and Description fields as required.

4. Then in the Featured Image section, you have to add an image for the sliding boxes.

You can edit the button text and URL from the Button Text and Button Link fields respectively.

Note: Make sure the Button toggle is enabled to make the Button Text and Button Link fields work.

Following this process you can edit the other items.

You can click on the +Add Item button to add more sliding boxes.

From the Layout tab, you can manage the vertical alignment of the text content.

Then from the Columns Manage tab, you can manage the number of sliding boxes in a row for tablet and mobile separately. You can also manage the gap between the items as well.

This is how easily you can create beautiful sliding content boxes.

Read Further: How to Add an Article Box in Elementor?

About the Author

Photo of Aditya Sharma CMO of The Plus Addons for Elementor
CMO · The Plus Addons for Elementor · 10 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressElementorn8nAIClaudeAutomationServer
LinkedIn X GitHub YouTube Website
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos

Related Frequently Asked Questions

What should I do if the sliding box effect isn't working?

If the sliding box effect isn't functioning, ensure that the Animated Service Boxes widget from The Plus Addons for Elementor is installed and activated. Without this plugin, the sliding effect won't be available. Additionally, check that you've selected 'Sliding Boxes' from the Main Style dropdown, as this is crucial for enabling the effect.

Can I use the sliding box effect for displaying images and text together?

The sliding box effect is ideal for showcasing both images and text. When you hover over the box, the image slides to reveal the content, enhancing user interaction. This feature is particularly useful for highlighting services or products on your website, making it engaging for visitors.

What is the best way to manage the layout of sliding boxes on mobile devices?

To optimize the layout of sliding boxes for mobile devices, use the Columns Manage tab. This allows you to specify the number of boxes displayed in a row and adjust the gap between items. Proper management ensures that the sliding boxes remain visually appealing and functional on smaller screens.

How can I customize the content within each sliding box?

You can customize the content of each sliding box by editing the Title, Subtitle, and Description fields in the Animated Service Boxes section. Each box starts with three items by default, and you can add more by clicking the +Add Item button. This flexibility allows you to tailor the content to fit your website's needs.

What happens if I forget to enable the Button toggle?

If the Button toggle is not enabled, the Button Text and Button Link fields will not function. This means that users won't be able to interact with a button in the sliding boxes, which could limit engagement. Always ensure this toggle is activated if you want to include a call-to-action button.

Is there a way to set a default active slide in the sliding box effect?

Yes, you can set a default active slide by selecting an option from the Active Slide section. This allows you to control which slide is shown first when the page loads, helping to direct user attention to specific content right away. It's a useful feature for highlighting key messages or offers.

Last reviewed: April 9, 2026

Related Docs