Headway Themes Project Part 3 – Creating the Homepage for wilwebs.org

In the earlier episodes of this series, we created a layout and added styling to that layout. Together these make the design of a website.

When building a website with Headway, you usually start with the blog index. The layout and styling of the blog template offer the foundation for all other page templates; single posts, single pages, homepage, portfolio, 404 page, etc. The image above from Headway’s New Member’s Guide illustrates this well.

Since wilwebs.org is not a blog, but more or less a portfolio showcasing blogs, we need a static front page – a page displaying those websites, rather then the blog feed. In this post we are going to create such a static homepage.

Preparations

Before we can create a customized front page with the Visual Editor, we need to create to two WordPress pages. One page has to be set as our homepage. The another page is going to act as the entrance to our blog.

Go to the WordPress back-end >> Pages, and create these two page. There is no need to select a specific template for these pages, as with regular WordPress themes.

The titles of these pages are not really relevant to Headway either. Front page or home, and blog or news are pretty obvious choices of course.

Next, go to Settings >> Reading and click the radio button before A static page.

Click the Front page drop-down menu and select your home page. Select your blog index at the At the Posts page.

Hit the [Save Changes] button. Done.

We just told Headway: Use the Home page as the front page, and the Blog page for the blog index.

We are ready to continue with the Visual Editor.

Creating the Homepage

When you are back in the Grid Mode of the Visual Editor of Headway, open the Pages – Shared Layouts drown-down menu. You will notice a new page entry here; Front Page. That is the page we just created, and set a the static homepage.

A blue [Edit] button appears when you hover over the line with Front Page on it. Click that button.

The Grid Wizard pops up. There are several routes to create a new page layout.

However, when you want a page to inherit the properties of the blog template, cloning the Blog Index is the preferred choice.

This has three advantages:

1. we only have to remodel the existing layout, rather than creating one from scratch
2. we preserve the styling that we created for the blog, and avoid the risk that pages will be styled differently
3. we future proof our website since it will be much easier to maintain the styling of our pages – there is only one style

Agree? Click the [Clone Layout] button.

Headway creates a new Front Page layout based on the Blog index. This new layout has the same properties as the blog template. We only need to adapt layout and styling where necessary.

The header and footer on the homepage remain as they are on the blog. The homepage content, however, is going to be completely different from the content on the blog.

Where the blog includes one content area, the home page will have five. One for each WordPress page:

1. Welcome Message
2. HostingCaddie.com
3. WPfy.me
4. ThemingWP.com
5. wpZaken.nl

Let us delete the Content block and the Widget Area, and add five new blocks to the main wrapper.

When creating a block, you can choose from the entire array of Headway blocks. By adding Widget Area blocks, you can deploy any content providing plugin. Another option is extending Headway with Headway Blocks – Headway optimized plugins.

For this project, we need five content blocks. A shortcut to creating five equal sized blocks, is to create one block. Then right click that first block, and select Duplicate Block. Repeat this procedure three more times.

The image above shows the new layout of the main wrapper. Instead of a content and a widget area, it includes a stack of five horizontal blocks.

It is recommended to give each block a unique name – a Block Alias. In addition, you should assign at least one CSS class to each block. This will help you to identify and address the block for styling purposes, when required.

Right click the top block, and navigate to the Config tab of the Options panel. As Block Alias, I choose ww-home-1. I will use that same as the unique CSS class for this block. This will come in handy in case when I want to apply CSS to this one block only.

Assigning another, more general class like ww-home, might be helpful in case we want to apply styling to all five blocks in one hit.

So, block two gets ww-home-2 as the unique alias, and the ww-home as the general one. Same recipe for the remaining three blocks.

Populating the Homepage

Now that the structure of the homepage is set, we can add content.

For wilwebs.org, I want to include content from five WordPress pages. By default, Content Blocks display content from posts. Fortunately, we can adjust this by changing the Query Mode of the Content Block.

Right click the block regarding, and choose Open Block Options. The first tab at the left states Mode. The drop-down menu reads Default Behavior. Replace that with Custom Query.

Open the Query Filters tab. Here you can select posts from certain categories, authors, post types, and pages.

The Fetch Page Content is in this case the appropriate query. For the first content block I select the page Welcome to wilwebs.org.

At the Display tab, I replace Continue Reading with Read More, and Full Entries. Because I apply a Read More tag in the page, it will only display the page content until that tag. This give me a little more control over the content as well as the presentation – like live links.

Meta and Comments are not relevant with regard to pages, so let us skip those.

The first block does not require a Featured Images. However, for the second block, I select a Left image position, and as image size 380px.

The Config tab offers another possibility, you can add a Block Title. This is not relevant for the Welcome block, but for the HostCaddie.com entry, I enter here “Run your own website”.

I repeat this procedure for the other blocks, each with the appropriate Block Title of course. For the the 3rd and 5th block, I opt for a Featured Image on the right side of the content, instead of on the left side of the block.

And this is how the screen looks at the moment:

First thing to notice is that the styling of the home page is successfully cloned from the blog index. Cloning page templates saves us a lot of work, and assures a uniform styling on all web pages. We are not quite finished though.

The page title of the first Welcome page needs to be centered. Just like the Block Title of the other pages. And of course, we need to set the background of the welcome page to transparent. But all in all, we are making progress.

Styling the Homepage

When you have been following along with this series, you might have noted that we did not touch any code until this moment. Not even CSS.

Now that we have to center a few things, we need to enter a few lines of CSS. I am referring to the title of the first block (ww-home-1), and the Block Titles that we have added while creating those blocks – like Run your own website.

There is a workaround if you do not want to, you could add those titles to the page content with the aid of WordPress’ WYSIWYG text editor. So, you can avoid the CSS part.

Centering stuff horizontally with CSS is done with the block of CSS:

"something" {
    display:block;
    margin: 0 auto;
    text-align: center;
}

The part between the curly brackets is pretty standard for centering stuff horizontally. When you are not familiar with a tool like Firebug, it can be time consuming to find out what that “something” is. Fortunately, there is Headway to rescue!

Look in the Navigator of the Design Editor for the “something” part – or right click the element with the Toggle Inspector enabled. In this case refer to the ww-home-1 title. Remember that empty tag icon </>? Click that icon next to the item you want to center.

The Live CSS Editor appears, and as you can see Headway has already entered the “something” part for you. All you have to do is copy the CSS between the curly brackets.

The “something” in this situation is #block-b685481fd7e1475b. That is the unique ID of the ww-home-1 block. Since it is a bit hard to remember, and we could replace it by ww-home-1 (the class we assigned to it when creating the block), or leave it as it is. That is as matter of personal preference.

In case you are interested, the “something” part is called a CSS Selector. It is the web element that you want to style. The CSS Selector in combination with the bracket part is called a CSS Rule.

We need to repeat the same procedure for the Block Titles like Run your own website. We can achieve this in one hit though.

A little above the Entry Title that we have just styled. you see Block Title. Hit the empty tag </> next to Block Title. The Live CSS Editor opens with:

.block-type-content .block-title {
}

Just as with the Entry Title, we paste the following code between the curly brackets:

display:block;
margin: 0 auto;
text-align: center;

This time, I replace the .block-type-content class by my own ww-home class. The entire rule looks like this:

Now that we are working on the Block Titles, let us change the color to white. Hit the Fonts button, click Customize next to Fonts Color and set the color to white. Done.

There are only two more thing to do. We need to set the background of the top Content Block to transparent. And I want to replace the Check the blogs link, by a Check the blogs button.

Let us start with the button. Personally, I do not mind dabbling with CSS. You do not need to follow my example.

As you know, the content that we are styling right now, is a WordPress page. Hence, you can also opt to style within the WordPress editor. And for stuff like buttons, you could install a shortcode plugin. No need to code.

In case you do mind a little CSS either, here is my way:

With the Toggle Inspector enabled, right click the Check the blogs link and select Edit This Instance:

1. change the font to Spinnaker, just like we did in Part 2 of this series
2. set the color to white
3. choose Bold for the font styling
4. at Capitalization, replace Normal by Uppercase or Small Caps, whatever you prefer

We are almost done. Click the empty tag </> icon and paste the following code between the curly brackets:

background-color: #F24D22;
border-radius: 25px;
padding: 15px 30px;

There is our button.

No we have to add a hover state. Copy the entire rule above, and add :hover behind the a, directly before the opening curly bracket.

Replace the lines between the bracket with:

background-color: #fff;
color: #F24D22;

The two new rules look like this:

The block IDs will be different in every situation, but that meant to be – an ID has to be unique.

Are you ready for the home run? We need to change the white background of the top Content Block to transparent, and adjust the text to white.

With the Toggle Inspector enabled, right click in a corner of the top Content Block. The Navigator opens with ww-home-1 Page Entry.

Click the Background button, click the white swatch next to Color, and pull the slider to the uttermost left. Repeat this for the Border.

Hit the Margins button, and set the bottom margin to 250px.

Last, but not least the text. Right click the page title and select Edit This Instance.

Click Fonts, select white. Font-size 54px. Capitalization, Uppercase.

Hit the Margins button. Set the top margin to 60px.

Repeat this for the text below the title, but leave the margins untouched this time.

That is it!

The body background in the lower part of the image above is brown, but that is because of the limitations of screenshots. When the Headway design goes live, you will see the lighthouse in the background.

As mentioned earlier, I do not mind toying with CSS, but it is not necessary. You can create any content you like with the WordPress editor, change colors, add media, shortcodes, whatever, and present that page as it is with a Content Block.

Hopefully I did not overwhelm you with these three posts on the wilwebs.org project. However, I enjoyed creating the website with Headway, and thought it would be an interesting experience to share.

I have tried to detail out every step, but it is not imaginary that I leapfrogged somewhere. So, when you have any questions, or need an illumination, please do not hesitate and leave a comment. Have fun.

Headway Plans

• $59 Headway Personal
• $99 Headway Business
• $199 Headway Developer

The Personal Plan allows you to use Headway on one site. Next to the Headway framework (Headway Base), you also get the Whiteboard starter template.

Headway Business includes Headway Base, the Whiteboard template, and one official Headway template of your choice. In addition, the Business plan entitles you to use Headway on three sites.

With Headway Developer you get Headway Base, all official Headway templates, and the Community Builder.

Official templates are Headway templates created by Headway Themes itself, so excluding the Community templates. The Community templates are created by Headway specialized developers and design agencies.

All three plans include one year of support and updates. After the first years can renew your license with another year. Renewals are only 50% of the initial price.