Customizing your website’s style is crucial for creating a unique and memorable online presence that reflects your brand. With OzSpeed’s Website Builder, you can easily adjust the colors, fonts, backgrounds, and overall theme to fit your brand’s identity. Here’s a step-by-step guide on how to customize your website’s style and make it stand out.
Step 1: Access the Website Editor #
To begin customizing your website’s style, open the page editor in hPanel.
- Log in to hPanel at ozspeed.com.au.
- Go to Website Builder > Edit Site.
- Click on Website Settings in the top toolbar to access the Design Settings panel.
Tip: #
- Before starting, have your brand guidelines ready, including colors, fonts, and any specific style preferences.
Step 2: Choose a Color Scheme #
The color scheme is a key element of your website’s style. It sets the tone and helps convey your brand’s personality.
How to Edit the Color Scheme: #
- Go to the Design Settings tab and click on Colors.
- Choose your Primary Color (main brand color) and Secondary Colors (accent colors).
- Apply the chosen colors to elements like buttons, links, backgrounds, and text.
- Click Apply to save the changes.
Tip: #
- Use contrasting colors for better readability and accessibility (e.g., dark text on a light background).
Step 3: Customize the Fonts #
Selecting the right fonts can greatly impact the readability and overall aesthetic of your website.
How to Edit Fonts: #
- In the Design Settings panel, click on Typography.
- Choose a font for Headings and a different font for Body Text.
- Adjust the font size, weight, and line height to fit your design style.
- Click Apply.
Tip: #
- Limit your font choices to 2-3 different fonts to maintain a clean, cohesive look.
Step 4: Set the Website Background #
The background sets the visual tone of your website. You can use a solid color, gradient, image, or video as your background.
How to Edit the Background: #
- In the Design Settings panel, click on Background.
- Choose your preferred background type:
- Solid Color: Select a color from the color picker.
- Gradient: Customize the gradient colors and direction.
- Image: Upload a background image from your computer or select from the Media Library.
- Video: Upload a video for a dynamic background (ensure it’s optimized for fast loading).
- Click Apply to save your changes.
Tip: #
- Use subtle backgrounds that complement your content without overpowering it.
Step 5: Customize Buttons and Links #
Style your buttons and links to match your website’s overall design.
How to Edit Buttons: #
- Go to the Button Styles section in the Design Settings panel.
- Adjust the border radius to change the button shape (e.g., rounded, pill-shaped, square).
- Choose the button color, hover effect, and text color.
- Click Apply.
Tip: #
- Use bold, contrasting colors for buttons to draw attention and encourage clicks.
Step 6: Adjust Spacing and Layout #
Ensure your content is well-organized and spaced out for better readability.
How to Edit Spacing: #
- In the Design Settings panel, go to Spacing.
- Adjust the padding and margin settings for sections, text blocks, and images.
- Preview the changes and click Apply.
Tip: #
- Use consistent spacing throughout your site to create a balanced and professional look.
Step 7: Add Custom CSS (Optional) #
For advanced customization, you can add your own CSS code.
How to Add Custom CSS: #
- Go to Advanced Settings > Custom CSS.
- Paste your CSS code into the editor (e.g., custom animations, styling adjustments).
- Click Apply and Preview the changes.
Tip: #
- Only use custom CSS if you’re comfortable with coding, as incorrect code can affect your website’s layout.
Step 8: Preview Your Customizations #
Before publishing, preview the entire website to ensure all style changes look good across different devices.
How to Preview: #
- Click Preview in the top toolbar.
- Switch between desktop, tablet, and mobile views.
- Navigate through your site to check for consistency and usability.
Tip: #
- Use an incognito window or clear your browser cache to see the changes as a new visitor would.
Step 9: Publish Your Changes #
Once you’re satisfied with the customized style, 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 new design style on social media or through your email list to showcase your updated look.
Troubleshooting Tips #
- Changes Not Displaying Correctly:
- Ensure you’ve clicked Apply and Save after making each change.
- Clear your website cache in hPanel and your browser cache.
- Inconsistent Styling Across Pages:
- Use the Global Design Settings to apply styles consistently across all pages.
- Double-check individual elements that may have custom overrides.
- Poor Mobile Responsiveness:
- Use the responsive design settings to adjust the layout for different devices.
- Test your site on multiple devices to ensure a consistent experience.
Additional Tips: #
- Stick to Brand Guidelines: Use your brand’s official colors, fonts, and logo to create a cohesive look.
- Keep It Simple: Avoid cluttering your design with too many colors or fonts. A clean, minimalistic approach often works best.
- Gather Feedback: Share your customized site with colleagues or clients to get feedback before the final launch.
