View Categories

How the Drag-and-Drop Website Builder Works

Table of Contents

The LeadSpheres Sites comes with a powerful drag-and-drop website builder that lets you design and launch professional, fully responsive websites without writing a single line of code — unless you want to.

Whether you’re creating a single-page landing page or a multi-page business website, the builder gives you complete creative control.

1. Accessing the Website Builder #

  1. Log in to your LeadSpheres CRM dashboard.
  2. Go to the Sites sidebar menu from your dashboard.
  3. Go to Sites Studio.
  4. Click “Create New Website” or edit an existing one.
  5. The drag-and-drop Sites Builder will open.

From here, you can choose a template to start quickly or build your website from scratch.

2. Choosing a Starting Point #

a) Use Pre-Built Templates #

  • Select from 100+ professionally designed templates for different industries.
  • Templates are mobile-friendly, SEO-optimized, and fully customizable.
  • Perfect if you want to get online fast.

b) Start from Scratch #

  • Begin with a blank canvas and build your website element by element.
  • Ideal for users who want complete creative control.

3. Drag-and-Drop Editing #

The builder uses a real-time, visual editor:

  • Drag elements like text blocks, images, buttons, videos, forms, and sliders onto the page.
  • Resize, reposition, and customize every element instantly.
  • Use pre-built sections such as hero banners, pricing tables, testimonials, and call-to-action blocks to speed up website creation.
  • Edit padding, margins, backgrounds, borders, and shadows directly from the interface.

Tip: Double-click any element to open its inline editor for quick adjustments.

4. Adding & Managing Multiple Pages #

LeadSpheres Sites Builder allows you to create multi-page websites:

  • Click “Add Page” from the top navigation.
  • Choose a pre-built page template or start from scratch.
  • Set page titles, URLs, and meta tags for SEO purposes.
  • Rearrange page hierarchy using the navigation menu editor.
  • Link pages together for a seamless browsing experience.

5. Customizing Website Navigation #

  • Access the Menu Manager to create and organize navigation menus.
  • Add, rename, or reorder menu items using drag-and-drop.
  • Link menu items to:
    • Internal pages
    • External URLs
    • Anchors within the same page
  • Style your menus with custom colors, fonts, and hover effects.

6. Live Editing vs. Code Editor #

The builder supports both visual editing and manual coding:

  • Live Editing: Adjust designs visually in real-time using drag-and-drop.
  • Code Editor:
    • Add custom HTML, CSS, or JavaScript for more advanced customization.
    • Perfect for developers who want pixel-perfect control.

7. Adding Contact & Lead Capture Forms #

Easily integrate native lead forms to collect visitor details:

  • Drag and drop a form widget onto any section of your site.
  • Customize fields like name, email, phone, message, and dropdowns.
  • Enable CRM integration to automatically capture leads directly into your LeadSpheres CRM.
  • Embed external forms if needed.

8. Managing Sections & Layouts #

You can control your website’s structure effortlessly:

  • Add new sections for services, testimonials, pricing, etc.
  • Duplicate existing sections to maintain design consistency.
  • Hide or show sections without deleting them.
  • Use columns and grids to create flexible, modern layouts.

9. Undo & Redo with Version History #

Made a mistake? No problem!

  • Use the Undo Manager to reverse unwanted changes instantly.
  • Redo steps just as easily.
  • Maintain version history to roll back to a previous state if needed.

10. SEO & Performance Settings #

Optimize your website directly within the builder:

  • Set meta titles, descriptions, and keywords.
  • Control SEO-friendly URLs for each page.
  • Add alt text to images for better ranking.
  • Integrate Google Analytics, Facebook Pixel, and other tracking tools.

11. Publishing Your Website #

Once you’re done designing:

  • Click Publish to make your website live instantly.
  • Use your LeadSpheres subdomain or connect your own custom domain.
  • Switch to Unpublished mode anytime if you want to hide the site temporarily.

12. Key Advantages of the Drag-and-Drop Builder #

✅ No coding required — anyone can build a professional website.
✅ 100+ pre-built templates — speed up your workflow.
✅ Multi-page support — create complex sites effortlessly.
✅ Advanced customization — tweak layouts or inject custom CSS/JS.
✅ Live editing — see changes as you make them.
✅ Integrated with CRM — capture leads automatically.
✅ SEO-ready — built-in tools to boost your search ranking.

13. Next Steps #

Once you understand how the drag-and-drop builder works, check out these guides:

  • Choosing a Template for Your Website → Get started with pre-built layouts.
  • Connecting Your Custom Domain → Use your brand’s URL.
  • Optimizing SEO Settings → Boost your online visibility.
  • Integrating Lead Forms with CRM → Turn visitors into leads instantly.
What are your Feelings