Block, Elementor and other page builders
Since version 1.15 the plugin brings its own block for the WordPress editor and its own widget for Elementor. Both let you pick the gallery from a list and show a preview while you edit — no shortcode to copy. Everything else (Divi, Beaver Builder, the Classic editor, and any builder with a shortcode element) still works through the shortcode, and always will.
What you’ll learn
Section titled “What you’ll learn”- The fastest way to place a gallery with the Cloud Gallery block
- The same thing with the Elementor widget, including the display overrides
- Where the shortcode is still the right answer
- How to fix the handful of things that occasionally trip people up
Prerequisites
Section titled “Prerequisites”- At least one gallery (see Your first gallery)
- Permalinks set to Post name (Settings → Permalinks) — the gallery loads images through the WordPress REST API, which needs pretty permalinks
The Cloud Gallery block (WordPress editor)
Section titled “The Cloud Gallery block (WordPress editor)”- Edit the page and add a block — search for Cloud Gallery (it lives under Media).
- Pick your gallery from the Existing gallery dropdown.
- Publish.
Once a gallery is selected, the block shows a card with the gallery title, its folder and the first few photos, so you can see at a glance that you picked the right one.
Width. The block supports the standard WordPress Wide width and Full width alignments from the block toolbar — useful for delivery pages where the grid should run edge to edge.
Overrides. The Display panel in the block sidebar can override the loading mode and the grid image size for this one placement. Leave them alone and the gallery’s own settings apply.
Pro: the block also offers New gallery from a cloud folder — pick a subfolder of your main folder and the gallery is created on the spot, without leaving the editor. In the free version the block shows the existing-gallery list only.
The Elementor widget
Section titled “The Elementor widget”- Edit the page with Elementor.
- Search the widget panel for Cloud Gallery and drag it in.
- Under Source, choose Existing gallery and pick your gallery.
The gallery runs inside the Elementor preview — you don’t have to publish to see whether it looks right.
Under Display you can override the loading mode and the grid image size for this placement, exactly like the block. Everything else — title image, downloads, favourites, cookies — stays in the gallery itself; the Manage galleries link in the widget takes you there.
For an edge-to-edge gallery, set the page template to Elementor Canvas or Elementor Full Width under Page Settings → Page Layout.
Pro: the widget’s Source dropdown also offers New gallery from a cloud folder, the same one-step creation as in the block.
Everywhere else: the shortcode
Section titled “Everywhere else: the shortcode”Every gallery still has a shortcode, shown in the Shortcode box on its edit screen:
[ccgal_gallery id="42"]Paste it into the builder’s shortcode element:
| Builder | Element to use |
|---|---|
| Divi | ”Code” or “Text” module |
| Beaver Builder | ”Shortcode” or “HTML” module |
| Classic editor | paste the shortcode straight into the content |
| Block editor | ”Shortcode” block — the Cloud Gallery block is nicer, but this works too |
Display options
Section titled “Display options”Both the block and the Elementor widget expose the two overrides below in their Display panel. With the shortcode you write them as attributes. Full reference: Shortcodes.
| Attribute | What it does | Values |
|---|---|---|
id | Which gallery to show (required) | the gallery’s ID |
per_page | How many images load per batch | a number, e.g. 30 |
load | How more images load | scroll (infinite scroll) or button (Load-more button) |
size | Thumbnail size | small, medium, large, xlarge |
Example: [ccgal_gallery id="42" per_page="40" load="button" size="large"]
Troubleshooting
Section titled “Troubleshooting”The toolbar appears but no images load. This is almost always the gallery’s folder, not the page builder. Open Customer Cloud Gallery → Settings and run Test connection — it checks the token, the folder, a real image download and the cache folder in one go. Also make sure your permalinks are not set to “Plain” (Settings → Permalinks → “Post name”).
The block or widget doesn’t appear in the list. Both are registered by the plugin itself, so this means the plugin is inactive on that site, or the editor was open before you activated it — reload the editor.
The gallery sits inside a Tab, Accordion or Popup. Those elements are hidden until a visitor opens them. If images don’t appear there, place the gallery directly on the page, or test it once the element is revealed.
The shortcode shows as plain text. You pasted into a heading, title or code-formatted field. Use the builder’s dedicated shortcode element — or, in the WordPress editor, the Cloud Gallery block instead.
Nothing renders at all.
Make sure your theme/template outputs the standard WordPress footer — every default Elementor template does. A bare “blank” template that omits wp_footer() will stop the gallery’s scripts from loading.
Next step
Section titled “Next step”Build the page around the gallery — hero, title image, print CTA: Building a beautiful gallery page.