This article covers the areas of the editor.
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.
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.
-
Feedback Tab: Click on the comment and sparkle icon to provide feedback about the editor. Share suggestions, ask questions, report bugs, or provide other comments.
-
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.
-
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.
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.
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:
-
Layers
-
Theme
-
Pages
-
Widgets
-
Content
-
Personalize
-
Sell Online
-
Membership
-
Blog
-
SEO & Settings
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.
Note
To learn how to add and configure elements on the canvas, see Design with Flex.
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.
Comments
0 comments
Article is closed for comments.