Blocks

These modular components are the building blocks of your website. Each is designed for a specific purpose—like text, an image, or a slider. Simply activate the ones you need under Setup > PAGEGRID in your admin.

Are you a Developer? You can easily modify the markup of these blocks or build entirely new blocks from scratch. Learn more

Accordion

Renders a collapsible accordion component with expandable/collapsible items. Each item displays a title with expand/collapse icons and content that reveals when clicked.

Code

Allows embedding of custom HTML, CSS, and JavaScript code. Provides a code block that executes frontend code while showing disabled preview in the backend editor.

Datalist

Displays a list of child pages from a parent page with images, videos, and customizable fields. Creates a filterable/searchable list view with thumbnails and item details.

Gallery

Displays a single image in a PhotoSwipe-compatible gallery container. Supports responsive images with multiple size variants for optimal loading.

Gallery Video

Renders a video in a PhotoSwipe gallery with playable preview. Includes thumbnail/poster support and video options configuration.

Group

A container block that wraps child elements and optionally links to internal or external pages. Renders as a semantic HTML element with flexible styling.

Iframe

Embeds iframes with privacy-friendly lazy loading for YouTube and Vimeo URLs. Automatically fetches and caches video thumbnails and titles for GDPR compliance.

Image

Displays a responsive image with optional link and caption. Generates responsive srcsets for multiple screen sizes and supports aspect ratio constraints.

Language

Renders a language switcher for multilingual sites. Displays links to alternate language versions of the current page using ProcessWire's language support.

Lottie

Renders animated Lottie JSON files with configurable triggers (autoplay, on-scroll, on-click, etc.). Supports looping and reverse animation options.

Marker

Displays a numbered marker pin with label and content popup. Used for annotations and callouts on pages or maps.

Navigation

Renders a responsive navigation menu with hamburger toggle for mobile. Supports multi-level nested menus, custom links, and collapsible behavior.

Plain Text

A text-only block that automatically strips all HTML tags to ensure clean, unformatted output.

Prev / Next

Displays previous/next navigation controls with an optional index link. Automatically cycles through page siblings for sequential navigation.

Reference

Renders a referenced page block by displaying another page's content. Acts as an include/embed mechanism for reusing page content.

Rich Text

Renders rich text content edited with TinyMCE. Supports formatted text, inline styles, links, and complex formatting.

Sequenz

Renders an image sequence animation on HTML5 canvas. Creates flipbook-style animations by cycling through multiple image files.

Slider

Displays a carousel/slider with navigation arrows, dots, and autoplay support. Uses the Glide.js library for smooth slide transitions.

Spacer

Renders an empty spacing block for layout control. Used to add vertical spacing between blocks without content.

Text

Renders rich text content with support for line breaks and links via TinyMCE. Similar to Editor but with simpler formatting options.

Video

Renders an HTML5 video player with optional poster image, captions, and external link support. Supports autoplay and lazy loading.