Documentation › Beginner’s Guide: Building Your Website, Start to Finish

Beginner’s Guide: Building Your Website, Start to Finish

Now that you’ve installed and activated Headway, here’s a guide through the process of creating your WordPress-powered, Headway-enabled website. We’ll address creating a homepage, a blog, and interior pages. From there, we’ll go over how Headway comes into the picture. Follow the steps that apply to what you’re trying to do with your site.

Various terms throughout this tutorial link to more information. You may want to go through the tutorial once and then go back and follow the links to the other pages. You may also want to check out the Headway glossary and the instructions for installing Headway.

Step 1: Envision Your Website

You can’t start building until you have a sense of what it is you want to be creating. Though WordPress was originally designed to be a blogging platform, it has become much more, so you may or may not want a blog, and you may not want the blog to be the focus of your site.

Write down the different types of content you’ll be offering. These could include:

  • General blog posts
  • Podcasts
  • Reviews
  • Tutorials
  • Products
  • Videos
  • Downloadable content (free or fee-based)
  • Membership-based services
  • A la carte services

Depending on what the purpose of your website is, you could have some very specific requirements (customer reviews, featured advertisements depending on category, and so on). Don’t worry about what’s possible—at this point, just decide what you want your site to do and contain.

Step 2: Create Some Posts and Pages

Before you do anything in Headway, you need to have some content to work with. Even if you add a few “dummy” posts to begin with, it’ll help you to figure out whether you’re laying things out properly. Plus, a site should be designed with the content in mind anyway. So in the WordPress admin panel, set up a few posts in a few different categories and with different tags. Further, set up a few internal pages. You can learn about writing posts and pages in the WordPress Codex and at our WordPress 101 page on adding content to your site.

In this walkthrough, we’ll build a site with a static front page. This gives us the flexibility to put whatever we want on the front page of our website and still easily direct people to the blog page to see the newest posts in a standard blog format. So create and publish a page called “Home” and a page called “Blog.”

Create and publish any other pages you’ll want on your site. For example, you may want “About” and “Contact” pages, which are standard pages on websites these days.

Finally, click Reading in the Settings menu, and set the page called “Home” as the front page of the site.

Step 3: Begin Your Homepage Layout

Now it’s time to begin really building your website. When you have Headway activated, the Headway menu appears on the left-hand side and in the header of the WordPress admin panel. The menu in the header has submenus to help you get to your destination more quickly. The illustration shows both menus.

The Visual Editor is where you’ll do all of your layout and design work for the site. Remember, most of your content will live in WordPress. Headway is primarily for laying out your site, applying styles, and sometimes inserting things like videos and relatively static graphics.

Important: We recommend you don’t use Internet Explorer and that you have a recent version of Chrome, Firefox, or Safari.

Click Visual Editor in the Headway menu, or right-click Visual Editor
and select the option for a new tab. Having the Visual Editor under a separate tab lets you jump back and forth between the editor and WordPress. (In the Visual Editor, the Admin menu has links back to the WordPress admin panel, too.)

The first time you open the Visual Editor, it opens in Grid Mode, and you’re greeted with a tour. You can skip it if you want and view it later by clicking Tour in the Tools menu. But it’s recommended that you follow the tour on your first visit. It won’t be as effective if you’ve already started building layouts. We’re going to customize the homepage, so continue through the tour until you reach the “Layout Selector” step. Hover over Front Page in the layout selector, and then click Edit. Then continue with the tour.

As part of the tour, you’re prompted to use the Grid Wizard. Whether you decide to use an empty grid or start from a preset, you can begin drawing blocks:

  1. Click in an empty space on the grid.

  2. Click and then drag diagonally to create a box.
  3. Release the mouse button.
  4. Choose a block type in the options panel. Headway Base comes with 10 block types, and any others you’ve downloaded and installed (as a plugin) from Headway Extend appear as available block types here, too.
  5. If you change your mind and need to change a block’s type, click the block type icon in the upper-left corner of the block, and make a new selection.
  6. Click and drag the edges of a box to adjust them.
  7. Click inside a box and drag to move it around.

Draw as many boxes—or blocks—as you need to complete your layout. Then for each block, click the gears icon in the upper-right corner to open the block’s options, and configure the block.

Finally, click View Site to see the general layout. Make any adjustments to the blocks or their options as needed. The design doesn’t look like much right now, but we’ll get to styling things soon.

Your homepage could look something like this—a homepage consisting of a header block, a navigation block (with default items), a content block, widget blocks, and a footer block:

See Tips for Using the Visual Editor for some suggestions on making the layout process even easier going forward.

Step 4: Set Up Navigation Menus

Headway integrates tightly with the default WordPress navigation menu system. For an overview of how to create and use WordPress navigation menus, see the WordPress Codex article or the “Custom Navigation Menus” video on our WordPress 101 page on site admin.

Once you have added a navigation block to your layout in Grid Mode of the Visual Editor, click the gears icon to open up the navigation block options in the options panel. Here, you have a few options; for example, you can set the menu to be vertical instead of horizontal.

With the Config subtab selected, add an alias, something descriptive relating to the location of the block. For example: “Top Navigation,” “Home Navigation,” or “Primary Navigation.” The alias becomes the name of a theme location for a menu in WordPress. Save your changes.

Go to the WordPress admin panel, and click Menus in the Appearance
menu. Here, set up a navigation menu. Then, in the Theme Locations meta box, select the menu you just created where you see the layout and alias of your navigation block. (If you didn’t give your block an alias, the block ID is shown instead.)

A single navigation menu can be assigned to multiple theme locations. Or, if you’ll have a lot of navigation, you might have multiple menus and navigation blocks to pair up with each other.

Step 5: Set Up the Blog Pages

Now that our homepage layout is complete, we need to define the layout that will be used for the Blog Index and, by the “laws” of layout inheritance, the rest of the site’s pages and posts (unless they’re otherwise customized).

This is much the same as what we did with the homepage. Go to Grid Mode in the Visual Editor, look in the layout selector, and find the option for Blog Index. Hover over it, and click Edit. Just as with the homepage, you’ll start with the Grid Wizard.

You’ll want to make sure that you have at least one content block on this page. You can put anything else you want—add a header, or don’t. Or add a header different than your homepage. Put additional navigation blocks for category navigation, or just keep with the default. You can add embed blocks or custom code blocks, whatever will give you the content and capabilities you need to match what you envisioned for your site in Step 1.

Keeping the content block set to the default mode will show the latest 10 posts (or whatever number you’ve set under Settings ► Reading in the WordPress admin panel), with the most recent post shown in full, and the rest as excerpts.

You can also choose to set the mode to a Custom Query, in which case you can set the content block to fetch a certain subsection of posts. Keep in mind that if you do this, you’ll want to customize the Single layout and set the content block to “Default” in order to properly display the correct content for single pages and posts.

Step 6: Interior Page Layouts

Just as we’ve done before, choose a layout in the layout selector, hover, click Edit, and make changes in Grid Mode. It will be the same process as you build the rest of your site.

To summarize:

  1. Create a page in WordPress. Add some content, and publish.
  2. If this page should have a different layout than your default (inherited from the Single or Blog Index layout, per layout inheritance rules), go to the Visual Editor, find the page listed in the layout selector, and edit.
  3. Once you’ve added all of your blocks and completed all the block settings, click the Save button.

Rinse, repeat, until you’re done customizing all of the pages that need customizing.

Now you have your layouts done, and it’s time to start getting some style with Design Mode.

Step 7: Use Design Mode

Design Mode is extensive. It has hundreds of options—literally—mainly because you have a set of default options for all text and options for all block types, both in general (for example, all navigation blocks) and individually (such as navigation block #37).

The available options will vary slightly, but in general you can expect to see options for:

  • Background
    • Color
    • Image
    • Image repeat
    • Image position
    • Image attachment
    • Image size
  • Font
    • Font family
    • Font size
    • Font color
    • Line height
    • Font styling
    • Text alignment
    • Capitalization
    • Letter spacing
    • Underline
    • Shadow
  • Margin (top and bottom)
  • Borders
    • Border color
    • Border style
    • Border width
  • Padding
  • Nudging
  • Text shadow (CSS3 progressive enhancement)
    • Horizontal offset
    • Vertical offset
    • Blur
    • Color
  • Box shadow (CSS3 progressive enhancement)
    • Horizontal offset
    • Vertical offset
    • Blur
    • Color
    • Position

Use the Design Editor at the right side of the Visual Editor to drill down through the elements on the site and choose the styles for each element. You can style things at the top level (such as “Navigation” to set styles for all navigation blocks) or at a detailed level (such as headings in a specific block).

You can also select which instance of an element you are modifying. For example, you can set the homepage content block to have a larger font than the rest of the site by choosing the homepage instance. To do this, you’d expand the Content item under Blocks in the element tree; then expand the Instances item. Choose the homepage instance from the resulting list to modify only that block’s style only for that layout.

This illustration shows the location of the Instances item in the element tree:

See Tips for Using the Visual Editor for ways to be effective at using Design Mode.

Step 8: Finalize Your Content

At this point, if you have any Lorem Ipsum text, you’ll want to replace it with real content. While you’re doing that, you may want to enter custom titles and descriptions for use by search engines or set other SEO attributes. Higher-level SEO settings are addressed in Step 9.

Go through the site page by page to make sure all looks well. As you do, you may want to make layout changes, or you’ll realize that you never styled the links different in the content block, and that was important to you—or perhaps you’ll find something you or your client simply don’t like and want to change.

The greatest thing about Headway is the ease with which you can make these changes, especially now that you are more familiar with the ins and outs of the Visual Editor.

Once your content is pretty solid, you’ll be adding finishing touches or even integrating special functionality, and that usually means plugins.

Plugins

While Headway strives to be compatible with as many plugins as possible, we can’t please everyone (or every plugin developer!). That said, if you see a conflict and the plugin developer is willing to work with the Headway team, they can contact us directly to hammer out a solution. The vast majority of plugins will work in your Headway site just fine right out of the box, though.

For a demonstration of adding plugins, see the “Plugins” video at WordPress 101: Site Admin.

Plugin Integration

The integration depends on the plugin. Some plugins are widgets, so you drop the widget into a widget-ready sidebar you created using a widget area block. If you have a plugin that provides a shortcode, you can drop that into a custom code block or within a WordPress page or post. If a PHP “template tag” is provided, that goes into a custom code block, or you can get really advanced and get started using PHP hooks.

Plugin Woes

Some plugins may have errors that could be related to Headway, or to the fact that the plugin simply isn’t great to begin with. The forum is a great place to ask other community members for recommendations or their experience with a plugin, or to get help with troubleshooting. Sometimes, you find a great plugin that functions itself but keeps the Visual Editor from loading. In that case, you could either use the plugin and disable it when you need the Visual Editor, or find another plugin that gives you what you want (or the plugin developer can work with us and we’ll fix it!).

Step 9: SEO Configuration

Chances are, you’ll want the public to find your website. Headway adds some settings in the WordPress admin panel to improve your site’s position in search results.

(If you don’t want anyone and everyone coming across your site, you can reduce traffic by going to the WordPress admin panel, clicking Reading in the Settings menu, and toggling on the Discourage search engines option.)

For sitewide settings, go to the WordPress admin panel. Click Options in the Headway menu, and click the Search Engine Optimization tab.

Here, you can set title formats and descriptions by layout (called an “SEO template” on the page). Advanced options are available, too, such as for telling search engines not to index pages and enabling nofollow for links. See Search Engine Optimization (SEO) in Headway for more detail about these options.

You’re Done

Now your site’s live and ready to be announced to the world—or at least its intended audience. Because you’re using the Headway theme, you can tweak your layouts or designs any time and have them take effect immediately.

Headway Themes pushes out updates to Headway regularly, so be sure to add your Headway license key in WordPress and update Headway when needed. That way, you benefit from all the new features and bug fixes.

Feel free to browse the rest of the documentation for more detail about many of the topics mentioned in this tutorial.

At any point, if you need additional help, visit the community forums by clicking Support in your Headway member dashboard.

This article was last updated for Headway version 3.8.3.

Copyright © 2016 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress