---
title: "How to Add Animated Service Boxes in WordPress?"
url: https://nexterwp.com/docs/add-animated-service-boxes-in-wordpress/
date: 2024-12-12
modified: 2026-04-14
author: "Aditya Sharma"
description: "With the Animated Service Boxes block from Nexter Blocks, you can add different types of animated content sections like image accordion, service box, portfolio section, info banner, and more. LIVE..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-Animated-Service-Boxes-in-WordPress_-1024x519.jpg
word_count: 917
---

# How to Add Animated Service Boxes in WordPress?

## Key Takeaways

- Nexter Blocks includes the Animated Service Boxes block for adding animated content sections like image accordion and service box.
- The Animated Service Boxes block requires the PRO version of Nexter Blocks to be activated.
- Users can select from eight service box types, including Image Accordion and Info Banner, when using the Animated Service Boxes block.
- The Columns Manage feature allows users to manage the number of service boxes displayed in a row for desktop, tablet, and mobile separately.

With the Animated Service Boxes block from Nexter Blocks, you can add different types of animated content sections like image accordion, service box, portfolio section, info banner, and more.

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

## Required Setup

- Make sure the default WordPress Block editor is active. 

- You need to have the [Nexter Blocks](https://wordpress.org/plugins/the-plus-addons-for-block-editor/) plugin installed and activated.

- This is a Premium block, and you need the [PRO version of Nexter Blocks](https://nexterwp.com/pricing/?utm_source=tpag&utm_medium=docs&utm_campaign=text).

- Make sure the Animated Service Boxes block is activated. To verify this, visit Nexter → Blocks → and search for Animated Service Boxes and activate.

## Learn via Video Tutorial

https://www.youtube.com/watch?v=koGgx1_YFe4&t

## How to activate the Animated Service Boxes Block?

Go to 

- **Nexter **→ **Blocks **

- **Search **the block name and** turn**** on the toggle**.

![](https://nexterwp.com/wp-content/uploads/2024/12/Nexter-Blocks-Animated-Service-Boxes-Activation.png)

## Key Features

- **Image Accordion **- You can easily [create an image accordion (vertical and horizontal)](https://nexterwp.com/docs/create-an-image-accordion-in-wordpress-horizontal-amp-vertical/).

- **Sliding Boxes **- You can [create a sliding box effect](https://nexterwp.com/docs/create-sliding-box-effect-in-wordpress/).

- **Article Box** - You can [create an article box (like a post)](https://nexterwp.com/docs/add-an-article-box-in-wordpress/).

- **Info Banner** - You can easily [create an info banner](https://nexterwp.com/docs/add-an-info-banner-in-wordpress/).

- **Hover Section** - You can easily [change the background image on hover](https://nexterwp.com/docs/how-to-change-background-image-on-hover-in-wordpress/).

- **Fancy Box** - You can add a fancy box to show content.

- **Service Elements** - You can easily [add an animated service box](https://nexterwp.com/docs/how-to-create-an-expandable-service-box-in-wordpress/).

- **Portfolio** - You can [add unique portfolio sections](https://nexterwp.com/docs/how-to-create-a-unique-portfolio-section-in-wordpress/).

## How to Use the Animated Service Boxes Block?

Add the Animated Service Boxes block to the page.

Then click on the **Design from Scratch** button to design the layout from scratch.

![](https://nexterwp.com/wp-content/uploads/2024/12/animated-service-box-design-type-1024x194.png)

> *Note: By clicking on the Import Pre-Designed Template button, you can [import a preset template](https://nexterwp.com/docs/import-templates-in-nexter/#Import-Preset-Designs-for-Specific-Blocks-in-Nexter) and customize it as per your requirements.*

### Animated Service Boxes

From the **Main Style** section, you can select the service box type. Here you’ll find eight options - 

- **Image Accordion **- With this option, you can [create an image accordion](https://nexterwp.com/docs/create-an-image-accordion-in-wordpress-horizontal-amp-vertical/).

- **Sliding Box **- With this option, you can [create a sliding box effect](https://nexterwp.com/docs/create-sliding-box-effect-in-wordpress/).

- **Article Box** - With this option, you can [create an article box](https://nexterwp.com/docs/add-an-article-box-in-wordpress/).

- **Info Banner** - With this option, you can [create an info banner](https://nexterwp.com/docs/add-an-info-banner-in-wordpress/).

- **Hover Section** - With this option, you can [change the background image on hover](https://nexterwp.com/docs/how-to-change-background-image-on-hover-in-wordpress/).

- **Fancy Box** - With this option, you can add a fancy box to show content.

- **Service Elements** - With this option, you can [add an animated service box](https://nexterwp.com/docs/how-to-create-an-expandable-service-box-in-wordpress/).

- **Portfolio** - With this option, you can [add unique portfolio sections](https://nexterwp.com/docs/how-to-create-a-unique-portfolio-section-in-wordpress/).

You’ll see different options based on your selection, let’s select Fancy Box here.

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

By enabling the **Button** toggle you can add a button to the service box.

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

Then in the **Service Boxes** section, you have to add the content for the service box. By default, you’ll find three repeater items, open one item.

In the **Title** field, you can add the service box title.

In the **Sub Title** field, you can add a subtitle to the service box.

You can add a description to the service box in the **Description** field.

From the **Featured Image** section, you can add a background image to the service box.

In the **Button Text** field, you can add the button text of the service box. 

Then, in the **Button Link** field, you can add a link to the button.

> *Note: Make sure the Display Button toggle is enabled to see the Button Text and Button Link fields.*

You can improve the accessibility of the button by adding an Aria label in the **Aria Label** field. 

Following this process, you can edit the other service box items.

You can click on the **+Add Item** button to add more service box items.

Then, from the **Image Size **dropdown, you can select the image size.

### Columns Manage

From here, you can manage the number of service boxes in a row for desktop, tablet and mobile separately.

![](https://nexterwp.com/wp-content/uploads/2024/12/animated-service-box-coulumn-manage-new.png)

From the **Columns Gap** section, you can manage the gap between the items.

## How to Style the Advanced Typography Block?

To style the Animated Service Boxes block, you’ll find all the options in the Style tab. 

> *Note: You’ll find different styling options for different types of service boxes.*

**Title** - From here, you can style the service box title.

![](https://nexterwp.com/wp-content/uploads/2024/12/animated-service-box-style-new.png)

**Sub Title** - From here, you can manage the service box sub title style.

**Description** - From here, you can manage the service box description text style.

**Icon** - You’ll see this option only when the Image/Icon toggle is enabled from the Layout tab. From here, you can manage the service box icon style.

**Featured Image** - You’ll see this tab when the Portfolio type is selected. From here, you can style the service box image.

**Listing** - You’ll see this tab when the Services Elements is selected. From here, you can style the service box listing typography, color and margin.

**Button** - You’ll see this option only when the Display Button toggle is enabled from the Layout tab. From here, you can manage the service box button style.

**Content Background** - From here, you can manage the service box content area padding, border radius and hover overlay background.

**Outer Content** - You’ll see this tab when the Article Box is selected. From here, you can style the service box border, box shadow etc.

**Content Background Back** - You’ll see this tab when the Info Banner is selected. From here, you can manage the back of the content background overlay color and background.

Advanced options remain common for all our blocks, you can explore all it options from here.

[View Advanced tab tutorial.](https://nexterwp.com/docs/add-advanced-tab-in-wordpress/)

## Frequently Asked Questions

**Q: What should I do if the Animated Service Boxes block is not activating?**
A: If the Animated Service Boxes block isn't activating, first ensure that the Nexter Blocks plugin is installed and activated. Then, navigate to Nexter u2192 Blocks, search for 'Animated Service Boxes', and turn on the toggle. If you are using the free version, note that this is a premium block requiring the PRO version of Nexter Blocks.

**Q: What are the best practices for styling the Animated Service Boxes block?**
A: When styling the Animated Service Boxes block, consider using the Style tab to customize elements like the title, subtitle, and button. Each service box type offers different styling options, so explore these to enhance visual appeal. For example, enabling the Display Button toggle allows you to add a call-to-action, which can significantly improve user engagement.

**Q: Are there any limitations when using the Animated Service Boxes block?**
A: One limitation is that the Animated Service Boxes block is part of the PRO version of Nexter Blocks, meaning you need to upgrade from the free version to access it. Additionally, this block requires the default WordPress Block editor to function properly, so ensure that it is active in your WordPress settings.