---
title: "How to Create a Unique Portfolio Section in Elementor?"
url: https://theplusaddons.com/docs/create-a-unique-portfolio-section-in-elementor/
date: 2024-05-29
modified: 2026-09-21
lang: en
author: "Aditya Sharma"
description: "A portfolio section does not need a grid of thumbnails. A column of project names next to one large image, with the image changing as the visitor runs down the..."
image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Create-a-Unique-Portfolio-Section-in-Elementor_-1024x536.jpg
word_count: 952
---

# How to Create a Unique Portfolio Section in Elementor?

## 

- Animated Service Boxes in The Plus Addons for Elementor Pro uses the Portfolio layout to place project names in one column and one large image beside them, with the image changing on hover.
- The Plus Addons for Elementor Pro requires Elementor installed and active, plus Animated Service Boxes enabled under The Plus Addons > Widgets, and it has no free equivalent widget.
- Portfolio items use each item’s Title as the clickable project name, Featured Image as the hover image, and Button Link as the URL for both desktop clicks and the small-screen link.
- Portfolio switches to a two-tap mobile behavior at 1024 px and below, where the first tap reveals the Title On Click Text link, with Click Here as the default wording.

A portfolio section does not need a grid of thumbnails. A column of project names next to one large image, with the image changing as the visitor runs down the list, reads far better.

The **Animated Service Boxes** widget builds exactly that with its **Portfolio** layout, and has a separate setting for touch screens, where there is no hover to work with.

***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.- **Prerequisite:** a **Button Link** for each item. In this layout the title itself is the link, and on screens 1024 px and narrower the **Title On Click Text** link uses the same URL.- **Nothing else to switch on:** no extension and no site-wide setting is needed for this widget.

## Build the portfolio section

- Edit the page with Elementor and drag in the **Animated Service Boxes** widget.- In **Content > Animated Service Boxes**, set **Main Style** to **Portfolio**.- Pick a **Style**, shown as two pictures. **Style 1**, the default, puts the titles in one column and the image in the other. **Style 2** uses the image as the background of the whole block with the titles over it.

- Open the **Animated Service Boxes** list — three items to start. In each one set the **Title**, which is the clickable project name, and the **Featured Image**, which is the picture shown while that title is hovered.- Put the project's URL in **Button Link**. In this layout there is no separate button — the **Button** switch is hidden — and this field is what the title links to.- Open **Content > Title On Click Text** and set the wording for small screens. The default is **Click Here**; something like **Explore Project** reads better.- Use **Content > Layout** for the section **Height**, the **Text Alignment** of the titles and their vertical **Offset**.

![Portfolio Style 1: hovering the third title swaps the image on the right](https://theplusaddons.com/wp-content/uploads/2026/09/animatedservice-result-portfolio.webp)

Use **+ Add Item** for more projects. There is no Columns Manage section here — the two-column split is the layout.

## Settings for this layout

| Setting | Where | What it does | Default |
| ------- | ----- | ------------ | ------- |
| **Style** | Content > Animated Service Boxes | **Style 1**: titles and image side by side. **Style 2**: the image behind the titles. | **Style 1** |
| **Image Resolution** | Content > Animated Service Boxes | The image size each Featured Image is loaded at. | **Full** |
| **Button Link** | inside each item | Where the title goes when clicked, and where the small-screen link goes too. | `#` |
| **Title On Click Text** | Content > Title On Click Text | The link wording revealed by the first tap on screens 1024 px and narrower. | **Click Here** |

## How It Behaves

- **Hovering a title swaps the image.** With three items we watched the shared image start on the first project's picture and become the third project's after hovering the third title. The hovered title is the one marked active, and the image block measured 570 × 600 pixels beside the list.- **The first item's image is what loads.** Reorder the items if you want a different opening picture.- **On small screens the first tap does not follow the link.** At 390 px the widget showed only the three titles. Tapping the active title once added a link reading **Explore Project** — the wording from **Title On Click Text** — pointing at that item's **Button Link**. Tapping that link is what opens the project. The widget switches to this behaviour at 1024 px and below.

## Limitations

- **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.- **There is no button in this layout.** The **Button** switch is hidden for Portfolio, so **Button Text** is unused and **Button Link** serves the title instead.- **The small-screen link is not visible up front.** Visitors on a phone see only the titles until they tap one, which means the two-tap journey needs the **Title On Click Text** wording to make sense on its own.- **All items share one image slot.** Only one picture is on screen at a time, so this layout is not a way to show several images together.

## 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.- **Image Resolution.** Only the default **Full** was used; no other size was measured.- **The Style tab.** No styling control was exercised, so this doc names the sections that exist and does not describe what each one does.- **Tablet widths.** The small-screen behaviour was watched at 390 px only, although the widget's own cut-off is 1024 px.

## Troubleshooting

### The image does not change

Check that each item has its own **Featured Image**. If several items share one picture there is nothing to see when you move between them.

### Clicking a title on my phone does nothing

It did something — the first tap reveals the **Title On Click Text** link under the title. Tap that link to open the project.

### The small-screen link says Click Here

That is the default. Change it in **Content > Title On Click Text**.

### I cannot find Columns Manage

Portfolio does not have one. Use **Content > Layout** for the section height and the alignment of the titles instead.

## Related Docs

- [Animated Service Boxes Widget: Settings Overview](https://theplusaddons.com/docs/animated-service-boxes-widget-settings-overview/)- [How to Change Background Image on Hover in Elementor?](https://theplusaddons.com/docs/change-background-image-on-hover-in-elementor/)- [How to Create an Image Accordion in Elementor?](https://theplusaddons.com/docs/create-an-image-accordion-in-elementor/)

## Frequently Asked Questions

**Q: What do I need before building a portfolio section in Elementor?**
A: The setup depends on the Pro version of The Plus Addons for Elementor, because Animated Service Boxes ships only there and the free plugin has no equivalent widget. Elementor free also needs to be installed and active. Each portfolio item needs its own Featured Image in the Media Library and a Button Link, since the title uses that URL. If an item has no image, Elementor falls back to a grey placeholder.

**Q: How do I make the project title change the image on hover?**
A: The Portfolio layout in Animated Service Boxes is built for that behavior: each title is clickable, and hovering a title swaps the shared image area to that item’s Featured Image. The first item’s image loads first, so item order controls the opening visual. That matters if you want a specific project to lead the section. The page also notes that only one picture is shown at a time, so this is not a gallery layout.

**Q: What should I use for mobile so titles still open on touch screens?**
A: Mobile uses a two-tap flow because there is no hover on touch screens. At 1024 px and below, the first tap reveals the Title On Click Text link under the title, and the second tap opens the project URL from Button Link. The default wording is Click Here, but something like Explore Project reads better because it explains what the visitor should do next.

**Q: Can I use this layout to show several portfolio images at once?**
A: No, this layout is built around one shared image slot, not multiple visible thumbnails. That design is what makes the title list and large preview work together, but it also means only one picture appears on screen at a time. If your goal is to display several images together, this section is the wrong fit; it works better when you want one featured image to change as people move through project names.

**Q: What is better for this portfolio section: Style 1 or Style 2?**
A: Style 1 is the safer default because it puts titles in one column and the image in another, which matches the tutorial’s tested front-end setup. Style 2 moves the image behind the titles across the whole block, so it changes the visual balance more aggressively. If you want predictable spacing and clearer scanning of project names, Style 1 is easier to work with; Style 2 is more of a presentation choice.

**Q: Why can’t I find Columns Manage in Portfolio layout?**
A: Portfolio does not have a Columns Manage section because its two-column split is fixed by the layout itself. That means there is nothing to tune separately for desktop, tablet, or mobile. Instead, use Content > Layout for section height, title alignment, and vertical offset. The practical takeaway is that responsive control here comes from content arrangement and spacing, not from per-breakpoint column settings.