One of the elements of Phlox Elements plugin is Gallery widget. Your images can be displayed in a gallery which is customizable. You can specify the gallery layout and change its style or even columnize the images.
You can find gallery demos here.
Follow below steps to add Gallery Widget in your posts and pages content.
Access Modern Gallery Options in Elementor Page Builder
- Go to your WordPress Admin Panel
- Click the Pages on the Dashboard
- Click the Add New
- Navigate to the top left hand of the WordPress text-box and find Edit with Elementor button.
- Check out Elements
- Scroll down to PHLOX - General section
- Choose Modern Gallery
After adding modern gallery to your post or page, you are able to customize it by available options:
You can select the images you want to appear in the gallery by clicking on ADD IMAGES button.
There are three available layouts: Grid, Masonry, and Tiles
On Grid and Masonry galleries, you are able to change the number of columns up to 6 columns. Also, you are able to change the column numbers on mobile and tablet.
Like the previous option, on Grid and Masonry layouts. You can change the values from 0 to 40 pixels.
Image Aspect Ratio
This option is only available for Grid layout. You can change it from 0.1 to 2.
Your images can be linked to Media File, Attachment Page, Lightbox, or you can simply choose no link for them.
You can add pagination to your gallery and change the two following options:
This option is suitable for long webpages. Images outside of viewport will not be loaded before user scrolls to them.
Images per Page
You can show up to 100 images per page.
Order by Query
After you enable this option, you can change the images order:
You can order them either ascending or descending.
- Date: Order the posts by their publication date
- Menu Order: Order by page order
- ID: Order by post ID
You can choose a color for the image hover overlay. Also, you are able to change the hover transition duration in milliseconds. The space around of the image can be increased after hovering with increasing image hover zoom.
If you add an image border, it can be Solid, Double, Dotted, Dashed, and Groove. Besides, you can change the width and color. Or add a Border Radius in pixels.
Check out this article to know more about Advanced tab and start working with Elementor.