Gallery Grid

Galleries are an essential part of any website. Galleries may showcase your work, illustrate products or services, highlight some specials in a nice image overviews with fullsize on-click lightboxes.

In the Elementor version of TheGem theme there is no special custom posttype for galleries, like in WPBakery theme version, as with Elementor it is no more needed. Now you can manage your galleries, images, its style and appearance all in one place, getting immediate visual results.

Check this demo pages showing different style presets for gallery grids in TheGem:

https://codex-themes.com/thegem-elementor/pages/galleries/galleries-01/
https://codex-themes.com/thegem-elementor/pages/galleries/galleries-02/
https://codex-themes.com/thegem-elementor/pages/galleries/galleries-03/
https://codex-themes.com/thegem-elementor/pages/galleries/galleries-04/
https://codex-themes.com/thegem-elementor/pages/galleries/galleries-06/

Note: all this styles can be easily customized to meet your individual design needs. No coding needed.

You can find “Gallery Grid” element in editing panel of Elementor in “TheGem Elements” group

Content Tab

Layout

Skin: TheGem comes with 12 style presets for gallery grids

Columns: specify the number of columns for gallery grid. You can choose between 2x, 3x, 4x columns or select 100% width. In case 100% width selected, gallery grid takes the full width of the screen. In this case you can additionally specify the number of columns for the grid, starting from 1920px screen resolutions (and greater). Please note: 100% width doesn’t appear as 100% width in Elementor edit mode as the element is always limited by section/column’s width settings. However on the front end the gallery grid will take the full 100% width.

Layout: here you can select the layout for your gallery grid. You can choose between justified grid, masonry grid or metro style grid.

Content

In this section you can add multiple galleries and insert images in this galleries. Each gallery is an item in a repeater; to add new gallery just click on “add item” button. To add images to your gallery, click on an item (gallery) to open it . Here you can specify the title of your gallery (this title will be used in a repeater) and add images by clicking on “+”

Popup will appear, where you can select multiple images from your media library. Of course you can also upload your images by using “Upload Files” tab

Once done, click on “Create a new gallery” and after that on “Insert gallery”

Options

Here you can enable lazy loading animation for the gallery grid. Once enabled, you can choose between 6 different animation effects.
In case metro style of gallery grid has been selected (in Content tab->Layout), you will get an additional setting to specify the maximal row’s height in metro grid. Metro grid sets the row’s height automatically depending on different resolutions. This setting enables you to decide which row’s height should be a max. allowed height.

Style Tab

Container Style

Various settings to customize the appearance of image container. Each image is situated inside the container; here you can specify border, radius, paddings, background of the container. Also you can control the size of the gaps between images by using “Gaps” slider control.

Image Style

Settings to customize the appearance of images in grid. In “Hover” tab you have “Hover Effect” setting with 6 different presets for hover effect, which can be further customized with additional settings. You can also specify, if you wish to show icon on hover, select this icon and customize its appearance