Adding and customizing sections on your website helps you build an engaging and visually appealing site tailored to your needs. Website sections can include hero banners, service highlights, testimonials, image galleries, and more. With OzSpeed’s Website Builder, you can easily add, edit, and style sections to fit your brand. Here’s how to do it step by step.
Step 1: Access the Website Editor #
To start adding or customizing sections, open the editor in hPanel.
- Log in to hPanel at ozspeed.com.au.
- Go to Website Builder > Edit Site.
- Navigate to the page where you want to add or customize a section.
Tip: #
- Use the Preview feature to see changes in real-time as you edit.
Step 2: Add a New Section #
Adding a new section is easy with the drag-and-drop functionality in the Website Builder.
How to Add a Section: #
- Click Add Section in the editor toolbar or hover between existing sections and click + Add New Section.
- Choose a section template from the list (e.g., Hero, About Us, Services, Contact).
- Click Insert Section to add it to your page.
Tip: #
- Use a pre-designed template for a quick setup or choose a blank section if you prefer to build it from scratch.
Step 3: Customize the Section Content #
After adding a section, you can edit the content to match your website’s message.
How to Edit Text: #
- Click on the Text Block within the section.
- Edit the headline, subheadline, and body text directly in the editor.
- Use the toolbar to change the font size, color, and alignment.
How to Edit Images: #
- Click on the Image Block within the section.
- Click Replace Image and upload a new image from your computer or select one from the media library.
- Adjust the image size, alt text, and link settings as needed.
How to Edit Buttons: #
- Click on the Button Block.
- Change the button text (e.g., “Learn More,” “Get Started”).
- Enter the URL you want the button to link to.
- Customize the button style (e.g., color, shape, hover effect).
Tip: #
- Use action-oriented text for buttons to encourage user clicks.
Step 4: Style the Section #
Customize the appearance of the section to match your brand’s look and feel.
How to Customize the Section Design: #
- Click on the Section Settings (gear icon).
- Go to the Design tab.
- Adjust the background color, image, or video background.
- Change the padding and margin to adjust the spacing.
- Apply a border or shadow effect for a polished look.
Tip: #
- Use high-quality visuals and consistent colors for a professional appearance.
Step 5: Reorder Sections #
You can easily change the order of sections to fit your preferred layout.
How to Reorder Sections: #
- Click on the Move Section icon (up/down arrow) in the section toolbar.
- Drag the section to the desired position on the page.
- Release the section to drop it in place.
Tip: #
- Place important sections like the Hero or Call-to-Action near the top of the page for maximum impact.
Step 6: Duplicate or Delete a Section #
Duplicating a section is useful if you want to reuse a layout, while deleting a section helps keep your page clean.
How to Duplicate a Section: #
- Click on the Options (three dots) icon in the section toolbar.
- Select Duplicate Section.
- Edit the duplicated section as needed.
How to Delete a Section: #
- Click on the Options (three dots) icon.
- Select Delete Section.
- Confirm the deletion.
Tip: #
- Duplicate sections when you need similar layouts to maintain consistency.
Step 7: Preview and Test Your Customizations #
Before publishing, preview the page to ensure all sections look good and function properly.
How to Preview: #
- Click Preview in the top toolbar.
- Check the page on both desktop and mobile views.
- Test all links, buttons, and interactive elements.
Tip: #
- Use an incognito window or clear your browser cache to see the changes as a new visitor would.
Step 8: Publish the Changes #
Once you’re satisfied with the new sections and customizations, publish the page to make it live.
How to Publish: #
- Click Publish in the top right corner of the editor.
- Confirm the changes to go live.
Tip: #
- Share the updated page with your audience via social media or email to showcase the new design.
Troubleshooting Tips #
- Section Not Displaying Correctly:
- Clear your website cache in hPanel and your browser cache.
- Check the padding and margin settings for layout issues.
- Images Not Loading Properly:
- Ensure images are optimized for web (e.g., compressed JPG or PNG).
- Re-upload the image if there’s a loading issue.
- Buttons Not Linking Correctly:
- Double-check the URL entered in the button link settings.
- Test the button link in a new browser tab.
Additional Tips: #
- Use Consistent Branding: Maintain consistent colors, fonts, and imagery across all sections for a cohesive look.
- Keep It Simple: Avoid overcrowding sections with too much content. Focus on clear, concise messaging.
- Analyze User Behavior: Use tools like Google Analytics or Hotjar to see how users interact with different sections and make adjustments based on the data
