Sky Addons  ·  Elementor Widget
INTRODUCING

Portion Effect

An image grid for Elementor built from portions of different sizes — mosaic layouts where every tile is not identical.

Editorial hero

Three standing panels cut from one photograph.

Project index

Three planes of one apartment

The cover image of a finished job, standing up off the page instead of lying flat in a grid. Each panel folds in as the section arrives, then lifts when the cursor finds it.

  • One photograph, three standing panels
  • Panels cascade in on arrival
  • Hover lifts a single panel, not the row
ANDES
Travel feature

A spread opener that arrives in pieces

Five panels cut from a single landscape frame. They fold in one after another as the spread scrolls up, then swing open under the cursor — a magazine opener that does not need a video.

The studio

Where the hours go

Photoshop

85%

Illustrator

65%

Figma

85%

In design

80%

Web design

95%
Kitchen

The dish, standing up

A menu hero that is not another flat photograph. Three slabs of the same shot, lifted off the page, with the shadow doing the job a border used to do badly.

Zoom on hover — the panel pops forward and brightens.

Full width on a phone — the panels get taller instead of thinner.

Lookbook

Two frames, cut the same way.

Both are three standing panels lifted out of a single frame. What changes is how each one answers the cursor.

Studio, monochrome. The panels swing wide, so the frame reads as a door opening.

Location, colour. The panels tilt and scale, so the frame reads as a card being picked up.

Auction catalogue

The catalogue page for a single lot

One photograph of the lot, cut into three standing panels over a dark hall. The panels float under the cursor, so the page has something to do while a bidder reads the description underneath.

Behind the panels: a photograph of the hall, drifting slower than the page as you scroll.

FAQ
Frequently asked

Portion Effect

Straight answers about what this one does, where it fits in a real build, and what it costs you to ship.

Still stuck?

Read the documentation for this one, or write to us — a human answers inside a business day.

What does the Portion Effect widget actually do?

It slices one picture into free-standing 3D slabs. The Portion Effect widget in Sky Addons for Elementor takes a single image, then shows a different portion of it on each panel — every panel has a front face and an angled side face, so the set reads as blocks standing off the page rather than a flat grid.

How many images does the Portion Effect need?

Exactly one. Every panel paints the same file at a different background position, so a six-panel arrangement still downloads a single image. That makes it unusually light for a decorative hero effect — but it also means you cannot show six different photographs with it.

How do I position the panels in the Portion Effect?

Two ways. Each block in the repeater takes a preset position — Left Small, Center Large, Right Small, Far Left or Far Right — or you set Width, Height, Top and Left yourself as percentages, which override the preset. All four sliders are per device, so a mobile arrangement can differ entirely from desktop.

Do the Portion Effect panels animate on scroll?

Yes. Panels fold in one after another when the widget scrolls into view, driven by an intersection observer that fires once 40 percent of it is visible by default. Cascade delay, speed from 100 to 3000 milliseconds and six motion curves including a springy one are all adjustable, and Repeat on Scroll replays it each time.

Can the Portion Effect panels react to hover?

Yes — eight hover styles are available: Float, Unfold, Zoom, Spread, Swing, Tilt, Shutter and Lean, with Float as the default and an adjustable lift height. They are 3D transforms on panels that are already rotated, so pick one and stay with it; stacking a dramatic hover on a dramatic entrance reads as noise.

Does the Portion Effect require Elementor Pro?

No — and it does not need Sky Addons Pro either. Portion Effect is part of the free Sky Addons plugin and runs on free Elementor with any theme. The whole effect is CSS 3D transforms with a small script for the scroll trigger, with no animation library behind it.

Does the image in the Portion Effect have alt text?

No. The picture is applied as a CSS background to each panel face, so there is no image tag, no alt attribute and no responsive srcset — treat it as decoration and put the meaning in the heading beside it. It also means the file loads at whatever size you uploaded, so resize before uploading.

What shape does the Portion Effect block occupy?

A fixed two-to-one landscape frame. The panel stage keeps that ratio whatever the source image is, and the panels are placed inside it as percentages, so the arrangement scales cleanly with the column width. Choose a wide image; a tall portrait shot will be heavily cropped by the panels.

Can I change the thickness and angle of the 3D sides?

Yes. Panel height, a box shadow, and the front face’s angle between 30 and 50 degrees are all controls, and the side face has its own width, its own Y rotation and a brightness filter so the edge reads darker than the face. That brightness difference is what sells the extrusion.

Is the Portion Effect a good choice for a photo gallery?

No — it shows fragments of one picture, not a set of them, and none of the panels is clickable or opens a larger view. It is a hero or section-break flourish. If visitors need to browse or open images, use one of Sky Addons’ gallery widgets and keep this for the decorative slot.