Modules are independent content blocks that make up your website (like Lego bricks). Hero sections, side-by-side images, card galleries, FAQs, key metrics, and YouTube videos are all individual modules. You can stack multiple modules on the same page and customize the background color, card style, spacing, and button position for each one to create rich visual depth.
To see all available modules, check out the .
Tip: Headers and footers are site-wide frames and are not in the "Modules" directory. Edit them via "Layout" in the top toolbar. Link-in-bio pages are single-page layouts and do not support mixing standard modules.
Hover over a module on the preview canvas (on mobile, tap the module to see the floating bar at the bottom) or open the "Layout" list at the top. Use the "Edit" and "⋯" options to perform the following actions (all changes are automatically saved to draft):
↶ Undo at the top or recover it from ).No need to delete and start over if you picked the wrong module! For module families with similar structures, click the "⋯" icon on the top right of the module (or in the "Layout" menu) and select "Convert Layout" to switch to another module in the same family instantly:
| Module Family | Interchangeable Module Types | Content Retained Without Loss |
|---|---|---|
| Cards & Gallery Family | Text Card Gallery ↔ Image-Text Card Gallery ↔ Image-Text Card Carousel ↔ Multi-Image Gallery | Module title, description, sub-headline, background color, column count, card style, and each card's title, body text, image, focal point, icon, badge, bullet points, and button are all retained. |
| Hero & Layout Family | Page Hero ↔ Full-Width Image ↔ Side-by-Side Layout | Title, description, sub-headline, main image and focal point, bullet points, metrics, buttons, and footer notes are all retained. |
When you click into a Heading or Description input field, a Rich Text Toolbar and AI Writing button will appear on the right side of the field header:
Click the H1 / H2 / H3 buttons in the toolbar to switch the heading's semantics and default font size:
H1 (Page Main Heading): Recommended for the top-most module (e.g., "Hero Section") only. This helps Google and AI search engines understand the page topic at a glance.H2 (Section Heading): The default level for standard content modules, representing major sections of the page.H3 (Subheading): Ideal for supplementary information or card titles.Highlight a section of text in the heading or description box to apply specific styles to that text only:
When you enter more than 150 characters in a module description, a "Collapsible Text" setting bar will appear at the bottom of the input box:
To keep the form clean, advanced accessories are tucked away in the top right of the heading and description fields and expand upon clicking:
＋Eyebrow: A small label displayed above the main heading. You can select an icon and short text (e.g., ✦ Why Choose Us, 🔥 Limited Offer).＋Features: Add up to 8 bullet points with branded checkmark icons ✓ in Hero, Side-by-Side, and Call-to-Action modules.＋Highlights: Display up to 4 eye-catching data points in Hero, Side-by-Side, and Call-to-Action modules (e.g., 10+ Years Experience, 99% Customer Satisfaction).Scroll down to the "Layout and Appearance" section in the module editor panel to adjust the visual presentation (the center preview updates in real-time):
| Background Options (Light Mode / Dark Mode Name) | Visual Effect & Use Case |
|---|---|
| Auto-Alternating (Default) | Adjacent modules automatically alternate between light and light-gray to naturally separate sections. |
| Pure White / Deep Black | Uses a clean primary background color that remains consistent regardless of module order. |
| Matte Gray / Charcoal Gray | Uses a soft secondary background color, ideal for highlighting white 3D cards. |
| Brand Soft Light | Applies a subtle brand color tint to the background, gently emphasizing key sections. |
| Brand Primary | Full-width, high-saturation brand color block; text and solid buttons automatically invert to white, ideal for important CTAs or key metrics. |
| Matte Black / Soft Charcoal | High-tension, dark full-width background, perfect for portfolios or high-contrast highlight areas. |
In card and product list modules, you can freely combine grid and card appearances:
16:9, 4:3, 1:1 (Square), or 3:4 (Portrait/Fashion). Single videos, PDFs, or large images can switch display width (Compact/Standard/Wide).In "Image & Text Card Gallery," "Text Card Gallery," and "Image & Text Carousel," each card can be customized:
Popular, Step 1, NEW).In the "Add Custom Button" section at the bottom of the module form, each module can hold up to 3 action buttons:
＋Add Button on the right of the header to create a new one instantly (syncs back to site-wide brand settings without leaving the panel).→): Lightweight link with no background or border, featuring a sliding arrow—perfect for card or section bottoms.＋Footer Note to add a small line of text below the button (e.g., "No contract, cancel anytime").#Anchor SettingsAt the bottom of most module forms (in the "Site-Wide & Advanced Settings" section), two useful features are available:
pricing or faq). Once set, you can bind #pricing from the dropdown when selecting that page in the or custom buttons, allowing visitors to scroll smoothly to that section upon clicking!You can add as many modules as you need. Generally, we recommend keeping a page to 4 to 7 modules for the best reading rhythm and conversion results.
You can click ↶ Undo (or press ⌘Z / Ctrl+Z) at the top left of the editor immediately after the action. If you have already refreshed or left the page, click "Version History" at the top to preview versions from the last 30 days and click "Restore this page only" to recover it (see Drafts, Version History, and Publishing).
To ensure text and images are large enough and easy to tap on mobile screens, mobile and tablet have independent column settings. You can click the mobile/tablet icon next to the "Columns per Row" field to view or adjust settings for each device.