Building a beautiful gallery page
This guide turns a blank WordPress page into a client gallery that lands well: hero, 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
Section titled “What you’ll learn”- The typical layout of a gallery page (hero → title → gallery → print CTA)
- 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
- Where password protection slots in for client privacy
Prerequisites
Section titled “Prerequisites”- At least one published gallery (see Your first gallery)
- Plugin installed and a cloud provider connected
Tutorial video
Section titled “Tutorial video”Video coming soon.
Layout suggestion
Section titled “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 |
| Hero image | A single favorite shot at full width — sets the mood |
| Title + date | ”Sarah & Tom · August 12, 2025” — Cormorant or theme display font |
| Short intro | 2–3 sentences for the client (“Here are your photos. Download, favorite, order prints.”) |
| Gallery | The [ccgal_gallery] shortcode |
| Print CTA (Pro) | “Want to order prints? → Print order page” |
| Footer contact | Optional: a quick line on how to reach you |
This sequence works on practically every theme. Keep it intentionally minimal — let the photos do the work.
Step-by-step
Section titled “Step-by-step”1. Create a new page
Section titled “1. Create a new page”WordPress admin → Pages → Add New. Title with the client name and date, e.g. “Sarah & Tom · August 2025”. Leave the URL automatic or shorten to sarah-and-tom.
2. (Only for transparent headers) Insert a spacer block
Section titled “2. (Only for transparent headers) Insert a spacer block”Some themes — notably modern photography themes like Astra, Kadence, GeneratePress or OceanWP — render a transparent header that overlaps the hero. Without a spacer, the top of your gallery 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). That makes room beneath the header so the hero content isn’t covered.
You can skip the spacer entirely if your theme has a classic, opaque header. Try it — if the gallery gets clipped at the top, add the spacer.
3. Hero image (optional but recommended)
Section titled “3. Hero image (optional but recommended)”Right under the spacer add a Cover block or Image block at full width. Pick a single, calmly composed image from the session — typically a detail or the couple from behind. It sets the tone immediately.
Theme tip: the Cover block usually exposes a “Full width” / “Wide” alignment. Enable it.
4. Title + intro text
Section titled “4. Title + intro text”Below that:
- Heading block (H1) with the occasion, e.g. “Sarah & Tom · Wedding at Lake Constance”.
- Paragraph block with 2–3 sentences for the client:
“Sarah, Tom — here are your photos from the day. Download single shots or the whole set, heart your favorites, order prints right from the gallery. Reach me any time if you have questions.”
Those two or three lines turn “WordPress page with a gallery” into a delivery experience.
5. Embed the gallery
Section titled “5. Embed the gallery”Add a Shortcode block, paste your gallery shortcode:
[ccgal_gallery id="42"](Find your gallery ID in the gallery sidebar — see Shortcodes reference.)
If you want to override defaults for this page, append attributes:
[ccgal_gallery id="42" per_page="40" load="scroll" size="large"]6. Print order CTA (Pro)
Section titled “6. Print order CTA (Pro)”If you use the Pro print shop: a few lines under the gallery, drop a clean call-to-action. Example:
“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 at the top if your theme has a transparent header — same workaround.
7. Verify on mobile
Section titled “7. Verify on mobile”Before handing the URL to the client:
- In the WordPress editor, open Preview and switch to Mobile.
- Also open the published URL on a real phone — the editor only approximates.
- Check: hero image fully visible (not hidden behind the header), gallery columns stack reasonably, lightbox load button reachable.
If mobile columns feel cramped, switch the gallery’s Grid image size to Medium or Large (see Your first gallery).
8. Optional: password protection for privacy
Section titled “8. Optional: password protection for privacy”If the gallery isn’t meant for the public:
WordPress editor → right sidebar → Status & visibility → Visibility → Password protected. Set a password, share with the client.
Detailed guide: Password protection.
Page-builder notes
Section titled “Page-builder notes”Block Editor (Gutenberg)
Section titled “Block Editor (Gutenberg)”Standard workflow above. Works with all modern themes.
Elementor
Section titled “Elementor”- Elementor → Add New Page, choose blank template
- Full-width section for the hero
- Section for title + intro
- Section with the “Shortcode” widget for the gallery (instead of the Block Editor shortcode block)
- Spacer workaround: a section at the top with a fixed height of 100–120 px
- Divi Builder → Use Builder
- Default section + row for hero/title
- Either the dedicated “Code” module with the shortcode, or a “Text” module (Divi renders shortcodes inside Text modules automatically)
- Spacer workaround: custom padding-top on the first section
Beaver Builder
Section titled “Beaver Builder”- Page Builder → Add Module → Shortcode
- Same logic as Elementor
Common pitfalls
Section titled “Common pitfalls”Gallery hidden behind 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.
Gallery’s Grid image size is set to xlarge — that’s for hero galleries, not delivery galleries. Drop back to large or medium.
Client says “the page is empty”. Gallery is in Draft, not Published. Open the gallery in admin and hit Publish.
Hero image gets cropped on mobile. The Cover block has no mobile focal point. Block Editor → Cover block → set focal point on the main subject.
Page builder shows the shortcode as plain text. You pasted the shortcode into a Code block instead of a Shortcode block. The Block Editor distinguishes the two — shortcodes only render inside the Shortcode block.
Next step
Section titled “Next step”If you haven’t set up the print shop yet: Print shop setup (Pro). Otherwise jump to the Shortcodes reference for all the attributes you can override per page.