---
title: "Gallery page styles"
canonical_url: https://support.digitalphotogallery.com/articles/article/5fe6811e-c202-11ea-8de0-3248f2465248
short_url: https://dpg.support/ayyd
category: "Websites > Templates > System Templates > Series 3 > Essential Portfolio"
locale: en
updated_at: 2021-07-06T20:57:37Z
source: Digital Photo Gallery Support
---

# Gallery page styles

The Essential Portfolio **Gallery** page is designed to be flexible and easy to customise so that you can tailor it to your own work. We've created a number of preset layout styles to make it easy to change the appearance of the gallery with one click. Within these layouts, you can make endless customisations which are visually controlled by sliders in the Design editor.

The Gallery page has three views - **Sets View**, **Index View** and **Single View**. This hierarchy allows you to present your work in sets by project, style, or any other grouping you choose. Each view's layout is independent of the others, so you can mix and match the appearance of the gallery at each stage. 

📎 [Read more about Gallery views](https://support.digitalphotogallery.com/articles/article/923f931c-9cd9-11e8-b6bf-3225061e24b0).

This article aims to show you an overview of the different layout styles for each of the views. Layouts are defined by the different characteristics that each applies to the gallery, such as the aspect ratio of the images or the direction of masonry flow. 

🎨 Customise it - You can always change the number of columns, padding, hover styles, colours and typography for all the layouts. Below, we've highlighted some further tips to get the most from each style. Don't worry, it's super easy with no coding needed.

## Sets View
Use sets to divide your work into projects or categories to make it easy for visitors to navigate. You can create as many nested sets as you like, for example: 

📁Work → 📁Commissioned → 📁Brands → 📁Bentley.

There are 6 **Sets View** styles:

* Square Grid
* Regular Grid
* Masonry
* Uniform Grid 
* List 
* Slide

### Square Grid

![](https://cache.media.digitalphotogallery.com/hyqelgcvfopo/images/4b4a6770-c202-11ea-85ca-629c2013df2f/1531_support.jpg?generated=20200709173629)

Set Covers are cropped square.

Set Information can appear underneath, or on top of the Set Cover on hover.}

🎨 Customise it - large square Set Covers in two columns create a bold look. 

### Regular Grid

{detail:f4255a98-c203-11ea-a041-6e50fb6d292e

🎨 Customise it - smaller Set Covers with roomy padding create a modern and minimal look.

### Masonry

![](https://cache.media.digitalphotogallery.com/hyqelgcvfopo/images/78176e04-c204-11ea-99f1-6e50fb6d292e/1536_support.jpg?generated=20200709175159)

Set Covers are tiled in downward flowing columns.

Set Information can appear underneath, or on top of the Set Cover on hover.}

🎨 Customise it - large Set Covers with no padding can create impactful Masonry galleries. 

### Uniform Grid 

{detail:fe9a34ca-c204-11ea-b05d-629c2013df2f

🎨 Customise it - Drop the number of columns to 1 to make wide full-width banners, or increase the media height to make cards. 

### List

![](https://cache.media.digitalphotogallery.com/hyqelgcvfopo/images/d661bb68-c2bd-11ea-aeed-6e50fb6d292e/1557_support.jpg?generated=20200710155842)

By default List shows your sets in a text list, with a full page Set Cover appearing on hover.}

{detail:720756ae-c2be-11ea-8dcc-629c2013df2f
🎨 Customise it - Hide the Set Covers completely for a minimal text-only view, or experiment with different Set Cover positions for a unique look.

### Slide
![](https://cache.media.digitalphotogallery.com/hyqelgcvfopo/images/c7bdee78-c2be-11ea-97b4-629c2013df2f/1559_support.jpg?generated=20200710160535)

Set Covers are shown as full page banners, which slide over one another when scrolled for a striking sets view.}
🎨 Customise it - Go for bold typography to complement the cover imagery.

## Index View

The Index view shows you a wider overview of everything in any set. Whether you want to show a gallery of smaller thumbnail, or the full large image - there's a layout for that. 

There are 6 **Index View** styles:

* Square Grid
* Regular Grid
* Masonry
* Horizontal Masonry
* Stream
* Horizontal Scrolling

### Square Grid
{detail:013b2a08-c215-11ea-9bd7-6e50fb6d292e
🎨 Customise it - Go large and chunky with fewer columns and roomy padding instead. 

### Regular Grid
![](https://cache.media.digitalphotogallery.com/hyqelgcvfopo/images/4eb5c9c4-c214-11ea-bb9b-629c2013df2f/1545_support.jpg?generated=20200709194519)

As with the Regular Grid sets view, the images appear uncropped in their original aspect ratio.

Image information can be underneath, on top of the image on hover, or hidden.}
🎨 Customise it - change the number of columns and padding to create more negative space for a modern look.

### Masonry
{detail:6d305d1a-c214-11ea-b926-629c2013df2f
🎨 Customise it - remove all padding and make the images full-width for a stunning gallery.  

### Horizontal Masonry
![](https://cache.media.digitalphotogallery.com/hyqelgcvfopo/images/5a48c0b6-c214-11ea-96ab-629c2013df2f/1546_support.jpg?generated=20200709194551)

Similar in style to Masonry, Horizontal Masonry fills columns horizontally instead - so landscape oriented images take precedence.

Image information can be on top of the image on hover, or hidden.}
🎨 Customise it - This style looks great with large images and bold styling. 

### Stream
{detail:42125ed0-c214-11ea-9ba9-6e50fb6d292e
🎨 Customise it - experiment with the max width of the column to make large images the focus, or create more negative space. 

### Horizontal Scrolling
> ⚠️ **Warning:** The Horizontal Scrolling style is available for sites built from the 6th of July '21 onwards only.
![](https://cache.media.digitalphotogallery.com/hyqelgcvfopo/images/eafb3a96-de9a-11eb-aed1-0e9a6ba445f3/uwumd_support.jpg?generated=20210706214436)

Images flow and scroll horizontally. Ideal for use with smaller/minimal header styles to take advantage of the full width of the monitor.

Image information is shown underneath the image or hidden. }
🎨 Customise it - Constrain images by height or width and add padding to create a smaller thumbnail side-scrolling gallery, which can click through to a larger single view. 

## Single View

The Single view puts the individual image into the spotlight. You might choose this view to display images as large as possible with no distractions, or to provide more information about the work with titles, descriptions, keywords and other metadata.

There are 3 Single View styles:

* Fullscreen
* Stacked
* Panels

and 2 lightbox styles:

* Frame
* Minimal

{detail:c0b3be86-c21a-11ea-a586-629c2013df2f
![](https://cache.media.digitalphotogallery.com/hyqelgcvfopo/images/b1599e2e-c21a-11ea-a11d-629c2013df2f/1550_support.jpg?generated=20200709203110)

**Stacked** shows the image with information and thumbnails underneath. }
{detail:a301a39e-c21a-11ea-8584-629c2013df2f

## Single View Lightbox
With lightbox enabled, images pop up over the index view instead of loading as a separate page.

📎 [Read more about the lightbox](https://support.digitalphotogallery.com/articles/article/3336b342-c102-11ea-8de0-3248f2465248).

![](https://cache.media.digitalphotogallery.com/hyqelgcvfopo/images/e1670534-c21a-11ea-83cb-6e50fb6d292e/1553_support.jpg?generated=20200709203233)

**Frame** lightbox allows you to show titles and descriptions, as well as image navigation.}
{detail:ccf80f8a-c21a-11ea-b04d-629c2013df2f

🎨 Customise it - choose a lightbox background in a contrasting colour to the main site (such as black for a predominantly light theme and vice versa) to give the single view a different context.