View Categories

Understanding Templates, Sections, and Components

Table of Contents

The LeadSpheres Sites uses a drag-and-drop website builder designed to make website creation easy, flexible, and highly customizable.

Before you start building, it’s important to understand the three core building blocks of the Sites Builder: Templates, Sections, and Components.

1. Templates — The Foundation of Your Website #

Templates are pre-designed website layouts you can use to kickstart your project.

Key Features of Templates #

  • 100+ Professionally Designed Templates
    Choose from a wide range of ready-to-use templates for businesses, portfolios, blogs, agencies, landing pages, eCommerce, and more.
  • Fully Responsive
    Every template is optimized for mobile, tablet, and desktop devices.
  • SEO-Friendly
    Templates are built with clean HTML structure for better search engine visibility.
  • Customization-Ready
    Change colors, fonts, images, sections, and components without touching the code.
  • Start From Scratch (Optional)
    Prefer full creative control? Begin with a blank canvas and build every page manually.

Tip: Using a pre-built template can save hours of design work while still giving you complete flexibility to modify anything.

2. Sections — Organizing Website Layouts #

A section is a larger structural block within your webpage.
Each page is made up of multiple sections, stacked vertically to create a smooth browsing experience.

Examples of Sections #

  • Hero Section (Top banner with headline and CTA)
  • About Us Section (Company description and visuals)
  • Services / Features Section (List of offerings)
  • Portfolio / Gallery Section (Images or case studies)
  • Testimonials Section (Customer feedback)
  • Pricing Section (Packages and plans)
  • Contact Section (Form and contact info)

How to Manage Sections #

  • Add New Sections
    Drag pre-built sections from the Sections Library.
  • Duplicate Sections
    Clone an existing section to maintain design consistency.
  • Reorder Sections
    Use drag-and-drop to move sections up or down.
  • Hide / Show Sections
    Temporarily hide sections without deleting them.
  • Customize Section Styles
    Adjust backgrounds, spacing, borders, colors, and typography directly from the visual editor.

Pro Tip: Keep sections clean and minimal for better readability and conversion rates.

3. Components — The Building Blocks Inside Sections #

Components are the individual elements you add inside sections to create content and interactivity.
Think of them as the smallest customizable units within your website.

Common Components in LeadSpheres Sites Builder #

  • Text Blocks – Headlines, paragraphs, labels, etc.
  • Images & Galleries – Upload single images or create image grids.
  • Buttons & CTAs – Link to pages, forms, or external URLs.
  • Forms – Add lead capture or contact forms directly into sections.
  • Videos & Media – Embed videos from YouTube, Vimeo, or upload custom files.
  • Icons & Badges – Highlight features visually.
  • Sliders & Carousels – Showcase testimonials, products, or banners.
  • Counters & Progress Bars – Display stats dynamically.
  • Tabs & Accordions – Organize FAQs or multi-step content.
  • Maps – Embed Google Maps for location visibility.
  • Code Block (Optional) – Add custom HTML, CSS, or JavaScript for advanced customization.

How to Use Components #

  • Drag a component from the elements panel into any section.
  • Double-click to edit its content or style.
  • Customize colors, fonts, sizes, padding, and animations visually.
  • Combine multiple components inside a section to create unique layouts.

4. How Templates, Sections & Components Work Together #

Here’s how these three layers combine to create your website:

LayerPurposeExample
TemplateThe overall layout and design frameworkA ready-made business website design
SectionGroups related content blocksA pricing section with 3 plans
ComponentIndividual elements inside sectionsText, images, buttons, forms, etc.

Think of it like building a house:

  • Template → The entire blueprint.
  • Sections → The rooms.
  • Components → The furniture and decor inside each room.

5. Advanced Customization Options #

For users who want more control:

  • Custom Code Editing
    Use the integrated HTML, CSS, and JS editor to customize layouts and behaviors.
  • Responsive Editing
    Preview and tweak your website separately for desktop, tablet, and mobile.
  • Undo / Redo Manager
    Roll back unwanted changes instantly.

6. Best Practices for Website Structure #

  • Start with a Template → Faster and easier than starting from scratch.
  • Use Consistent Sections → Maintain a clean, logical flow.
  • Limit Component Overload → Keep pages lightweight and fast.
  • Prioritize Mobile Design → Always check responsiveness.
  • Optimize for SEO → Use headings, alt tags, and metadata wisely.

7. Next Steps #

After understanding templates, sections, and components, you can explore:

  • Customizing Your Website Layout (detailed styling guide)
  • Managing Navigation Menus (organize pages effectively)
  • Connecting Your Custom Domain (publish under your brand name)
  • Optimizing SEO Settings (rank higher on search engines)
What are your Feelings