¶ STARFISH Website builder Orientation And Menus
¶ Starfish builder consists 5 essential UI parts:
● Top Menu - This part of the editor allows you to manage the site’s pages, preview and publish. It also includes the main editor “hamburger menu” (clicking it will open the Left Side Panel).
● Mini Menu - A simple shortcut to edit and modify the site’s elements, items, and sections. Will appear when you click on any part of the edited site.
● Left Side Panel - This panel includes all the controls that affect the entire page and site - styles, colors, and more.
● Right Side Panel - This panel includes contextual editing abilities. Will appear after clicking on one of the Mini-Menu options.
● Section’s Vertical Menu - A vertical menu that appears when hovering over a section - Contains options to reorder, delete and duplicate the relevant Section.
¶ Editor’s Top Menu
This part of the editor allows you to manage the site’s pages, preview and publish. It also includes the main editor “hamburger menu” (clicking it will open the Left Side Panel).
¶ In the Editor’s Top Menu you’ll find the basic functionality of the Editor:
Website Settings -Clicking the “Hamburger” icon will pop the Left-side menu.
Pages Management - Clicking the arrow icon next to the page’s name will pop the manage pages panel. There you can add, rename, duplicate and reorder pages.
Save indication - Only an indication that a change was saved - No need to click. The indication becomes white when the editor auto-saves your work.
Preview - Click to preview your website on a new tab.
Publish - Click to publish your recent change and update the live website.
¶ The Mini-Menu
¶ The main UI components of the editor and our pride and joy. Any element you click will show the Mini-Menu that allows you to:
● Edit the Element’s content, appearance and behaviour.
● Setup Link for the element.
● Modify the Item that contains this element.
● Modify the Section that contains the item of this element.
With this simple UI component, you get quick access to all the functionality you need.
Mini menu: Mini_menu.mp4
¶ The Left Side Panel
¶ Here you control settings that affect the entire page and site - styles, colors, menu look and feel, footer, head code and more.
How to video: Left_side_menu.mp4 This panel includes:
● Name of site and Owner - The current logged-in user and the name of the site.
● Download site - Click to download a .zip containing the entire static site (might take a few minutes to produce, please be patient).
● Stylesheet - The fonts and colors for the entire site.
● Menu - Look and feel of the site’s menu - affects the entire site.
● Footer - Look and feel of the site’s footer - affects the entire site.
● Page Settings - Head tags and custom CSS for the specific page.
● Website Settings - SEO, Analytics tags and custom CSS for all pages.
● Code - Custom head and footer code
● Color Palettes - Setup the colors that can be used through the site.