Buttons are crucial elements of a website, guiding visitors to take action, such as “Buy Now,” “Learn More,” or “Contact Us.” With OzSpeed’s Website Builder, you can easily add and customize buttons to match your website’s style and improve user engagement. Here’s a step-by-step guide on how to add and design buttons effectively.
Step 1: Access the Website Editor #
To start adding buttons, 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 a button.
Tip: #
- Use the Preview feature to see the current layout of your page and determine the best place for your buttons.
Step 2: Add a Button Element #
You can easily drag and drop a button element onto your page.
How to Add a Button: #
- Click Add Element or + Add New Section in the editor toolbar.
- Select Button from the list of elements.
- Drag the Button Block to the desired location on your page.
- Click on the button to start customizing it.
Tip: #
- Place the button where it’s easily visible and can attract attention, such as in the Hero Section or next to a call-to-action message.
Step 3: Edit the Button Text #
Customize the text on your button to reflect the action you want visitors to take.
How to Edit Button Text: #
- Click on the button to open the editor.
- Enter the desired text (e.g., “Learn More,” “Get Started,” “Subscribe Now”).
- Click Save after making changes.
Tip: #
- Use short, action-oriented text for your buttons to encourage clicks.
Step 4: Link the Button #
Make your button interactive by linking it to another page, form, or external URL.
How to Add a Link: #
- Click on the Button Block to open the settings panel.
- Click the Link Icon (🔗).
- Enter the URL or select an internal page from the list (e.g., https://yourdomain.com/contact).
- Choose whether to open the link in the same tab or a new tab.
- Click Apply.
Tip: #
- Use internal links for navigation within your site and external links for resources or social media.
Step 5: Customize the Button Style #
You can personalize the button’s appearance to match your website’s branding.
How to Style the Button: #
- Click on the Button Block to open the Design Settings.
- Customize the following options:
- Color: Choose the button color and text color.
- Shape: Select a rounded, square, or pill-shaped button.
- Size: Adjust the button size (small, medium, large).
- Hover Effect: Enable a hover effect (e.g., change color or add shadow).
- Click Save.
Tip: #
- Use contrasting colors for your buttons to make them stand out against the background.
Step 6: Position and Align the Button #
Ensure the button is properly aligned with other elements on your page.
How to Align the Button: #
- Click on the button to open the settings.
- Use the alignment options (left, center, right) in the toolbar.
- Drag the button to adjust its position if necessary.
Tip: #
- Center-align buttons for standalone calls to action or align them with text elements for better flow.
Step 7: Preview and Test the Button #
Before publishing, preview the page to ensure the button looks good and functions correctly.
How to Preview: #
- Click Preview in the top toolbar.
- Check the button on both desktop and mobile views.
- Test the button link to ensure it directs users to the correct page.
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 satisfied with the button’s design and functionality, publish your updates.
How to Publish: #
- Click Publish in the top right corner of the editor.
- Confirm the changes to go live.
Tip: #
- Announce the updated page or new feature in your email newsletter or on social media to drive traffic.
Troubleshooting Tips #
- Button Not Displaying Correctly:
- Check the background color and button color contrast for visibility issues.
- Clear your website cache in hPanel and your browser cache.
- Link Not Working:
- Double-check the URL entered in the link settings.
- Ensure the link is formatted correctly (e.g., starts with https://).
- Button Misaligned on Mobile:
- Use the responsive design settings in the editor to adjust the button size and alignment for mobile views.
Additional Tips: #
- Use Clear CTAs: Your button text should clearly communicate the action (e.g., “Download Now,” “Join Free”).
- Experiment with Placement: Place buttons in high-visibility areas, such as above the fold or next to compelling content.
- Monitor Clicks: Use tools like Google Analytics to track button clicks and see which calls to action are most effective.
