---
title: "How to Show a Services Box in WordPress using Elementor? [Easy Guide]"
url: https://theplusaddons.com/docs/show-services-box-in-wordpress-using-elementor/
date: 2024-03-14
modified: 2026-09-16
lang: en
author: "Aditya Sharma"
description: "A services box is the small card that names one thing you do, says it in a sentence, and offers a way to read more. Three or four of them..."
image: https://theplusaddons.com/wp-content/uploads/2024/03/How-to-Show-a-Services-Box-in-WordPress-using-Elementor_-Easy-Guide-1024x536.jpg
word_count: 643
---

# How to Show a Services Box in WordPress using Elementor? [Easy Guide]

## 

- Info Box widget crea una caja de servicios en pocos clics, y en la versión gratuita incluye las partes necesarias para una caja de servicios estándar.
- The Plus Addons for Elementor muestra Info Box bajo Plus Essential, y el artículo indica que el widget debe estar instalado y activado bajo The Plus Addons > Widgets.
- Style-1, Style-3 y Style-4 son gratis, mientras que Style-2, Style-5 y Style-6 requieren Pro; además, la opción Carousel repite cajas y también es Pro.
- El botón está desactivado por defecto, acepta un enlace real como #pricing o una URL completa, y Font Awesome 5 se muestra como inline SVG incluso en páginas que no cargan la hoja de estilos de Font Awesome.

A services box is the small card that names one thing you do, says it in a sentence, and offers a way to read more. Three or four of them side by side is how most service pages open.

The **Info Box** widget makes one in a few clicks, and the parts you need for a standard services box are all in the free plugin.

*To check the complete feature overview documentation of The Plus Addons for Elementor Info Box widget, [click here](https://theplusaddons.com/docs/info-box-widget-settings-overview/).*

***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

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

## Before You Start

- **Edition:** Free — this part of the Info Box works in the free plugin and in Pro.- **Widget to enable:** Info Box, switched on under **The Plus Addons > Widgets**. In the Elementor panel it appears under **Plus Essential**.- **Planning a row of them?** Build one container with three or four columns and drop an Info Box widget into each, rather than looking for a repeat setting.

## Build the Box

- Edit your page with Elementor and drag **Info Box** from the **Plus Essential** group onto the canvas.- Leave **Select Layout** on **Listing**.- Choose **Style-1**, **Style-3** or **Style-4** in **Info Box Style**. These three are free; the other three need Pro.- Replace **Title Of Info Box** with the name of the service, and the **Description** with a sentence about it.- Leave **Select Icon** on **Icon** and pick a glyph, or switch it to **Image** and choose a picture.

![Setting the Info Box style, title and description in the Elementor panel](https://theplusaddons.com/wp-content/uploads/2024/03/Services-Box-Content.gif)

## Add the Button

Switch **Button** on. It is off by default.

- **Button Text** starts as **Read More**.- **Button Link** takes the page the button should open.- **Button Style** offers **Style 1**, **Style 2** (the default) and **Style 3**.- **Button Type** stays on **Basic** unless you want the button to follow a global button style.

![A finished services box on the front end with an icon, title, description and a See Plans button](https://theplusaddons.com/wp-content/uploads/2026/09/infobox-result-services.webp)

## Which Icon Types You Can Use

| Select Icon | Edition |
| ----------- | ------- |
| **None**, **Icon**, **Image**, **Text** | Free |
| **Svg** | **Pro** |
| **Lottie** | **Pro** — the option is not in the free dropdown |

> *With **Icon** selected, **Icon Font** lets you choose **Font Awesome** or **Font Awesome 5** free. **Icons Mind** and **Icon Image** need Pro.*

## Finish the Look

Open the **Style** tab and work through the sections you need: **Title** and **Description** for typography and colour, **Icon** for the glyph size and its frame, **Background Options** for the card background including its hover state, and **Button** for the button itself.

![A row of finished services boxes on a published page](https://theplusaddons.com/wp-content/uploads/2024/03/Services-Box-Demo-1024x280.png)

## How It Behaves

- The button is a real link, so it works with an anchor such as `#pricing` as well as a full URL.- **Title Tag** defaults to **div**. If each box heads a real section of the page, set it to **H3** so the page outline is correct.- Font Awesome 5 glyphs are output as inline SVG, so they render even on pages that do not load the Font Awesome stylesheet.

## Limitations

- **One widget is one box.** The free plugin has no repeat option in the Listing layout — a row of four services means four widgets. The **Carousel** layout does repeat, and it is Pro.- **Choosing a Pro style leaves you with an empty card.** **Style-2**, **Style-5** and **Style-6** render nothing at all without Pro — no icon, no title, no text.- The boxes do not equalise their own heights. If one description is longer, use Elementor's container alignment, or the **Equal Height** extension.

## Troubleshooting

### The card is empty on the front end

You have selected a Pro style. Switch **Info Box Style** to **Style-1**, **Style-3** or **Style-4**.

### The button does not appear

**Button** is off by default. Switch it on in the **Content** tab, then fill in **Button Text** and **Button Link**.

### My boxes are different heights

That is normal flow. Trim the descriptions to a similar length, or switch on the **Equal Height** extension under **The Plus Addons > Extensions**.

## Related Docs

- [Info Box Widget: Settings Overview](https://theplusaddons.com/docs/info-box-widget-settings-overview/)- [How to Create an Infobox/Service Box Carousel in Elementor?](https://theplusaddons.com/docs/create-an-infobox-service-box-carousel-in-elementor/)- [How To Create an Elementor Image Box?](https://theplusaddons.com/docs/create-elementor-image-box/)

## Frequently Asked Questions

**Q: What do I need before building a services box in Elementor?**
A: The key requirement is that The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH is installed and activated, because the Info Box widget is part of that plugin. This tutorial also uses the free plugin for the standard services box setup. In Elementor, the widget appears under Plus Essential, so that is where you look when you start building the card.

**Q: How do I make a row of service boxes instead of one box?**
A: A services page usually starts with three or four cards side by side, and this setup uses one container with three or four columns plus one Info Box widget in each column. That matters because the free plugin has no repeat setting in the Listing layout, so each service box is its own widget. If you want repeated boxes in a carousel, that is a Pro-only path.

**Q: Which Info Box styles are free for a services box?**
A: Style-1, Style-3, and Style-4 are the free Info Box styles for this layout. Choosing Style-2, Style-5, or Style-6 leaves you with an empty card unless you have Pro. That makes style choice important early on, because a Pro style can look like a broken box on the front end even when the widget settings are otherwise correct.

**Q: Why is my services box empty on the front end?**
A: An empty card usually means a Pro style was selected in the free plugin. Style-2, Style-5, and Style-6 render nothing at all without Pro, so there is no icon, title, or text to show. Switching to Style-1, Style-3, or Style-4 restores the standard services box content and avoids that blank-card problem.

**Q: Why does my button not show up in the Info Box?**
A: The button is off by default in the Content tab. It only appears after Button is switched on and both Button Text and Button Link are filled in. That link can be a full URL or an anchor like #pricing, so the button is meant to behave like a real navigation element rather than just decoration.

**Q: How do I keep all my service boxes the same height?**
A: Uneven heights are normal because each box follows its own content length. If one description runs longer than the others, trim the copy so it stays close in length or turn on Elementor's Equal Height extension under The Plus Addons > Extensions. The page also notes that container alignment can help when you want a cleaner row layout.