Page Designer Modules

  1. Home
  2. Support
  3. Page Designer Modules
  4. Gallery Module with the Website Page Designer

Gallery Module with the Website Page Designer

Engage your visitors with a collection of pictures on your website. Create a Gallery module with the page designer to organize and display multiple images. They can be displayed in a grid or slider format and also include pagination.

Go to the page designer, and add a new module by clicking on the gray plus sign. Choose the gallery module from the list. If you prefer to find the module automatically, it’s also possible to type it in the search bar on top.

Define contents

The contents tab includes the following options:

Images

Choose the images from your media library or update new ones that you wish to display on the gallery. Type inside the box the number of images you want to be displayed per page.

Elements

You can enable the title and caption, and the pagination on your module by selecting these options.

Link

If you want that the module opens a new URL when someone clicks on it, paste that link here and decide if the link will open in the same window or tab.

Background

Add a background color, gradient, image or video to your module.

Admin label

You can modify the module’s label for easier identification.

Customize the design

With these settings, you can customize your design.

Layout

By default, the images will be displayed in a grid format, but you can also pick a slider format.

The images can be formatted as portrait or landscape.

Overlay

Select here the zoom icon color, the hover overlay color and the hover icon of your choice.

Image

Customize the corners, borders, shadow, and color tone of your image.

Text

Control how your text is displayed in terms of alignment, color (dark or light), and text shadow.

Title Text

Define the font, color, alignment, line height, and other settings for the title.

Caption Text

You can also adjust the font settings for the caption text.

Pagination Text

Customize the font settings for the pagination text.

Sizing

Adjust the width of the module.

Spacing

Customize margins and padding sizes.

Border

Define the border’s corner, style, color and width for your module.

Box Shadow

Here you can enable box shadow.

Filters

Adjust the hue of the module as a whole.

Advanced settings

Using this tab you are able to insert CSS code, select device visibility, and manage transitions. Check this guide to know more about how to use these settings.

Use Case

Let’s create a flower gallery.

On the contents page, we are going to upload 12 flower images and on the Images number box type 6 so that six images will appear per page.

On the Elements, we disable “Show Title and caption” and leave “Show pagination” enabled.

On the design we select the Grid format and the Landscape orientation.

This is how it looks!

Something missing? Contact us
Was this article helpful to you? Yes No

How can we help?