Designing Your Homepage (part 1)

Headers, Banners, and Content

In this lesson we’ll begin working on the design of your home page by designing the header section of your site. This will include adding social media icons and your logo to your site header. You will also learn how to make a banner or a slideshow section for your page. Finally we’ll wrap things up adding a section of written content to your homepage. There’s a lot to cover so let’s jump right in.

Launching The Customizer

Much of the work we’ll be doing will involve the WordPress customizer. There are a couple different ways to launch the customizer. One way is to log in to your WordPress admin dashboard and launch the customizer from the admin control panel by clicking Appearance > Customize.

You can also launch the customizer from the front-end of your website. First, you have to be logged in to your WordPress site as an admin. Then you can visit the front-end of your website and click the Customize button. If you are in your WordPress admin dashboard, you can click Visit Site. Then navigate to the page you want to work with and click the Customize button to customize the page you are viewing.

Homepage Design Concepts

Since you probably do not want your website to look exactly like the one we’re building in this example, the goal is to learn how to create the different components of this page so you can take these same concepts and apply it to your own site. Keep in mind all of these concepts are optional. We’re just looking at up a bunch of ideas and you can pick the ones that are best for you and your business.

If you’d like to see the end result first, you can see the Fit Band site at http://fitband.wpstores.com

Starting at the top, let’s look at the header bar.

Header Bar

In the header bar we’ve got 3 things going on.

  • Social media icons
  • Promotional text
  • Call-to-action button (link)

 

There are two steps to getting your social media icons in the header bar. First you have to define you social media links. Then you click the option to display social media icons in the header bar. Here’s how it works.

After launching the customizer, navigate to General > Social Icons.

Create Social Icons

Click the + Add Icon button and just type in the URL to your social media profile. So, for example, if you wanted to add your Facebook page, just go to your Facebook page in your web browser and copy/paste the URL into the social icons text box. The Make Theme will recognize that you provided a Facebook link and will include the appropriate icon. So, for the Cart66 Facebook page, you would enter https://facebook.com/cart66 because that’s the link to the Cart66 profile page.

Keep clicking the + Add Icon button and adding all of your social media profiles. You may also want to check the option to Open icon links in a new tab. That way if someone clicks your Facebook link, they will go there in a new tab which makes it easy to get back to your website.

Add Social Icons To Header Bar

Now that you have created all of your social media icons, you need to add them to your header bar. In the customizer, navigate to Layout and click Header.

There are some very nice settings in this panel. To get your social icons to show up in the header, check the Show social icons checkbox under Options > Header Bar Text near the bottom of the settings panel. While you’re there, you can also adjust the Icon Size to your liking.

Promotional Header Text

While we have the settings panel open for the Header let’s add some Header Bar Text. Type in whatever you would like to say. You could mention a sale, a quick “Did You Know” tip, or anything else that you’d like to say. You can include both text and links. Here’s the content from the Fit Band site.

Save 20% on your annual membership! <a id="header-bar-button" href="/join/" class="ttfmake-button">Join Now</a>

Notice that we wrote a little bit of HTML code! Don’t panic 🙂 It’s really simple (and optional) but learning just a little bit of HTML and CSS will give you super powers over your site design that you will really enjoy.

How To Hand Code A Link

In HTML, a link is called an anchor tag which is why it starts with <a . Let’s break it down piece-by-piece and you’ll quickly see that it’s not very complicated at all.

<a
The start of the anchor tag.

id="header-bar-button"
Give the anchor tag an id so you can reference it in CSS later if you want. You can name it anything you want but do not put spaces in the id.

href="/join/"
The href is just the place you want people to go when they click the link. In other words, it’s the link’s destination. In this example we want people to go to the Join page. You can find the link to use by just navigating to the page you want people to go to, then copy and paste the URL from your browser for the value of the href.

class="ttfmake-button">
This is a CSS class. The Make Theme has a few special CSS class names that define how things look. Here we are saying that we want our link to look like all the other buttons on your site. If you do not add this class name then the link will just look like an ordinary text link, not a button.

Also notice the closing > at the end of this section. The stuff between the opening and closing tag is the stuff that will actually be shown as text on the button. The general format of an anchor tag (link) is
<a href="where-to-go">Text To Click</a>
Notice the opening <a> and the closing </a>.

Join Now
This is the text that will show up on the button.

</a>
This is the closing tag. It basically says, “OK, we’re finished defining our link now.”

Add Your Logo

You do not have to have a logo to launch your website. If you’re trying to save as much money as possible, hold off on having a custom logo designed. You can just select a nice Google Font to make your business name stand out. If you would like to get a professional logo designed, take a look at 99designs.com You can get a really nice logo for a very reasonable price. I’ve personally had a logo designed by 99designs and I am very happy with it.

If you have a logo you’d like to use, launch the customizer and go to General > Site Identity. From there click Select Logo and either upload your logo from your computer, or pick the image from your WordPress media library if you have already uploaded it. You will have the opportunity to crop the image by clicking Crop Image or you can Skip Cropping. I always Skip Cropping because I do all of my image work (like cropping and resizing) outside of WordPress using either Pixelmator ($29.99 for Mac) or Gimp (free for Linux / Windows).

Note that, in this example, we have selected to Hide Site Title and Hide Tagline. This is just a display option. It is still important for you to provide values for your site title and tagline because WordPress uses that information for search engine optimization and for identifying your site when you share it on social media.

For example, even though we are hiding the Site Title and Tagline, it’s still in the title bar of the web browser.

Set Your Header Color

Any time you want to set a color, launch the customizer and head over to Color > Site Header.

For here you can change the background color and the text color for your header section. Note, this is the section below the header bar and does not include the header bar itself.

Builder Tools

Not it’s time to start adding some content to the page. Up until this point we’ve been working with the customizer to control things. Now we’re going to start putting pictures and copy on the page. So jump into the WordPress admin dashboard and click to edit your homepage.

You can either click the Edit Page button.

Or, from the WordPress admin dashboard, click Pages > All Pages > Home.

Banner Section

The first thing we add to the page is a banner section with an interesting and relevant photo. You want try to select a photo that summarizes what your business is about. In other words, it should be both pretty to look at (engaging) and relevant to what you are doing.

To add a banner section, click the Banner option from the Page Builder.

That will add an empty banner section to your page. Now, add the image you’d like to display by clicking the empty banner section.

There are a couple options you may want to adjust by clicking the gear icon on the banner section.

There are a bunch of settings available, and two of the important settings are Section height and Responsive behavior.

Section Height

The Section height is pretty self-explanatory. It set how tall the banner will be BUT it only makes a difference when the Responsive behavior is set to Default.

Responsive Behavior

Default: This setting is a little more complicated. It has to do with how the images changes based on how wide the screen is. If you choose Default then you will not always see all of the image depending on how wide the web browser is. In other words, some of the image may be hidden when using the Default setting. Therefore, pick an image where it’s OK if some stuff gets clipped out of view. Wide angle shots and landscapes are good examples of types of pictures where you don’t have to see the entire image to know what you’re looking at. A bad example would be a close-up picture of someone’s face. You really don’t want the top half of their head to be hidden and just see the nose and the mouth of the person’s face.

Aspect: The aspect setting is better if you want to make sure the entire picture is visible. The aspect ration (width vs height) of the image stays the same as the width of the browser changes. This acts more like zooming in and out rather than cropping the image to fit the available space. For this reason, the Section height setting does not have much of an effect.

Bottom line: If you want to specify an exact height for the banner, set the Responsive behavior to Default.

Making A Slideshow

Another thing to note about the Banner sections is that you can add multiple images to one banner. If you have more than one image, then the images will make a slideshow. There are settings to control how the slideshow works.

All of the settings a pretty self-explanatory. So, you can play around with them until you get the effect you’re looking for.

Important: None of your changes will be saved until you click both Update banner settings AND the Update button on the right side of the editor.

Nothing gets saved until you click the Update button.

Content Section With Background Color

The next section of the home page is the summary section just below the banner. This is the area of the home page that quickly tells the visitor what you’re all about. It is a bit of an elaboration on your tagline. In other words, you are answering the visitors question, “What do I get?”

Click the Content section and you will get an empty content section with 3 columns added to your page. The Content section is a super powerful tool because you can have from 1 to 6 different columns of content in the section. This provides a lot of design options. In our site, we just want one column and we are going to center the text in that column.

We’re going to do 2 things:

  • Set the columns to 1
  • Trash the unused column areas

Click the gear icon on your new content section.

Set the columns to 1.

While you’re here, go ahead and scroll down to the Background color section and pick the color the background. If you want to leave the background the same as the rest of your site (in our case white) you do not need to select a background color.

Click Update content settings to close the content settings window.

Now, let’s delete the 2 columns we don’t need any more.

Now, click on the Click to edit box and type in the copy you’d like to see in this section.

When you are finished editing, click the Update column button.

Remember,  nothing will be saved until you click the Update button on the right side column of the WordPress page editor.

Get Tips Like This In Your Inbox

If you liked this post, get more like this one emailed to you.

We respect your privacy. Cancel anytime.