Page Builder & Block Types

Go to Contact → Builder to design your contact page. The builder shows a list of sections that render top-to-bottom on the frontend. Drag the grip handle (⠿) to reorder them. Click the chevron (›) to collapse a section. Click the trash icon to delete one (with a confirmation prompt — the page saves automatically).

When you're done, click Save Builder.

#Layout templates

Before building, choose a layout template in the Appearance tab:

The Split layout is ideal when you want contact info, a map, and business hours on the left while the form is always visible on the right.

#Adding a block

Click any + Add section button below the section list. Blocks are added at the bottom and can be dragged to any position.

#Block types

#Text

A rich-text block. Write paragraphs, headings (H2, H3), bold, italic, links, and lists. Use the eraser toolbar button to strip pasted formatting (removes Word/browser styles while keeping semantic markup).

In multilingual sites, each language gets its own editor tab.

#Contact Info

A list of contact details — address, phone, email, or any custom entry — each displayed with an icon.

Each item has:

• Icon — any Bootstrap Icons class (e.g. bi-geo-alt, bi-telephone, bi-envelope, bi-globe, bi-clock)
• Label — translatable heading above the value (e.g. "Address", "Phone")
• Value — translatable content (e.g. "123 Main St, New York")
• Link — optional URL, tel: or mailto: to make the value clickable

Click Add item to add more entries. The three default items (address, phone, email) are pre-filled with appropriate icons when you first add the block.

#Business Hours

A schedule table showing days and opening hours.

Each row has:

• Day — translatable (e.g. "Monday – Friday", "Lundi – Vendredi")
• Hours — translatable (e.g. "9:00 AM – 6:00 PM")

You can also set an optional section title (e.g. "Opening Hours") shown above the table.

Click Add row to add more entries. A row with both fields empty is skipped on the frontend.

#Social Links

A row of icon buttons linking to social profiles. Enter the full URL for each platform you use; leave the others blank — only filled platforms appear on the frontend.

Supported platforms: Twitter/X, LinkedIn, Facebook, Instagram, YouTube, GitHub, TikTok, Pinterest, WhatsApp.

#Image

A full-width image with optional caption.

Fields:

• Image URL — a full URL to any publicly accessible image
• Alt text — translatable, important for accessibility and SEO
• Caption — translatable, displayed below the image
• Rounded corners — toggle on/off

#Team Cards

A responsive grid of team member cards. Useful for "who to contact" sections on B2B or agency sites.

Each member has:

• Name — displayed as the card title
• Photo URL — square image, displayed as a circle (96×96 px recommended)
• Role / Position — translatable (e.g. "CEO", "Support Lead")
• Short bio — translatable one-liner
• Email — optional, rendered as a mailto: link
• Phone — optional, rendered as a tel: link

If no photo URL is provided, a placeholder avatar is shown. Click Add team member to add more.

#CTA Button

A standalone call-to-action button, optionally with a description line above it.

Fields:

• Button label — translatable (e.g. "Book a Call", "Schedule a Demo")
• Description — translatable, shown in smaller text above the button
• URL — destination link (Calendly, Typeform, internal page, etc.)
• Style — Primary, Secondary, or Outline
• Alignment — Left, Center, or Right
• Open in new tab — toggle

#Google Map

Embeds a Google Maps iframe using an address string.

Fields:

• Address — any address Google Maps can resolve (e.g. "Eiffel Tower, Paris")
• Zoom — slider from 1 (world) to 20 (building level), default 14

The map is rendered as a 16:9 aspect-ratio iframe.

#Collapsible Items (FAQ)

An accordion/FAQ block. Each item expands on click to reveal its content.

Each item has:

• Title — translatable question or heading
• Content — translatable answer (plain text, line breaks preserved)

Click Add item to add more FAQ entries.

#Contact Form

A placeholder block representing the contact form itself. The form is configured under the Fields tab — this block just controls where the form appears on the page.

You can only have one Form block. It cannot be deleted. To configure form fields, click the "Configure fields →" link inside the block, or switch to the Fields tab.

#Tips

• In Split layout, only sections that appear before the Form block go in the left column. Put your Contact Info, Business Hours, and Map there.
• Blocks with no content are still saved — they just render nothing on the frontend (empty items are skipped).
• Drag-and-drop works by holding the grip handle (⠿) on the left of each section header.