Animated Service Boxes is one widget that draws eight different animated layouts — an image accordion, sliding boxes, article cards, info banners, a background that changes on hover, fancy boxes, expandable service boxes and a portfolio list.
You pick the layout once, fill in the same set of item fields, and the widget renders the matching markup and animation. This page walks through every control you will actually use.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — Animated Service Boxes ships only in The Plus Addons for Elementor Pro. With Pro deactivated the widget does not render at all, and the free plugin has no equivalent widget.
- Prerequisite: Elementor (free) installed and active.
- Widget to enable: go to The Plus Addons > Widgets, search for Animated Service Boxes and turn its toggle on.
- Prerequisite: the images you want to show, already in the Media Library. Every item has its own Featured Image; with none set, Elementor’s grey placeholder is used.
- Nothing else to switch on: no extension and no site-wide setting is needed for this widget.
Watch it in action
Pick a layout
Drag the Animated Service Boxes widget onto the page. The first control in Content > Animated Service Boxes is Main Style, and it decides everything else you will see in the panel. It offers eight layouts:
| Main Style | What you get | Full guide |
|---|---|---|
| Image Accordion | Slides that open when you hover them, vertically or horizontally. | Image accordion |
| Sliding Boxes | Hovering a box widens it and slides its text in beside the image. | Sliding box effect |
| Article Box | A row of cards with an image, a title, a description and an optional button. | Article box |
| Info Banner | A banner that turns over on hover to show its description. | Info banner |
| Hover Section | A list of titles; hovering one puts that item’s image behind the whole section. | Background image on hover |
| Fancy Box | Boxes with an image background, a title and a sub title. No extra guide — it is described below. | — |
| Services Element | A card that reveals a list of services when you hover it. | Expandable service box |
| Portfolio | A column of titles next to one image that swaps as you move between them. | Portfolio section |
The Fancy Box layout
Fancy Box is the one layout without its own guide, so here it is. Set Main Style to Fancy Box, fill in each item’s Title, Sub Title and Featured Image, and you get a row of boxes that use the image as the box background with the text over it. On a 1200 px page with the default settings we measured three boxes of 285 × 340 pixels, each showing its Title and Sub Title.
Fancy Box has no Style control — neither do Sliding Boxes and Hover Section. Only Image Accordion, Article Box, Info Banner, Services Element and Portfolio show a Style picker, and it is a pair of pictures labelled Style 1 and Style 2.
Settings that apply to most layouts
| Setting | Where | What it does | Default |
|---|---|---|---|
| Image Resolution | Content > Animated Service Boxes | Which registered image size each item’s Featured Image is loaded at. | Full |
| Button | Content > Animated Service Boxes | Turns the per-item button on. Hidden for the Portfolio layout, which has no button. | Hide |
| Button Style | Content > Animated Service Boxes | Style 1, Style 2 or Style 3. Appears only once Button is on. | Style 1 |
| Image/Icon | Content > Animated Service Boxes | Lets each item show an icon, an image or a Lottie file. Not available for Image Accordion or Sliding Boxes. | Hide |
The item list
Animated Service Boxes is the repeater that holds your content. It starts with three items; use + Add Item for more. Open an item and you get the same fields whichever layout you chose:
| Field | What it does | Default |
|---|---|---|
| Title | The item heading. In Portfolio it is also the link. | The Plus |
| Select Icon | None, Icon, Image or Lottie. The follow-up fields change with your choice, and the Image/Icon switch above has to be on for any of it to show. | None |
| Sub Title | A second line under the title. | empty |
| Description | Rich text. Several layouts only reveal it on hover. | empty |
| Featured Image | The item image. Used as the slide, the card image or the background, depending on the layout. | Elementor’s placeholder |
| Button Text / Button Link | The button label and its URL. They only render when Button is on — except in Portfolio, where Button Link is the title’s link. | Read More / # |
| List Content | A single field holding several list rows separated by |, for example Small | Medium | Large. The field is visible in every layout but only the Services Element layout renders it — the panel says so too. | four sample rows |
Layout
The Layout section sets how the text sits inside each item:
- Transform CSS — a free-text CSS transform, with separate Normal and Hover tabs. The field’s own placeholder shows the format:
rotate(10deg) scale(1.1). - Text Alignment — Left, Center or Right, per device.
- Offset — where the text block sits vertically: Top, Center, Bottom and, on some layouts, Justify.
- Height — a minimum height for each item, per device.
Which of these appear depends on the layout you picked, so do not expect all four every time.
Columns Manage
There are two different Columns Manage sections, and which one you get depends on the layout.
- Article Box, Info Banner, Hover Section, Fancy Box and Services Element get Desktop Column, Tablet Column and Mobile Column. The options read Column 1 to Column 6 — that is how many items sit in a row. The defaults are Column 4 on desktop, Column 3 on tablet and Column 2 on mobile.
- Sliding Boxes gets only Tablet Column (default Column 2) and Mobile Column (default Column 1). There is no desktop setting.
- Image Accordion and Portfolio get no Columns Manage section at all.
Both versions end with Columns Gap/Space Between, a four-sided spacing field in px, % or em, set per device.
Title On Click Text
This section only appears when Main Style is Portfolio. It holds one field, Title On Click Text, default Click Here. On screens 1024 px and narrower there is no hover, so the first tap on a title reveals this text as a link to that item’s Button Link. The panel note says the same: “Work Only < 1024 screen”.
The Style tab
Styling lives in the Style tab, and which sections you see depends on the layout and on what you turned on in Content. The sections the widget registers are:
- Title, Sub Title and Description — typography and colour for the three text fields.
- Icon and Lottie — only relevant once Image/Icon is on.
- Listing — the Services Element list.
- Button — only once Button is on.
- Featured Image, Content Background, Content Background Back and Outer Content — the boxes themselves.
- On Scroll View Animation — the site-wide extension that animates the widget as it enters the viewport.
Limitations
- Not every layout has a Style control. Style appears for Image Accordion, Article Box, Info Banner, Services Element and Portfolio only. Sliding Boxes, Hover Section and Fancy Box have no Style choice at all.
- Image Accordion and Portfolio have no Columns Manage section. Their item count per row is fixed by the layout, so there is nothing to set for desktop, tablet or mobile.
- Article Box does not show the Sub Title. The field is there in every item and it can be filled, but the Article Box layout renders only the Title, the Description and the button. Tested on TPAE Pro 6.5.0 with the Sub Title filled on all three items.
- Hover Section changes the container’s background, not the widget’s. The image is written onto the closest Elementor container or section, so a background you set on that container is overwritten while the widget is on screen, and any other widget in the same container sits on top of the changing image.
- The Services Element box does not grow. In Style 1 the card stays the same size — it measured 285 × 167 pixels before and after hovering — and the list is revealed underneath it, over whatever sits below. Leave room under the row, or the list will cover the next one.
- Active Slide Width(0-15) cannot actually be set to 0. The label says 0-15 but the field’s minimum is 1. At 1 every slide is the same width and hovering no longer opens one.
Not verified
So you know exactly what has and has not been checked:
- Style 2. Only the default Style 1 was checked on the front end for this layout.
- Select Icon. Icon, Image and Lottie were not rendered with a real icon font or Lottie file, so nothing is claimed here about how they look.
- Image Resolution. Only the default Full was used; no other size was measured.
- Button Style 2 and Style 3. Only the default Style 1 button was rendered.
- The Style tab. No styling control was exercised, so this doc names the sections that exist and does not describe what each one does.
- Responsive behaviour. Nothing was measured at tablet or mobile width for this layout; every measurement here is from a 1200 px viewport.
Troubleshooting
The widget is not in the Elementor panel
It is a Pro widget and it can be switched off. Check The Plus Addons > Widgets, search Animated Service Boxes and turn the toggle on, then reload the editor.
I filled in Sub Title but nothing shows
Several layouts hide it. Article Box never renders it at all, and Info Banner, Hover Section and Sliding Boxes only show it once the item is hovered.
The Style dropdown I read about is missing
Only five of the eight layouts have one. If you are on Sliding Boxes, Hover Section or Fancy Box, there is nothing missing — those layouts ship a single design.
The animation works in the editor but not on the page
Every layout here is driven by JavaScript on the published page. Clear any page cache and re-check the live URL, not the editor preview.
