--- title: "How to Create an Infobox/Service Box Carousel in Elementor?" url: https://theplusaddons.com/docs/create-an-infobox-service-box-carousel-in-elementor/ date: 2024-03-14 modified: 2026-09-16 lang: en author: "Aditya Sharma" description: "Six services will not fit comfortably in one row. A carousel shows two or three at a time and lets the visitor page through the rest, without pushing the page..." image: https://theplusaddons.com/wp-content/uploads/2024/03/Service-Box-Carousel-in-Elementor_-1024x536.jpg word_count: 763 --- # How to Create an Infobox/Service Box Carousel in Elementor? ## - The Plus Addons for Elementor Info Box widget uses a Carousel layout that keeps all boxes in one widget, so the user edits every item in one place. - The Carousel layout needs The Plus Addons for Elementor Pro, and the free plugin shows an upgrade notice instead of working. - Carousel Options in the Style tab control Desktop Columns, Show Dots, Show Arrows, Autoplay, and Slide Speed, with defaults of 4 columns, dots on, arrows off, autoplay on, and 1300 milliseconds. - The carousel only slides when there are more items than columns, and it moves on the published page while the editor canvas shows a static preview. Six services will not fit comfortably in one row. A carousel shows two or three at a time and lets the visitor page through the rest, without pushing the page any longer. The **Info Box** widget has a **Carousel** layout that holds all of the boxes in a single widget, so you edit them in one place. *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:** **Pro** — the Carousel layout needs The Plus Addons for Elementor Pro. In the free plugin the option is still in the panel but shows an upgrade notice instead of working.- **Widget to enable:** Info Box, switched on under **The Plus Addons > Widgets**. In the Elementor panel it appears under **Plus Essential**.- **You will need more items than columns.** A carousel with four boxes and four columns has nothing to slide — see the note below. ## Switch to the Carousel Layout - Add the **Info Box** widget to your page.- In the **Content** tab, set **Select Layout** to **Carousel**.- A repeater called **Carousel InfoBox** appears, already holding four items. ![The Select Layout dropdown in the Elementor panel, with the Info Box on the canvas](https://theplusaddons.com/wp-content/uploads/2026/09/infobox-layout.webp) ## Fill In Your Items Open a row in **Carousel InfoBox** to edit that one box. Each row has its own: - **Title** and **Description**.- **Link** for the title.- **Select Icon**, with **Icon Font** and the icon library underneath, or **Use Image As icon** if you pick **Image**.- **Button Text** and **Button Link**.- A **Background Image Normal & Hover** group for a picture behind the box.- **Full Infobox Link**, which makes that one box clickable all over. Use **+ Add Item** to add more boxes, and the handle on the left of each row to reorder them. ![Adding and editing items in the Carousel InfoBox repeater](https://theplusaddons.com/wp-content/uploads/2024/03/services-box-carousel.gif) > *There are **two** **Select Icon** dropdowns in this layout. The one in the main **Content** section sets the icon type for the whole carousel at once; the one inside a repeater row sets it for that box only.* ## Set Up the Sliding The slider controls live in the **Style** tab, under **Carousel Options**. | Setting | What it does | Default | | ------- | ------------ | ------- | | **Desktop Columns** | How many boxes are visible at once. | **4** | | **Show Dots** | The row of dots under the carousel. | **On** | | **Show Arrows** | The previous and next arrows. | **Off** | | **Autoplay** | Advances the carousel on its own. | **On** | | **Slide Speed** | How long each transition takes, in milliseconds. | 1300 | > ***Start here if nothing slides.** With the shipped defaults — four items and **Desktop Columns** set to 4 — every box is already on screen, so there is nothing to page through. The arrows and dots do not appear either, even with both switched on. Add more items, or lower **Desktop Columns**, and they appear straight away.* ![An Info Box carousel on the front end showing two of six items, with previous and next arrows and six dots](https://theplusaddons.com/wp-content/uploads/2026/09/infobox-result-carousel.webp) ![A finished service box carousel sliding on a published page](https://theplusaddons.com/wp-content/uploads/2024/03/services-box-carousel-demo.gif) ## How It Behaves - **Autoplay** is on out of the box, so a correctly sized carousel starts moving on its own as soon as the page loads.- The dots count **positions**, not boxes. Six items shown two at a time gives you six dots, each scrolling the pair along by one.- **Desktop Columns** has matching **Tablet** and **Mobile** settings, so you can show two on a tablet and one on a phone.- The carousel only slides on the published page. The editor canvas shows a static preview. ## Limitations - **The whole layout is Pro.** In the free plugin the **Carousel** option is present but the repeater is not, and a page saved with it renders no slides at all.- **Show Arrows and Show Dots are ignored when there is nothing to scroll.** Nothing in the editor tells you why they have not appeared.- Every box in the carousel shares one **Info Box Style**. You cannot mix Style-1 and Style-3 items in a single widget.- Reordering rows changes the slide order but not the dot labels, which you set separately if you drive the carousel from a Carousel Remote. ## Troubleshooting ### Nothing slides and there are no arrows or dots You have as many columns as items. Lower **Desktop Columns** in **Style > Carousel Options**, or add more rows to **Carousel InfoBox**. ### The Carousel InfoBox repeater is missing The Carousel layout needs Pro. Without it the dropdown still offers **Carousel**, but there is no repeater to fill in. ### All my boxes look the same and I wanted different icons You have set the shared **Select Icon** in the main **Content** section. Set it per row instead, inside each **Carousel InfoBox** item. ### It slides on the front end but not in the editor That is expected. Preview or publish the page to see the carousel move. ## Related Docs - [Info Box Widget: Settings Overview](https://theplusaddons.com/docs/info-box-widget-settings-overview/)- [How to Connect Elementor Infobox with Carousel Remote?](https://theplusaddons.com/docs/connect-elementor-infobox-with-carousel-remote/)- [How to Show a Services Box in WordPress using Elementor?](https://theplusaddons.com/docs/show-services-box-in-wordpress-using-elementor/) ## Frequently Asked Questions **Q: Why isn’t my infobox carousel sliding or showing arrows and dots?** A: That usually means there is nothing to scroll. The shipped defaults use four items and Desktop Columns set to 4, so every box is already visible and the carousel has no reason to move. In that state, Show Arrows and Show Dots stay hidden even if they are switched on. Add more items or lower Desktop Columns in Style > Carousel Options, and the controls appear right away. **Q: Do I need the Pro version to create an infobox carousel in Elementor?** A: The Carousel layout is a Pro feature in The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH. In the free plugin, the Carousel option still appears in the panel but it shows an upgrade notice instead of working. The page also notes that a saved page with the free version renders no slides at all, so Pro is required for the layout to function. **Q: How many infoboxes can I show at once in the carousel?** A: The number shown at once is controlled by Desktop Columns in Style > Carousel Options. The page says a carousel can show two or three at a time, and the default desktop setting is 4. That matters because if your item count matches your column count, there is nothing left to slide through. Tablet and Mobile have matching settings too, so you can reduce the visible count on smaller screens. **Q: Can I use different icons for each box in the same infobox carousel?** A: Different icons per box are handled inside each Carousel InfoBox row, not by the shared icon setting in the main Content section. The page calls out two Select Icon dropdowns: one sets the icon type for the whole carousel, while the one inside a repeater row applies only to that box. That distinction is what trips people up when every item ends up looking identical. **Q: Why does the carousel move on the live page but look static in Elementor?** A: That behavior is expected. The editor canvas shows a static preview, while autoplay and sliding only show up on the published page or in preview. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH uses a live front-end carousel here, so judging motion inside the editor will make it look broken when it is not. **Q: What’s the difference between an infobox carousel and a regular services box layout?** A: The carousel layout keeps all boxes inside one Info Box widget and lets visitors page through them without making the page longer. That makes it a better fit when six services will not fit comfortably in one row. If you want a broader setup guide for service-style boxes in WordPress using Elementor, there is also [How to Show a Services Box in WordPress using Elementor?](https://theplusaddons.com/docs/show-services-box-in-wordpress-using-elementor/).