--- 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-09-27 lang: en author: "Aditya Sharma" description: "A grid of cards that shows everything at once gives the reader nothing to discover. Sliding Boxes keep the description hidden until someone hovers, so the row stays clean and..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Create-Sliding-Box-Effect-in-WordPress_-1024x519.jpg word_count: 334 --- # How to Create Sliding Box Effect in WordPress? ## Key Takeaways - Animated Service Boxes en Nexter Blocks Pro activa Sliding Boxes desde Nexter > Blocks en el panel de WordPress, y cada caja usa un título, un subtítulo, una descripción y una imagen o icono con un enlace. - Animated Service Boxes muestra cuatro elementos con texto alternativo propio y usa un atributo data-width por caja para que la animación de deslizamiento funcione desde ese ancho. - Sliding Boxes mantiene visible el título y oculta la descripción hasta el hover, pero en pantallas táctiles no hay hover y las descripciones largas desbordan la caja en lugar de desplazarse. A grid of cards that shows everything at once gives the reader nothing to discover. Sliding Boxes keep the description hidden until someone hovers, so the row stays clean and the detail is still one movement away. *For every Animated Service Boxes setting in one place, see the [Animated Service Boxes block guide](https://nexterwp.com/docs/add-animated-service-boxes-in-wordpress/).* [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-animated-service-boxes/) ## Before You Start - **Edition:** **Pro** — the Animated Service Boxes block is part of Nexter Blocks Pro.- **Block to enable:** Animated Service Boxes, switched on under **Nexter > Blocks** in your WordPress dashboard.- **Your items decided:** each one takes a title, a subtitle, a description, an icon or image and a link.- **One image per box.** ![A published grid of sliding boxes with images and titles](https://nexterwp.com/wp-content/uploads/2026/09/asb-fe-sliding.webp) ## Steps - Add the **Animated Service Boxes** block and click **Design from Scratch**. - Set **Main Style** to **Sliding Boxes**. ![The Main Style setting with all eight layouts](https://nexterwp.com/wp-content/uploads/2026/09/asb-main-style.webp) - Fill in your items — title, subtitle, description, and an image or icon for each. - Pick the **Style** for the sliding effect. ![The Style setting](https://nexterwp.com/wp-content/uploads/2026/09/asb-sliding.webp) - Publish and hover each box. ## How It Behaves - **Real images.** Measured: four `` elements, each with its own alt text.- **Each box carries its own width** in a `data-width` attribute, which is what the slide animation works from.- **Hover activates one box** — nothing was active on load, one was after hovering.- The title stays visible and the description is what slides in, so the row still reads when untouched. ## Limitations - **Pro only.**- The hidden text is still in the page, so this is presentation rather than a way to shorten the page.- Long descriptions overflow the box rather than scrolling. Keep them to a sentence or two.- There is no hover on a touch screen, so check how this looks on a phone before relying on it. ## Troubleshooting ### Nothing slides The effect is on hover. Check on a desktop rather than a phone. ### The text is cut off The description is longer than the box. Shorten it, or raise the block's **Height** in the Layout panel. ### The boxes are different sizes The images are different shapes. Crop them to one ratio. ## Related Docs - [Image accordion](https://nexterwp.com/docs/create-an-image-accordion-in-wordpress-horizontal-amp-vertical/)- [Article box](https://nexterwp.com/docs/add-an-article-box-in-wordpress/)- [Animated Service Boxes: all layouts](https://nexterwp.com/docs/add-animated-service-boxes-in-wordpress/) ## Frequently Asked Questions **Q: What do I need before creating a sliding box effect in WordPress?** A: The Animated Service Boxes block is Pro only, and it has to be switched on under Nexter > Blocks in your WordPress dashboard. Each item needs a title, subtitle, description, and either an icon or image, plus a link. One image per box keeps the layout predictable, because the slide animation is built around those individual box assets. **Q: How do I make boxes slide on hover instead of showing all the text at once?** A: Set the Animated Service Boxes block to Main Style: Sliding Boxes, then pick the Style for the sliding effect. That setup keeps the title visible while the description stays hidden until hover, so the row still reads cleanly when untouched. Nexter Blocks Pro handles this as a hover-based presentation effect, not an always-open card layout. **Q: Why does nothing slide on my WordPress page?** A: The effect only activates on hover, so it will not behave the same on a phone or tablet. Test it on a desktop first, because there is no hover on a touch screen. If it works on desktop but not mobile, that is expected behavior for this sliding box effect. **Q: How can I stop the sliding box text from getting cut off?** A: Long descriptions overflow the box instead of scrolling, so short copy works best here. If the text still gets clipped, raise the block’s Height in the Layout panel. The page treats this as a presentation effect, so keeping descriptions to a sentence or two avoids awkward truncation. **Q: Why are my sliding boxes different sizes?** A: Different image shapes are usually what throw off the box sizes. Crop all images to one ratio so each box starts from the same visual footprint. The page says each box carries its own width in a data-width attribute, so inconsistent source images make the row look uneven fast. **Q: Is there another way to build this kind of reveal effect in WordPress?** A: The related docs point to [Image accordion](https://nexterwp.com/docs/create-an-image-accordion-in-wordpress-horizontal-amp-vertical/), [Article box](https://nexterwp.com/docs/add-an-article-box-in-wordpress/), and [Animated Service Boxes: all layouts](https://nexterwp.com/docs/add-animated-service-boxes-in-wordpress/). Sliding Boxes is one layout inside Animated Service Boxes, while those other patterns fit different content styles when you want a similar reveal without using this exact setup.