How to Customize Text Style in Your Online Store Using OzSpeed hPanel

Customizing the text style in your online store enhances your website’s visual appeal and ensures consistency with your branding. Here’s a step-by-step guide to changing text styles such as font, size, color, and alignment using OzSpeed hPanel.

---

Step 1: Log in to hPanel #

1. Visit OzSpeed hPanel.
2. Log in with your credentials.
3. Navigate to the Website Builder or Design Settings section.

---

Step 2: Access Text Settings #

1. Select the page or section of your website where you want to customize the text.
2. Click directly on a text element (e.g., product titles, descriptions, headers, or buttons).
3. Open the Text Style menu to access customization options.

---

Step 3: Customize Text Fonts #

1. In the Font Settings section:
   • Select a font from the available options.
   • Use the Font Preview feature to see how it will appear on your website.
2. If custom fonts are allowed, upload your font file (e.g., TTF or OTF) to apply unique typography.
3. Save changes.

---

Step 4: Adjust Text Size #

1. In the Size Settings, adjust the font size using:
   • A slider.
   • Manual input (e.g., 12px, 16px).
2. Ensure headers, body text, and footers have consistent yet distinguishable sizes.
3. Save and preview the changes.

---

Step 5: Change Text Color #

1. In the Color Settings, select a color from:
   • The theme palette.
   • The color picker (for custom colors).
   • Enter the HEX, RGB, or HSL code for precise colors.
2. Use contrasting colors to ensure readability against the background.

---

Step 6: Style Text with Alignment and Effects #

1. In the Alignment Settings:
   • Choose alignment: Left, center, right, or justified.
   • Adjust vertical alignment for text within containers.
2. Add text effects:
   • Bold, Italic, Underline: Highlight specific content.
   • Text Shadow: Add depth to text for visual impact.
   • Capitalization: Convert text to uppercase, lowercase, or title case.

---

Step 7: Apply Styles to Specific Text Types (Headers, Body, Links) #

1. Go to Global Text Styles in the Design Settings:
   • Customize styles for headers (H1, H2, H3, etc.).
   • Adjust body text styles for paragraphs.
   • Modify link styles (e.g., underline, hover color).
2. Save changes to apply the styles site-wide.

---

Step 8: Preview and Publish Changes #

1. Click Preview to see how the text styles look on different pages.
2. Check on both desktop and mobile views to ensure responsiveness.
3. If satisfied, click Save and Publish to make the changes live.

---

Troubleshooting Tips #

1. Text Changes Not Showing:
   • Clear your browser cache and refresh the page.
   • Ensure the text element is not inheriting styles from a parent container.
2. Unreadable Text:
   • Ensure the text color contrasts sufficiently with the background.
   • Avoid overly decorative fonts for large blocks of text.
3. Styles Not Consistent:
   • Use the Global Text Styles settings to apply uniform styling across all pages.

---

Additional Tips: #

• Brand Consistency: Use fonts and colors that match your branding to create a cohesive look.
• Test Readability: Check text styles on various devices to ensure they are clear and legible.
• Use Typography Hierarchy: Differentiate headers, subheaders, and body text for better content organization.