Help Center › Visual Builder - Sections
Overview
Sections are blocks you add, arrange, and configure in the Visual Builder. Each section has a purpose and configurable options. This reference lists all sections, what they do, and how to add them.
How to Add Sections
Dynamic Sections
These sections pull data from your profile, team, or company. Many support a data source (User, Team, Company).
Header
Hero area with background image and profile photo overlay.
Display mode: Both (hero + avatar), hero only, or avatar only.
Image sources (data sources):
- Hero image source — User, Team, or Company. Background/banner image.
- Avatar image source — User, Team, or Company. Overlay photo/logo.
Style options: Avatar size, shape (circle/square), position (left/center/right), hero height, background colour.
Profile Info
Shows name, job title, department, company, and headline. Each field can be toggled on or off.
Data: Automatically from profile (name, title, headline from user; department from assigned team; company from company).
Style options: Font size, weight, alignment, padding per field.
Contact Details
Individual contact fields: work email, personal email, mobile, work phone, work website, personal website, address.
Per-field options:
- Enable/disable
- Data source — User, Team, or Company (for supported fields)
- Custom label
- Static text (fixed value)
Display style: Plain text, buttons, or icon-only. Icon size, spacing, colours.
Social Media Links
Social and website links.
Data source: User, Team, or Company (one for the whole section).
Display style: Plain list, buttons, or icon-only. Icon shape (circle/square), size, spacing, colours.
Call to Action (CTA)
"Add to Contacts" button that downloads the profile vCard. No data source — always uses the profile being viewed.
Options: Title, subtitle, button text.
---
Static Sections
These sections use content you enter, not profile data.
Text
Custom text block. Use for bios, announcements, or custom copy.
Style options: Font size, weight, alignment, line height, padding, margin, border, shadow.
Button
A button that links to a URL or triggers a document download.
Options: Button text, URL, open in new tab, action type (URL or document), style (filled/outline), size, alignment, icon.
Divider
Horizontal line between sections. Adjust thickness and colour.
Single Image
One image with optional caption. Upload or paste URL.
No data source — static only. For dynamic images (profile/team/company), use the Header section or Custom HTML.
Options: Width, alignment, aspect ratio, border, shadow, caption styling.
Image Row
Two images side by side. Good for before/after or portfolio samples.
No data source — static only.
Options: Image widths, gap, alignment, aspect ratio, border, caption.
Video
Embed a video from YouTube, Vimeo, Loom, or direct URL.
Options: Aspect ratio, autoplay, controls, loop, muted, caption.
Custom HTML
Advanced: add your own HTML and CSS. Can use placeholders like {{first_name}} for dynamic data.
Options: Full-width layout. See Pure HTML - Placeholder Reference for placeholders.
---
Section Categories
| Category | Sections | Data |
|----------|----------|------|
| Dynamic | Header, Profile Info, Contact Details, Social Media Links, CTA | From profile/team/company |
| Static | Text, Button, Divider, Single Image, Image Row, Video, Custom HTML | You enter or upload |
---
Reordering and Styling
- Reorder: Drag sections up or down in the section list.
- Style: Select a section, open the Style panel. Change colours, spacing, fonts.
- Theme colours: Enable theme colours for background, font, button, icon. Sections then use the template's theme.
---
Related
- Visual Builder - Data Sources — User, Team, Company data sources
- Profile Templates - Visual Builder — Main guide
- Template Sections Reference — Shorter overview
- Pure HTML Editor — For custom HTML sections