Page builders (Elementor, Divi, Beaver Builder)
Customer Cloud Gallery works with Elementor, Divi, Beaver Builder, the Block (Gutenberg) editor and the Classic editor out of the box — there is no separate add-on to install. You add a gallery with a shortcode, and the plugin loads its styles and scripts exactly when and where that shortcode is rendered. So it doesn’t matter whether your page is built with the WordPress editor or a page builder — the gallery just works.
What you’ll learn
Section titled “What you’ll learn”- The fastest way to drop a gallery into an Elementor page
- The step-by-step version, plus how to go edge-to-edge
- The same approach in Divi, Beaver Builder and the Block editor
- How to fix the handful of things that occasionally trip people up
Prerequisites
Section titled “Prerequisites”- At least one published gallery (see Your first gallery) — you just need its shortcode, e.g.
[ccgal_gallery id="42"] - Permalinks set to Post name (Settings → Permalinks) — the gallery loads images through the WordPress REST API, which needs pretty permalinks
Quick version
Section titled “Quick version”- Create a gallery in WP Admin and connect your Google Drive or Dropbox folder.
- Copy the shortcode it gives you, e.g.
[ccgal_gallery id="42"]. - In Elementor, drop a Shortcode widget onto the page and paste it in.
- Update — done.
Step by step
Section titled “Step by step”1. Create your gallery
Section titled “1. Create your gallery”In the WordPress admin go to Customer Cloud Gallery → Add New. Give it a title, choose Google Drive or Dropbox, select or paste your folder, and save. The gallery’s shortcode is shown on the edit screen — copy it (it looks like [ccgal_gallery id="42"]).
2. Add it in Elementor
Section titled “2. Add it in Elementor”- Edit your page with Elementor.
- In the widget panel, search for “Shortcode”.
- Drag the Shortcode widget onto the page.
- Paste
[ccgal_gallery id="42"]into the widget. - A Text Editor or HTML widget works just as well.
- For an edge-to-edge gallery, set the page template to “Elementor Canvas” or “Elementor Full Width” under Page Settings → Page Layout.
3. Preview and publish
Section titled “3. Preview and publish”The gallery renders on the live page. (Inside the Elementor editor itself it may show only as a placeholder — that’s normal for shortcodes; use Preview.)
Other page builders
Section titled “Other page builders”The principle is identical everywhere — find the shortcode element and paste your gallery shortcode into it:
| Builder | Element to use |
|---|---|
| Divi | ”Code” or “Text” module |
| Beaver Builder | ”Shortcode” or “HTML” module |
| Block editor (Gutenberg) | “Shortcode” block |
| Classic editor | paste the shortcode straight into the content |
Display options
Section titled “Display options”You can fine-tune the gallery with shortcode 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 the gallery and check that the Google Drive / Dropbox folder is connected and the path is correct. Also make sure your permalinks are not set to “Plain” (Settings → Permalinks → “Post name”) — the gallery loads images through the WordPress REST API, which needs pretty permalinks.
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 (Elementor, Divi and Beaver Builder all have one), or the Shortcode block in the Block editor.
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”Want the full list of shortcode attributes and the print-shop shortcode? See Shortcodes.