Customizing the button shape on your website can make your calls-to-action (CTAs) more visually appealing and in line with your brand’s design style. Whether you prefer rounded, rectangular, or pill-shaped buttons, OzSpeed’s Website Builder allows you to easily modify the button shape. Here’s a step-by-step guide on how to change the shape of your buttons.
Step 1: Access the Website Editor #
To start customizing your button shapes, open the page editor in hPanel.
- Log in to hPanel at ozspeed.com.au.
- Go to Website Builder > Edit Site.
- Navigate to the page that contains the button you want to customize.
Tip: #
- Identify key CTAs on your site, such as Sign Up, Learn More, or Buy Now, as these buttons are important for user engagement.
Step 2: Select the Button to Edit #
Click on the button you want to customize to highlight it.
How to Select: #
- Click directly on the button element to open the Design Settings panel.
- Ensure the button is outlined, indicating it is selected for editing.
Tip: #
- If you want to apply the same shape to multiple buttons, make note of the design changes for consistency across your site.
Step 3: Adjust the Button Shape #
You can change the button shape by modifying the border radius setting.
How to Change the Shape: #
- In the Design Settings panel, go to the Style tab.
- Locate the Border Radius option.
- Adjust the slider or enter a value manually:
- 0px: Creates a square or rectangular button with sharp corners.
- 10px-20px: Creates slightly rounded corners for a subtle look.
- 50px or higher: Creates a fully rounded or pill-shaped button.
- Click Apply to save the changes.
Tip: #
- Use a consistent button shape throughout your website for a cohesive design.
Step 4: Customize the Button’s Appearance #
In addition to changing the shape, you can further customize the button’s appearance, including color, size, and text.
How to Customize the Appearance: #
- Change the background color to match your brand’s color palette.
- Adjust the text color for better contrast and readability.
- Modify the padding to increase the button size and make it more prominent.
- Click Save.
Tip: #
- Use bold colors and clear, legible text to make your CTAs stand out.
Step 5: Preview and Test the Button #
Before publishing, preview the changes to ensure the button looks good on both desktop and mobile views.
How to Preview: #
- Click Preview in the top toolbar.
- Check the button’s shape on both desktop and mobile views.
- Test the button’s functionality (e.g., clicking the button should direct users to the correct link or page).
Tip: #
- Use an incognito window or clear your browser cache to see the changes as a new visitor would.
Step 6: Apply the Changes Site-Wide (Optional) #
If you want all buttons on your website to have the same shape, you can update the global button settings.
How to Update Global Button Settings: #
- Go to Website Settings > Design Settings in hPanel.
- Find the Button Styles section.
- Set the preferred border radius for all buttons.
- Click Apply to save the changes.
Tip: #
- Consistent button styles help create a unified look across your entire website.
Step 7: Publish Your Changes #
Once you’re satisfied with the button shape and design, publish the updates to make them live.
How to Publish: #
- Click Publish in the top right corner of the editor.
- Confirm the changes to go live.
Tip: #
- Let your audience know about any significant updates to your website design, especially if it includes improved navigation or user experience.
Troubleshooting Tips #
- Button Shape Not Updating:
- Ensure you’ve clicked Apply and Save after making changes.
- Clear your website cache in hPanel and your browser cache.
- Inconsistent Button Shapes:
- Use the global button settings to apply the shape consistently across all pages.
- Double-check individual buttons to ensure they aren’t overriding the global settings.
- Button Shape Looks Odd on Mobile:
- Use the responsive design settings to adjust the button size and shape for mobile views.
- Test the design on different devices to ensure it displays correctly.
Additional Tips: #
- Experiment with Shapes: Try different border radius values to find the button shape that best fits your brand’s style.
- Focus on Readability: Make sure the button text is clear and easy to read, regardless of the shape you choose.
- Test Different Shapes: Conduct A/B testing with different button shapes (e.g., rounded vs. rectangular) to see which performs better in terms of clicks and conversions.
