# [Web Builder]

Published 2026-10-09

> Web Builder — Complete User Guide Main Page / Overview Path: Frontline → Content → Web Builder What it does The Web Builder is a visual, drag-and-drop tool for creating and editing websites. You can create new web projec

## **Web Builder — Complete User Guide**

## **Main Page / Overview**

**Path:** Frontline → Content → Web Builder

### What it does

The Web Builder is a visual, drag-and-drop tool for creating and editing websites. You can create new web projects, choose a template type, build pages from pre-designed sections, customize styles, manage site pages, and publish the site.

### Main elements

-   **Left sidebar:** Content module with CMS and Web Builder options.
-   **Project cards:** Each card shows a website preview, name, description, template type, and action buttons.
-   **New Web Project button:** Starts a new website project.
-   **Build button:** Opens a project in the visual editor.
-   ![](https://imagedelivery.net/5m26Aj-CutMXPPNacMs_yQ/931f621b-c626-4b5b-3f6f-b69214eaef00/public)
    

## **Creating a New Web Project**

Click **\+ New Web Project** to start a new website. The New Web Project panel asks for:

-   **Name** — The project name, such as test-website.
-   **Client Portal** — The portal this website belongs to.
-   **Description** — A short explanation of the project.
-   **Domain** — The website domain or subdomain.
-   **Template Type** — Choose a template category such as E-Commerce, Hotel, or Tour.

Click **Create** to generate the project.

![](https://imagedelivery.net/5m26Aj-CutMXPPNacMs_yQ/3fcf7791-406c-420c-ce10-fba4d4069200/public)

## **Opening the Builder**

From the project list, click the **build** button on a project card to open the visual editor.

![](https://imagedelivery.net/5m26Aj-CutMXPPNacMs_yQ/3c5b016d-e634-41b7-b12b-356f4c4f3000/public)

## **The Builder Interface**

The builder shows a live preview of the current page. The top bar displays the project and page name, device view buttons, and **Publish** / **Draft** controls. The left sidebar has three main tabs: **Layout**, **Style**, and **Settings**, plus **Pages** for managing site pages.

![](https://imagedelivery.net/5m26Aj-CutMXPPNacMs_yQ/bc4200c5-a9fe-4e1f-67d8-6c012dd6d900/public)

## **Style Tab**

The **Style** tab controls the visual identity of the site. It includes:

-   **Logo & Identity** — Upload the site logo.
-   **Colors & Appearance** — Set the site color scheme.
-   **Contact Information** — Add address, phone, social links, and email.
-   ![](https://imagedelivery.net/5m26Aj-CutMXPPNacMs_yQ/0c1f1b96-6367-4975-9bae-0101bfd05f00/public)
    

## **Pages Tab**

The **Pages** tab lists every page on the site, such as Home, Profile, Booking, Privacy, Login, Register, Contact, Products, and About. Each page can be edited or deleted. Click **\+ Add Custom Page** to create a new page.

![](https://imagedelivery.net/5m26Aj-CutMXPPNacMs_yQ/8a298b9a-0940-46b7-922c-437991fdf400/public)

## **Settings Tab**

The **Settings** tab contains advanced site options:

-   **Templates** — Change or manage the site template.
-   **Domains** — Connect custom domains.
-   **POS** — Configure point-of-sale integration.
-   **Delivery Info** — Set delivery-related settings.
-   **Delete Project** — Permanently remove the website.
-   ![](https://imagedelivery.net/5m26Aj-CutMXPPNacMs_yQ/d5aa584a-d915-4aac-c4d9-82e2903bf100/public)
    

## **Adding Sections**

Click **\+ Add Main Section** to open the section library. Sections are grouped into categories such as Layouts and Lists. Available sections include Hero, Gallery, Carousel, Banner, Video, Image with Text, Text, Form, Messenger widget, Contact, Testimonials, Features, Stats, and more.

![](https://imagedelivery.net/5m26Aj-CutMXPPNacMs_yQ/241ea3e7-b1bd-48ee-8d78-d79cbdb0bd00/public)

## **Hero Section**

The Hero section is a large top-of-page banner. Its settings include:

-   **Eyebrow** — A small label above the heading.
-   **Hero Title** — The main headline.
-   **Hero Description** — The supporting text.
-   ![](https://imagedelivery.net/5m26Aj-CutMXPPNacMs_yQ/b96441df-9533-48b0-d588-7bc5dfdf4c00/public)
    

Scroll down to configure additional hero options:

-   **Commitments** — Short figure-and-label pairs shown under the hero.
-   **Hero Background** — Upload a background image.
-   **Primary and Secondary CTA Buttons** — Button labels and URLs.
-   **Background and Text Colors** — Choose default or custom colors.

Click **Add section** to place it on the page.

![](https://imagedelivery.net/5m26Aj-CutMXPPNacMs_yQ/0522df1c-eee6-42e6-ac9c-6afaff8cff00/public)

## **Gallery Section**

The Gallery section displays multiple images with text. Set the **Gallery Title**, **Gallery Description**, and upload images. You can also adjust the background and text colors.

![](https://imagedelivery.net/5m26Aj-CutMXPPNacMs_yQ/b46f2d8c-e000-4c51-ea93-b6387d7b5e00/public)

## **Carousel Section**

The Carousel section creates a sliding image gallery. Configure:

-   **Featured carousel** toggle.
-   **Description** — Text above the carousel.
-   **Carousel items** — Click **Add item** to create slides, each with a title, description, link type, and external URL.
-   ![](https://imagedelivery.net/5m26Aj-CutMXPPNacMs_yQ/948249f0-3b02-4f37-0d28-c3fda7d81d00/public)
    

## **Banner Section**

The Banner section highlights a single image with a link. Fields include:

-   **Title** (optional)
-   **Description** (optional)
-   **Banner image** — Upload the banner image.
-   ![](https://imagedelivery.net/5m26Aj-CutMXPPNacMs_yQ/0b63802f-4571-442a-6e7f-ad44b856e700/public)
    

## **Video Section**

The Video section embeds a YouTube video. Set the **Video Section Title**, **Video Section Description**, and paste the **YouTube URL**.

![](https://imagedelivery.net/5m26Aj-CutMXPPNacMs_yQ/7acec7d9-40d5-4aab-ac95-0429a4994a00/public)

## **Image with Text Section**

This section combines an image with formatted text. The top part of the settings includes:

-   **Eyebrow** — A small label.
-   **Title** — The section heading.
-   **Content** — Rich text with formatting tools.
-   ![](https://imagedelivery.net/5m26Aj-CutMXPPNacMs_yQ/363b45ae-5be1-486c-e5a3-12d1be838700/public)
    

The lower part includes:

-   **Image** — Upload an image.
-   **Image Position** — Choose left or right alignment.
-   **CTA Button** and **CTA URL** — Add a call-to-action.
-   ![](https://imagedelivery.net/5m26Aj-CutMXPPNacMs_yQ/2b9abfd9-4cca-43f4-9df8-a6b799b0f800/public)
    

## **Text Section**

The Text section is a simple content block with a title and rich text body. It also supports a CTA button and URL.

![](https://imagedelivery.net/5m26Aj-CutMXPPNacMs_yQ/ee3614a3-0a50-4bd7-4ff9-a4d1c2b27900/public)

## **Form Section**

The Form section embeds a form from the erxes system. Configure:

-   **Form Section Description**
-   **Success Message** — Shown after submission.
-   **Choose your form** — Select an existing form and click **Activate** to use it.
-   ![](https://imagedelivery.net/5m26Aj-CutMXPPNacMs_yQ/85ec691f-7e56-44ac-2176-cb2dedf3d400/public)
    

## **Contact Section**

The Contact section displays contact information and a contact form. Fields include:

-   **Eyebrow**
-   **Contact Section Title**
-   **Contact Section Description**
-   **Choose your contact form** — Select a form from the list.

A note reminds you that contact details can be edited under **Style → Contact Information**.

![](https://imagedelivery.net/5m26Aj-CutMXPPNacMs_yQ/7e6cea2b-0c8a-4bd2-febe-751e2aa54c00/public)

## **Testimonials Section**

The Testimonials section shows customer quotes. Set the eyebrow, title, and description, then click **Add quote** to create testimonial entries.

![](https://imagedelivery.net/5m26Aj-CutMXPPNacMs_yQ/0fdeeb6b-06a5-445c-a7cb-2ab16bc4e200/public)

## **Features Section**

The Features section displays selling points as icon cards. Configure:

-   **Title**, **Description**, and **Pill icon**.
-   **Alignment** — Such as centered.
-   **Features** — Click **Add feature** to create feature cards.
-   ![](https://imagedelivery.net/5m26Aj-CutMXPPNacMs_yQ/7dde4180-e982-44ce-f6b5-d6f869549a00/public)
    

## **Stats Section**

The Stats section shows figure-and-label pairs. Set the eyebrow, title, and description, then click **Add figure** to add statistics.

![](https://imagedelivery.net/5m26Aj-CutMXPPNacMs_yQ/28d33953-2899-4d74-1313-4c3c8af02b00/public)

## **Banner Section (Alternative Layout)**

The Banner section can also be used as a standalone highlighted image with optional title, description, and banner image upload.

![](https://imagedelivery.net/5m26Aj-CutMXPPNacMs_yQ/b2ba5fe6-cd5d-4dc0-61dc-51ee00b44800/public)

## **How It Works Section**

The How It Works section displays numbered steps. Set the eyebrow, title, and description, then click **Add step** to build the step-by-step flow.

![](https://imagedelivery.net/5m26Aj-CutMXPPNacMs_yQ/59fbf66a-392a-4cc6-a599-ca9a35396f00/public)

## **Products Section**

The Products section displays products from the catalog. Configure:

-   **Title** — Such as "Latest products".
-   **Description**
-   **Category** and **Tag** filters.
-   **Show last X products** — Set the number of products to display.

A preview shows matching products.

![](https://imagedelivery.net/5m26Aj-CutMXPPNacMs_yQ/82379497-3b09-4b51-c1c9-7a3dbc710500/public)

## **Browse Categories Section**

The Browse Categories section lets visitors explore product categories. Select which categories to display, such as products, desserts, main dish, salad, and soup.

![](https://imagedelivery.net/5m26Aj-CutMXPPNacMs_yQ/e221210e-97c7-4b68-e497-0cbaae205900/public)

## **Product Preview Settings**

Some product sections allow advanced options:

-   **Max products to show** — Limit the number of items.
-   **Preview customer ID** — Enter a customer ID to preview last-viewed products for that customer.
-   ![](https://imagedelivery.net/5m26Aj-CutMXPPNacMs_yQ/a7c11c6d-cff8-4045-0535-f438f37e9000/public)
    

## **Latest Blogs Section**

The Latest Blogs section pulls posts from the CMS. Set the **Section title**, choose a **Category**, and set the **Post count**. A preview shows matching blog posts.

![](https://imagedelivery.net/5m26Aj-CutMXPPNacMs_yQ/4a358f3d-5c6c-4442-49d9-77ecc5986f00/public)