Text is a fundamental element of any website. It’s essential for conveying your message, sharing information, and guiding visitors through your content. With OzSpeed’s Website Builder, you can easily add and customize text blocks, headings, paragraphs, and more. Here’s how to add and style text on your website step by step.
Step 1: Access the Website Editor #
To add text, start by opening 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 text.
Tip: #
- Use the Preview feature to get an overview of your current content and see where text is needed.
Step 2: Add a Text Block #
The easiest way to add text is by using a Text Block. You can drag and drop this element onto your page.
How to Add a Text Block: #
- Click Add Element or + Add New Section in the editor toolbar.
- Select Text Block from the list of elements.
- Drag the Text Block to the desired location on your page.
- Click on the Text Block to start editing.
Tip: #
- Place text blocks where they enhance the user experience, such as in the Hero Section, About Us, or Services sections.
Step 3: Edit the Text Content #
You can easily customize the content of the text block using the inline editor.
How to Edit Text: #
- Click on the text block to open the text editor.
- Type in your desired text or paste text from another source.
- Use the editor toolbar to format your text:
- Bold (B): Emphasize important words or phrases.
- Italic (I): Highlight specific terms or quotes.
- Underline (U): Add emphasis to links or key points.
- Bullet Points: Create a list for easy readability.
Tip: #
- Keep text concise and break it into short paragraphs for better readability.
Step 4: Customize the Text Style #
You can adjust the appearance of the text to match your brand’s style.
How to Style Text: #
- Click on the Text Block to open the Design Settings.
- Go to the Text Style tab.
- Customize the following options:
- Font Family: Choose from a variety of fonts to match your brand.
- Font Size: Increase or decrease the size of the text.
- Color: Change the text color to match your website’s color scheme.
- Alignment: Align the text to the left, center, or right.
- Line Spacing: Adjust the space between lines for better readability.
Tip: #
- Use contrasting text colors for better visibility against the background (e.g., dark text on a light background).
Step 5: Add Headings #
Headings help structure your content and make it easier for users to scan the page.
How to Add a Heading: #
- Click Add Element and select Heading from the list.
- Drag the Heading Block to the desired position on your page.
- Click on the heading to edit the text (e.g., “Our Services”, “About Us”).
- Use the editor toolbar to style the heading (e.g., H1, H2, H3).
Tip: #
- Use H1 for the main title, H2 for subheadings, and H3 for smaller headings.
Step 6: Link Text (Optional) #
You can make your text interactive by adding links.
How to Add a Link: #
- Highlight the text you want to link (e.g., “Learn More”, “Contact Us”).
- Click the Link Icon (🔗) in the toolbar.
- Enter the URL of the link (e.g., https://yourdomain.com/contact).
- Click Apply.
Tip: #
- Open external links in a new tab to keep users on your website.
Step 7: Preview and Test the Text #
Before publishing, preview your changes to ensure the text looks good and is easy to read.
How to Preview: #
- Click Preview in the top toolbar.
- Check the text on both desktop and mobile views.
- Verify that all links work correctly.
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 text content and styling, publish your updates.
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 highlight the new content.
Troubleshooting Tips #
- Text Not Displaying Correctly:
- Clear your website cache in hPanel and your browser cache.
- Check the text color against the background for readability issues.
- Formatting Issues:
- Use the Clear Formatting option in the text editor if pasted text looks different.
- Adjust the font size and spacing in the Design Settings.
- Links Not Working:
- Double-check the URL entered in the link settings.
- Test the links in an incognito window to rule out browser caching issues.
Additional Tips: #
- Use Short Paragraphs: Break text into smaller sections for better readability, especially on mobile devices.
- Include Keywords: Use relevant keywords in your text for better SEO ranking.
- Monitor User Feedback: Use tools like Google Analytics to see which text sections get the most interaction.