How to use Showcase Wall Widget of Sky Addons for Elementor
The Sky Addons Showcase Wall turns a set of images into a tall, staggered wall of columns that moves as the visitor scrolls — the proof section modern template shops, agencies, and portfolios use to say “look how much we have made.” Columns start at different heights, drift at different speeds, and the wall’s edges dissolve into your background so it reads as an endless library rather than a cropped grid. Instead of assembling that look control by control, you pick a ready-made Design and the widget applies a motion, an offset rhythm, and an edge treatment that are known to work together. You can feed it a manual Image Gallery or pull featured images straight from a post query, and a built-in Tilt rotates the whole wall without ever bleeding outside its section. This documentation will guide you through the process of using the Showcase Wall widget from source to style.
Features:
- Six Ready-Made Designs: Editorial, Skyline, Arc Reveal, Theater, Stream, and Slant each combine a motion, an offset pattern, and an edge fade into one curated look, with a Custom option that unlocks every individual control.
- Five Motion Types: Parallax Drift, Converge, Depth Zoom, and Auto Marquee, plus None for a completely static wall.
- Offset Patterns: Alternate, Wave, Staircase Down, and Staircase Up decide how far down each column starts, giving the wall its handcrafted rhythm.
- Ten Edge Fade Styles: Bottom, Top, Top & Bottom, Sides, Frame, Spotlight, Diagonal, and Horizon dissolve the wall’s edges into whatever background sits behind the widget.
- Tilt Without Bleeding: Rotate the wall up to 15 degrees inside its own frame — nothing spills outside the section, the fades stay level, and the images never zoom or blur.
- Two Data Sources: Build the wall from a manual Image Gallery, or from the featured images of any post query using the Sky Addons query builder.
- Even Column Heights: Images repeat in the shorter columns so the bottom of the wall keeps the same rhythm as the top instead of ending ragged.
- Staggered Bottom Edge: Each column can end as far above the bottom as it starts below the top, shaping the wall at both ends rather than cutting it in a straight line.
- Responsive Column Counts: Set two to six columns per breakpoint — the wall re-deals its images to the new count instead of wrapping them onto a second row.
- Motion-Aware and Fast: The wall honors the visitor’s reduced-motion preference, eager-loads only the top row for a quick first paint, and lazy-loads the rest.
Insert Showcase Wall Widget
- Open your page in Elementor and click the + icon to add a new section.
- Search for Showcase Wall in the widget panel and drag it onto the canvas.
Choose a Design
The Design control at the top of the Layout section is the fastest way to a finished wall. Each design sets the motion, the offset pattern, and the edge treatment together, so you only have to tune sizes afterwards.
- Editorial: A calm parallax drift with alternating column offsets and a soft fade at the bottom. The default, and the safest choice for a template or portfolio section.
- Skyline: The same calm drift, but shaped at both edges — every column ends as far above the bottom as it starts below the top, with no fade at all.
- Arc Reveal: The outer columns start lower and rise into line as the visitor scrolls, opening the wall like an arc.
- Theater: A cinematic push-in — the wall settles back from a slight zoom while the columns drift, with both edges faded.
- Stream: An endless marquee that never stops and ignores the scroll entirely, with both edges faded.
- Slant: The endless marquee, tilted. The always-moving diagonal wall used as a hero background on modern landing pages.
- Custom: Unlocks the Motion, Offset Pattern, and Stagger Bottom Edge controls so you can build a combination of your own. Custom starts from the Editorial recipe, so nothing changes until you touch a control.
Sizes and tuning — columns, gap, offset distance, height, travel distance, fade size, and tilt — stay available on every design. A design owns the combination; you own the amounts.
Configure the Layout
The Layout section chooses the images and builds the grid.
- Source: Image Gallery for a manual set of images, or Dynamic Posts to use the featured image of every post a query returns.
- Images: Shown for the Image Gallery source. Aim for at least three images per column — twelve or more for the default four columns — because a fixed-height wall crops whatever overflows.
- Image Size: The WordPress thumbnail size used for every item (Large by default). Smaller sizes load faster; larger sizes stay sharp on wide screens.
- Columns: Two to six columns, set independently for desktop (default 4), tablet (default 3), and mobile (default 2). The images are re-dealt to the new count at each breakpoint.
- Gap: Space between columns and between images, in pixels, responsive per breakpoint.
- Tilt: Rotates the wall from -15 to 15 degrees inside its own frame. Subtle angles between four and twelve degrees look best. Leave it empty to keep the design’s own tilt.
- Height: Fixed crops the wall to a set height for the endless-library look, or Auto sizes the wall to its images so it can never leave a gap underneath.
- Fixed Height: The height of the wall in px or vh (default 820px), responsive per breakpoint. Shown when Height is set to Fixed.
- Offset Pattern: How far down each column starts — Alternate flips between two rows, Wave resets every third column, and the two Staircase options keep stepping (best with three or four columns). Shown for the Custom design.
- Column Offset: How far one offset step moves a column down, in pixels, responsive per breakpoint.
- Stagger Bottom Edge: Ends each column as far above the bottom as it starts below the top, so the wall is shaped at both ends. Needs a Fixed height, and is shown for the Custom design.
- Even Column Heights: Repeats images in the shorter columns so the bottom edge lines up instead of ending ragged. On by default for every scrolling design.
Configure the Query (Dynamic Posts)
The Query section appears only for the Dynamic Posts source and uses the standard Sky Addons query builder.
- Query Builder: Choose the post type, filter by taxonomy, term, author, or specific posts, set the ordering, and include or exclude items.
- Posts Per Page: How many posts to fetch for the wall (default 12). Posts without a featured image are skipped.
Configure the Motion
The Motion section governs how the wall moves. The motion type itself belongs to the design; the tuning below applies to whichever design you picked.
- Motion: Parallax Drift (columns pass each other at different speeds), Converge (outer columns rise into line), Depth Zoom (the wall settles back from a push-in), Auto Marquee (never stops, ignores the scroll), or None. Shown for the Custom design.
- Travel Distance: How far the columns move across the whole scroll, in pixels (default 140). Applies to the scroll-driven designs.
- Smoothness: How far the motion lags behind the scroll (default 0.6). Zero locks the wall to the scrollbar; higher values glide.
- Velocity Skew: Bends the wall while the visitor scrolls fast, then settles it back upright.
- Loop Duration: Time for one full marquee loop in seconds (default 60) — higher is slower. Shown for the marquee designs.
Configure the Edge Fade
The Edge Fade section decides how the wall’s edges end. The fade dissolves the wall to transparent rather than painting over it, so the edges blend into whatever background the section behind the widget has — set that section’s background color to change what the wall fades into.
- Fade Style: Design Default keeps the fade your chosen design ships with. None removes it. Bottom, Top, and Top & Bottom fade the horizontal edges; Sides fades left and right; Frame fades all four; Spotlight keeps a bright centre and dissolves outward; Diagonal fades toward a corner; and Horizon curves the bottom fade.
- Fade Size: How far the fade reaches inward, as a percentage of the wall, responsive per breakpoint. On Spotlight, a larger size tightens the bright circle.
Style the Showcase Wall
The Style tab holds the appearance of the individual images.
- Items:
Image Ratio (Original, Portrait 3:4, Tall 9:16, Square 1:1, Wide 16:9, or Page Preview 1:2.4), plus Border, Border Radius, and Box Shadow group controls for every image. Original keeps each image at its own height; any fixed ratio crops from the top, which is what full-page screenshots want.
Save and Preview
- Click Update in Elementor to save your page.
- Preview the page and scroll past the wall to watch the columns move, then check the layout on tablet and mobile widths.
Best Practices
- Give the wall plenty of images — at least three per column. A fixed-height wall is meant to overflow, and a short set leaves visible gaps.
- Set the section background, not a widget setting, to control what the edges fade into. The same wall then works on a dark hero and a white page with no reconfiguration.
- For full-page website screenshots, set Image Ratio to Portrait 3:4 or Page Preview 1:2.4 so every card is the same shape and the wall reads as a library.
- Use the Tilt control instead of Elementor’s Advanced transform. Tilt is clipped by the wall’s own frame, so nothing spills over neighbouring sections and the fades stay level.
- Pick Skyline when you want the wall’s shape to be the feature, and a faded design when you want it to sit quietly behind headings and buttons.
Troubleshooting
- The wall is empty: Add images to the Gallery, or — for the Dynamic Posts source — make sure the query returns posts that actually have a featured image. The widget reports both cases with a notice in the editor.
- There is a gap under the wall: Add more images, keep Even Column Heights on, or switch Height to Auto so the wall sizes itself to the images it has.
- Corners look cut off at the top: A fixed-height wall crops whatever crosses its edge, corner radius included. Fade the top edge to make the crop read as intentional, or use Auto height so every image is fully visible.
- The wall does not move: The widget respects the visitor’s reduced-motion setting and stays still when “reduce motion” is enabled in the operating system. Check that Motion is not set to None as well.
- Tilt makes the images look large: Lower the angle. A wider tilt needs a larger grid to keep the corners covered, so very steep angles show fewer columns.
Frequently Asked Questions
How is Showcase Wall different from a gallery or a grid?
A gallery lays images out in even rows and stops there. Showcase Wall stacks them into columns that start at different heights, move at different speeds as you scroll, and dissolve at the edges — so it reads as one continuous wall of work rather than a countable set of pictures.
How do I change the color the edges fade into?
Set the background of the section or container that holds the widget. The fade makes the wall transparent at its edges rather than painting a color over it, so the wall always dissolves into whatever is behind it — a solid color, a gradient, or even an image.
Can I tilt the wall without it overlapping other sections?
Yes — that is exactly what the Tilt control is for. It rotates the grid inside the wall’s own frame, which clips it, so the rotated wall can never spill onto the sections above or below. It also keeps the edge fades level and the images at their true size.
Do I have to use a Design, or can I build my own look?
Either way works. Choose Custom to unlock the Motion, Offset Pattern, and Stagger Bottom Edge controls and build your own combination. Custom starts from the Editorial recipe, so the wall looks the same until you change something. The fade and the tilt can be overridden on any design without switching to Custom.
Why do some images repeat in the wall?
That is the Even Column Heights option. Images are dealt one per column in turn, so columns naturally end at different heights and the bottom edge comes out ragged. Repeating images in the shorter columns keeps the bottom of the wall as deliberate as the top. Turn the option off if you would rather show each image only once.
Can the wall build itself from my posts?
Yes. Set Source to Dynamic Posts and use the Query section to choose a post type, taxonomy, or ordering. The widget uses each post’s featured image, skipping any post that does not have one, so the wall stays current as you publish.
Related Documentation
Explore other Sky Addons widgets that pair well with the Showcase Wall widget:
- Showcase Flow: A single-row, continuously drifting strip for logo walls and photo ribbons.
- Scrolling Gallery: A marquee-style gallery of images and photos.
- Reveal Gallery: An image gallery with animated reveal effects.
- Loop Grid: Render an Elementor loop template for every queried post in a grid.
Conclusion
The Showcase Wall widget from Sky Addons turns a folder of screenshots, projects, or featured images into a moving wall that makes a library feel endless. Pick a Design for an instant curated look, point it at a gallery or a post query, then tune the columns, height, fade, and tilt until it fits your section. Everything is built from the Elementor panel, with no code and no overflow tricks. If you have any questions or need help, visit the Sky Addons support center.