How to Add Text Background Using OzSpeed hPanel

Adding a background to text can help highlight important information, improve readability, and enhance the overall design of your website. Whether you want a solid color background, a gradient, or an image behind your text, OzSpeed’s Website Builder makes it easy to customize text blocks with a variety of background options. Here’s a step-by-step guide on how to add and style text backgrounds.

---

Step 1: Access the Website Editor #

To start adding a background to your text, open the page editor in hPanel.

1. Log in to hPanel at ozspeed.com.au.
2. Go to Website Builder > Edit Site.
3. Navigate to the page containing the text block you want to customize.

Tip: #

• Use text backgrounds to highlight key messages, such as headlines, calls to action, or promotional content.

---

Step 2: Select the Text Block #

Click on the text block you want to edit to open the Design Settings panel.

How to Select: #

1. Click directly on the Text Block element to highlight it.
2. Ensure the text block is outlined, indicating it is selected for editing.

Tip: #

• If you want to apply a background to multiple text blocks, make sure to customize each one consistently for a cohesive design.

---

Step 3: Add a Solid Color Background #

You can easily add a solid color background to the text block.

How to Add a Solid Color Background: #

1. In the Design Settings panel, go to the Background tab.
2. Click Background Color and choose your preferred color from the color picker.
3. Adjust the opacity if you want a transparent background effect.
4. Click Apply to save the changes.

Tip: #

• Use contrasting colors (e.g., dark text on a light background) to ensure readability.

---

Step 4: Add a Gradient Background #

For a more dynamic look, consider adding a gradient background to the text block.

How to Add a Gradient Background: #

1. In the Background tab, click Gradient.
2. Select the gradient style (linear or radial).
3. Choose the start color and end color from the color picker.
4. Adjust the angle to control the direction of the gradient.
5. Click Apply to save the changes.

Tip: #

• Use subtle gradient effects to add depth without distracting from the text content.

---

Step 5: Add an Image Background #

You can also add an image as the background for your text block to create a visually striking effect.

How to Add an Image Background: #

1. In the Background tab, click Image.
2. Click Upload Image and choose a file from your computer or select an image from the Media Library.
3. Adjust the opacity, position, and size of the image as needed.
4. Click Apply to save the changes.

Tip: #

• Use images with a subtle texture or pattern to enhance the background without overpowering the text.

---

Step 6: Adjust Text Padding and Spacing #

To ensure the text is legible and well-positioned, adjust the padding and spacing around the text block.

How to Adjust Padding: #

1. Click on the Text Block to open the Design Settings panel.
2. Go to the Padding settings and increase the values for top, bottom, left, and right padding.
3. Click Save.

Tip: #

• Adding sufficient padding creates a balanced look and prevents the text from being too close to the edges of the background.

---

Step 7: Preview and Test the Design #

Before publishing, preview the changes to ensure the text background looks good on both desktop and mobile views.

How to Preview: #

1. Click Preview in the top toolbar.
2. Check the text background on both desktop and mobile views.
3. Ensure that the text is readable and the background enhances, rather than detracts from, the content.

Tip: #

• Use an incognito window or clear your browser cache to see the changes as a new visitor would.

---

Step 8: Publish Your Changes #

Once you’re satisfied with the text background customization, publish your updates to make them live.

How to Publish: #

1. Click Publish in the top right corner of the editor.
2. Confirm the changes to go live.

Tip: #

• Announce your design update on social media or in your email newsletter to showcase the improved readability and style.

---

Troubleshooting Tips #

1. Text Not Readable Over Background:
   • Increase the opacity of the background color or image to make the text stand out.
   • Use a text shadow or outline for better contrast.
2. Background Not Displaying Correctly on Mobile:
   • Use the responsive design settings to adjust the background size and position for mobile devices.
   • Test the design on different devices to ensure it displays correctly.
3. Background Overlaps Other Elements:
   • Check the padding and margin settings to prevent overlap.
   • Use the Layering Toolbar to adjust the stacking order of elements if needed.

---

Additional Tips: #

• Use Subtle Backgrounds: Avoid using overly bright or complex backgrounds that may distract from the text content.
• Experiment with Transparency: Use transparent or semi-transparent backgrounds for a modern, sleek look.
• Test for Accessibility: Ensure your text has sufficient contrast with the background to meet accessibility standards and improve readability.