Photo Album Element

Last Updated on

The Photo Album element allows you to show a series of images in an image gallery in a unique way. It also works well on all devices, making it easy to display your images for desktop, tablet, and mobile screens. In this article, we’ll explain how to configure the Photo Album element.

Photo album shortcode - demo

Common Uses:

  • Image Gallery
  • Masonry Layout Images
  • Lightbox Image
x
Beware! This element is a part of the Raven elements. Raven is an exclusive plugin developed by Artbees which represents new useful elements to Elementor. In order to see the default Elementor Image Gallery, you need to look for it in the Elementor knowledgebase.

In this article


Displaying a Photo Album Element

To add a Photo Album element to a page:

1
Add a new page or edit an existing one.
2
Click on Edit with Elementor button.

3
From the left dashboard, search for a “Photo Album”.

4
Drag and drop the Photo Album element to your page.

5
A new dashboard on the left will open with the element’s settings. These are explained below.

Content

SettingDescription
Skin Choose between two different skins which change the styling. (Cover and Stack)
Item Add an image gallery item. Here you can add your images, title, and description for them. Also, it has a Stack Color option which has uses in the Stack skin.
Settings From settings you can configure the layout, the number of columns, image size, hover effects, etc.

The options inside the Settings section may vary based on the Skin chosen in the Content section.


Creating a Masonry Photo Album

To create a Masonry Photo Album, follow the steps below:

1
Follow the steps in Displaying a Photo Album Element section to add the Photo Album to your page.
2
Configure the settings like shown below:
SettingDescription
Item Add your items and images to them.
Settings > Layout Masonry
Settings > Columns Choose your desired number of coluns
Style > Column Spacing 0
Style > Row Spacing 0
3
Configure the rest of settings as you desire and publish or update the page.

In order to have the best Masonry view, it is recommended to use the “Full” size image in the settings.


Frequently Asked Questions

Which image size should I use?

We recommend using image files of small file sizes for best results, though the limit for an individual image upload is set in WordPress config files. When it comes to image size, bigger isn’t always better, as uploading larger images can affect site performance. Your images should be optimized as explained in this article.

Configuring Hover Effects

Photo Album element has 6 animated hover effects: grow, shrink, pulse, pop, grow rotate, wobble skew, buzz out. You can set a hover effect in Photo Album Settings > Hover Effect.


Responsive Options

You can choose to have different settings on different screen sizes for some of the Photo Album element options. Whenever you see this icon, it means that you can choose different screen size and freely change that options for your specific resolution.

At first you’ll see the icon for desktop layout only

But when you click that icon, you’ll get two more layouts: for tablet and phone.

To learn more about it, please check this article.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket