Building a beautiful gallery page

This guide turns a blank WordPress page into a client gallery that lands well: cover photo, gallery, print CTA, optional password protection. About ten to fifteen minutes per wedding or shoot. Aimed at users who already have one gallery published and want a repeatable routine.

What you’ll learn

• The typical layout of a gallery page (cover → intro → gallery → print CTA)
• How to set a title image on the gallery itself (Pro)
• The spacer-block workaround for themes with transparent headers
• The same page in the Block editor, in Elementor and in Divi
• How to verify mobile rendering before handing the URL to the client

Prerequisites

• At least one published gallery (see Your first gallery)
• Plugin installed and a cloud provider connected

Layout suggestion

This is how most photographers build their delivery pages — top to bottom:

Block	Purpose
(Spacer)	only when your theme has a transparent header — 80–120 px
Title image (Pro)	Cover photo with the gallery title on it — part of the gallery, not a separate block
Short intro	2–3 sentences for the client (“Here are your photos. Download, favourite, order prints.”)
Gallery	The Cloud Gallery block
Print CTA (Pro)	“Want to order prints? → Print order page”
Footer contact	Optional: a quick line on how to reach you

Keep it intentionally minimal — let the photos do the work.

Step-by-step

1. Create a new page

Pages → Add New. Title it with the client name and date, e.g. “Sarah & Tom · August 2025”. Leave the URL automatic or shorten it to sarah-and-tom.

2. (Only for transparent headers) Insert a spacer block

Some themes — notably photography themes like Astra, Kadence, GeneratePress or OceanWP — render a transparent header that overlaps page content. Without a spacer, the top of your page vanishes behind the navigation.

Workaround: at the very top of the page, add a Spacer block with a height of 80–120 px (depending on your theme’s header height).

Skip the spacer entirely if your theme has a classic, opaque header. Try it — if the top gets clipped, add the spacer.

3. Intro text

A Paragraph block with two or three sentences for the client:

“Sarah, Tom — here are your photos from the day. Download single shots or the whole set, heart your favourites, order prints right from the gallery. Reach me any time if you have questions.”

Those few lines turn “WordPress page with a gallery” into a delivery experience.

4. Add the gallery

Add the Cloud Gallery block and pick your gallery. The block shows a preview card so you can confirm you picked the right one, and its toolbar offers Wide width and Full width if you want the grid to run edge to edge.

Using Elementor, Divi or Beaver Builder? See Block, Elementor and other page builders.

5. Print order CTA (Pro)

If you use the Pro print shop, drop a clean call-to-action a few lines under the gallery:

“Want any of these as a high-quality print or canvas at home? Order prints →”

The link points to the plugin’s auto-created print page (default: /print-order/). That page also needs the spacer block if your theme has a transparent header — same workaround.

6. Verify on mobile

Before handing the URL to the client:

1. In the editor, open Preview and switch to Mobile.
2. Also open the published URL on a real phone — the editor only approximates.
3. Check: title image fully visible (not hidden behind the header), grid stacks reasonably, the load button is reachable.

If the mobile grid feels cramped, move the gallery’s Grid image size up (see Your first gallery).

7. Optional: password protection

If the gallery isn’t meant for the public: editor → right sidebar → Status & visibility → Visibility → Password protected. Set a password, share it with the client. Detailed guide: Password protection.

Title image (Pro)

Instead of building a hero out of blocks, let the gallery bring its own. A title image is a large cover photo rendered above the grid, with the gallery title and an optional subtitle on it. Because it belongs to the gallery, it travels with it — every page or builder that shows the gallery shows the cover too.

Open the gallery and scroll to Title image in Gallery configuration:

• Source — Photo from the gallery folder opens a picker with the photos already in the cloud folder; Image from the media library uses a WordPress upload instead. (The folder picker needs the gallery saved with its cloud folder first.)
• Height — in pixels. 400–500 is a good range for a delivery page.
• Width — Content width keeps it inside your theme’s container; Edge to edge (full width) breaks out to the full window.
• Overlay — Soft gradient at the bottom keeps the photo bright and puts the text on a darkened base; Darken whole image, text centered is the classic hero; None leaves the photo alone (use it only with a calm image, or the title will be hard to read).
• Image focus — Top, Center or Bottom: which part of the photo survives the crop. Faces near the top of the frame usually want Top.
• Show title on the image — and, optionally, your own Title (empty = the gallery title) and a Subtitle like “12 June 2026 · Lake Como”.

Picking the photo:

And the result on the page:

Transparent headers: a full-width title image with the Darken whole image overlay usually looks intentional under a transparent header, which can save you the spacer. Check it on mobile before you rely on that.

Page-builder notes

Block editor

The workflow above. Works with all modern themes.

Elementor

• Full-width section for the intro
• The Cloud Gallery widget for the gallery
• Spacer workaround: a section at the top with a fixed height of 100–120 px

Divi

• Default section + row for the intro
• The Code module with the shortcode, or a Text module (Divi renders shortcodes there automatically)
• Spacer workaround: custom padding-top on the first section

Beaver Builder

• Page Builder → Add Module → Shortcode
• Same logic as Divi

Common pitfalls

Gallery hidden behind a transparent header. Spacer block missing or too short. 80–120 px is the usual range; very large logos can need 140 px.

Images look huge, columns are wrong. Grid image size is set to Extra large — that’s for showcase galleries, not delivery. Drop back to Large or Medium.

Client says “the page is empty”. The gallery is a Draft, not published.

The title image looks cropped in the wrong place. Change Image focus, or pick a photo with more headroom. The crop is deliberate — the cover keeps its height on every screen width.

Page builder shows the shortcode as plain text. You pasted it into a code block instead of a shortcode element. In the WordPress editor, use the Cloud Gallery block instead.

Next step

If you haven’t set up the print shop yet: Print shop setup (Pro). Otherwise jump to the Shortcodes reference.