Website Builder

• Using Website builder
• About Interface

Using Website builder

The Website Builder Software is designed to provide users with a seamless experience for creating, managing, and publishing websites. This documentation walks you through the platform's features and functionalities, helping you make the most of its intuitive tools and efficient workflows.

1. Dashboard Overview

Header Features

The dashboard header displays the following options:

• Username Dropdown: Access account settings, log out, switch between light or dark mode, and return to the dashboard.

• Projects Tab: Manage all your projects, including creating new sites and organizing workplaces.

• Branded Domains Tab: Connect and manage custom domains.

• Notifications: Stay updated with platform alerts and project changes.

Projects Tab

• Add Site: Create a new website project.

• Search Site: Quickly locate projects by name.

• Sort Options: Organize projects by:

  • Alphabetical order

  • Last updated

  • Date created

• Workplace Selection:

  • Default Workplace: The default organizational group for projects.

  • Create New Workplace: Group projects under a custom name.

  
  
  

2. Workplaces

Creating a New Workplace

1. Navigate to the Workplaces section in the Projects tab.

2. Click Create New.

3. Enter a name for the new workplace.

4. Save to organize projects under this workplace.
   a)
   b)
   

3. Creating a New Site

Template Selection

1. In the Projects tab, click Add Site.

2. Browse templates categorized for specific use cases, or use the Search function to find a suitable template.

3. Alternatively, start with a blank page for full customization.

4. Preview each template to view its layout and design before selection.
   
   a)
   

Starting with a Blank Page

• Select the Blank Page option to begin with an empty canvas.

Naming Your Site

1. After selecting a template or blank page, click Use This Template.

2. Enter a name for your website.
   a)

Desktop and Mobile Views

• Switch between Desktop and Mobile views to ensure responsive design for all devices.

4. Editor Overview

Editing Elements

• Layout: Manage containers and structure for your site.

• Typography: Adjust font styles, sizes, and alignments.

• Buttons: Customize button styles and actions.

• Components: Add pre-designed elements to your pages.

• Media: Upload and manage images, videos, and other files.
  
  a) 
  

Style

• Modify global and element-specific styles, including colors, borders, and shadows.

Settings

• Forms: Configure form elements and submissions.

• Publishing: Publish the site to a live domain or export for hosting elsewhere.

• Exports: Download the site’s HTML, CSS, and JavaScript files.

Code Editor

• Access and edit the HTML, CSS, and JavaScript of your site directly.

History

• View and restore previous versions of your site for easier troubleshooting and editing.

a)

5. Branded Domains

Connecting and Managing Domains

1. Navigate to the Branded Domains tab in the dashboard header.

2. Click Connect Domain.

3. Enter the domain host details.
   
   a)

Configuring A Records

1. Upon connecting a domain, an A record will be generated.

2. Use this A record to configure your domain’s DNS settings.

3. Save changes to point your domain to the website.
   
   a)

6. Account Settings

Light/Dark Mode

• Toggle between light and dark mode in the username dropdown menu.

Log Out

• Select Log Out in the username dropdown to securely exit the platform.

The Website Builder Software provides all the tools needed to create professional, responsive websites efficiently. With its intuitive dashboard, flexible editor, and robust domain management features, users can streamline their workflows and focus on building impactful online experiences.

 

About Interface

Welcome to the Web Builder platform, your one-stop solution for creating and customizing stunning websites with ease. This guide will walk you through the key features and tools available to help you build your website efficiently, whether you are a beginner or an advanced user. Topics covered include:

1. Keybinds

2. Inspector Overview

3. WYSIWYG Editor Overview

4. Code Editors Overview

Let’s get started!

1. Keybinds

Keybinds make navigating and editing in the Web Builder fast and intuitive. Here are some essential shortcuts to enhance your workflow:

Action	Key Combination
Save Changes	Ctrl + S (Windows) / Cmd + S (Mac)
Undo	Ctrl + Z / Cmd + Z
Redo	Ctrl + Y / Cmd + Y
Copy	Ctrl + C / Cmd + C
Paste	Ctrl + V / Cmd + V
Delete	Del
Preview	Ctrl + P / Cmd + P
Toggle Code Editor	Ctrl + E / Cmd + E

Tips for Using Keybinds

• Hold Shift while using arrow keys to select multiple elements.

• Use Ctrl + Scroll or Cmd + Scroll to zoom in and out of your workspace.

2. Inspector Overview

The Inspector is a versatile tool that allows you to manage, customize, and refine your website elements. It is divided into several sections for easy navigation:

Structure

• Displays a tree-like view of your web page layout.

• Select, rearrange, or delete elements effortlessly.

Properties

• Adjust key settings such as size, color, font, and alignment.

• Make live updates to see changes instantly.

Actions

• Add interactivity to your elements, such as click or hover effects.

• Set dynamic actions to create engaging user experiences.

Advanced Settings

• Access and edit CSS properties for detailed customization.

• Add attributes to extend element functionality.

Pro Tips

• Use the search bar to quickly locate properties or settings.

• Right-click on elements in the structure panel for additional options.

3. WYSIWYG Editor Overview

The What You See Is What You Get (WYSIWYG) Editor makes website building simple by allowing you to visually edit your pages in real-time.

Key Features

• Drag-and-Drop: Move elements like text, images, and buttons directly onto the page.

• Inline Editing: Double-click text areas to make edits instantly.

• Guidelines and Snapping: Align elements perfectly with smart guides.

• Live Updates: See your changes reflect immediately on the canvas.

Toolbar Options

• Text Styling: Customize fonts, sizes, colors, and text alignment.

• Element Customization: Apply borders, backgrounds, and shadows.

• Responsive Design: Adjust layouts for desktop, tablet, and mobile views.

• Asset Manager: Upload, organize, and use images and media files seamlessly.

Pro Tips

• Use the "Duplicate" option to quickly replicate elements.

• Group elements to simplify movement and styling across sections.

4. Code Editors Overview

For users who want full control over their website, the Web Builder offers integrated code editors for HTML, CSS, and JavaScript. These tools allow you to refine your site beyond the visual editor.

HTML Editor

• Modify your site’s structure with ease.

• Utilize syntax highlighting and auto-complete to enhance productivity.

CSS Editor

• Define styles and layouts precisely.

• Use live preview to see the effects of your changes in real-time.

JavaScript Editor

• Add custom functionality and interactivity.

• Debug scripts with built-in tools to ensure smooth performance.

Shared Features

• Syntax Highlighting: Improves readability and reduces coding errors.

• Find and Replace: Quickly locate and modify code snippets.

• Split View: Work on code and see visual updates side-by-side.

Pro Tips

• Comment your code for better organization (/* comments */ for CSS, // comments for JavaScript).

• Save reusable code snippets to streamline future projects.

The Web Builder is designed to empower users to create professional, visually appealing websites with ease. Whether you’re a beginner relying on the intuitive WYSIWYG Editor or an advanced user diving into the Code Editors, this platform has everything you need to bring your vision to life. Explore the tools, experiment with features, and enjoy building your dream website!