Homepage Builder

The Homepage Builder in NettPortal is a powerful, drag-and-drop editor that lets you create a professional landing page for your organization without any coding knowledge. Design a beautiful, responsive website that showcases your services, packages, and brand identity to attract and convert customers. This comprehensive guide covers everything you need to know about building and customizing your homepage.

🎯 What is the Homepage Builder?

The Homepage Builder is a visual editor that allows you to create a custom landing page for your organization. You can add, remove, and customize sections like Hero banners, About Us, Services, Features, Packages, and FAQ sections. Each section comes with multiple design templates, and you can customize colors, text, images, and layouts to match your brand. The homepage is fully responsive and works perfectly on mobile, tablet, and desktop devices.

Getting Started

To access the Homepage Builder, navigate to Settings → Homepage in your dashboard. You'll see a visual editor where you can build your homepage section by section.

🚀 Quick Start: Make Magic

If you're starting from scratch, use the "Make Magic" button to instantly generate a complete homepage with randomly selected designs for all core sections. This gives you a great starting point that you can then customize to match your brand.

Click "Make Magic" to generate a homepage with Hero, About Us, Services, Features, Packages, and FAQ sections
Each section gets a randomly selected design template
Review and edit the content to match your business needs
Customize colors, text, and images to reflect your brand

💡 Tip: After using "Make Magic", review all sections and update placeholder content with your actual business information.

Available Sections

The Homepage Builder includes several section types, each with multiple design templates:

🎯 Hero Section

The first thing visitors see: Hero sections are large, eye-catching banners at the top of your homepage. They typically include a headline, subheadline, call-to-action buttons, and background images or gradients. Perfect for making a strong first impression and guiding visitors to take action.

4 design templates available with different layouts and styles
Customize headline, subheadline, button text, and links
Add background images or use gradient colors
Control visibility of title, description, and buttons

ℹ️ About Us Section

Tell your story: About Us sections help visitors understand your business, mission, and values. They can include text content, images, statistics, and more. Build trust and connection with potential customers.

4 design templates with various layouts (text-focused, image-focused, stats, etc.)
Add your organization's story, mission, and values
Include images and statistics to make it engaging
Customize colors and styling to match your brand

⚙️ Services Section

Showcase what you offer: Services sections display your internet service offerings, plans, and features. Perfect for highlighting different service tiers, speeds, or packages you provide to customers.

4 design templates with grid, list, and card layouts
Add multiple service items with icons, titles, and descriptions
Customize each service's appearance and content
Control visibility of individual elements

✨ Features Section

Highlight key features: Features sections showcase the benefits and advantages of your services. Use them to explain why customers should choose you, what makes you different, or what special features you offer.

4 design templates including grid layouts, background images, and card designs
Add feature items with icons, titles, and descriptions
Some templates support background images for visual appeal
Fully responsive on all devices

📦 Packages Section

Display your packages: Packages sections automatically display your active packages from the Packages page. Customers can see available plans, pricing, and features, then click "Get Now" to purchase. If no packages exist, a message prompts you to create them.

4 design templates with pricing tables, grid cards, and featured layouts
Automatically loads packages from your Packages page
Shows pricing in your organization's currency
"Get Now" buttons redirect to your portal login page
Responsive design that works on all screen sizes

💡 Tip: Create packages first in the Packages page, then add a Packages section to display them on your homepage.

❓ FAQ Section

Answer common questions: FAQ sections help visitors find answers to frequently asked questions. You can add questions and answers manually, or they can be loaded from your organization's FAQ configuration.

4 design templates including accordion, grid cards, and list layouts
Add custom questions and answers
Can integrate with organization FAQ data
Easy to edit and update as needed

Adding Sections

To add a new section to your homepage:

Click the "Add Sections" button in the editor
A popup will show all available section types (Hero, About Us, Services, Features, Packages, FAQ)
Each section type shows preview images of available design templates
Click on a template preview to select it and add it to your homepage
The section will be added to your homepage and you can immediately start editing it

💡 Tip: Hover over template previews to see a larger view. Choose designs that match your brand style and content needs.

Editing Sections

Each section can be fully customized to match your brand and content:

✏️ Content Editing

Click on any text in the preview to edit it directly
Use the Content Editor panel to edit titles, descriptions, and other text content
For sections with items (Services, Features, FAQ), you can add, edit, or remove individual items
Changes are saved automatically when you click "Save"

🎨 Style Customization

Background: Choose solid colors, gradients, or background images
Padding: Adjust top and bottom padding to control spacing
Theme Color: Sections automatically use your organization's theme color for buttons and accents
Visibility: Show or hide specific elements (title, description, buttons, images, etc.)

👁️ Element Visibility

Control which elements appear in each section:

Toggle visibility of titles, descriptions, and subtitles
Show or hide buttons and links
Control image visibility
For list-based sections, control visibility of individual items

💡 Tip: Hide elements you don't need to create cleaner, more focused sections.

Managing Sections

You can reorder, duplicate, or remove sections from your homepage:

↕️ Reordering Sections

Use the up and down arrow buttons on each section to move it up or down in the page order. The order you set in the editor is exactly how sections will appear on your public homepage.

🗑️ Removing Sections

Click the delete button (trash icon) on any section to remove it from your homepage. You can always add it back later if needed.

Preview and Responsive Design

The Homepage Builder includes a live preview that shows exactly how your homepage will look:

📱 Responsive Preview

Use the viewport selector to preview your homepage on different screen sizes:

Mobile: See how your homepage looks on phones (320px width)
Tablet: Preview tablet view (768px width)
Desktop: View full desktop layout (1920px width)

💡 Tip: Always check mobile and tablet views to ensure your homepage looks great on all devices. All templates are designed to be fully responsive.

👀 Live Preview

The preview panel shows a real-time view of your homepage as you make changes. You can see exactly how sections will appear, including all styling, colors, and content. Click on elements in the preview to edit them directly.

Navigation and Header

Your homepage automatically includes a header with navigation and a footer:

🧭 Header Navigation

The header automatically includes:

Your organization logo and name
Navigation links to all sections (Home, About, Services, Features, Packages, FAQ)
Smooth scrolling when clicking navigation links
Mobile-responsive hamburger menu for smaller screens
Login and "Get Started" buttons

Note: Navigation links are automatically generated based on the sections you add to your homepage.

📄 Footer

The footer automatically includes:

Your organization logo and name
Contact information (email and phone)
Social media links (if configured)
Quick links to all homepage sections
Terms & Conditions link
Copyright information

Best Practices

Follow these tips to create an effective homepage:

🎯 Start with a Strong Hero

Your Hero section is the first thing visitors see. Make it compelling with a clear headline, engaging subheadline, and strong call-to-action buttons. Use high-quality images or gradients that represent your brand.

📝 Keep Content Clear and Concise

Write clear, concise content that visitors can quickly understand. Avoid jargon and focus on benefits rather than features. Use bullet points and short paragraphs for easy scanning.

🎨 Maintain Brand Consistency

Use your organization's theme color consistently across sections. Ensure all text is readable and images are high quality. Keep the design professional and aligned with your brand identity.

📱 Test on All Devices

Always preview your homepage on mobile, tablet, and desktop views. Ensure text is readable, images display correctly, and buttons are easily clickable on all screen sizes.

🔄 Update Regularly

Keep your homepage fresh by updating content, adding new packages, and refreshing images. Regular updates show that your business is active and engaged.

Publishing Your Homepage

Once you're happy with your homepage design:

Click "Save" to save your changes
Your homepage is automatically published and live at /{your-organization-slug}
Share the URL with customers or link to it from your marketing materials
You can continue editing and updating your homepage anytime

💡 Tip: Your homepage is public and accessible to anyone with the URL. Make sure all content is appropriate and professional.

Next Steps

Now that you understand the Homepage Builder:

Navigate to Settings → Homepage to start building your homepage
Use "Make Magic" for a quick start, or add sections manually
Customize each section to match your brand and content
Preview on different devices to ensure everything looks perfect
Learn about Package Management to create packages for your Packages section

Documentation