Resizing elements and sections on your website is essential for creating a balanced and visually appealing layout. With OzSpeed’s Website Builder, you can easily adjust the size of text blocks, images, buttons, and entire sections to fit your design needs. Here’s a step-by-step guide on how to resize elements and sections effectively.
Step 1: Access the Website Editor #
To start resizing elements and sections, 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 elements or sections you want to resize.
Tip: #
- Resizing elements can help improve the readability and usability of your website, especially on different devices.
Step 2: Select the Element to Resize #
Click on the element you want to resize, such as a Text Block, Image, Button, or Shape.
How to Select: #
- Click directly on the element to highlight it.
- Ensure the element is outlined, indicating it is selected for editing.
Tip: #
- If you want to resize multiple elements at once, consider grouping them for easier adjustments.
Step 3: Resize the Element Using the Drag Handles #
You can manually resize the element by dragging its corners or sides.
How to Resize: #
- Click and drag the corner handles to resize proportionally (keeping the aspect ratio).
- Click and drag the side handles to adjust the width or height independently.
- Release the mouse button to apply the new size.
Tip: #
- Hold down the Shift key while dragging to maintain the aspect ratio of images or shapes.
Step 4: Adjust the Size Using the Design Settings Panel #
For precise resizing, use the Design Settings panel.
How to Adjust the Size: #
- Click on the element to open the Design Settings panel.
- Go to the Size & Spacing tab.
- Enter specific values for width and height (e.g., 300px for width).
- Click Apply to save the changes.
Tip: #
- Use pixel (px), percentage (%), or viewport width (vw) units depending on your layout needs.
Step 5: Resize an Entire Section #
You can resize an entire section of your website, such as a Hero Section, Footer, or Gallery, by adjusting its height.
How to Resize a Section: #
- Click on the Section background or its border to select it.
- Drag the bottom handle up or down to increase or decrease the height of the section.
- Use the Padding & Margin settings in the Design Settings panel for finer adjustments.
- Click Save.
Tip: #
- Ensure the content inside the section has enough space and isn’t cut off after resizing.
Step 6: Optimize for Mobile View #
Make sure the resized elements and sections look good on mobile devices.
How to Adjust for Mobile: #
- Click the Mobile Icon (phone icon) in the top toolbar to switch to Mobile View.
- Resize the elements using the same drag handles or Design Settings panel.
- Click Save.
Tip: #
- Use smaller sizes for elements on mobile to fit the limited screen space and improve user experience.
Step 7: Preview and Test the Resized Elements #
Before publishing, preview your site to ensure the resized elements and sections look balanced and functional.
How to Preview: #
- Click Preview in the top toolbar.
- Check the resized elements on both desktop and mobile views.
- Test any interactive elements (e.g., buttons, links) to ensure they function correctly after resizing.
Tip: #
- Use an incognito window or clear your browser cache to see the changes as a new visitor would.
Step 8: Publish Your Changes #
Once you’re satisfied with the resized elements and sections, publish the 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 resizing significantly improves the design or user experience.
Troubleshooting Tips #
- Elements Overlapping After Resizing:
- Check the padding and margin settings to ensure there is enough space between elements.
- Use the alignment tools to reposition elements.
- Element Size Not Updating Properly:
- Ensure you have clicked Apply and Save after making changes.
- Clear your website cache in hPanel and your browser cache.
- Resized Elements Look Odd on Mobile:
- Use the responsive design settings to adjust sizes specifically for mobile view.
- Test the layout on different devices to ensure it displays correctly.
Additional Tips: #
- Use Consistent Sizing: Maintain consistent sizes for similar elements (e.g., buttons, images) to create a uniform look.
- Test Different Sizes: Experiment with different sizes to see which works best for your content and layout.
- Maintain Readability: Ensure text remains readable after resizing. Avoid making text blocks too small, especially on mobile.
