Navigating the User Interface #

This guide is designed to help you navigate the Website Workspace, where you can manage and customize each of your websites. Understanding the interface will empower you to create stunning, mobile-first websites with ease.

---

1. Introduction to the Website Workspace #

The Website Workspace is your control center for a specific website. It provides all the tools and settings you need to build, edit, and manage your site effectively.

Accessing the Website Workspace #

• From the Account Dashboard (covered in the Understanding the Dashboard section), select the website you want to manage by clicking on its card.
• You will be redirected to the Website Workspace dedicated to that website.

---

2. Website Workspace Layout #

The Website Workspace is organized to provide easy access to all the functionalities you need.

A. Left Navigation Menu #

The left-hand sidebar contains the main navigation menu for your website. It includes:

1. Start

   • Provides a snapshot of your website's performance, recent activity, and important notifications.

2. Page Builder

   • Launches the intuitive drag-and-drop builder for creating and editing your website's pages.

3. All Pages

   • Lists all the pages within your website for easy management.
   • Allows you to add, edit, duplicate, or delete pages.

4. Products (Coming Soon)

   • Access upcoming e-commerce features to manage products, orders, and store settings.

5. Page Insights

   • Access built-in, simple, and privacy-focused analytics to understand your website's performance.

6. Settings

   • Adjust website-specific settings, including domains, SEO configurations, and privacy options.
   • Integrations
     • Connect third-party services like Umami, Google Analytics, email marketing platforms, and more.

7. Support and Documentation

   • Access help resources, tutorials, and contact customer support.

B. Main Content Area #

The main area displays content relevant to the section selected in the left navigation menu.

• Start Section (Overview)

  • Displays key metrics, recent updates, and shortcuts to important actions.

• Other Sections

  • Presents tools and options specific to the selected menu item (e.g., Page Builder interface, list of all pages, insights charts).

C. Account Access #

• My Account Link
  • Located at the bottom left corner of the navigation menu.
  • Click to return to the Account Dashboard or access account-level settings.

---

3. Navigating the Left Menu Options #

A. Start (Overview) #

• Website Performance

  • View key metrics such as page views, unique visitors, and conversion rates.

• Recent Activity

  • See recent changes made to your website, including edits, new pages, or updates.

• Quick Actions

  • Access shortcuts to common tasks like creating a new page or editing settings.

B. Page Builder #

• Launching the Builder

  • Click Page Builder to open the drag-and-drop editor.

• Using the Builder Interface

  • Left Sidebar (Elements Panel): Contains elements you can add to your pages.
  • Canvas: The main area where you design your page.
  • Right Sidebar (Settings Panel): Adjust settings for selected elements and manage pages.

• Building and Editing Pages

  • Drag elements onto the canvas to create your layout.
  • Customize elements by clicking on them and adjusting settings in the right sidebar.
  • Preview your page across different devices using the device mode options.

C. All Pages #

• Managing Pages

  • View a list of all your website's pages.
  • Actions Available:
    • Edit: Modify the page in the Page Builder.
    • Duplicate: Create a copy of a page.
    • Delete: Remove a page from your website.

• Organizing Pages

  • Rearrange pages by dragging them to change their order.
  • The order affects navigation menus and the structure of your site.

• Adding a New Page

  • Click the Add Page button to create a new page.
  • Choose from blank pages or apply a template.

D. Products (Coming Soon) #

• E-commerce Management

  • This section will allow you to add and manage products, track inventory, and process orders.

• Stay Tuned

  • Keep an eye out for updates as we roll out these features.

E. Page Insights #

• Built-in Analytics

  • Access simple, lightweight, and privacy-focused analytics to understand your website's performance.
  • Monitor basic metrics like page views, unique visitors, and time spent on pages.

• Key Features

  • Privacy-Focused: No personal data is collected from your visitors, ensuring compliance with privacy regulations.

• Metrics Available

  • Page Views: Total number of times pages have been viewed.
  • Impressions: Counts how many times an element is seen.
  • Hovers: Counts how many times users hover over an element.
  • Clicks: Counts how many times users click on an element.

• Integrating Third-Party Analytics

  • If you prefer more advanced analytics, you can integrate third-party services:

    • Umami: A privacy-focused analytics tool that offers more detailed insights.
    • Google Analytics: A comprehensive analytics platform with extensive features.

  • How to Integrate:

    • Navigate to the Integrations section in Settings.
    • Select your preferred analytics service.
    • Follow the prompts to connect your account and configure settings.

F. Integrations #

• Connecting Services

  • Integrate with third-party tools to enhance your website's functionality.

• Available Integrations

  • Analytics: Umami, Google Analytics, and others. (work-in-progress)
  • Email Marketing: Connect with services like MailChimp or Sendinblue. (work-in-progress)
  • CRM Systems: Integrate with customer relationship management tools. (work-in-progress)

• Managing Integrations (work-in-progress)

  • Enable or disable integrations and configure settings for each connected service.

G. Settings #

• Domain Configuration

  • Connect your custom domain or use a free subdomain provided by webfluss.com.
  • Follow step-by-step instructions for DNS setup.

• SEO Settings

  • Set site-wide meta titles, descriptions, and keywords.
  • Improve search engine visibility.

• Website Information

  • Update your website's name and favicon.

H. Support #

• Help Resources

  • Access tutorials, FAQs, and documentation to assist you.

• Contact Support

  • Reach out to our support team for personalized assistance.

---

4. Using the Page Builder #

While the Page Builder is a significant part of the Website Workspace, here are specific navigation tips within the builder:

A. Left Sidebar (Elements Panel) #

• Categories of Elements

  • Sections: Pre-designed sections like Hero, Features, FAQs, Headers, and so on.
  • Link & Button: Add buttons and social media icons.
  • Media: Insert images and videos.
  • Information: Add text blocks, biographies, contact forms, and separators.

• Adding Elements

  • Drag your desired element from the sidebar onto the canvas.

B. Right Sidebar (Settings Panel) #

• Element Settings

  • Adjust properties of selected elements, such as color, size, alignment, and behavior.

• Page Management

  • Device Mode: Preview and edit your page in desktop, tablet, or mobile view.
  • Preview Page: View your page without editing tools.
  • Page Background: Set background colors or images.
  • Content Alignment: Adjust how content is positioned on the page.
  • SEO Customize: Optimize individual pages for search engines.

• Page Actions

  • Add Page: Create a new page within the builder.
  • Sort Pages: Rearrange the order of your pages.
  • Duplicate Page: Make a copy of the current page.
  • Delete Page: Remove the current page.

---

5. Exiting the Page Builder #

When you're finished editing your page, you can exit the Page Builder and return to the Website Workspace.

Exit Builder Menu #

• The Exit Builder option is usually located in the top navigation bar of the Page Builder interface.
• To leave the editor, click Exit Builder.
• If you have unsaved changes, a prompt will appear to remind you to save before exiting.

Saving Your Work #

• Before exiting, ensure that your changes are saved.
  • Save Draft: This option allows you to save your progress without making your changes live. (Note: This feature is currently not available, but we are working to implement it soon.)
  • Publish: This option publishes your changes live on your website. (Note: By default, all changes are currently published immediately, but we will be adding a dedicated 'Publish' feature shortly.)