This article explores the different components of the editor, including how to add and configure sections, rows, columns, inner rows, and align widgets. 

TABLE OF CONTENTS

• Overview of the Editor Interface
• Top Navigation Bar
• Side Panel
• Content Area / Canvas
• Design Panel

Overview of the Editor Interface

The editor is organized into distinct areas.

Within the editor, you'll find several standard sections: the top navigation bar, the side panel, the main content area (commonly known as the editor canvas), and the design panel located on the side. These sections serve as the foundation for building websites that reflect the user’s vision.

Top Navigation Bar
The top navigation bar features convenient shortcuts for various site actions.

The top navigation bar enables you to:

• Page Navigation: Click the pages menu to reveal a dropdown list of all the pages on your site. You can easily switch between pages by selecting from this list.

• View Different Screen Sizes: By clicking on the device icons, you can toggle between various screen size views (also known as breakpoints). This lets you see how your current page looks across different devices, from desktop to tablet to mobile. For additional information, refer to Screen Sizes and Devices.

• Feedback Tab: Available only in Editor 2.0. Click the comment and sparkle icon to share your feedback about the editor. You can submit suggestions, ask questions, report issues, or provide other comments.

• Search Functionality: Click the magnifying glass icon to search for anything you need within the editor or to access the help center for support.

• Info and Tools: Click the information icon to view the following details:

  • Site Info: Displays the site name, publication status, editor version, and a link to the site dashboard.
  • Preview Link: Shows the preview link for your site. To copy the link, choose the device type and click Copy.
  • Stats: Displays basic statistics for the site. For more detailed information, click Open Stats. This data is only available for published sites. For more details, see Site Stats and Analytics.
  • Clients: Manage client assignments for this site and set their permissions. To add a client, click Create Client. For further details, see Manage Clients.
  • Editor Language: Change the editor language without affecting the site's language. Select a language from the dropdown menu to switch.
  • Experimental Features: Enable or disable experimental features. Click Apply to save your changes. For more information, see Use Experimental Features.

• Save Progress Indicator: The checkmark icon indicates your current progress and whether changes have been saved successfully.

• Undo or Redo: Use the back and forward circular arrows to undo or redo recent actions performed in the editor.

• Developer Mode: Activate developer mode by clicking the relevant icon. This mode allows you to access and edit your site's HTML and CSS code.

• Preview Changes: Click the eye icon to preview your site, including any unpublished changes, across all or specific device screen sizes.

• Publish or Republish: Use the publish or republish button to make your site live with the latest updates.

• Help Dropdown Menu: Access resources from the help center by clicking the help dropdown menu.

• Home Button: Click the home icon to return to your site dashboard.
  

The top navigation bar enables you to:

• Page Navigation: Click the pages menu to reveal a dropdown list of all the pages on your site. You can easily switch between pages by selecting from this list.

• View Different Screen Sizes: By clicking on the device icons, you can toggle between various screen size views (also known as breakpoints). This lets you see how your current page looks across different devices, from desktop to tablet to mobile. 

• Feedback Tab: Available only in Editor 2.0. Click the comment and sparkle icon to share your feedback about the editor. You can submit suggestions, ask questions, report issues, or provide other comments.

• Search Functionality: Click the magnifying glass icon to search for anything you need within the editor or to access the help center for support.

• Info and Tools: Click the information icon to view the following details:

  • Site Info: Displays the site name, publication status, editor version, and a link to the site dashboard.
  • Preview Link: Shows the preview link for your site. To copy the link, choose the device type and click Copy.
  • Stats: Displays basic statistics for the site. For more detailed information, click Open Stats. This data is only available for published sites.
  • Clients: Manage client assignments for this site and set their permissions. To add a client, click Create Client. 
  • Editor Language: Change the editor language without affecting the site's language. Select a language from the dropdown menu to switch.
  • Experimental Features: Enable or disable experimental features. Click Apply to save your changes. 

• Save Progress Indicator: The checkmark icon indicates your current progress and whether changes have been saved successfully.

• Undo or Redo: Use the back and forward circular arrows to undo or redo recent actions performed in the editor.

• Developer Mode: Activate developer mode by clicking the relevant icon. This mode allows you to access and edit your site's HTML and CSS code.

• Preview Changes: Click the eye icon to preview your site, including any unpublished changes, across all or specific device screen sizes.

• Publish or Republish: Use the publish or republish button to make your site live with the latest updates.

• Help Dropdown Menu: Access resources from the help center by clicking the help dropdown menu.

• Home Button: Click 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.

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:

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.

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.

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.