---
title: "How to Add an Article Box in Elementor?"
url: https://theplusaddons.com/docs/add-an-article-box-in-elementor/
date: 2024-05-29
modified: 2026-09-21
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Add-an-Article-Box-in-Elementor_-1024x536.jpg
word_count: 904
---

# How to Add an Article Box in Elementor?

## 

- Animated Service Boxes builds an Article Box row from one item list, and each card keeps the same shape while cards-per-row is set once for each device.
- The Plus Addons for Elementor Pro is required for Animated Service Boxes, and the widget does not render at all when Pro is deactivated.
- Article Box renders only the Title, the Description, and the button, so the Sub Title field never appears even when it is filled on all three items.
- Columns Manage controls the card count per row with Desktop Column, Tablet Column, and Mobile Column, and lowering Desktop Column is the way to make cards wider because there is no per-card width.

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.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/elementor-animated-service-boxes/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## 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](https://wordpress.org/plugins/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.

![Article Box with the Button turned on, four cards to a row at the default Desktop Column](https://theplusaddons.com/wp-content/uploads/2026/09/animatedservice-result-article-box.webp)

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.

## Related Docs

- [Animated Service Boxes Widget: Settings Overview](https://theplusaddons.com/docs/animated-service-boxes-widget-settings-overview/)- [How to Add an Info Banner in Elementor?](https://theplusaddons.com/docs/add-an-info-banner-in-elementor/)- [How to Create Sliding Box Effect in Elementor?](https://theplusaddons.com/docs/create-sliding-box-effect-in-elementor/)

## Frequently Asked Questions

**Q: What do I need before adding an article box in Elementor?**
A: The setup depends on Elementor plus the Pro version of The Plus Addons for Elementor, because Animated Service Boxes ships only in The Plus Addons for Elementor Pro. The page also calls out a few practical inputs: Elementor must be installed and active, the widget must be enabled under The Plus Addons > Widgets, and your images should already be in the Media Library. Each item uses its own Featured Image, so missing images fall back to Elementor’s grey placeholder.

**Q: Why is the article box button not showing up?**
A: The button is controlled by a separate Button switch, so Button Text alone does nothing. In this layout, the button only renders when Button is turned on in Content > Animated Service Boxes. That matters because the widget builds each card from one item list, but the button is still opt-in per layout. If you want a cleaner card grid with no call to action, leave Button off and the cards will still show image, title, and description.

**Q: How do I stop too many cards from squeezing into one row?**
A: Lower Desktop Column in Content > Columns Manage. The label is literal, so Column 3 means three cards across, not a width percentage or a three-twelfths layout. The page also notes that cards follow the column count instead of a per-card width field, which makes this the main control for how dense the row feels on desktop.

**Q: Why does my Sub Title never appear in the article box?**
A: That is normal for this layout. Article Box renders only the Title, Description, and button, even though Sub Title exists in each item. The page says to move that text into Description if you need it visible. If you actually need a layout that shows a subtitle-style field, the tutorial points to Fancy Box as a different option.

**Q: How do I add space between article box cards?**
A: Use Columns Gap/Space Between in Content > Columns Manage. It accepts px, %, or em and can be set per device, so it is the right control when cards feel cramped or touch each other. The field is empty by default, which is why rows can look tight until you add breathing room.

**Q: What is the best way to make article boxes wider?**
A: Reduce Desktop Column rather than looking for a width setting. The page says card size follows the column count, not a per-card width field, so fewer columns automatically give each card more room. On a 1200 px page with the defaults, the tutorial measured cards at 285 × 255 pixels and four across in a 1120 px row.