About Interface

Welcome to the ResellPortal Web Builder, an intuitive and robust platform designed for building and customizing web pages effortlessly. This document provides an in-depth guide to the core features of the platform, focusing on:

1. Keybinds

2. Inspector Overview

3. WYSIWYG Editor Overview

4. Code Editors Overview

1. Keybinds

Keybinds allow you to quickly perform actions within the ResellPortal Web Builder, speeding up your workflow and improving efficiency. Below is a list of essential keybinds:

Tips for Using Keybinds

• Use Shift with arrow keys to select multiple elements quickly.

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

2. Inspector Overview

The Inspector is a powerful tool that allows you to fine-tune every aspect of your design. It’s divided into key sections:

Structure

• Displays the hierarchy of your web elements in a collapsible tree structure.

• Easily select, reorder, or delete elements within your page.

Properties

• Adjust element-specific settings such as size, color, font, and alignment.

• Dynamically update the look and feel of your design in real time.

Actions

• Bind interactive actions to elements (e.g., on-click, hover).

• Create dynamic behaviors with minimal coding.

Advanced Settings

• Modify CSS properties directly.

• Add custom attributes to extend functionality.

Pro Tips

• Use the search bar within the Inspector to quickly locate properties.

• Right-click on any element in the tree structure for additional options.

3. WYSIWYG Editor Overview

The What You See Is What You Get (WYSIWYG) Editor offers a visual editing experience where you can build and modify web pages as they appear to users.

Features

• Drag-and-Drop: Add images, text, buttons, and other elements with ease.

• Inline Editing: Double-click on text elements to edit content directly.

• Alignment Guides: Snap elements into place for pixel-perfect positioning.

• Live Preview: See real-time updates as you make changes.

Toolbar Options

• Text Formatting: Adjust font, size, weight, and color.

• Element Styling: Add borders, shadows, and background colors.

• Layouts: Create columns, rows, and grids with responsive settings.

• Assets: Upload and manage images, videos, and other files directly in the editor.

Pro Tips

• Use the "Duplicate" option in the context menu for quick layout replication.

• Group elements to move or style them together.

4. Code Editors Overview

For advanced users, the ResellPortal Web Builder includes powerful code editors for HTML, CSS, and JavaScript. These editors provide full control over your website’s structure and functionality.

HTML Editor

• Modify the structural components of your web page.

• Use syntax highlighting and auto-completion to speed up coding.

CSS Editor

• Fine-tune the styles and layouts with detailed control.

• Supports live previews for instant feedback on your changes.

JavaScript Editor

• Add interactive functionality to your web pages.

• Use built-in debugging tools to identify and fix issues quickly.

Common Features Across Editors

• Syntax Highlighting: Enhances readability and reduces errors.

• Find and Replace: Quickly locate and update code.

• Split View: Edit code while viewing the live design.

Pro Tips

• Use comments (/* */ for CSS, // for JS) to organize your code.

• Save reusable code snippets for future projects.

The ResellPortal Web Builder is designed to cater to both novice and advanced users. Whether you’re leveraging the simplicity of the WYSIWYG Editor or diving into the intricacies of the Code Editors, this platform empowers you to create stunning, functional websites efficiently. With tools like Keybinds and the Inspector at your disposal, you have everything you need to streamline your workflow and bring your vision to life.