Website Builder
The Web Builder platform is a versatile and intuitive solution designed to empower users to create stunning websites with ease. Whether you’re crafting a personal blog, building a professional portfolio, or launching an online store, this platform offers all the tools you need to bring your ideas to life. With its user-friendly interface and powerful customization options, you can create responsive and visually appealing websites without requiring advanced technical skills.
Key Features of the Platform
-
Drag-and-Drop Editing
-
Responsive Design Tools
-
Customizable Templates
-
Integrated Code Editors
-
Asset Management
-
Interactive Elements
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
3. Creating a New Site
Template Selection
-
In the Projects tab, click Add Site.
-
Browse templates categorized for specific use cases, or use the Search function to find a suitable template.
-
Alternatively, start with a blank page for full customization.
-
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
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.
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.
5. Branded Domains
Connecting and Managing Domains
Configuring A Records
-
Upon connecting a domain, an A record will be generated.
-
Use this A record to configure your domain’s DNS settings.
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:
-
Keybinds
-
Inspector Overview
-
WYSIWYG Editor Overview
-
Code Editors Overview
Let’s get started!
1. Keybinds
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
orCmd + 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!