---
title: "How to Create Sliding Box Effect in WordPress?"
url: https://nexterwp.com/docs/create-sliding-box-effect-in-wordpress/
date: 2024-12-12
modified: 2026-04-14
author: "Aditya Sharma"
description: "Are you looking to create a beautiful content sliding box effect in WordPress? This effect allows an image to slide in or out, revealing content when hovered over. It adds..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Create-Sliding-Box-Effect-in-WordPress_-1024x519.jpg
word_count: 382
---

# How to Create Sliding Box Effect in WordPress?

## Key Takeaways

- Nexter Blocks includes the Animated Service Boxes block, which allows users to create a sliding box effect in WordPress.
- Users can select a predefined style and manage vertical alignment and text alignment in the Animated Service Boxes block.
- The Animated Service Boxes block enables users to add a button with customizable text and URL by enabling the Display Button toggle.

Are you looking to create a beautiful content sliding box effect in WordPress? This effect allows an image to slide in or out, revealing content when hovered over. It adds an interactive and visually appealing touch to your website, enhancing both design and user experience.

With the Animated Service Boxes block from Nexter Blocks, you can easily create a sliding box effect in WordPress.

*To check the complete feature overview documentation of the Nexter Blocks Animated Service Boxes block,* *[click here](https://nexterwp.com/docs/add-animated-service-boxes-in-wordpress/).*

***Requirement  - This block is a part of the Nexter Blocks, make sure it's installed & activated to enjoy all its powers.***

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-animated-service-boxes/)

To do this, add the Animated Service Boxes block to the page and follow the steps - 

1. Select **Sliding Boxes** from the **Main Style** section.

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 by selecting Slide 0.

By enabling the **Display** **Button** toggle, you can add a button to the sliding box.

When enabled, you can select a button style from the **Button Style** section.

2. Then in the **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 Display Button toggle is enabled to see the Button Text and Button Link fields.*

Following this process, you can edit the other items.

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

You can select the image size from the **Image Size **dropdown.

From the **Layout** tab, you can manage the vertical alignment and text alignment.

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.

## Frequently Asked Questions

**Q: What should I do if the sliding box effect is not working?**
A: If the sliding box effect isn't functioning, first ensure that the Animated Service Boxes block from Nexter Blocks is installed and activated. This block is essential for creating the sliding effect. Additionally, check that you've selected 'Sliding Boxes' from the Main Style section. If these steps are correctly followed and the issue persists, consider clearing your browser cache or checking for JavaScript errors in the console.

**Q: Can I use the sliding box effect for product showcases?**
A: The sliding box effect is ideal for product showcases, as it allows images to slide in and out, revealing product details on hover. This interactivity can enhance user engagement on your site. To implement this, simply add the Animated Service Boxes block and customize the content for each box to highlight different products.

**Q: What is the best way to customize the button in the sliding box?**
A: To customize the button in the sliding box, enable the Display Button toggle. This will reveal the Button Text and Button Link fields, allowing you to set the button's label and destination URL. Choosing a clear and compelling button text is crucial, as it encourages user interaction and can significantly impact click-through rates.

**Q: Are there any limitations when using the Animated Service Boxes block?**
A: One limitation to consider is that the Animated Service Boxes block is part of the Nexter Blocks, meaning you must have it installed and activated to use the sliding box effect. Additionally, the block is designed primarily for use with Gutenberg, so ensure your site is set up accordingly to avoid compatibility issues.