Photo Album Element
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.
- Image Gallery
- Masonry Layout Images
- Lightbox Image
In this article
Displaying a Photo Album Element
To add a Photo Album element to a page:
|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:
|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|
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.
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.