Image Curtain

How to use Image Curtain features of Sky Addons for WordPress

The Sky Addons Image Curtain extension turns any Elementor container into a cinematic opening sequence. A strip of images sits across the container, each one opening from a narrow slit to its full width from the centre outward, then the whole strip falls away and the heading, button and anything else you placed in that container rise into the cleared space. It is the hero treatment agency sites use to introduce a page, and it is built entirely from your own container content — the extension adds no widgets of its own. This documentation will guide you through enabling and configuring the Image Curtain extension on your website.

Key Features

1. Works on any Elementor container — the content inside it stays yours to build with native widgets
2. An arched strip of images that opens from the centre outward, then drops out of frame
3. Full control of the arch — the tallest centre image, the shortest edge images, gaps and corner radius
4. Three playback modes: once when scrolled into view, once on page load, or replayed every time it returns
5. Separate timings for the opening, the stagger between images and the fall
6. Drop distance measured against the container, so it lands the same way at any height
7. Image size selectable per strip, so narrow columns do not download full-size photos
8. No stylesheet and no extra requests — the layout rules travel with the page’s own CSS

Activate Image Curtain Module

Image Curtain ships with Sky Addons Pro and is available once the module is switched on. To verify its status:

1. Navigate to your WordPress Dashboard and locate “Sky Addons” in the left sidebar menu
2. Open the “Widgets & Extensions” screen and switch to the Extensions list
3. Find “Image Curtain” in the list
4. Ensure the toggle switch is in the “On” position
5. Save your changes if you made any adjustments

Using Image Curtain

1. Open the Elementor Editor and select the container you want to open with a curtain — a hero section is the usual choice.
2. Give the container a height. 100vh works well for a full-screen introduction.
3. Build the content normally inside it — heading, text, button, whatever the section needs. The strip is injected behind them.
4. Open the “Style” tab, find the “Image Curtain” section marked with the Sky Addons icon, and switch “Enable” on.
5. Choose your images. The editor shows the strip already open so you can lay the section out; the animation itself runs on the front end.

Choose the Images

1. Choose Images – the strip is one column per image. An odd number gives a single tallest image at the centre of the arch, which reads better than two equal ones. Seven to eleven is the sweet spot.
2. Image Size – Medium, Medium Large, Large or Full. The images are narrow columns, so a smaller size loads faster with no visible difference. Raise it only if they look soft.

Shape the Strip

Every control in this group is responsive, so the arch can be shallower on a phone than on a desktop.

1. Strip Height – the height of the whole strip as a share of the container, default 100%. Every image is then sized inside it.
2. Tallest Image (centre) – the peak of the arch, default 92%.
3. Shortest Image (edges) – the images at each end, default 33%. Heights fade evenly from here up to the centre; set this equal to the tallest value for a flat strip with no arch at all.
4. Gap Between Images – the spacing between columns, 0 to 60 pixels.
5. Corner Radius – one value for all four corners of every image. The reveal clips each image, and a clip takes a single radius.

Configure the Animation

1. Playback – “Play once when scrolled into view” is the default and suits a section partway down the page. “Play once on page load” is only right when the container sits at the very top, otherwise the animation is over before anyone sees it. “Replay every time it scrolls back” re-runs it whenever the section returns to view.
2. Open Speed (seconds) – how long one image takes to open from a slit to its full width, default 1.1.
3. Stagger Delay (seconds) – the wait between one image and the next, counted outward from the centre, default 0.12. Set it to 0 to open them all at once.
4. Drop Speed (seconds) – how long the strip takes to fall once it has finished opening, default 1.1.
5. Drop Distance – how far the strip falls, as a share of the container height, default 45%. Around 45% leaves the images cropped along the bottom edge; past 80% drops them out of sight entirely.

The total time before your heading appears is roughly the open speed, plus the stagger multiplied by half the image count, plus most of the drop speed. Add those up before choosing values — three seconds of introduction is a long time to ask a visitor to wait.

Save and Preview

1. Click “Publish” or “Update” to save your changes.
2. Preview the page on the front end and scroll to the section — the editor deliberately shows the finished, opened state instead of animating.

Best Practices

1. Use an odd number of images. Seven or nine gives one clear tallest image at the centre; an even count leaves two competing for the peak.
2. Pick images that work as narrow slices. Each column is a crop of the centre of your photo, so a wide landscape loses its subject. Portraits, textures and close-ups hold up best.
3. Keep the whole sequence under about two seconds. It is an introduction, not a video.
4. Use it once per page. The effect works because it is the entrance to the page; a second one further down reads as a repeat.
5. Reduce the image count on mobile. Eleven columns on a phone become slivers. Consider a shallower arch and fewer, larger images there.

Troubleshooting

1. The animation does not play in the editor: that is intentional. The canvas shows the opened state so you can position the content; preview the page to see the sequence.
2. The strip appears but nothing animates on the front end: the visitor’s device may have reduced motion enabled, in which case the content is simply shown. Check on another device before assuming a fault.
3. The reveal jumps instead of easing, or the layout looks wrong after an update: the container is serving CSS generated before these rules existed. Re-save the page, or run Elementor’s “Regenerate Files & Data” from Elementor → Tools.
4. The images barely move when they drop: Drop Distance is a share of the container height, so a short container gives a short fall. Raise the container height or the percentage.
5. The section is squashed or the strip is cut off: give the container a real height. Without one it collapses to the height of its content and there is no room for the arch.
6. The section is empty: it should never be. The content is unhidden on every path, including when the extension is off, has no images, or the browser has no JavaScript. If you do see an empty container, check that the images were actually selected in Choose Images.

Frequently Asked Questions

Where do I put the heading and button?

Inside the same container, as ordinary Elementor widgets. The extension owns no content of its own — it injects the image strip behind whatever you build, and your widgets rise into place once the strip clears.

Why is it in the Style tab and not the widget panel?

Because it is an extension applied to a container rather than a widget you drop on the page. Select the container, open the Style tab, and the Image Curtain section is there with the Sky Addons icon beside it.

How many images should I use?

Seven to eleven, and an odd number. Fewer than five and the arch has no shape; more than about eleven and each column is too narrow to read as an image, especially on a phone.

Can I make the strip flat instead of arched?

Yes. Set “Shortest Image (edges)” to the same value as “Tallest Image (centre)” and every column takes the same height.

Does it add a stylesheet to my page?

No. The layout rules are written into the CSS Elementor already generates for the page, so the extension costs no extra request. Only the animation script is loaded, and only on pages that use it.

Related Documentation

• Background Reveal
• Reveal Effects
• Scroll Stack
• Reveal Gallery

Conclusion

The Image Curtain extension by Sky Addons for Elementor gives a page one memorable opening moment, built out of a container you were going to make anyway. Keep it short, keep it to the top of the page, and let the images carry the section. If you have any questions while using Image Curtain, the Sky Addons support team is happy to help.