• Skip to main content
  • Skip to header right navigation
  • Skip to after header navigation
  • Skip to site footer

WP Engine hosting includes Genesis and 35 of the StudioPress themes!

Philip Gledhill

WordPress | Genesis Framework | StudioPress

  • Search
  • Home
  • Genesis Newbie
  • Setup Wizard
  • Genesis Geek
  • Resources
  • Blog
  • Content
  • Beaver Builder
  • CSS
  • WooCommerce
  • WP Tutorial
  • Contact
  • Specific Themes
  • Find it
You are here: Home / Hello Pro / Custom HTML Widgets in Hello Pro Theme

Custom HTML Widgets in Hello Pro Theme

If you’ve used my Widget Importer file to setup the homepage of your Hello Pro theme. You will find there are front page widget areas that contain custom HTML widgets.

The widget areas that contain custom HTML widgets are…

  • Home-Wellcome
  • Home-Intro
  • Home-Features
  • Home-Statement

If you’ve never seen code before, this might seem scary. But it’s not.

All you have to do is carefully change the text, but leave the HTML tags untouched.

If you do understand HTML, it’s important to remember that some of these tags have very specific styling.

For instance if you apply a strong tag, inside a h2 tag, in the Home-Welcome section. That piece of text is forced to sit on it’s own line.  This is because display: block is used in the h2 span CSS.

But for non coders, just remember to carefully replace ONLY the text. Leave the code alone!

Let’s look at the code and hopefully you’ll see it’s not that scary.

Home-Welcome

This is the code in the Home-Wellcome widget area of Hello Pro theme.

If you used my Widget Import file, you’ll find a custom HTML widget inside the Home-Welcome widget area…

In the image below, I’ve highlighted the text you need to change in yellow. Just replace the text with your own text without touching the HTML tags.

Home-Welcome widget area text
Home-Welcome widget area text

Home-Intro

The next screen shot shows the Home-Intro widget area.

In this screenshot I’ve highlighted the HTML code. Yet again, all you need to do is carefully change the text while leaving the HTML tags untouched.

Home-Intro widget area text
Home-Intro widget area text

Home-Features

The Home-Features widget area contains three custom HTML widgets.

Three custom HTML widgets inside Home-Features widget area
Three custom HTML widgets inside Home-Features widget area

The code used in all three custom HTML widgets is the same. And there’s only one really important point.

If you look on the Hello Pro demo page you’ll notice that the text…

  • Feature #1:
  • Feature #2:
  • Feature #3:

…is in red.

Home-Features text screenshot
Home-Features text screenshot

This is because, inside the HTML widget, that text is wrapped in span tags. And those span tags have been styled using CSS.

Yet again, to make your site look like the demo, just carefully change the text while leaving the HTML tags untouched.

Hello-Pro Home-Features text inside HTML highlighted
Hello-Pro Home-Features text inside HTML highlighted

 

Home-Statement

The last widget area that uses a custom HTML widget is the Home-Statement widget area, and there’s only a few words in here, so it’s easy!

Yet again, just carefully replace the demo text with your own text text.

Home-Statement widget area text in Hello Pro theme
Home-Statement widget area text in Hello Pro theme

Don’t forget to save your settings every time!

Always make sure you click the blue save button after making any changes to your widget.

Get the Theme – Next Tutorial about Hello Pro

Category: Hello Pro

About Philip Gledhill

Philip helps small and medium service businesses build and maintain clean, minimalist, professional looking websites. He loves clear, concise, customer focused content, and websites that are easy to navigate. His motto is focus on your customer and keep it simple.

Previous Post: « Setup the Portfolio Section in Hello Pro Theme
Next Post: Hello Pro Theme Widget Setup »

Sidebar

Hello Pro Setup Tutorials

  • Install Hello Pro Theme and Plugins
  • Hello Pro Theme Widget Setup
  • Custom HTML Widgets in Hello Pro Theme
  • Setup the Portfolio Section in Hello Pro Theme
  • Setup the Testimonials Section in Hello Pro Theme
  • You might also find the eNews Extended tutorial useful

StudioPress & Genesis Tutorials

StudioPress Genesis Tutorials

The Genesis Newbie

Looking for a StudioPress theme or hosting?

Check out the two links below…

Get Genesis Framework & StudioPress Themes free.

When you sign up for a WP Engine plan, you receive the Genesis Framework and 36 StudioPress Themes free. That’s over $2,000 in value.

Free themes with hosting
Get Premium WordPress Themes

Buy a StudioPress theme outright and use it on all of your sites. There are three ways to get all of the StudioPress themes AND save.

Choose Your Theme

Web Hosting

If you’re in the market for premium web hosting from a team you trust why not checkout WP Engine. It’s designed to be Fast, Secure & Worry Free!

Site Map

Site Map: if you can’t see what you’re looking for read through my sitemap, it may well be there :-)

  • Search
  • Home
  • Genesis Newbie
  • Setup Wizard
  • Genesis Geek
  • Resources
  • Blog

This website is independently owned by an affiliate marketer of StudioPress. It is not sponsored by StudioPress, WP Engine, Copyblogger Media LLC, WordPress, or Automattic Inc. WordPress, Genesis, StudioPress and WP Engine, are registered trademarks of their respective owners.

Copyright © 2021 Philip Gledhill · Privacy policy and disclosure

© Copyright Philip Gledhill

Return to top