107 modules. All free.
Every module in the picker, grouped the way the editor groups them, with what each one does. Open Add module in the editor and search by name or by what you need.
// 01 — 8 modules
Structure
The frame of the page: containers, menus, the logo and navigation.
Container
A box that holds other modules and arranges them in a row or a column.
Content carousel
It turns the modules you put inside into slides: testimonials, cards, plans, photos with text. With arrows, dots and automatic advance.
Anchor
An invisible destination point you jump to with “#name” from a button or a menu, with smooth scrolling and room for the fixed header.
Dot navigation
Fixed dots at the side of the page that jump to each section and mark which one you are in. For long single-piece pages.
Logo
The site logo or name, linking to the home page.
Menu
Navigation links; on mobile it collapses behind a hamburger.
Native menu
A menu built on the Menus screen, with nested sub-menus.
Mega menu
A header menu whose items open a wide panel with several columns of links, titles and a promotional photo. For shops with many categories.
// 02 — 18 modules
Basics
Titles, text, buttons and the small pieces every page uses.
Notice
A highlighted message with an icon and a color that follows its tone.
Label
A short label to highlight something (New, Offer…).
Button
A call to action with an icon, sizes and variants.
Double button
Two buttons together with a separator (“or”) in between: one primary action and one secondary, always aligned.
Separator
A dividing line with thickness, style, width and an optional icon.
Icon
A single icon from the set, with a size, a background shape (circle, square, outline), alignment and an optional link.
Title
An editable heading, h1 to h6, with an optional link.
Quote
A highlighted quote with its author.
Space
Air between modules, with a height you can set per device.
Text
A paragraph with bold, links and lists.
Text on a curve
A phrase that follows a curve: arc, wave, circle or diagonal. For seals, badges and headlines with character.
Glitch text
A headline that flickers like a broken video signal, in two colors.
Shuffle letters
A headline whose letters scramble and settle into place when it appears or on hover.
Animated gradient text
A headline filled with a gradient of up to three colors that slowly flows through the letters.
Image-filled text
Big bold letters filled with a photo, which can drift slowly inside them.
Block reveal text
A headline uncovered by a sweeping block of color when it scrolls into view.
Shape
A decorative shape (circle, blob, dots, wave, squiggle…) to place behind photos or in the corner of a section.
Copyright
The footer line with the © and the year, which updates itself every 1 January, with the legal links alongside. Write {year} where the year should go.
// 03 — 26 modules
Content
Ways to present information: lists, tables, counters, timelines, posts.
Progress bars
Bars with a percentage that fill up when seen.
Opening hours
The days and hours the business is open, with today highlighted and “Closed” marked differently. For the contact page and the footer.
Chart
A bar, line, area, pie, doughnut or radar chart built from the numbers you write: sales per month, how a budget splits, two years compared.
Comparison table
Compares plans or products in columns, with checkmarks and crosses per row and a recommended column. Write “yes” or “no” and the icons appear.
Event calendar
The shop’s upcoming events —launches, workshops, fairs— with date, time and place, grouped by month and with past ones dimmed.
World clock
The current time in several cities, each with its own time zone, kept up to date on its own. For shops serving from another time zone or selling to several countries.
Progress circle
A percentage drawn in a circle.
Benefits
A grid of benefits with an icon, a title and text.
Card that flips
A card with a front and a back: it flips on hover.
Benefit
An icon (or image) with a title and a description, ideal for benefits.
List with icons
A list of points with an icon on each line.
Image and text
An image on one side and text on the other, with an optional button.
Counter
A highlighted figure that counts up to its value when seen.
Person
The photo, name, job title and social links of someone on the team.
Post list
Lists posts, pages or any content type. You design ONE card with the modules you want and the site repeats it for each one, filling in the title, the date, the image or any custom field.
WordPress shortcode
Drops any WordPress shortcode into the design: a WooCommerce cart, a booking form, a slider from another plugin. It runs when the page is served, so what it shows is always current.
Content piece
One piece of the blog or the post that only the site can draw: the comments, the previous and next links, the categories, the pages of a listing. The site draws it when the page is served, so it is always the right one. For the title, the date or the content use a normal text with {{post.title}} inside.
Price list
A list of services or dishes with the price on the right, joined by a dotted line: the menu of a restaurant, a hairdresser or a workshop.
Stars
A star rating with text beside it.
Steps
The steps of a process laid out horizontally, numbered and joined by arrows: how to buy, how a service works, what happens after paying.
Table
A data table (sizes, comparisons, opening hours).
Index of the page
An automatic list of the page headings, with links.
Testimonial
One customer’s review, with a photo and stars.
Testimonials
Customer reviews with stars, an author and a photo.
Timeline
Milestones in order, with a date, a title and a description.
Text that types itself
A headline whose words type themselves and rotate.
// 04 — 24 modules
Media
Images, galleries, video, audio, maps and interactive pictures.
Before and after
Two photos compared with a handle you drag.
Audio
An audio player with the browser’s controls.
Gallery
Several photos in a grid, enlarging on click.
Image
A photo with a ratio, a caption, a link and hover effects.
Image accordion
Photo panels side by side that widen on hover and reveal their title and text. For featured categories or collections.
Image that scrolls
A tall image (a website screenshot, a poster) inside a frame that scrolls through on its own on hover. For portfolios and demos.
Image magnifier
A photo with a magnifier: on hover you see the enlarged area inside a circle. For fabrics, jewellery and any detail worth a closer look.
Block reveal image
A photo uncovered by a sweeping block of color when it scrolls into view.
Tilt image
A photo that tilts in 3D following the mouse, with an optional glare and a floating title.
Blob shape image
A photo cut into an organic blob shape that can slowly morph, with a color blob behind it.
Floating images
Several images placed freely on a canvas, each floating gently up and down at its own pace.
Random image
Shows a different image from a list on every visit, picked at random.
Image hover reveal
A list of large links; hovering a row reveals its photo floating next to the pointer.
Animated path
An icon or an SVG path that draws itself, line by line, when it enters the screen or on hover. For line logos, signatures and ornaments.
Photo with hotspots
Marks areas of a photo with information bubbles and links.
Banner
A photo with text on top in any of the 9 positions.
Lottie animation
A Lottie vector animation (a .json file from After Effects or LottieFiles): light, sharp at any size, looping or on hover.
Map
A Google Maps or OpenStreetMap map: the address is enough.
Carousel
Slides with a photo, text and a button, with arrows and dots.
Video
A YouTube/Vimeo video or your own file, with a ratio of your choice.
List of videos
One large video with the thumbnails of the rest beside or below it; tap one and the large one changes. For tutorials, collections and series.
Sticky video
A video that, as you keep scrolling down the page, shrinks into a corner and keeps playing there. For demos and long presentations.
360° viewer
A product you spin by dragging, built from a sequence of photos taken around it (24 or 36 are usually enough). It can spin on its own until someone touches it.
PDF viewer
A PDF (catalogue, menu, spec sheet) embedded in the page, with a height of your choice and a download button.
// 05 — 9 modules
Interactive
Tabs, accordions, switchers and panels the visitor opens.
Accordion / FAQ
Questions and answers that open on click.
Back to top
A button to go back to the top of the page.
Content switcher
A switch with two options (monthly/yearly, personal/business) that swaps between the two blocks you put inside. The first is option A; the second, B.
Interactive circle
A wheel of icons around a center that shows the title and text of the point you touch. For values, services or stages.
Reading progress
A thin bar fixed to the edge of the screen that fills as the visitor scrolls down the page. For long pages and articles.
Open sidebar
A button that opens the site sidebar (left or right). It works once that bar is created and published.
Side panel
A button that opens a sliding panel (left, right or bottom) with the modules you put inside: an extra menu, a form, filters, a basket of ideas.
Tabs
Content in tabs, without reloading the page.
Collapsible
A block that opens and closes on click.
// 06 — 12 modules
Marketing
Covers, calls to action, forms, pop-ups and pricing.
Pop-up window
A pop-up with a coupon or a form: on arrival, on scroll or on exit.
WhatsApp button
A floating button with the message pre-written and opening hours.
Announcement bar
A notice strip with a link, an icon and a close option.
Age verification
A curtain that asks whether the visitor is of legal age before letting them see the shop, and remembers their answer. Mandatory for alcohol and tobacco.
Countdown
A clock counting down to a date (offers, launches).
Call to action
A highlighted box with a title, text and a button.
Cover (hero)
A welcome band with a title, a subheading, buttons and a background photo.
Strip of logos
Logos in a row, with optional continuous scrolling.
Text ribbon
A ribbon of phrases scrolling non-stop, like a ticker: shipping notices, news, promotions. Each phrase can link.
Contact form
A configurable form delivered by email, with anti-spam.
Newsletter
A block for capturing emails, with a title, a field and a button.
Pricing table
Plans with a price, benefits and a button, with one highlighted.
// 07 — 6 modules
Shop
Pieces for WooCommerce and for finding things on the site.
Mini cart
What is in the cart, without leaving the page: every product with its quantity, what each line costs, the total, and buttons to add, remove or change the amount. It updates on its own when something is added anywhere on the page.
Cart rows
Design ONE cart row with the modules you want and the site repeats it for each product. Write {{item.name}}, {{item.qty}}, {{item.price}} or {{item.total}} inside, and the buttons for changing the amount work on their own.
Shop piece
One piece of WooCommerce inside your design. The checkout comes apart into billing, shipping, summary, payment and coupon, so you can lay it out however you want instead of taking the form as it comes. The site draws each piece when the page is served, so it is always correct.
Breadcrumbs
A navigation trail (Home › Category › Product).
Search box
A search field that leads to the site results.
Guarantees
A row of guarantees (shipping, secure payment, returns).
// 09 — 2 modules
Advanced
Your own code and HTML.
Code
A code block in monospaced formatting (shown, not executed).
HTML
Paste your own HTML (widgets, embeds, external forms).
Now build something
The guide shows how the editor, the settings and the templates work.