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:

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!