Gallery Layouts

The gallery images will be placed in a grid. Let’s see next the grid layouts options.

Design Tab > Gallery > Layout

Here you will be able to select the desired grid layout.

Masonry

This option will place the images in optimal position based on available vertical space, sort of like a mason fitting stones in a wall.

If you select the Masonry layout option a field called Horizontal Order will appear. Check this field if you want the images to (whenever possible) maintain horizontal left-to-right order.

We understand the Horizontal Order option can be confused, so were are going to elaborate and use an example for a better undestarding of this field.

Let’s imagine that we are showing these five images (1, 2, 3, 4 and 5) and let’s see how the rest would be placed depending on whether the Horizontal Order option is enabled or not.

If you add a new image, it will be placed below the third image as you can expect in a masonry grid.

However, if the Horizontal Order option is enabled, the new image will be placed (if possible) below the first image and the next one below the second one. This way, the images are placed following a left-to-right-order.

They are both very similar. For that reason, we recommend that you just use the Masonry option when in doubt. In the end, you were probably looking for a masonry layout, regardless the order.

Grid

This option will place the images in a standard grid. We are using a standard grid in the DonDivi Grid module, so you can learn more about grids there.

Design Tab > Gallery > Columns

Whichever grid you are using you will be able to set the grid columns for desktop, tablet and phone.

We recommend that you use a mobile-first approach: first, set the columns for mobile and then for desktop.

Design Tab > Gallery > Gap

Here you can set the space between the gallery images. Default is 10px.

Apart from the layout fields, we offfer different customization options for all grid layouts that will be covered next in this documentation.

Gallery

Once you understand how the grid layouts place the images, let’s move on to the gallery fields.

More specifically, let’s go over how to create and customize the gallery. In the next section we will cover the gallery image fields.

Content Tab > Gallery > Image Count

Here you can choose how many images will be displayed. Leave this field empty to display all selected images.

You will probably want to set an image count when either paginating the gallery or showing the load more button.

Content Tab > Gallery > Image Order

Which ordering method do you want to be used?

Default

This option will display the images in the same order you selected them.

Date: new to old

This option will order the images by date. Newest first.

Date: old to new

This option will order the images by date. Oldest first.

Title: a-z

This option will order the images by the image title. Ascending order.

Title: z-a

This option will order the images by the image title. Descending order.

Random

Select this option if you don’t want the images to be ordered. They will be displayed randomly.

Content Tab > Gallery > Filterable Gallery

This options will allow you to filter the gallery images by DonDivi Categories.

You can set image categories in the Media Library (see the Image Details screenshot above).

You can assign multiple categories to an image by entering the categories separated by commas.

Once you have set the DonDivi categories and you have enabled this field, filter buttons will appear, so you can show the images from the selected category only.

Also, new fields will appear in the design tab to style the filter buttons.

Content Tab > Gallery > Load More

In case you are not displaying all the gallery images (see the Image Count field above), you can enable this field to render a button so the user can see more images.

If you enable this field a new field will appear you you can enter a custom button name.

This field comes with responsive options and the button will appear in the devices where you have set a button name.

You can show the buttons for specific devices only and you can even change the button name for different devices!

How does the Load More option works? An example worth more than a million words.

Let’s suppose that you are displaying 6 images, clicking this button will show another 6 images. The button will appear until all images have been displayed.

You can style this button in the new Load More toggle that will appear in the design tab once enabled this field.

Content Tab > Gallery > Show Pagination

Not only you will be able to filter by categories, this module will also allow you to paginate your gallery by enable this field.

Once you have enabled this field, pagination buttons will appear (and module fields in the Design tab to style them).

You can set how many images should be displayed per page in the Image Count field.

Also, you can show the pagination for specific devices only. Click the responsive option and select where the pagination should be enabled!

Design Tab > Gallery > Gallery Margin and Padding

Here you can set the gallery margin and padding. This can be helpful, just for naming a use case, when you want to increase the distance between the gallery and the navigation buttons.

Design Tab > Gallery > Navigation

You can use these toggle fields to style the filters and the pagination buttons.

You can set the buttons background color, the font options, the buttons margin and padding, rounded corners and borders.

And of course, all responsive!

Design Tab > Gallery > Load More

Finally, this fields will allow you to customize the Load More button.

Also, all the button customization are responsive here.

Images

Let’s cover now the fields to customize the images.

Content Tab > Images > Image Size

Here you can choose the image size from all the image sizes available. Default is full size.

Choosing the image size can help you to improve the web performance.

Content Tab > Images > Enable Zoom Effect

This will apply a zoom in animation to the images when hovering over them. This option is disabled by default.

Content Tab > Images > Enable Overlay

Enable this option if you want to add an overlay to the gallery images. If enabled, the Overlay and Overlay Text toggles will appear in the deseign tab.

Content Tab > Images > Show Title

This will show the overlay with the image title when you hover over the image.

Content Tab > Images > Show Caption

This will show the overlay with the image caption when you hover over the image.

Content Tab > Images > On Click

Here you can choose what should be done on image click.

None

Nothing will be done on user iteracion.

Open in Lightbox

If you select this field, a popup with the image will be displayed.

Id this option is selected, two new fields will appear to choose if the image title and caption should be displayed or not.

Additionaly, a new toggle called Lightbox will appear in the design tab, where you will be able to set the background color and the default animation duration.

URL

If you select this field, the image will open the destination URL that you previously set in the WordPress Media Library.

You can set destination URLs to images by entering the URL in the DonDivi Destination URL field (see the Image Details screenshot above).

Design Tab > Images > Image Alignment

This field will allow you to horizontally align the image within the grid cell.

If the image takes up all the grid cell, this field will have no effect.

Design Tab > Images > Fit to Container

This will force the image to take up all the grid cell. This option is enabled by default.

Design Tab > Images > Border fields

Here you can add custom borders to the gallery images, as well as create rounded corners and the ability adjust the border radius of all four corners individually.

Featured Images

You may want to feature an image (or some images) and display them differently.

You can set features images from the WordPress Media Library by checking the DonDivi Featured Image option (see the Image Details screenshot above).

In order to highlight your feature image(s), use the following fields.

Design Tab > Featured Image > Column Span

Enable this field is you want the image features to take up more than a single column. This will create grid areas where the featured images will be places.

For example, if you have a four-column grid and you want the features image to take up the 50% of the with, type 2 here.

Design Tab > Featured Image > Width

This fields, available for standard grids only, will let you control the feature image width.

Advanced Tab > Custom CSS > Featured Image

Apart from the module fields, you can add your custom styles. The additional CSS that you enter here will be applied to the featured images. 

Animation

This module allows you to add transition animations to the gallery images.

In other words, you can choose the DonDivi effect that should be applied to the images that are displayed after clicking a filter or pagination button!

Let’s finally cover all the animation fields.

Image Animation > Enter Effect

You can choose an enter effect here. In other words, you will be able to animate the gallery images when they appears.

These are the available effects:

Fade

Slide Down

Slide Up

Slide Left

Slide Right

Zoom (Default)

Image Animation > Enter Effect Animation Intensity

Here you can choose how subtle or aggressive the effect will be.

Default is 100%. Meaning that all the animation will be executed from the very beginning to the very end.

Image Animation > Opacity

You can add opacity to the selected effect.

Note: this will not be aplicable if you have selected the fade effect for obvious reasons (the fade effects animate the opacity).

If you enable this field, a new field will appear called Opacity Intensity, where you will be able to choose how suble or aggresive the opacity will be. Default is 100%.

Image Animation > Duration

Finally, you can set the effect duration in miliseconds. Default is 400ms.