Using the Thrive Theme Builder

The Theme Builder Wizard

The Thrive Theme Builder puts you a class ahead of everyone else trying to select a theme for their website.

It allows you to build your own theme and control every aspect of it.

You can make any changes you like at any time and they will be immediately effective on your website, including post layout, page design and typography.

At the end of the previous lesson, I showed you how to choose a theme to base your theme builder on and, for illustrative purposes, chose the Kwik theme.

Now we are (almost) ready to run the theme builder wizard.

We are going to do a couple of simple little things first that we'll refer to in the theme builder.

First, go to Pages >> Add New and create and publish a new page called Home. It won't have anything in it, we just need a page with that name.

Just make sure that you now have an empty page with the name Home listed.

Now go to Appearance >> Menus and create a menu named Header Menu, containing no items and with the location set to Primary.

Make sure you click the Save Menu button.

Create another menu named Footer Menu, containing no items and without the location set to anything.

Click the Create Menu and then the Save Menu buttons.

Now we can start the Thrive Theme Builder wizard. Note that you can get to the theme builder at any time from the Thrive Dashboard menu in the WordPress left sidebar.

Site Logo

Click the Get Started button. The first step in the wizard asks you to upload your logo. I'm going to use the logo I created for Goldilocks Coffee in the previous lesson (see the resource Create Your Own Logo.

Click the Upload Your Own Logo button. Then navigate to where you've stored the logo and select it to upload it into your website's media library. Once it's uploaded, you can select it for insertion.

Brand Color

Click the Choose and Continue button. Now you will specify your "brand" color. This color is used by default in a number of places. But don't sweat it. If you don't like the effect, you can just change it here and it will immediately be effective throughout your site. Click on the color swatch to change it. You can select from a color palette or enter the hex code of your desired color.

I've used #047e33, which is Forest Green.

When you've selected your color, click the Choose and Continue button.

Header Template

In the next step, choose your header template. There are several to choose from.

The first header option, CTA - Logo - Menu has been selected by default. Click on the drop-down to see the others.

There are many to choose from. If you have WooCommerce installed, you will see a selection of WooCommerce menus listed after the standard Thrive ones.

As usual, don't stress over this. It can be changed at any time. The Thrive Theme Builder gives you a flexibility that you just can't obtain with a fixed theme.

Select the theme you want. I've gone for the totally simple Logo - Menu. Note that the Kwik logo will be replaced by the logo you uploaded in Step 1.

Click on the header template you've selected.

This will take you back to the header step in the wizard, showing the selected template.

Click the Choose and Continue button.

Footer Template

In the next step, choose your footer template. As for headers, there are several to choose from. Click the drop-down to see them all.

I'm going to select Centered Logo 02 - Back to top. As usual, this can be changed at any time.

After you click on the selected template, you will see an image of what it will look like.

None of the individual menu items are shown yet, of course. They will appear automatically as you create menus later.

At the top of the screen, you'll see the footer step in the wizard, showing the selected template.

Click the Choose and Continue button.

Select Your Home Page

The next step in the wizard is to select your home page.

While it might be tempting to choose ready-made homepages or even to display your blogroll, I prefer to maintain complete control over my home page. This is why we created an empty page called Home at the start of this lesson, so that we can select it here and build it out later.

Click on Display One of Your Existing Pages.

Select the Home page (that you created earlier) and the click the Choose and Continue button. This takes you to the template for the Blog Post List.

As you've done before, click on the drop-down to see all the templates available.

I'm going to select Featured Image with Sidebar.

Click on the selected template and then the Choose and Continue button to move onto the next template, the Blog Post List.

(The Blog Post List is what appears under your Blog menu item. It shows a page full of your most recent blog posts across a number of columns, typically 2 - 4, with each post showing the featured image and an excerpt. Clicking on any one of them brings up the full blog post).

I'm going to use the default template, Grid Layout Without Sidebar.

Note that you can specify the number of columns in the grid when you deploy the template. As always, you have full control.

Click the Choose and Continue button to move onto the next template, the default Page. This will control the layout for all pages except the Home page, allowing you to have a different Home page from the other pages on your website.

I'm going for the Simple Title With Sidebar.

After selecting the Page template, click the Choose and Continue button to move to the next step in the Site Wizard, the Menu.

Remember that earlier, we created empty header and footer menus? We are going to refer to them now.

Under Header Menu click the Choose a WordPress Menu button.

Select Header Menu as the header menu and Footer Menu as the footer menu. Pretty obvious, right?

Then click the Activate Menus on My Site button.

If you have WooCommerce installed, you can now follow the wizard steps for specifying the WooCommerce-specific pages. This is covered in detail in my E-Commerce Marketing FAST training course.

Otherwise, congratulations. You've completed the wizard.

Remember, you can revisit the wizard at any time and change any of your selections. Sometimes it's useful to do this after you've published some content, so that you can see exactly what effect the change would have.

Typography

Typography refers to how text is shown throughout your site.

You can control aspects of text, such as font selection, font size, color, spacing and so on.

You'll find Typography in the Theme Builder menu, just down from the Site Wizard.

Click on Typography to bring up its options.

Then click on Edit to change anything to do with how text is presented.

Here, you will be able to select any text aspect and make changes to it in the left sidebar.

You can, of course change the typography to suit your personal tastes. Sometimes it's useful to wait until you've got some content published first. Then you can experiment with different options and observe their effect on your website.

Here's Typography showing some changes I've made.

Typography Changes

I've used Verdana as the font throughout, changed the size and color of headings, the spacing of paragraphs and lists and (not shown in the image above) the appearance of links so that they use the theme color and are bolded and underlined (I like them to demand the visitor's attention).

Now let's add some content so that we can see what our website looks like.

I'm going to create a home page, an about page, a contact page, three blog posts, some legal pages and a header and footer menu to provide navigation.

Then we'll truly be able to see the structure that the Thrive Theme Builder has created for us.

The Home Page

First of all, I asked ChatGPT to create a home page for me. You will have received my free training course How to Benefit from ChatGPT during the Affiliate Marketing FAST launch and it's all covered there. You should still have access to that course if you need to refresh.

Then I obtained a free image from Pixabay to use as a banner header and inserted h1 header text underneath it and h2 header text above selected paragraphs.

We'll take a look at it shortly.

The Remaining Pages

I won't go through creating the remaining pages in detail.

It's just a matter of going to Pages >> Add New in the WordPress menu, giving the page a name and building it using Thrive Architect, which I'll cover in the next module.

This was used to create an About page, a Contact page and some legal pages generated by the plugin WP Legal Eagle (also covered in the next module).

In the meantime, you can just create them as empty pages and fill in the details later.

Blog Posts

I cover writing blog posts in detail in Module 7: Your Website's Blog Posts, which is a really important part of this training course. For now, I've just created three quick blog posts to illustrate how they are displayed by the options we chose in the Thrive Theme Builder.

In Module 7, I'll analyse just how these three blog posts were created and how we can improve them.

Menus

As you may recall, we created empty header and footer menus as we worked through the Thrive Theme Builder wizard. Now it's time to revisit and add some menu items.

In the WordPress menu in the left sidebar, select Appearance >> Menus.

Click on Menus and select the Header Menu (Primary).

The (currently empty) menu is shown on the right and a list of pages on the left. Click the View All tab and select the pages to be added to the Header Menu.

Select the pages to be added and click the Add to Menu button.

Note that there are other entities (such as blog posts) that can also be added as menu items. These will all be covered in later lessons.

The selected pages will be added to the menu.

You can change the order of menu items by clicking and dragging.

You can also change the properties of individual menu items by clicking on the drop down arrow and editing them.

Here I've moved About underneath contact and changed the individual item names (navigation labels) to upper case.

Click the Save Menu button.

And now repeat the process for the Footer Menu.

Don't forget to save the menu.

Time to See What We've Done

Let's take a look at what this quickly knocked up website looks like now.

Home Page

The Home page doesn't look bad as an introduction to our website. The header menu works as expected, but the logo needs to be more prominent.

Also the site name in the address bar is My WordPress. This needs to be changed to Goldilocks Coffee. There are a few of these and we'll cover them later. You access them in Appearance >> Customize >> Site Identity.

Footer Menu

This just shows the legal pages we selected when we built the menu, along with an automatic up arrow that takes the visitor back to the top of the page.

Blog Summary

The blog summary looks pretty good, but the green banner at the top with the less than obvious search bar can be improved out of sight.

Blog Post

Click on the image, the title or Read More to see the full blog post. Note that we haven't had to do anything to create this connectivity. It was automatically built in as we worked through the Thrive Theme Builder wizard.

While the other two blog posts are simply informative, this one promotes espresso coffee machines as an Amazon affiliate.

I'm happy enough with that part of the presentation, but we can make improvements to what is shown in the right sidebar.

The Other Pages

Both the Contact and About pages have placeholders in the right sidebar. This can be a very useful place to promote a hot offer that will appear on all pages, so we'll look at how to do this in Module 7.

Outcomes

At the end of this lesson, you should have

• Used ChatGPT to create a home page
• Created an empty about page, contact page, header menu and footer menu
• Worked through the Thrive Theme Builder
• Updated the Typography.