An article box is a card: a picture, a heading, a short paragraph and, if you want one, a button. A row of them is the quickest way to point readers at a handful of pages.
The Animated Service Boxes widget builds the whole row from one item list, so every card keeps the same shape and you set the cards-per-row once for each device.
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.
Build the row of cards
- Edit the page with Elementor and drag in the Animated Service Boxes widget.
- In Content > Animated Service Boxes, set Main Style to Article Box. A Style picker appears with two pictures, Style 1 and Style 2; Style 1 is the default.
- Turn Button on if the cards should have one, then pick a Button Style — Style 1, Style 2 or Style 3.
- Open the Animated Service Boxes list. It starts with three items; open one and set its Featured Image, Title and Description. Leave Sub Title empty — this layout does not render it.
- Fill in Button Text and Button Link for each item. They only work while the Button switch above is on.
- In Content > Columns Manage, set Desktop Column, Tablet Column and Mobile Column. The option text is the number of cards in a row, so Column 4 means four across. The defaults are Column 4, Column 3 and Column 2.
- Add breathing room with Columns Gap/Space Between, which takes px, % or em and can be set per device.
Use + Add Item for more cards. On a 1200 px page with the defaults we measured cards of 285 × 255 pixels, four to a 1120 px row.
Settings for this layout
| Setting | Where | What it does | Default |
|---|---|---|---|
| Style | Content > Animated Service Boxes | Two card designs, shown as pictures: Style 1 and Style 2. | Style 1 |
| Image Resolution | Content > Animated Service Boxes | The registered image size each Featured Image is loaded at. | Full |
| Button | Content > Animated Service Boxes | Shows the per-item button. Without it, Button Text and Button Link do nothing. | Hide |
| Image/Icon | Content > Animated Service Boxes | Lets each card carry an icon, an image or a Lottie file on top of its own Select Icon choice. | Hide |
| Desktop Column | Content > Columns Manage | Cards per row on desktop, Column 1 to Column 6. | Column 4 |
| Tablet Column / Mobile Column | Content > Columns Manage | The same, per device. | Column 3 / Column 2 |
How It Behaves
- Every card renders its image, title and description. With the defaults and three items we saw three equal cards, each carrying the picture, the heading and the paragraph.
- The button links where you told it to. With Button on, a Read More button rendered in each card and pointed at that item’s Button Link.
- The Sub Title is dropped. We filled it on all three items and no sub-title element appeared anywhere in the markup. Put that text in the Description instead.
Limitations
- 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.
- The card size follows the column count, not a width field. To make cards wider, lower Desktop Column; there is no per-card width.
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
My Sub Title never appears
That is this layout. Article Box renders the Title, the Description and the button only. Move the text into Description, or switch to a layout that shows it, such as Fancy Box.
The button is missing
Turn Button on in Content > Animated Service Boxes. Filling Button Text alone is not enough.
Too many cards squeeze into one row
Lower Desktop Column. Remember the label is the number of cards across, so Column 3 gives you three, not three-twelfths.
The cards touch each other
Add a Columns Gap/Space Between value in Content > Columns Manage; it is empty out of the box.
