Editor Overview

This article covers the areas of the editor and how add and configure sections, rows, columns, inner rows, and widget alignment.

Editor Interface 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). 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.

top_nav_bar.png

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.

    • Editor Language. Switch the editor language. This does not affect the language of the site. To switch the editor language, select a language from the drop-down menu.

  • Save Progress Indicator: The checkmark 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.

  • Developer Mode: Enter developer mode by clicking on the appropriate icon. This mode allows you to access and modify your site's HTML and CSS code.

  • 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.

  • 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. 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.

Following are the options available in the side panel:

  • Theme

  • Pages

  • Widgets

  • Content

  • Personalize

  • Sell Online

  • Membership

  • Blog

  • SEO & Settings

  • Uhide Elements (only visible if you have hidden elements; only applicable for classic editor, in editor 2.0 and flex mode, hidden elements can be found in the Layers screen)

Content Area / Canvas

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.

content-area.png

Note

For more on canvas editing options, see Canvas Actions and Options .

Website Builder Structure

The Website Builder is built from a header, footer, rows, and columns. Every widget you add is inserted into one of these sections.

Rows

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.

Row Editor

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:

  1. Hover over the top left of a row until a row button appears, and click Row. The Row editor menu appears.

  2. Click the Move row up and Move row down arrows to move the current row up or down.

  3. To open the Row design editor, click Edit Design. For more information, see Row Design Editor.The Row design editor appears.

  4. 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 row.

    • Column. Add a column to the row.

    • Inner row. Add a row within the current row.

  5. To clear the inner spacing inside the row, click Clear Padding.

  6. To revert the spacing to what you defined in theme spacing, click Reset To default spacing.

  7. To add an entrance animation to the row (for example, fade from right, bounce in, zoom in), click Entrance Animation, and select an option.

  8. 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.

  9. To hide the current row on a specific device (desktop, tablet, mobile), click Hide On Device, and select the device.

  10. To lock the row for client editing, click Lock for client editing.

  11. To copy the row, click Copy.

  12. To anchor the row to the page or delete an existing anchor, click Set As Anchor or Edit Anchor.

  13. To delete the row, click Delete.

Row Design Editor

To edit the background style or spacing of the row:

  1. Hover over the top left of a row until a row button appears, click Row, and then click Edit Design.

  2. 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.

  3. 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 CoverFull imageTile, 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.

        Note

        • Parallax scrolling is not an option for the Background Image Slider or in mobile.

        • The option to keep a background image static is not available for tablet and mobile due to an iOS limitation.

      • 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. For more information about video backgrounds, see Element Backgrounds.

    Note

    For more information on backgrounds, see Element Backgrounds.

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

Use the Column editor to change a column's background (color or image), add a border, or adjust the inner and outer spacing of the column. Use columns to organize and arrange the content in a row.

To configure a column:

  1. Right click on the column. The column editor menu appears.

    Note

    If there is no padding on the column, the right click will not be directly accessible. To access the column in this case, right click on a widget that is in the column (this should bring up the context menu for the widget and will note the name of it at the top), click Select Container, select Column. To verify it has changed to the column's context menu, refer to the top; it should now say Column.

  2. Click the Move column left and Move column right arrows to move the current column left or right (the arrows will be disabled if there is only one column).

  3. To open the Column design editor, click Edit Design. For more information, see Column Design Editor. The Column design editor appears.

  4. Click +Add and select one of the following:

    • Column. Add a new column to the current row (a max of 4 columns can be added per row on desktop and 2 on mobile).

    • Inner row. Add a row within the current column.

    • Widget below. Add a widget.

  5. To clear the inner spacing inside the column, click Clear Padding.

  6. To revert the spacing to what you defined in theme spacing, click Reset To default spacing.

  7. To add an entrance animation to the column (for example, fade from right, bounce in, zoom in), click Entrance Animation, and select an option.

  8. To hide the current column on a specific device (desktop, tablet, mobile), click Hide On Device, and select the device.

  9. To lock the column for client editing, click Lock for client editing.

  10. To copy the column, click Copy.

  11. To anchor the column to the page or delete an existing anchor, click Set As Anchor or Edit Anchor.

  12. To delete the column, click Delete.

Column Design Editor

To edit the background style or spacing of a column:

  1. Right click on the column, then click Edit Design.

    • Note

      If there is no padding on the column, the right click will not be directly accessible. To access the column in this case, right click on a widget that is in the column (this should bring up the context menu for the widget and will note the name of it at the top), click Select Container, select Column. To verify it has changed to the column's context menu, refer to the top; it should now say Column.

  2. On the Style tab, select a use a Background ColorImage, 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 CoverFull imageTile, 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. For more information about video backgrounds, see Element Backgrounds.

    Note

    For more information on backgrounds, see Element Backgrounds.

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

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:

  • Right-click the row, and click Add Inner Row. If there are multiple columns in the row, choose to which column you want to add the inner rows.

  • Right-click the column, and click Add Inner Row.

  • Right-click the inner row, and click Add Row to place an inner row below the current one.

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.

inner-rows.png

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.

inner-rows-2.png

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.

Designed Sections (Pre-Designed Section Templates)

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.

Note

  • Sections do not use any custom CSS, and are all build within the editor by designers.

  • Sections do not use the text color or text font settings from the site theme settings. However, you can always clear the format and apply your design.

  • Sections cannot be used in the header. To switch the full header section, open the header editor. For more information, see Headers.

Add Sections

To add sections of widgets:

  1. Hover between rows, and click Add Section.

  2. Select Designed. Sections display in the side panel.

  3. In Section Mode, a gallery of pre-made sections is available in the left panel, grouped into categories (Intro, Features, About, Team, Testimonials, and so on).

  4. In the side panel, click a section to display it as a new row. You can then browse sections within the same group by using the arrows keys or by selecting a section from a different group.

  5. To embed the section into the site, click Save. Alternatively, click Save & Add Another to continue adding sections to your site. The section converts into a row and all elements in the section are editable.

Widget Alignment

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).

Header and Footer

For more information on configuring headers and footers, see: