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-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-Features

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

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.

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.

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.

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