Guides

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.

• 

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.

Opening the Builder

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

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.

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.

• 

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.

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.

• 

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.

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.

• 

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.

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.

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.

• 

Banner Section

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

• Title (optional)
• Description (optional)
• Banner image — Upload the banner image.

• 

Video Section

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

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.

• 

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.

• 

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.

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.

• 

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.

Testimonials Section

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

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.

• 

Stats Section

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

Banner Section (Alternative Layout)

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

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.

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.

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.

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.

• 

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.