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