The website editor is designed to simplify website building and management by offering an intuitive interface with powerful tools. The editor interface is divided into key areas: the Top Navigation Bar, Side Panel, Content Area (Canvas), and the Design Panel, which work together to streamline your workflow and create a user-friendly experience.
Top Navigation Bar 🔴
The top navigation bar provides easy access to essential tools for managing your site. Key features include:
- Page Navigation: Switch between pages quickly using a dropdown menu.
- Screen Size Views: Preview how your site looks on desktop, tablet, and mobile devices by toggling between breakpoints.
- Site Tools: Access feedback options, search functionality, site information, and tools for undo/redo, developer mode (for HTML and CSS customization), previewing changes, and publishing updates.
Side Panel 🟢
The side panel acts as a comprehensive control center for customizing your site’s functionality and design. It includes:
- Theme Settings: Customize your site's appearance, including fonts, colors, and overall design.
- Pages and Widgets: Manage your site's pages, including adding, deleting, or rearranging them. Enhance functionality with widgets by adding features like forms, galleries, and social media integrations.
- Content Management: Edit and organize content, such as text and images, and personalize your site based on visitor behavior or demographics.
- E-Commerce and Blogging: Configure online selling options, manage membership options, and create and manage blog posts to engage with your audience.
- SEO and Settings: Optimize your site for search engines and configure advanced site settings.
Content Area (Canvas) 🟡
The content area, or canvas, is where you directly build and edit your site. This interactive workspace makes it easy to see how changes will appear on your live site.
- Add Features: Drag and drop widgets and other elements directly onto the canvas to build your site.
- Edit Content: Click on elements to modify text, images, and other content inline.
- Arrange Layout: Move and resize elements to achieve your desired layout and design.
- Use Designed Sections: Pre-built section templates that you can quickly add to your site. These templates streamline the design process, offering various styles (e.g., Team, Testimonials, Features) without the need for custom CSS.
Design Panel 🔵
The design panel provides detailed design settings for elements, such as layout adjustments, spacing, and alignment. It also includes tools for adding animations and background customization.
- Customize Appearance: Modify design aspects such as colors, borders, and typography for individual widgets.
- Set Alignment: The editor includes a Snap to Grid feature and automatic Snap to Align for precise widget placement. Widgets can be aligned vertically and horizontally within columns and rows, ensuring professional and consistent layouts across all devices. You can align text and other content within widgets to ensure a cohesive look.
- Adjust Spacing: Set inner and outer spacing (padding and margins) to control the placement and breathing room of elements.
These components work together to provide a robust and user-friendly environment for building and managing your website efficiently. For more detailed information about using the website editor, click here.