FotoGrids adds two widgets to the Elementor editor: FotoGrids Gallery and FotoGrids Album. Each widget drops an existing Gallery or Album into your Elementor layout, renders a live preview inside the editor, and keeps its visual settings on the collection itself — so what you build in FotoGrids is exactly what visitors see. The widgets render through the same pipeline as the FotoGrids shortcodes and blocks, so every layout, decorator, and feature works identically inside Elementor. They appear automatically whenever Elementor is active alongside FotoGrids; there is nothing to enable.
Location Elementor editor → Widget panel → FotoGrids
Adding the Widget #
Edit any page with Elementor and open the widget panel. Search for FotoGrids or scroll to the FotoGrids category, where you will find the FotoGrids Gallery and FotoGrids Album widgets. Drag either one onto the canvas.
Before a collection is selected, the widget shows a short prompt — Select a gallery to display — in place of the preview. Choose a collection from the widget’s controls and the preview renders in its place.
Choosing a Gallery #
The Gallery widget’s Content → Gallery section starts with a Gallery source control that decides how the widget knows which Gallery to show.
| Setting | Gallery source |
| Options | Gallery Picker Dynamic |
| Default | Gallery Picker |
- Gallery Picker — you choose a specific Gallery by hand. This is the default and the right choice for most pages.
- Dynamic — the Gallery is chosen at render time from a dynamic source that outputs a Gallery ID, so a single widget can show a different Gallery for each item in a loop or theme template. Requires Elementor Pro (see below).
The controls shown underneath change with the selected source: the manual picker appears in Gallery Picker mode, the dynamic field appears in Dynamic mode. The Create new gallery button is visible in both modes and opens the new-Gallery admin screen in a new tab.
Gallery Picker Mode
Manual selection uses three controls:
- Select a gallery — a searchable dropdown listing published and draft Galleries, each with a thumbnail, item count, and status pill, grouped by status. Pick one to select it, or clear the selection with the × on the field.
- Browse all — opens the full picker modal for searching, sorting, and browsing the whole library (see below).
- Edit gallery — opens the selected Gallery in the FotoGrids editor in a new tab. This appears only when a Gallery is selected.
The widget stores only the Gallery or Album ID. Editing the collection in FotoGrids updates every Elementor page that embeds it the next time the page loads — there is nothing to re-insert.
Dynamic Mode
Selecting Dynamic replaces the manual picker with a single field:
- Dynamic Gallery ID — a text field with Elementor’s dynamic-tags switcher (the database icon). Bind a dynamic source that outputs a Gallery ID, and the widget renders whichever Gallery that ID resolves to.
Dynamic binding is covered in full in the next section.
Dynamic Galleries with Elementor Pro #
Dynamic mode lets one widget render a different Gallery for each item in a loop or theme template — for example, a custom post type where each post stores which Gallery to display. Each rendered item then shows its own Gallery from a single widget definition.
This capability depends on Elementor’s dynamic tags, which are an Elementor Pro feature. The manual picker, the Browse modal, and the Edit and Create actions all work with free Elementor — only dynamic binding needs Elementor Pro.
Dynamic binding requires Elementor Pro, which is a separate product from Elementor’s parent company. It is not the same as FotoGrids Pro — the FotoGrids Elementor widgets themselves are available on every FotoGrids plan.
How to Bind a Dynamic Gallery
Set Gallery source to Dynamic, then click the dynamic-tags (database) icon on the Dynamic Gallery ID field, choose a tag that outputs the Gallery’s post ID, and configure it. Place the widget inside the loop or theme template, and each item renders its own Gallery. When the dynamic value is empty, nothing is forced — the widget has no ID to bind and shows nothing.
The Single-Value Rule
The Dynamic Gallery ID must resolve to exactly one Gallery ID — a single integer. Any source that outputs more than one value will not bind directly, because there is no single ID for the widget to render. Showing several Galleries is a loop scenario, described further down.
Which Dynamic Sources Work
| Source | Works? | Notes |
|---|---|---|
| Post Custom Field tag (meta key) | Yes | Most reliable. Point it at the meta key that stores the Gallery ID. |
| ACF Text / Number field | Yes | Appears by name in the ACF tag group and outputs the stored ID. |
| ACF Post Object field (single, return = Post ID) | Indirect | Does not appear by name in Elementor’s ACF tag group, because Elementor does not offer Post Object fields to text or number tags. Use the Post Custom Field tag with the field’s name instead — ACF stores the selected post’s ID under that meta key, so it resolves correctly. |
| ACF Relationship field | No | ACF stores it as a serialized array of IDs, even with one item, so there is no single scalar to bind. It is multi-value by nature and needs a loop. |
| ACF Repeater field | No, not directly | A repeater is multiple rows. The parent meta key returns the row count, not an ID. Render one Gallery per row with a repeater-loop approach. |
Showing Multiple Galleries
Rendering several Galleries — for instance from an ACF Relationship or Repeater field — is a loop scenario. Elementor does not natively loop these fields, so it needs a loop helper such as a loop-item template rendered once per row or related post. Inside each loop item, the current row’s or related post’s Gallery-ID sub-field resolves to a single value, and a FotoGrids Gallery widget set to Dynamic and bound to that sub-field renders that one Gallery. No special FotoGrids configuration is needed beyond the single-ID binding.
The Picker Modal #
The Browse all button opens the full picker — the same modal used across the Gutenberg blocks and Divi modules. It shows a card grid of Galleries with a thumbnail, title, item count, and status for each, plus:
- Search — filter the list by title.
- Sort — order by newest, oldest, title A–Z, or recently updated.
- Refresh — re-fetch the list to pick up Galleries created since the modal was opened.
- Create new — start a new Gallery, also offered as a call to action when no Galleries exist yet.
The grid loads more items as you scroll and supports keyboard navigation. Click a card to select it and close the modal.
The Live Preview #
Once a Gallery is selected, the widget renders the real Gallery inside Elementor’s canvas, using the exact layout, columns, captions, and effects configured on the collection. The preview is served through FotoGrids’ own render pipeline — the same output as the published page, not a placeholder.
Selecting an empty Gallery shows a friendly empty-state panel in the editor with a link to add items, rather than a blank preview.
Editor Preview Options #
Because the preview is a working Gallery, an item click inside the editor would normally open the Lightbox or follow the item’s link, which makes the widget awkward to select. Two switches in the widget’s Content tab, under Preview, control this. Both affect the Elementor editor only and have no effect on the published page.
Make Items Clickable
| Setting | Make items clickable |
| Options | On Off |
| Default | Off |
When off, clicking an item in the preview selects the widget instead of triggering the item’s action, so you can position and configure the widget freely. Turn it on to test the real click behaviour — the Lightbox, an external link, or whatever the Gallery is set to do — from inside the editor.
Enable Pagination Controls
| Setting | Enable pagination controls |
| Options | On Off |
| Default | Off |
Galleries that paginate still render their pagination chrome so the preview matches the published page. When this is off, the pagination buttons stay visible but inactive, keeping every item on screen while you edit. Turn it on to click through the pages as a visitor would.
The Album Widget #
The Album widget works like the Gallery widget’s manual picker: an Album control with Select, Browse all, and Edit album, using the same deselect and modal behaviour, plus a Create new album button that is always visible. It has the same two editor preview toggles.
The Album widget has no dynamic-source mode — dynamic binding is available for Galleries only. Albums are selected manually.
Styling and Layout #
The widget supports Elementor’s standard layout tools — width, alignment, margin, padding, and the rest of the Advanced tab — which control where the Gallery sits on the page and how much space surrounds it. The Gallery’s internal appearance — columns, gaps, captions, item sizing, Lightbox — is controlled on the Gallery in FotoGrids, not in Elementor. This keeps a single source of truth for the Gallery’s look across every page that embeds it, whether through Elementor, a block, or a shortcode.
Compatibility and Troubleshooting #
The picker and dynamic binding work on both pretty and plain permalink structures. Elementor Pro is required only for dynamic-tags binding; every other part of the widget works with free Elementor.
If a dynamic Gallery does not appear, check the following:
- The dynamic source resolves to a single Gallery ID. Relationship, Repeater, and multi-select sources do not bind directly — see the single-value rule above.
- For an ACF Post Object field, bind with the Post Custom Field tag using the field’s name rather than looking for the field in the ACF tag group.
- The dynamic value is not empty for the item being rendered. In Dynamic mode an empty value produces no Gallery.
- Dynamic binding is enabled, meaning Elementor Pro is active. Without it the dynamic-tags switcher is unavailable.
