Adding and customizing website elements allows you to enhance your content, make it more engaging, and tailor your design to fit your brand’s needs. Website elements include text blocks, images, buttons, videos, icons, forms, and more. With OzSpeed’s Website Builder, you can easily drag and drop elements and then customize them to suit your style. Here’s how to do it step by step.
Step 1: Access the Website Editor #
To start adding and customizing elements, open the page 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 new elements or customize existing ones.
Tip: #
- Use the Preview feature to see the current layout of the page before making any changes.
Step 2: Choose the Element You Want to Add #
The Website Builder offers a variety of elements that you can drag and drop onto your page.
Available Elements: #
- Text Block: Add headings, subheadings, or paragraphs.
- Image: Insert a photo or graphic to complement your content.
- Button: Create call-to-action buttons like “Learn More” or “Buy Now”.
- Video: Embed a video from YouTube, Vimeo, or upload your own.
- Icon: Add icons for visual appeal or to highlight features.
- Form: Insert a contact form, newsletter signup, or feedback form.
- Divider: Use horizontal lines to separate content sections.
Tip: #
- Choose elements that align with the purpose of your page and enhance user experience.
Step 3: Add the Element to Your Page #
You can easily add an element by dragging it from the toolbar and dropping it into the desired location.
How to Add an Element: #
- Click Add Element or + Add New Section in the editor toolbar.
- Drag the selected element (e.g., Text Block, Image) to the desired position on your page.
- Release the element to drop it into place.
Tip: #
- Use alignment guides that appear when dragging elements to help position them accurately.
Step 4: Customize the Element #
After adding the element, you can customize its content and appearance.
How to Customize a Text Block: #
- Click on the Text Block to open the text editor.
- Enter your content and use the toolbar to change the font style, size, color, and alignment.
- Click Save after making your changes.
How to Customize an Image: #
- Click on the Image Block to open the image settings.
- Click Replace Image to upload a new image or choose one from the media library.
- Adjust the size, alt text, and link settings.
- Click Apply.
How to Customize a Button: #
- Click on the Button Block.
- Edit the button text (e.g., “Get Started”) and enter the URL link.
- Customize the button’s color, shape, and hover effect.
- Click Save.
Tip: #
- Use consistent styles for text, images, and buttons across your website for a cohesive look.
Step 5: Arrange and Align the Elements #
Arrange the elements on your page for a clean and visually appealing layout.
How to Arrange Elements: #
- Click on the element you want to move.
- Drag it to a new position on the page.
- Use the alignment guides for precise placement.
How to Align Elements: #
- Select multiple elements by holding the Shift key and clicking on each one.
- Use the alignment options (e.g., Align Left, Center, Align Right) in the toolbar.
Tip: #
- Keep important content above the fold (visible without scrolling) for better engagement.
Step 6: Style the Elements #
Customize the design of each element to match your brand’s colors and style.
How to Style an Element: #
- Click on the element to open the Design Settings.
- Adjust the background color, border, and shadow effects.
- Change the padding and margin for better spacing.
- Click Save.
Tip: #
- Use your brand’s color palette and fonts for a consistent and professional appearance.
Step 7: Preview and Test the Elements #
Before publishing, preview the page to ensure all elements look good and function correctly.
How to Preview: #
- Click Preview in the top toolbar.
- Check the page on both desktop and mobile views.
- Test all interactive elements (e.g., buttons, forms) to ensure they work as expected.
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 happy with the added and customized elements, publish the page to make the updates 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 features.
Troubleshooting Tips #
- Element Not Displaying Correctly:
- Clear the website cache in hPanel and your browser cache.
- Check the padding and margin settings for layout issues.
- Interactive Elements Not Working:
- Ensure all links are correctly entered, and form settings are configured properly.
- Test the elements on different browsers and devices.
- Slow Loading Times:
- Optimize images for faster loading by compressing them.
- Limit the use of heavy elements like videos or animations.
Additional Tips: #
- Keep It Simple: Avoid overcrowding the page with too many elements. Focus on clear, concise messaging.
- Monitor User Behavior: Use Google Analytics to track interactions with elements like buttons and forms.
- Update Regularly: Refresh your website elements periodically to keep the content relevant and engaging.
