1. Home
  2. Docs
  3. Happy Elementor Addons Free
  4. Widgets
  5. Photo Stack

Photo Stack

If you want to add a stunning photo stack to your Elementor website, you should take a look at the Happy Addons’ new ‘Photo Stack‘ widget. With this free widget, you can showcase and customize your website images in a convenient way.

Pre-requisites

You need to install and activate the following plugins, to use the handy Photo Stack widget.

  • Elementor (Free)
  • Happy Addons (Free)

How To Use Photo Stack

Let’s see how to use the Photo Stack widget and customize it step-by-step:-

Add Photo Stack Widget

First of all, you need to search the widget from the Elementor widgets area. Then drag and drop it onto the suitable place on your website.

Add Photo Stack Widget

Content of Photo Stack

After adding the widget, you’ll get an interface like the below image.

In the Content area, you’ll get the option of adding the Items. To add an item, you need to click the ADD ITEM button. You can Duplicate and Remove an item according to your purposes.

You are also able to set Infinite Animation, Hover Animation, Animation Speed, and Alignment to the Photo Stack content. You’ll talk about these later.

Content of Photo Stack

Add Image & Set Iamge Size

To add an image to the item, you should click an individual item first and insert an image. You can also customize your image size using the Image Size option. Here, you notice that we’ve used a Custom image size. After setting a custom image size, you need to click the APPLY button to save the setting.

If you choose the Custom image size, you can only Crop the image.

Add Image & Set Iamge Size

Set Image Offset X & Y

You can set the image position according to your need. Using the Offset Y to manage the image position vertically. You can use the Offset X to control the horizontal image position.

You can also use the Link option to insert an anchor link to the image.

Set Image Offset X & Y

Set Z-Index

Using the Z-Index, you define which image will be on top of the other images. Here, we’ve set the Z-Index (1) while in other images Z-Index was (0). So the current image remains on top of the other images.

Set Z-Index

Infinite Animation

You can set your Infinite Animation based on your need. Here, we’ve added nine exclusive animation effects to decorate your image stack.

  1. Bounce Small
  2. Bounce Medium
  3. Bounce Large
  4. Fade
  5. Rotating
  6. Rotating Inverse
  7. Scale Small
  8. Scale Medium
  9. Scale Large
Infinite Animation

Set Hover Animation

You can also define your Hover Animation. We’ve included nine stunning animations. They are.

  1. Fly Small
  2. Fly Medium
  3. Fly Large
  4. Scale Small
  5. Scale Medium
  6. Scale Large
  7. Scale Inverse Small
  8. Scale Inverse Medium
  9. Scale Inverse Large
Set Hover Animation

Set Animation Speed & Alignment

You can control the Infinite Animation speed using the Animation Speed option. Also, set your entire content position using the Alignment setting.

Set Animation Speed & Alignment

Note: Please set your Infinite Animation speed in Seconds. The default value is 6s.

Common Style

In the Style->Common area, you’ll get the necessary customizing settings to style the Photo Stack content.

You can manage the Width and Minimum Height of the entire content.

You are able to set the Box Shadow and Border Type on the Normal & Hover option. And define Border Width and Color. Also, add Border Radius based on your need.

Common Style

Overflow

If your image overflow to another section of your page, you should set the Overflow->Hidden. Otherwise, you can keep it Visible. On the other hand, you can set the Overflow->Scroll. By setting this, you can see the big-sized image perfectly.

Overflow

Step 4: Advanced Options

If you want to add motion effects, happy effectsbackground, or make it responsive and more intriguing, click on ‘Advanced‘ to explore those options. the ‘Advanced‘ is a default feature of Elementor.

Give a read to this Document to know more about advanced features & functions.

Elementor Advanced Setting

Final Preview

With this Photo Stack widget, you can design these types of image styles for your website.

Final Preview

You can also watch this handy video tutorial and learn how to use the Photo Stack widget.

That’s it.

Was this article helpful to you? Yes No

How can we help?