Editor Overview

The top navigation bar contains helpful shortcuts for different site actions.

The top navigation bar allows you to:

The side panel serves as a comprehensive toolkit for managing various aspects of your site's design and functionality. You can make broad, sweeping changes to your site's design and functionality. These tabs allow you to customize your site's appearance, add new features and widgets, configure page settings, manage content, sell products online, publish blog posts, install apps, and optimize your site for search engines.

If you are in Classic Editor using flex mode or in Editor 2.0, you will have access to the Layers panel. The Layers panel provides a hierarchical view of your site page’s elements, allowing you to easily navigate and manage complex structures. Here, you can quickly identify the arrangement of widgets, columns, and sections, simplifying the process of locating and adjusting specific elements. From the Layers panel, you can perform various actions such as adding new elements, selecting elements, rearranging elements, renaming elements, and toggling element visibility on specific breakpoints.

Following are the options available in the side panel:

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.

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.

When you adjust settings like padding and margin after selecting an element, padding refers to the inner space between the content and the border of a box, while margin defines the outer space surrounding the box. This means padding adjustments can affect the size of the element and determine how much of a background color or image is visible within the box. Whereas, adjusting margins dictates how the element interacts with adjacent elements or the edges of the screen, defining its positioning relative to other elements on the page-similar to invisible barriers.

To learn more about the Design Panel and its sections, see Design Panel.

Rows are the horizontal sections of your site. When you add widgets and columns to your site, they are placed within these rows. To change how content is displayed in the mobile view, click the reverse column order toggle in the row editor.

You can add rows to your site by dragging widgets into the site. When you drag a widget between rows or into a space where want to add a row, a new row will be created when you drop the widget.

To delete a row, right-click anywhere on the row to open the context menu, and then click Delete. Alternatively, click the Row button at the top left corner of the row and click Delete.

For detailed information on editing and arranging rows, see Row Editor.

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.

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 allow extra design flexibility by enabling you to add rows inside columns. With the help of inner rows, you can vary the column layout and keep the general design of the row (for example, background, spacing, bleed).

Just like regular rows, inner rows can have their own background and spacing, be split into up to four columns, and have their column order changed on mobile. Columns in inner rows can be populated by any widget, but inner rows cannot be added to such columns.

To add an inner row to a column, do one of the following:

Inner Row Example

To give an example of how to use inner row, let’s look at two ways a layout that contains a title and 3 buttons can be designed:

Example 1: Add two rows. Place the Title in Row 1 with 1 Column. Split Row 2 into 3 columns. Place a button into each column. Note that two separate rows cannot share the same background image and you need to set spacing and bleed style separately for each row.

Example 2: Add a row. By default, each row contains a column. Add 2 inner rows to the column. Place the Title into inner row 1. Split inner row 2 into 3 columns. Place a button in each column. These two inner rows will share the main row background, spacing and bleed.

Some important considerations when it comes to editing inner rows:

• You can only use the order switching arrows to switch the order between inner rows. To switch the order of widgets and inner rows, you need to manually drag and drop the widgets above or below the inner row.

• 2 columns, 3 columns, 4 columns widgets cannot be placed in inner rows. To add a column, right-click the row and click Add Column.

• Unlike regular row, inner rows cannot be copy-pasted.

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.

When aligning widgets within the same column, the website builder attempts to Snap to Align them to be the exact same size. As you resize, the builder jumps ahead or behind to snap to location. This should make it easier to make widgets the exact same size.

There is also a Snap to Grid feature. The Snap to Grid feature helps lay widgets in the pages of your site with professional precision. This system allows you to align widgets horizontally and vertically within columns and rows. Rulers are presented when moving an element in its row or column, or when resizing the widget. The aligned elements are marked with a colored border. A widget may be aligned with more than one other widget, depending on the specific use case.

Alignment is supported in the views of the three different devices (desktop, tablet, mobile).

For more information on configuring headers and footers, see: