Creating Gallery Page Templates in Elementor

Create a reusable gallery page layout in Elementor Theme Builder. Add the ShutterPress Gallery widget and choose Use post gallery so each gallery page displays its own images within the same design.

Before you begin

• Install and activate ShutterPress Gallery and Elementor. This workflow also requires Elementor Pro with access to Theme Builder.
• Create a gallery with images. Have at least one published gallery: the widget’s gallery dropdown lists published galleries, and shows No galleries found if none are available. Use a second gallery to test that the layout is reusable.
• Use an account that can manage Elementor templates.

Understand the two types of template

An Elementor single gallery template controls the page layout around the gallery, including its title, containers and spacing. Elementor’s display conditions determine which gallery pages use this layout.

A ShutterPress Gallery Template controls gallery presentation such as icons, hover effects and lightbox styling. Manage these under ShutterPress → Gallery Templates, then choose one in the gallery’s Gallery Template setting. See Gallery Templates for those settings.

Use the two together: Elementor provides the page design, while ShutterPress provides the gallery and its features.

1. Create the Elementor template

1. Open Elementor → Theme Builder in WordPress. Some versions place Theme Builder under Templates.
2. Add a Single Post template and name it, for example, ShutterPress Single Gallery.
3. Choose a starting design or close the template library to build your own.
4. Add a container for the gallery area. Optionally add a Post Title widget above it to display the current gallery’s title.

Keep gallery-specific wording out of shared headings and text. Static text in a shared template appears on every gallery using it.

2. Add the ShutterPress Gallery widget

1. Search the widgets panel for ShutterPress Gallery and drag it into your container.
2. Select the widget. In its Content → Gallery panel, open the Gallery dropdown.
3. Choose Use post gallery. This is a dropdown option, rather than a separate switch.
4. Keep this selection when saving the reusable template. Selecting a named gallery fixes the widget to that gallery’s images.

Use post gallery resolves the gallery from the current page. It is intended for a template displayed on a ShutterPress gallery. On an ordinary Elementor page, choose a named gallery instead.

Use the ShutterPress widget for the gallery output. If a starting design also contains a Post Content widget that outputs the gallery, check for duplicate gallery output on the finished page.

3. Configure the gallery layout

The widget provides these controls in its Gallery panel:

• Use Lightbox: choose whether images open in the lightbox.
• Use Default Buttons: keep the built-in gallery controls, or disable them when supplying your own.
• Layout: choose Grid, Masonry or Justified.
• Image Gap: adjust the spacing between images.
• Number of Columns: choose desktop, tablet and mobile values for Grid and Masonry.
• Row Height: set the row height for the Justified layout.

For example, start with Grid and use three desktop columns, two tablet columns and one mobile column. These are example settings; adjust them to suit your images and container width.

Check the widget’s layout controls if the result differs from your saved ShutterPress Gallery Template. Available buttons and actions still depend on the gallery’s enabled features and the visitor’s access. See Elementor Widget for further options.

4. Apply the template to gallery pages

1. When ready to activate the layout, click Publish to open the conditions window.
2. Click Add Condition, choose Include, and select the ShutterPress gallery post type under the singular content options. Choose all galleries or a specific gallery, as required; labels vary by Elementor version.
3. Check that the condition targets galleries. Review any conflict warning for another template covering the same galleries.
4. Click Save & Close. To change the scope later, open the template’s Display Conditions.

The ShutterPress Gallery Template dropdown controls gallery styling; it does not assign this Elementor page layout. Use Elementor’s display conditions for that assignment.

Use different templates for gallery categories

You can create more than one Elementor single gallery template and use Display Conditions to control when each layout appears. For example, use one design for galleries in a Weddings gallery category and another for galleries in a Portraits gallery category.

1. Assign your galleries to the appropriate Gallery Categories in ShutterPress.
2. Create a separate Elementor single template for each design. In each ShutterPress Gallery widget, choose Use post gallery.
3. Open each template’s Display Conditions. Choose Include, select the ShutterPress gallery post type, then choose its gallery category condition and the relevant category. The exact wording varies by Elementor version.
4. Save the conditions and check a gallery from each category to confirm that the correct design appears.

If you also keep a general template for other galleries, exclude the categories covered by your specific templates. Check for overlapping conditions, especially when a gallery belongs to more than one category.

5. Test with more than one gallery

1. Open a gallery’s public page or authorised preview and check its title and images.
2. Open a second gallery covered by the conditions. Confirm that it shows its own images in the same layout.
3. Check desktop, tablet and mobile widths, including the container spacing and gallery columns.
4. Test the lightbox and any enabled gallery controls. For restricted features, check using the appropriate visitor or client account.

If the editor preview is empty, check an actual gallery page before changing the widget’s Gallery selection. A reusable template needs a gallery context to show the correct images.

Troubleshooting

• Theme Builder is unavailable: check Elementor Pro and your access to Theme Builder. Adding a widget to an ordinary page is a separate workflow from applying a shared single template.
• No galleries found: confirm that at least one ShutterPress gallery is published, then reload the Elementor editor.
• Every gallery shows the same images: change the widget’s Gallery dropdown from a named gallery to Use post gallery.
• No images on the gallery page: confirm that the gallery contains images and the template is being viewed on a ShutterPress gallery, rather than an ordinary page.
• The layout is not applied: check the display conditions and competing templates. Where a page layout selector is available, use Default; Elementor Canvas or Full Width can bypass a Theme Builder single template.
• The gallery appears twice: check for another ShutterPress widget, shortcode or Post Content widget that also renders it.
• Custom buttons work for only one gallery: check whether their Button IDs contain a fixed gallery ID. For a shared template, keep the default buttons enabled unless your custom controls resolve the correct gallery ID.

For Elementor’s template controls, see Create a Single Post template and Set conditions for site part templates.