Making a section full width is a great way to create a visually striking design and make the most of the available screen space. A full-width section spans the entire width of the browser window, which can be used for hero banners, image galleries, or call-to-action sections. With OzSpeed’s Website Builder, you can easily set any section to full width for a modern and impactful look. Here’s how to do it step by step.
Step 1: Access the Website Editor #
To begin displaying a section in full width, open the page editor in hPanel.
- Log in to hPanel at ozspeed.com.au.
- Go to Website Builder > Edit Site.
- Navigate to the page containing the section you want to set to full width.
Tip: #
- Full-width sections are often used for hero banners, image sliders, and promotional banners.
Step 2: Select the Section #
Click on the section you want to display in full width to highlight it.
How to Select the Section: #
- Click directly on the Section Background or Section Border to select it.
- Ensure the section is outlined, indicating it is selected for editing.
Tip: #
- If you’re creating a new section, click + Add New Section and set it up before adjusting the width.
Step 3: Enable Full-Width Display #
The full-width setting can be enabled in the Design Settings panel.
How to Enable Full Width: #
- Click on the selected section to open the Design Settings panel.
- Go to the Layout tab.
- Toggle the Full Width option to On.
- Click Apply to save the changes.
Tip: #
- Enabling full width will automatically expand the section to fill the entire browser window.
Step 4: Adjust Content Alignment #
After setting the section to full width, you may need to adjust the alignment of the content within the section.
How to Align Content: #
- In the Design Settings panel, go to the Content Alignment tab.
- Choose the alignment options:
- Left: Aligns content to the left edge.
- Center: Centers the content horizontally.
- Right: Aligns content to the right edge.
- Click Apply.
Tip: #
- Center alignment is often the best choice for full-width sections, especially for hero images and banners.
Step 5: Customize the Background #
To enhance the visual appeal of your full-width section, consider customizing the background with a solid color, gradient, image, or video.
How to Customize the Background: #
- In the Design Settings panel, go to the Background tab.
- Choose a Solid Color, Gradient, or upload an Image or Video background.
- Adjust the opacity or overlay settings if needed.
- Click Apply.
Tip: #
- High-quality images or subtle video backgrounds work well for full-width sections, creating a strong visual impact.
Step 6: Preview the Full-Width Section #
Before publishing, preview your website to ensure the full-width section looks good on all devices.
How to Preview: #
- Click Preview in the top toolbar.
- Check the full-width section on both desktop and mobile views.
- Ensure the content scales correctly and the section spans the entire width of the browser window.
Tip: #
- Use an incognito window or clear your browser cache to see the changes as a new visitor would.
Step 7: Optimize for Mobile View #
Ensure that the full-width section looks good on mobile devices by adjusting the responsive settings.
How to Optimize for Mobile: #
- Click the Mobile Icon (phone icon) in the top toolbar to switch to Mobile View.
- Adjust the padding and margin settings to ensure the content is properly spaced.
- Check the alignment and resize any images if necessary.
- Click Apply.
Tip: #
- Consider reducing the height of the section for mobile views to fit the smaller screen size.
Step 8: Publish Your Changes #
Once you’re satisfied with the full-width section, publish your updates to make them live.
How to Publish: #
- Click Publish in the top right corner of the editor.
- Confirm your changes to go live.
Tip: #
- Announce the update on your social media or email list if the full-width section features new content or promotions.
Troubleshooting Tips #
- Section Not Expanding to Full Width:
- Ensure the Full Width option is toggled on in the Layout tab.
- Clear your website cache in hPanel and your browser cache.
- Content Looks Misaligned:
- Check the Content Alignment settings and adjust as needed.
- Use the Padding & Margin settings to create more balanced spacing.
- Images or Background Not Scaling Properly on Mobile:
- Use the responsive design settings to adjust the size and alignment for mobile views.
- Test the layout on different devices to ensure it displays correctly.
Additional Tips: #
- Use Full Width Sparingly: Full-width sections can be impactful but may overwhelm the design if used excessively. Reserve them for key areas of your site.
- Test Across Devices: Ensure the section looks good on both desktop and mobile devices for a consistent experience.
- Use High-Quality Backgrounds: High-resolution images and videos enhance the appearance of full-width sections and make your site look more professional.
