Direct Sale AI

Visual Editor

Official guide · English · Version 9c253d0cf11816df

The Visual Editor is a powerful drag-and-drop page builder powered by GrapesJS. It provides a full WYSIWYG (What You See Is What You Get) editing experience where you can design pages visually without writing any code.

The Visual Editor is available for both the Homepage and Custom Pages.

For the structured Section Editor and Save as template, see Section Templates. Product Page Builder uses the Section Editor by default and offers Open legacy Visual Editor under Page source and help. Saved section layouts and legacy visual designs have separate editing workflows.

Accessing the Visual Editor

There are three ways to open the Visual Editor:

  1. Homepage: Go to Storefront > Design & Setup > Homepage and click the Visual Editor tab
  2. Custom Pages (from editor): When editing a page, click the Visual Editor button in the toolbar
  3. Custom Pages (from list): Click the layout template icon next to any page in the page list

Editor Interface

When the Visual Editor opens, it takes over the full screen with the following components:

Top Toolbar

The toolbar at the top of the editor includes:

  • Back button -- Returns to the section editor (homepage) or page list (custom pages)
  • Page title -- Shows which page you are editing
  • Container width selector -- Choose between Full, Contained, or Narrow content width
  • Device preview buttons -- Switch between desktop, tablet, and mobile views
  • Undo / Redo buttons
  • Save button with a "last saved" timestamp

Canvas Area

The main editing canvas is where you visually build your page. You can:

  • Click on any element to select it
  • Drag elements to reposition them
  • Resize elements by dragging their edges
  • Double-click text to edit it inline

Side Panels

The editor includes side panels for:

  • Blocks -- Pre-built content blocks you can drag onto the canvas
  • Layers -- A tree view of all elements on the page (like layers in a design tool)
  • Styles -- CSS properties for the selected element
  • Settings -- Component-specific settings
  • Traits -- HTML attributes like classes, IDs, and custom data

Content Blocks

The Visual Editor provides a library of pre-built content blocks that you can drag onto your canvas:

Layout Blocks

  • Section -- A full-width container
  • Container -- A centered max-width container
  • Columns -- Multi-column layouts (2, 3, 4 columns)
  • Flexbox -- Flexible box layout containers

Basic Blocks

  • Text -- Paragraph text
  • Heading -- H1-H6 headings
  • Image -- Image with upload support
  • Button -- Styled button with link
  • Link -- Hyperlink element
  • Video -- Video embed (YouTube, Vimeo)
  • Divider -- Horizontal rule separator
  • Spacer -- Vertical spacing element

Advanced Blocks

  • Card -- Product-style card with image, title, and description
  • Hero Section -- Full-width hero banner with text overlay
  • Feature Grid -- Grid of feature items with icons
  • Testimonial -- Customer review card
  • CTA Banner -- Call-to-action section
  • Newsletter -- Email subscription form layout
  • FAQ Accordion -- Expandable Q&A section

Styling Elements

When you select an element on the canvas, the Styles panel shows all available CSS properties:

Typography

  • Font family, size, weight
  • Line height, letter spacing
  • Text color and alignment
  • Text decoration and transform

Layout

  • Width, height, min/max dimensions
  • Margin and padding
  • Display mode (block, flex, grid, inline)
  • Position (static, relative, absolute, fixed)

Appearance

  • Background color, image, gradient
  • Border (width, style, color, radius)
  • Box shadow
  • Opacity

Flexbox / Grid

When a flex or grid container is selected:

  • Flex direction, wrap, align, justify
  • Gap settings
  • Individual item flex properties

Container Width

The editor offers three container width modes, selectable from the toolbar:

Width Description
Full Content spans the full width of the viewport
Contained Content is constrained to a standard max-width (similar to most websites)
Narrow Content uses a narrower max-width for focused reading experiences

Responsive Design

The Visual Editor supports responsive design through device preview buttons:

Switch device preview

Click the device buttons in the toolbar to switch between:

  • Desktop (full width)
  • Tablet (768px width)
  • Mobile (375px width)

Adjust styles per breakpoint

Styles set while in a specific device view only apply to that breakpoint and smaller. This lets you create responsive layouts where elements rearrange on smaller screens.

Test your design

Toggle between devices to verify your layout works at all screen sizes.

RTL Support

If your storefront uses RTL (Right-to-Left) layout direction, the Visual Editor automatically detects this from your theme settings and applies the appropriate text direction to the canvas. This ensures that your visual editing experience matches the actual storefront layout.

Saving Your Work

Click Save

Click the Save button in the toolbar. The editor saves:

  • The GrapesJS project data (for continued editing)
  • The rendered HTML output
  • The CSS styles
  • The container width setting

Check the timestamp

After saving, a "Last saved" timestamp appears next to the save button, confirming your work was saved successfully.

Return to the page list

Click the Back button to leave the editor and return to the previous view.

Info: The Visual Editor uses a separate storage format (GrapesJS project data) from the rich text editor. Once a page has been edited in the Visual Editor, it is marked with a "Visual" badge in the page list. You can still switch back to the rich text editor, but the visual editor layout will take precedence when rendering the page on the storefront.

Homepage Visual Editor

When using the Visual Editor for the homepage, there are some differences from custom pages:

  • If you switch to the Visual Editor and no project data exists yet, the current homepage sections are automatically converted to HTML as a starting point
  • The homepage visual editor saves to the homepage-specific storage, separate from the section editor data
  • You can switch between the Section Editor and Visual Editor modes freely; the storefront uses whichever was last saved

Warning: When switching between Section Editor and Visual Editor modes for the homepage, be aware that each mode saves to its own data storage. The storefront will display the content from whichever editor was used most recently. Changes in one editor are not automatically reflected in the other.