Website Builder Overview

By creavio Team April 10, 2026 1 views

Website Builder Overview

Your website is where clients decide whether to reach out or keep scrolling. creavio's website builder lets you build a professional site without writing code — and without paying a separate platform.

How the Website Builder Works

The builder uses a pages and sections model:

  • Pages are the routes on your site: Home, About, Portfolio, Contact, Blog, Pricing, etc.
  • Sections are the building blocks within each page: hero, text, gallery grid, testimonials, call-to-action, etc.

You create pages, add sections to them, and customize each section's content and style.

Creating a Page

  1. Go to Website > Pages
  2. Click + New Page
  3. Enter a page title and URL slug
  4. The page is created with a blank canvas. Start adding sections.

Adding Sections

Click + Add Section and choose from 15 section types:

  • Hero — full-width image or video with headline text
  • Text — rich text content area
  • Gallery Grid — a grid of images from your media library
  • Testimonials — client reviews in a carousel or grid
  • Call to Action — a section with a headline, text, and button
  • Contact Form — embed one of your forms
  • Pricing — display your packages in a comparison layout
  • FAQ — expandable question and answer pairs
  • Video — embed video from your media library with HLS playback
  • Spacer — vertical space between sections
  • Divider — a visual separator
  • Logo Bar — display client or publication logos
  • Stats — number counters (sessions shot, clients served, etc.)
  • Team — team member profiles with photos and bios
  • Custom HTML — for advanced users who want to paste embed codes or custom markup

The Visual Editor

Click Edit on any page to open the visual editor. You will see:

  • Left panel: Section list with drag handles for reordering
  • Center: Live preview in an iframe — click any section to select it
  • Right panel: Settings for the selected section (content, style, visibility)

Each section can be styled individually:

  • Padding — space inside the section
  • Background color — solid color or transparent
  • Text color — override the theme default
  • Full width — stretch edge to edge or stay within content width

Changes save manually — click the Save button when you are happy. The editor includes undo/redo so you can experiment without fear.

Theme Settings

Click the Theme tab to set global styles that apply to all pages:

  • Colors — primary, secondary, background, text (inherited from your brand settings by default)
  • Fonts — heading and body typefaces
  • Layout — content width and default spacing

Preview and Publish

Click Preview to see your page as visitors will. Check both desktop and mobile views using the device toggle at the top.

When ready, click Publish. The page goes live immediately at your domain. You can also schedule pages to publish at a future date.

To unpublish, toggle the page status to Draft. It disappears from your live site but stays in the builder for future editing.

Navigation

Go to Website > Navigation to configure your site menu. Add pages, reorder them, and create dropdown groups. The navigation automatically appears on all pages.

SEO

Each page has SEO settings where you can set the page title, meta description, and Open Graph image. These matter for Google search and social sharing.