Video Series Part 5 – Website Editor Features #
While navigating and editing the website, here are the key features included in the editor:
1. Website Editor Explorer (Top Left Sidebar) #
Think of this as your website’s table of contents.
- Folder Navigation: Here you can view your active projects, such as Candy or Restaurant. Clicking a folder will reveal the pages inside, such as the Index page.
- New Page (+): Use this to add a new sub-page to your current project without leaving the editor.
- Settings: Access page-level SEO metadata, custom scripts, or URL slug settings.
2. Element Library and Section Adder (Bottom Left Sidebar) #
This is your toolbox.
- Add Section (+): This is one of the fastest ways to build a page. Instead of adding elements one by one, you can drag and drop pre-designed sections such as Hero banners, Footers, or Galleries directly onto your page.
- Search Sections: If you need a specific section, such as a Contact Form, type it here to quickly filter the available templates.
- Component Tabs: The icons above the Add Section button allow you to switch between:
- Sections: Pre-designed layout blocks
- Elements: Individual items such as text, images, and buttons
- Global Styles: Site-wide colors and fonts
3. Interactive Canvas (Center Area) #
This is where you can see and edit your work in real time.
- Visual Editing: You can click directly on text, such as Discover Your Visual Investment Manager, and edit it instantly.
- Section Labels: You may notice a blue tab at the bottom, such as SECTION #service. This helps you identify which part of the page you are editing and makes it easier to manage the page structure.
4. Navigator (Floating Window on the Right) #
Think of this as your page structure view.
- If your page becomes long or complex, the Navigator helps you see all the layers clearly.
- It lists your Header, Sections, and Footer.
- Clicking any item in the Navigator will automatically scroll the canvas to that part of the page, making it easier to locate and edit specific sections.
5. Global Toolbar and Responsive Controls (Top Bar) #
This controls the overall editor state.
- Undo/Redo: Use the arrows to quickly reverse mistakes or restore recent changes.
- Preview Mode (Eye Icon): Click this to hide the editing tools and view the page the way visitors will see it.
- Responsive Toggle: The Phone, Tablet, and Desktop icons let you switch views so you can check how the website looks on different screen sizes.
- Zoom (100%): Adjust your zoom level to view more of the layout at once.
- Code Editor (Bottom Right): For advanced users, this opens the CSS and HTML editor for manual adjustments.
- Save Page (Blue Button): Be sure to click this often to save your progress and apply your updates.
