---
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-03-31
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

- Utilizes the Animated Service Boxes block from Nexter Blocks to create a sliding box effect in WordPress.
- Enables the Display Button toggle to add customizable buttons within the sliding boxes.
- Allows management of layout settings, including vertical alignment and item gaps for responsive design.

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.