Resources

Tools > Space Savers

Image

For basic image tools (e.g. layered images or gallery) see the Basic Tools page. This page shows image tools that economise page space and invite viewer interaction.

image comparison

For this, there is the PAE Image Comparison widget or the UAE Before After Slider.

image hotspot

The PAE Image Hotspot widget has a cool magnet/snapping feature. The UAE Hotspot tool is fine too though.

image scroll

The Image Scroll widget is not just for scrolling an image vertically with a mouse. You can just hover over an image and it can scroll horizontally. There are various ways you can use this in a design, such as by seeming to animate the surface of an ocean. Although Image Scroll is a foreground (not background) tool, meaning that you cannot place another widget on top of it. However, there is a workaround. You can play around with margins and absolute or fixed positioning so that the two widgets do indeed seem to overlap. For example, you could place the image or Lottie animation of a boat on top of a scrolled ocean image. Just remember to set the Z-index of the boat higher than the ocean image.

carousel

There are 4 ways to add a carousel. You could add a slideshow to the background of a container, which is great if you want foreground widgets to sit on top. Otherwise, you could use the foreground Elementor Carousel widget. This is good if you just want a straightforward image carousel. There is also the PAE Carousel, which is good if you want much more complex designs because in it, you don’t use just images, you use templates (each consisting of a combination of widgets). Finally, there is the PAE Advanced Carousel, which allows you to use a mix of images, videos and templates.

image accordion

The Image Accordion widget has the potential to be really funky, giving your site a bit of snap. See here for the tutorial.