Overview
The editor can be divided into several areas.
In the editor there are several predefined sections: the top navigation bar, the side panel, the central content area (often referred to as the editor canvas), and the design panel on the side. These sections are the basis for constructing websites according to the user’s vision.
Top Navigation Bar
The top navigation bar contains helpful shortcuts for different site actions.
The top navigation bar allows you to:
Page Navigation: Click on the pages menu to access a dropdown menu displaying all available pages on your site. You can navigate between pages by selecting them from this menu.
Switch between different screen size views (also called breakpoints) by clicking on the device icons. This allows you to preview how your current page appears on various screen sizes, from desktop to tablet to mobile. To learn more, see Screen Sizes and Devices.
Search Functionality: Click on the magnifying glass icon to search for anything you need within the editor or access the help center for assistance.
Info and Tools: Click on the information icon to access the following information:
Site Info. Displays the site name, published status, editor version, and a link to the site dashboard.
Preview Link. Displays the preview link for the site. To copy the link, select the device type and click Copy.
Stats. Displays basic stats for the site. To see more information, click Open Stats. This information is only available for published sites. For more information, see Site Stats and Analytics.
Save Progress Indicator: The check mark icon serves as an indicator of your current site progress and whether changes have been successfully saved.
Undo or Redo: You can use the undo and redo functionalities represented by the back and forward circle arrows to revert or reapply recent actions performed in the editor.
Preview Changes: Click on the eye icon to preview your site, including unpublished changes, on all or individual device screen sizes.
Publish or Republish: Use the publish or republish button to publish your site with the latest changes.
Help Dropdown Menu: Access help center resources by clicking on the help dropdown menu.
Home Button: Click on the home icon to return to your site dashboard.
Side Panel
The side panel serves as a comprehensive toolkit for managing various aspects of your site's design and functionality.
Following are the default options available in the side panel:
Add. From this element you can easily drag and drop Widgets, Media, and Site Text onto the canvas.
Pages. Add, view, and manage pages and popups.
Theme. Define default styles and settings for all text, colors, buttons, images, backgrounds, rows, columns, layout, width and spacing on your site.
CMS. Manage collections and content collected from clients.
SEO/AEO. Manage SEO settings for pages, images, internal and external links, and more.
More. Provides access to Personalization, App Store, Settings and Site Dashboard.
Content Area
The Content Area / Canvas is where you can move or add any of our features, or click and edit to change them. The content area allows you to change images, text, edit and delete buttons, and more.
Design Panel
The design panel offers a range of design settings for selected elements, enabling precise customization. Whether you are tweaking layout content alignment, spacing between elements, animation, and background, the design panel provides a comprehensive set of tools to enhance your website's visual appeal. Design options include layout adjustments, sizing configurations, alignment settings, and more, tailored to the selected element.
Rows
Use the Row editor to change the row's background (color or image), add a border, or adjust the inner and outer spacing of the row. Use rows to organize and arrange the content in your site.
To configure rows, hover over the top left of a row until a row button appears, and click Row. The Row editor menu appears.
You have the following configuration options:
Click the Move row up and Move row down arrows to move the current row up or down.
Click +Add and select one of the following:
Row above. Add a new row above the current row.
Row below. Add a new row below the current row.
Section. Add a section to the existing row.
Column. Add a column to the existing row.
Inner row. Add a row within the current row.
To clear the inner spacing inside the row, click Clear Padding.
To revert the spacing to what you defined in theme spacing, click Reset To default spacing.
To add an entrance animation to the row (for example, fade from right, bounce in, zoom in), click Entrance Animation, and select an option.
To save the row as a section, click Save as Section and select to save only the current row, multiple rows, or the full page.
To hide the current row on a specific device (desktop, tablet, mobile), click Hide On Device, and select the device.
To lock the row for client editing, click Lock for client editing.
To copy the row, click Copy.
To anchor the row to the page or delete an existing anchor, click Set As Anchor or Edit Anchor.
To delete the row, click Delete.
Row Editor
To edit the background style or spacing of the row:
Hover over the top left of a row until a row button appears, click Row, and then click Edit Design.
On the Settings tab, you have the following options:
Full bleed row. To change the row into a full bleed row, which allows content to span the entire width of the screen, click the Full bleed row toggle. If you choose not to have full bleed rows, the content width is limited to 960px.
On the Style tab, select a use a Background Color, Image, or Video. You have the following options:
Color
Select a Background color. Gradient color overrides image, and vice versa.
Click Border to select a border type, and move the slider to set the border width.
To add a shadow, click the Shadow toggle, and select a color, type, and position for the shadow.
Image
To add an image to the background, click + to open the image picker.
To create a background image slider, select multiple images from the image picker, and see Background Image Slider.
Select to have the image display as a Cover, Full image, Tile, or No repeat.
To enable parallax scrolling on a background image, click the Parallax scrolling toggle. When this is enabled, background content scrolls more slowly than foreground content.
Video. Click Select Video to view uploaded videos or paste the URL of the YouTube, Vimeo or Dailymotion video in the field provided.
Columns
Every row contains at least one column. Columns contain all the widgets in your site and control their arrangement. Whenever you add a new column, it appears alongside the existing column in that row.
While desktop and tablet views allow each row to hold up to four columns, mobile websites can only show at most two columns in a row. Columns added in desktop or tablet views will assume the full width of the page when switched to mobile view; to create a row with two columns in the mobile view, first switch to mobile view, then add a two-column widget.
To delete a column, right-click anywhere on the column to open the context menu, and then click Delete. Alternatively, click the red X at the top right corner of the column.
You can place widget directly into columns, or structure the column further by adding inner rows.
Column Editor
To edit the background style or spacing of a column:
Right click on the column, then click Edit Design.
2. On the Style tab, select a use a Background Color, Image, or Video. You have the following options:
Color
Select a Background color. Gradient color overrides image, and vice versa.
Click Border to select a border type, and move the slider to set the border width.
To add a shadow, click the Shadow toggle, and select a color, type, and position for the shadow.
Image
To add an image to the background, click + to open the image picker.
To create a background image slider, select multiple images from the image picker.
Select to have the image display as a Cover, Full image, Tile, or No repeat.
Configure the Position, Background overlay, Border, and Shadow for the image.
Video. Click Select Video to view uploaded videos or paste the URL of the YouTube, Vimeo or Dailymotion video in the field provided.
Background Image Slider
Background Image Sliders can be used to set background images for rows or columns.
After selecting multiple images in the image picker, click Done. Once the slider is created, select a Slide transition from the drop-down menu, and move the slider to select a Slide speed (seconds).
Any of the other background image options such as Background Overlay, Positioning, and display style can be applied to the slider.
Inner Rows
Sections are pre-built rows of elements which users can add to their responsive sites. Sections enable users to build great looking sites quickly by saving time during the design process. The infrastructure was built in order to provide a better user experience with a variety of pre-made sections.