> For the complete documentation index, see [llms.txt](https://docs.premsoft.de/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.premsoft.de/en/plugins/cms-elements/cms-elements.md). # CMS elements Here you'll find all 21 elements briefly explained – what they do and where they work best. Elements marked **★ Premium** require an unlocked premium plan (see [Premium Elements](/en/plugins/cms-elements/premium-elements.md)). ## Content & structure ### Accordion / FAQ Collapsible content areas, ideal for FAQ lists or long texts. On request the element automatically outputs **FAQ schema markup** for search engines, so your questions can appear as a rich snippet on Google. Choose the style (default, minimal, boxed), the chevron position and whether multiple panels may be open at once. ### Tabs Organises content into **tabs** – perfect for product details, size charts or shipping info. Horizontal or vertical, with different styles (underline, pills, bordered) and configurable behaviour on mobile. ### Content blocks with anchor links · ★ Premium Multiple sections with an automatic **table of contents** and anchor links. Visitors jump straight to the desired section with one click – ideal for long guides and landing pages. With smooth scrolling and highlighting of the active section. ### Section divider · ★ Premium Decorative **shape transitions** (waves, slopes and more) between two sections. You define the shape, colour, height and orientation – for soft, modern transitions instead of hard edges. ### Flexible grid · ★ Premium A freely configurable **column grid** for custom layouts. You set the number of columns, the spacing and the behaviour on mobile devices, and fill each cell with its own content. ## Hero & images ### Hero image with text A large **hero image** with heading, text and button. With separate images for desktop, tablet and mobile, an overlay (solid or gradient) and flexible text positioning – the ideal page opener. ### Call-to-action banner An eye-catching **promo banner** with background image, headline, subline and button. With a coloured overlay and adjustable content position – to promote campaigns, offers or actions. ### Icon box **Icon + title + text**, optionally linked. Perfect for presenting benefits, services or USPs clearly – e.g. "Free shipping", "Secure payment". Several icon boxes side by side make a neat benefits overview. ### Image gallery with lightbox · ★ Premium A **gallery** of multiple images that open in a **lightbox** (zoom view) on click. With adjustable column count, aspect ratio, hover effect and captions. ### Before/after slider · ★ Premium Two images you compare with a **slider** – ideal for before/after effects, renovations, retouching or product impact. Horizontal or vertical, with labelled sides. ### Parallax background · ★ Premium A background image with a **depth effect**: as you scroll, the background moves slower than the foreground. With an overlay and freely placeable content – can be disabled on mobile if you wish. ### Video (GDPR compliant) · ★ Premium Embeds **YouTube or Vimeo videos** – optionally with a **two-click solution**: the video only loads after the visitor's explicit consent, keeping you data-protection friendly. With a cover image, aspect ratio and playback options. ## Sales & conversion ### Countdown timer · ★ Premium A **countdown** to a target date – creates urgency for campaigns, sales or product launches. With days/hours/minutes/seconds, several styles and configurable behaviour after expiry (hide, show text, redirect). ### Pricing table · ★ Premium Compares **plans or packages** clearly – with price, interval, feature list and buttons. One plan can be highlighted ("Popular"), including a checkmark list of included and not-included features. ### Testimonials · ★ Premium Shows **testimonials** with quote, name, role, company, photo and star rating – as a grid, slider or single view. Social proof that builds trust and boosts conversion. ### Shop the look · ★ Premium A scene image with interactive **product hotspots**: visitors click points on the image to see the respective product – including price and "add to cart". Ideal for outfits, interior scenes or sets. ## Numbers & data ### Number counter **Animated numbers** that count up as you scroll – e.g. "10,000 happy customers". With prefix/suffix, icon, decimals and thousands separator. Several counters side by side make an effective stats row. ### Progress bar · ★ Premium Displays values as a **bar or circle** – ideal for skills, capacity, donation goals or product attributes. With individual colours per bar, labels and animation on scroll. ## Maps & social ### Map (OpenStreetMap) A **location map without an API key** based on OpenStreetMap – quick to set up for stores, meeting points or directions. With marker, popup, different map styles and zoom controls. ### Google Maps (GDPR) · ★ Premium A **Google Maps map** with two-click consent: it only loads after the visitor's consent. With map type, styles, marker and info window. Requires your own Google Maps API key (see [Settings](/en/plugins/cms-elements/settings.md)). ### Social media icons Linked **social media icons** for your profiles (Facebook, Instagram, LinkedIn and many more). With different styles (flat, branded, outline, circle, square), size, colour and hover effect. --- # 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.premsoft.de/en/plugins/cms-elements/cms-elements.md?ask=&goal= ``` `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.