> For the complete documentation index, see [llms.txt](https://docs.realmacsoftware.com/elements-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.realmacsoftware.com/elements-docs/using-elements/store-components.md).

# Store Components

The Elements Store expands the components included with Elements. Store components install directly into Elements and use the same canvas, Inspector, responsive controls, theme settings, and Resources workflow as the included components.

The current collection includes free components for maps and masonry image layouts, plus paid components for comparisons, interactive cards, advanced galleries, scrolling content, password protection, and randomised content.

{% hint style="info" %}
Store components are separate from the components included with Elements. Some are free to download, while paid components must be purchased before they can be installed.
{% endhint %}

### Paid Components

| Component                                                                                   | Category    | What it does                                                                                                             |
| ------------------------------------------------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------ |
| [Before After](/elements-docs/using-elements/store-components/before-after-paid.md)         | Media       | Compares two images or component layouts with a draggable horizontal or vertical divider.                                |
| [Card Flip](/elements-docs/using-elements/store-components/card-flip-paid.md)               | Interactive | Creates a two-sided card with click, hover, automatic, and optional 3D effects.                                          |
| [Gallery Pro](/elements-docs/using-elements/store-components/gallery-pro.md)                | Media       | Builds image and video galleries with albums, metadata, Masonry layouts, and a configurable lightbox.                    |
| [Marquee Pro](/elements-docs/using-elements/store-components/marquee-pro-paid.md)           | Interactive | Scrolls a folder of images or custom component-based items horizontally or vertically.                                   |
| [Password Protect](/elements-docs/using-elements/store-components/password-protect-paid.md) | Security    | Protects pages and sections with PHP-backed passwords, shared sessions, Login, Logout, and optional biometric unlocking. |
| [Random Content](/elements-docs/using-elements/store-components/random-content-paid.md)     | Interactive | Displays one randomly selected component layout using JavaScript or PHP.                                                 |

### Free Components

| Component                                                                               | Category | What it does                                                                 |
| --------------------------------------------------------------------------------------- | -------- | ---------------------------------------------------------------------------- |
| [Masonry Images](/elements-docs/using-elements/store-components/masonry-images-free.md) | Media    | Turns a Resources folder into a responsive CSS or JavaScript masonry layout. |
| [Map](/elements-docs/using-elements/store-components/map-free.md)                       | Media    | Adds a configurable Google map using a street address or coordinates.        |

### Install a Store Component

1. Open the **Store** in Elements.
2. Find the component pack you want to use.
3. Purchase it or download it for free, depending on the product.
4. Install the pack.
5. Find the new component in the category shown above and drag it onto the page.

Each component guide explains its requirements, supported content, setup, Inspector controls, accessibility considerations, and troubleshooting steps.

{% hint style="warning" %}
Check the component’s Requirements section before starting. Password Protect needs PHP hosting and `.php` pages, Map needs a restricted Google Maps Platform API key, and Gallery Pro requires Elements 2.0 or newer.
{% endhint %}

### Choosing a Component

* Use **Before After** when visitors need to compare two versions of the same subject.
* Use **Card Flip** when a compact block should reveal a related second side.
* Use **Gallery Pro** when a basic gallery does not provide enough control over layout, albums, metadata, video, or the lightbox.
* Use **Marquee Pro** for continuously moving logos, announcements, images, or custom content.
* Use **Password Protect** for shared-password access to a page or selected section.
* Use **Random Content** when one variation should be selected on each page load.
* Use **Masonry Images** for a lightweight, folder-based masonry image layout.
* Use **Map** to show a location with Google Maps.

### Included Components

These Store products complement the components supplied with Elements. For components available without installing a Store pack, see [Included Components](/elements-docs/using-elements/components.md).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.realmacsoftware.com/elements-docs/using-elements/store-components.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.