NEW MEMBER’S GUIDE TO - Amazon S3 · WordPress version: 3.9 Headway version: 3.7 NEW MEMBER’S GUIDE TO The Drag-and-Drop WordPress Theme

WordPress version: 3.9Headway version: 3.7

NEW MEMBER’S GUIDE TO

The Drag-and-Drop WordPress Theme

© 2014 by Vesped, Inc.

Headway Themes and the Headway Themes logo are registered trademarks of Vesped, Inc.

WordPress is a trademark of Automattic.

This document is an official publication from Vesped, Inc. It can be redistributed as is to anyone for free, whether Headway member or not, but must be redistributed in its entirety. The content may not be reused or reproduced or the guide reposted by any person or entity other than Vesped, Inc. or its employees without express written authorization from a representative of Vesped, Inc.

i

Contents New Member’s Guide

Contents

Chapter 1: What Headway Is and What It’s Not . . . . . . . . . . . . . . . . . . . . . . . . . 1

What to Expect from Headway . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

What Not to Expect . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Where to Learn More about Headway and Get Help . . . . . . . . . . . . . . . . . . . . . . . 2

Where to Learn More about WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

Some Notes about This Guide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

“Fall Guys” Fictional Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

Chapter 2: Installing and Updating the Headway Theme . . . . . . . . . . . . . . . . . . . 5

Purchasing Headway Membership . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Installing Headway. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Adding Your License Key . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Updating Headway . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Reinstalling Headway . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Chapter 3: Laying the Groundwork in WordPress . . . . . . . . . . . . . . . . . . . . . . . 9

Adding a Category . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Adding a Post. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

Adding a Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Adding a Static Homepage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

Using a Theme Test Plugin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

Before You Go Any Farther . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

Chapter 4: Creating a Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

Opening Grid Mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

Selecting a Preset or Starting from Scratch . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

Saving Your Work . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Using Snapshots . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

Mobile Responsiveness Settings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Selecting a Layout to Customize . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

ii

New Member’s Guide Contents

Wrappers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Types of Wrappers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Opening a Wrapper’s Menu and Options . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Changing a Wrapper’s Fluidity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

Setting a Wrapper’s Margins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

Method 1: In the Grid. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

Method 2: In the Options Panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

Setting Other Wrapper Options. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

When to Use Multiple Wrappers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

Setting Wrapper Grid Defaults . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

Adding a Wrapper . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

Resizing a Wrapper. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

Changing the Order of Wrappers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

Deleting a Wrapper . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

Blocks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

Adding a Block and Choosing Its Type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

Resizing a Block. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

Moving Blocks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

One Block . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

Multiple Blocks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

Lining Blocks Up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

Changing a Block’s Type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

Deleting a Block. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

Setting Block Options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

Header . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

Footer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

Breadcrumbs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

Widget Area . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

Custom Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

Embed . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

Slider . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

iii


Config Options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

Creating a Navigation Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

Adding Widgets to a Widget Area Block . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

Customizing More Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

Chapter 5: Reusing a Layout across Your Site . . . . . . . . . . . . . . . . . . . . . . . . . 39

Layout Inheritance. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

Mirroring . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

Mirroring Blocks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

Mirroring Wrappers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

Cloning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

Shared Layouts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

Creating a Shared Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

Applying a Shared Layout in Grid Mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

Applying a Shared Layout to a Post or Page in WordPress . . . . . . . . . . . . . . . . . 45

Disconnecting a Shared Layout from a Layout . . . . . . . . . . . . . . . . . . . . . . . . 46

Deleting a Shared Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

Choosing Between Cloning and Shared Layouts . . . . . . . . . . . . . . . . . . . . . . . . . 46

Exporting and Importing Settings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

Block Settings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

Exporting a Settings File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

Importing a Settings File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

Exporting a Settings File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

Importing a Settings File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

Chapter 6: Defining Visual Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

Opening Design Mode. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

Using the Inspector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

Setting Style Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

Selecting an Element and Level of Customization . . . . . . . . . . . . . . . . . . . . . . 53

Level 1: Editing the Regular Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

Level 2: Editing for This Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

Level 3: Editing an Instance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

Editing Hyperlink States . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

iv


Taking Advantage of the Levels of Customization. . . . . . . . . . . . . . . . . . . . . 56

Customization Levels and Layout Inheritance . . . . . . . . . . . . . . . . . . . . . . . 57

Setting Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

Dropdown . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

Numeric Field . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

Color Picker . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

Image Selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

I’m Seeing Spots . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

Editing Existing Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

Moving or Overlapping Wrappers and Blocks . . . . . . . . . . . . . . . . . . . . . . . . . . 61

Using the Live CSS Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

Adding Your Own CSS Classes to Blocks and Wrappers . . . . . . . . . . . . . . . . . . . . . 62

Chapter 7: Using Headway Templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

But First: Headway Templates vs. Child Themes . . . . . . . . . . . . . . . . . . . . . . . . . 65

Creating a Headway Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

Creating a Headway Template from Your Existing Design. . . . . . . . . . . . . . . . . . 66

Creating a Headway Template from Scratch . . . . . . . . . . . . . . . . . . . . . . . . . 66

Getting Additional Headway Templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

Importing a Headway Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

Activating a Headway Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67

Deleting a Headway Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67

Chapter 8: Optimizing Your Site for Search Engines . . . . . . . . . . . . . . . . . . . . . 69

Automatic SEO Settings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

Canonized URLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

Tagline Visibility in Search Rankings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

Template-Level SEO Settings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

Page- and Post-Specific SEO Settings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

Chapter 9: Using Additional Blocks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

Downloading and Installing an Extend Block . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

Using BuddyPress and the Community Builder Block . . . . . . . . . . . . . . . . . . . . . . 74

Configuring the Storefront Block. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

Installing and Configuring WooCommerce . . . . . . . . . . . . . . . . . . . . . . . . . . 75

Configuring WooCommerce. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

v


Working with WooCommerce in Grid Mode. . . . . . . . . . . . . . . . . . . . . . . . . . 76

Chapter 10: Reducing Your Site’s Load Time . . . . . . . . . . . . . . . . . . . . . . . . . . 77

Headway Caching . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77

Added Blocks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77

Caching Plugins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78

Query Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78

Web Hosting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78

Chapter 11: Removing Layout and Design Customizations . . . . . . . . . . . . . . . . . 79

Removing Layout Customizations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

Removing Style Customizations from a Layout. . . . . . . . . . . . . . . . . . . . . . . . . . 79

Removing All Customizations. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

Chapter 12: Troubleshooting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

Contacting Headway Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

vi


1

What Headway Is and What It’s Not New Member’s Guide

What Headway Is and What It’s Not

Headway is a theme framework for the WordPress blogging and content management platform. As defined in the WordPress Codex (WordPress’ online documentation), a theme framework has two meanings. The one that applies to Headway is “a stand-alone Theme designed to be a flexible foundation for quicker WordPress development” (see http://codex.wordpress.org/Theme_Frameworks).

In other words, you install Headway like any other WordPress theme, but it provides much more than a look and feel for your website. In fact, the main purpose of Headway is to give you full control over your site’s layout and styles using the Visual Editor.

This kind of control is especially useful when you can’t find a theme out there that provides the look you want, or you’re designing for clients who need new, unique themes for their web presence.

Building your website with Headway is based around layouts and blocks. Each page or type of page on your website has a corresponding layout in the Visual Editor that you can customize. Layouts consist mainly of blocks, which are small sections of your layouts that have specific purposes and functionality.

What to Expect from HeadwayHeadway is an extremely flexible framework. It works well for all levels of WordPress users, from a new site owner who wants something simple all the way up to WordPress consultants and developers who need to dig into the code. Since this guide is intended mainly for new Headway members, it focuses on the basic end of this spectrum.

As you customize layouts in the Visual Editor, Headway writes the corresponding HTML and CSS code for you. You don’t have to worry about touching any code if it’s not your strong suit. But if you’re familiar with HTML and CSS, so much the better—you’ll have a firm grasp of what’s going on behind the scenes as you build and customize your website.

Note: Headway works only with self-hosted WordPress installations, not on WordPress.com sites.

What Not to ExpectAs a theme framework, a basic Headway installation doesn’t provide all of the functionality you may need for your website. It provides a lot of the functionality needed for a content-driven WordPress website or blog. However, if you’re going to be running a community or conducting e-commerce through your site, you’ll need to add functionality using Headway Extend blocks

CHAPTER

1

2

New Member’s Guide What Headway Is and What It’s Not

or WordPress plugins. The majority of plugins will not conflict with Headway Base, so you can safely try them out and use them without adverse effect on the Visual Editor or your live site.

Note: Because it’s still possible for a plugin to conflict somehow with Headway, disabling plugins is one of the troubleshooting steps, just in case. See Chapter 11 for more on troubleshooting.

Further, Headway Base does not work in conjunction with other themes. A WordPress site can use only one theme at a time, so it’s either Headway or another theme, not both. That said, if you have already developed a theme that you like, you can try re-creating it in the Visual Editor.

Where to Learn More about Headway and Get HelpThe official Headway Themes online documentation is located at http://docs.headwaythemes .com (you may have found this guide there). This set of articles includes information for beginners as well as more advanced Headway members, such as API documentation.

The Headway Themes blog at headwaythemes.com/blog provides updates about releases and new features.

See Chapter 12, Troubleshooting, if you run into problems that you can’t solve. If you need help beyond what this guide and the documentation can clear up, try the member forums at support.headwaythemes.com (requires you to log in with your member username and password). The Headway community is extensive, with many active members and some paid moderators available to assist you.

Where to Learn More about WordPressIf you’re just getting started, you may not know how to find your way around the WordPress admin panel yet. To search through the online WordPress knowledge base, go to http://codex.wordpress.org.

Headway Themes also has a set of “WordPress 101” videos. To view them, go to docs .headwaythemes.com, and click one of the WordPress 101 links in the “Tutorials” section.

Some Notes about This GuideThis guide assumes a few things:

● You are familiar with basic computer use and with web browsing and terminology.

● You understand what HTML and CSS are.

● You have installed WordPress on a server provided by a web host.

● You know where and how to log in to your WordPress admin panel.

3

What Headway Is and What It’s Not New Member’s Guide

The main reason for not including WordPress installation instructions in this guide is the fact that the process is documented at codex.wordpress.org, and it can vary depending on your web host. However, where relevant to getting started with Headway, some other instructions for using WordPress are provided, particularly in Chapters 2 and 3.

“Fall Guys” Fictional ExampleTo help you digest the information in this guide, it contains a running example of a website being developed for a fictional non-profit organization, Fall Guys, which raises awareness about the perils of gravity. Dave Tripp, the founder, has hired Kim Tumble as the website developer. These examples will provide additional context for the steps and features discussed.

4

New Member’s Guide What Headway Is and What It’s Not

5

Installing and Updating the Headway Theme New Member’s Guide

CHAPTER

2Installing and Updating the Headway Theme

Headway is the name of the theme you install to access the Visual Editor and create your website. (The theme’s name is displayed as Headway Base, which is actually the default Headway template used. Headway templates are covered in Chapter 5). As a Headway member, you always have access to the latest version of Headway through the member dashboard.

Purchasing Headway Membership1 Go to http://headwaythemes.com/pricing/, and click the purchase button for the plan you

are purchasing.

2 Complete the purchase information.

3 Pay for your purchase with your PayPal account or with a credit card. You do not have to have a PayPal account to purchase Headway. Once payment has been processed, you will be emailed a link to log in to your member dashboard and download Headway.

4 Follow the link and log in.

5 Click the download link on the Dashboard page and download the .zip file to your hard drive. Do not unzip it or upload the file to your server.

Installing Headway1 Log in to your WordPress admin panel.

2 In the Appearance menu, click Themes.

3 Click Add New, and then click Upload.

4 In the dialog box, locate and select the Headway .zip file. WordPress uploads the file and installs the Headway theme.

5 When the installation is complete, click Activate.

6

New Member’s Guide Installing and Updating the Headway Theme

When you install Headway, a new Headway menu is added to WordPress in the header and the navigation column (see the following image).

Adding Your License KeyAdding your license key is required in order to receive regular Headway update notifications in WordPress and to use Google web fonts.

1 Log in to your WordPress admin panel.

2 In the Headway menu, click Options.

3 Under the General tab, paste into the Headway field your license key from the email you received when you purchased Headway.

4 Click the Save & Activate License button.

7

Installing and Updating the Headway Theme New Member’s Guide

Updating Headway1 Click the updates notification in the WordPress admin panel header.

2 Click the check box next to Headway Base in the list of themes.

3 Click the Update Themes button.

Note: To have access to Headway updates through WordPress, you need to add your license key in the WordPress admin panel.

Reinstalling HeadwayIf any theme files go missing from the Headway theme folder on your server, you will need to reinstall the theme.

Important: Reinstalling Headway will not change your content, blocks, design, or any other customizations.

1 Optional, but recommended. Before reinstalling, run a full site backup (BackupBuddy is recommended).

2 In the WordPress admin panel, click Themes in the Appearance menu.

3 Click Activate on a theme other than Headway, such as one of the default WordPress themes.

4 Click Theme Details on the Headway Base theme.

8

New Member’s Guide Installing and Updating the Headway Theme

5 Click Delete. This removes the Headway files from your wp-content/themes folder. Your content, customizations, and blocks remain intact.

6 Download the latest Headway .zip file from the Headway Members’ Dashboard.

7 Install Headway.

8 Activate the Headway Base theme.

9

Laying the Groundwork in WordPress New Member’s Guide

Laying the Groundwork in WordPress

Building your website using the Visual Editor will work better if you have some content in place already. A new WordPress installation has a dummy post and comment and a sample page.

This section briefly covers how to add a category, a post, a page, and a static homepage. It also discusses using a theme testing plugin in case you are redesigning an existing website rather than a new one—even if you’re a WordPress veteran, you may want to see that section on p. 14.

The instructions in this chapter assume you are logged in to your WordPress admin panel.

At this early stage, if your site is new, you can add placeholder content now and replace it with the real stuff later.

Note: Adding a navigation menu and widgets is done in WordPress, but they’re covered in Chapter 4.

Adding a CategoryAdd categories first so that as you create posts, you have categories to assign them to.

1 Click Categories in the Posts menu.

2 Type the display name for the category in the Name field.

3 If you want to specify a URL-friendly version of the name, type it in the Slug field. If you leave this field blank, WordPress will create the slug for you, and it will be the same as the name, only all lowercase with hyphens replacing spaces and special characters.

4 For additional categories you create, you can specify an existing category as the parent category. Also, if desired, add a description.

5 Click the Add New Category button. Your category is added to the list.

CHAPTER

3

Fall Guys ExampleThe Fall Guys website will have the following post categories:

● News and Events

● Stories (telling about mishaps with gravity)

● Safeguards (ways readers can protect themselves)

● Science (for helping readers learn about the science behind gravity)

10

New Member’s Guide Laying the Groundwork in WordPress

6 Repeat steps 2–5 for additional categories.

1

2

3

4

5

Adding a Post1 Click Add New in the Posts menu.

2 Type a title and some placeholder text in the boxes provided.

3 Select one or more categories for the post in the Categories meta box.

4 Type one or more tags in the Tags meta box, and then press the Enter key or click the Add button.

5 Click the Publish button.

6 Repeat steps 2–5 for additional test posts. It’s recommended you add enough posts to use all of your categories. Having multiple posts with categories will allow you to test the Blog Index layout and the Archive ► Category layout.

11


1

2

3

4

5

Adding a PageThe WordPress page editor is much like the post editor.

1 Click Add New in the Pages menu.

2 Type a title and some placeholder text in the boxes provided.

3 For later pages: if your site organization calls for it, select a parent page in the Page Attributes meta box.


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. Having all pages in place, at least the ones that will appear as items in your

Fall Guys ExampleThe Fall Guys website will have the following pages:

● Home

● Blog

● Our Mission

● Our People

● Support Us

● Calendar

● Contact Us

12


navigation menus, will help you make sure your menus turn out the way you want. Again, don’t worry about having finalized content at this point.

Adding a Static HomepageWordPress was created as a blogging platform, and by default, the blog occupies the homepage when you install WordPress in the root directory of www on your server’s file system. For many businesses, however, a blog is a secondary part of their website, not the focus, so for them, the blog shouldn’t be what greets visitors when they arrive at the homepage. Even if you’re not running a business, you may have reasons for not having your blog as the main feature.

Important: If you’re new to WordPress, you may have seen instructions in the codex about placing the blog on a secondary page by installing WordPress in a subdirectory. We recommend you not do it that way. If you do, only the part of your website in the subdirectory can be customized using Headway.

When you have a static homepage, Headway adds the Front Page layout to the Visual Editor for customization.

Follow these steps to add a static homepage.


2 Title the page “Home,” “Welcome,” or whatever you want to call your homepage. Add placeholder content if you want.


13



5 Title this page “Blog,” “News,” or something else for the place where your posts will show up. Don’t add content to this one—WordPress will use this page to display the latest posts. Whatever page you select here becomes the Blog Index layout in the Visual Editor.


7 Click Reading in the Settings menu, and select the A static page button.

8 Use the dropdown boxes to select the front page and the blog page you just created.

9 Click the Save Changes button.

Fall Guys ExampleThe Fall Guys website will have a “Blog” page separate from the homepage. This allows them to have a homepage where they can summarize their goals, highlight important information from other pages, and encourage people to get involved. The blog provides up-to-date information, but Dave Tripp doesn’t want it to dominate the homepage.

14


Using a Theme Test PluginIf you’re redesigning an existing site with Headway, you probably don’t want to cause problems for your visitors by turning your site into a construction zone. To avoid this, use a theme test plugin such as Theme Test Drive.

With this kind of plugin, you can activate Headway in the background using the plugin so you can access the Visual Editor while your existing site remains untouched. When the construction of your new design is complete, you can disable the plugin and activate the Headway Base theme in quick succession, making the transition for your visitors as smooth as possible.

Here are the steps you would follow if you choose Theme Test Drive:

1 In the WordPress admin panel, install Headway, but don’t activate it.

2 Install Theme Test Drive.

3 Click Theme Test Drive in the Appearance menu.

4 Select Headway Base, and then click Enable.

5 Develop your Headway site using the Visual Editor (covered in chapters 4–6).

6 When your new design is ready to go live, disable Theme Test Drive, and then activate the Headway theme.

Before You Go Any FartherIf you’re intending to use an existing design—specifically a Headway template you’ve seen in your member dashboard or on a third-party developer’s site—instead of starting from scratch, read the introduction to “Using Headway Templates” on p. 65, and then go to “Importing a Headway Template” on p. 66. Follow those instructions to import and activate a Headway template.

Then come back to Chapter 4 to learn about how to make changes to the Headway template you imported.

15

Creating a Layout New Member’s Guide

Creating a Layout

Customizing your website in the Headway Visual Editor happens in layouts. A layout is a type of page, or even a specific page or post, from your website, with different types of content arranged the way you choose.

To create layouts, use Grid Mode in the Visual Editor. Grid Mode provides a basic representation of your site so you can focus on the arrangement of its parts and configuring its functionality. Font families, colors, and so on are the domain of Design Mode (addressed in Chapter 6).

Note: A layout must be customized in Grid Mode in order to be customizable in Design Mode.

As you create your layouts, don’t try configuring the grid and arranging blocks in the exact places where you want them to appear on your live website. Wrappers need to be stacked in the right order, and blocks should be in the general place you want them and line up with each other (see “Lining Blocks Up” on p. 27). But you can tweak their exact placement when you get to Design Mode.

With a new website, you’ll want to start with the Blog Index layout (or with the Front Page layout if you set up a static homepage as described in Chapter 3). When you first install Headway, the Blog Index layout uses a simple preset, and Front Page isn’t customized at all—it has no blocks and no settings of its own.

Opening Grid Mode1 Log in to your WordPress admin panel.

2 In the Headway menu, click Visual Editor. Alternatively, if you want to work in WordPress and the Visual Editor simultaneously, right-click Visual Editor, and click the option to open the link in a new tab in your browser.

The first time you open Grid Mode, you’re greeted with a tour that explains the basics of Grid Mode’s panels. 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 customizing layouts.

When you’re in Design Mode, switch to Grid Mode anytime by clicking the Design Mode icon in the menu bar (but be sure to save your changes before you switch if you want to keep them).

CHAPTER

4

16

New Member’s Guide Creating a Layout

The following illustration shows Grid Mode’s basic parts:

Menu bar Modes (Grid and Design)

Grid orviewport

Optionspanel

Tools Admin

Menus

Snapshots SaveView Site

See savedchanges live

Layoutselector

Currently Editing: Blog Index

Selecting a Preset or Starting from ScratchWhen you open any previously uncustomized layout, the Grid Wizard opens. One of the options is to use a preset, which is a basic arrangement like those provided by many other themes. Using a preset may help you get started by adding the essentials but leaving you to further customize the layout.

Warning: Applying a preset replaces any wrappers and blocks you have already placed on the grid.

If you want to start from scratch, click Use Empty Grid in the Grid Wizard.

To use a preset:

1 When the Grid Wizard opens, click the Presets tab.

2 Click the image representing the layout you would like to start with.

3 Click the Next button.

4 With your first layout, you’re not mirroring any blocks, so leave all the fields set to Do Not Mirror, and click the Finish button.

17


The other options in the Grid Wizard will be discussed at the end of this chapter and in Chapter 5. Block mirroring is also covered in Chapter 5.

Saving Your WorkThe Save button in the upper-right corner of the Visual Editor appears when you make a change that needs to be saved. Click the button to make your changes live.

To get immediate feedback about your changes in Grid Mode, click View Site.

These instructions will usually not include the save and view steps because you can perform multiple actions without saving. But be sure to not go a long time without saving, just in case.

To discard changes since your last save, select a different layout, and then click OK when asked if you want to switch layouts without saving.

Note: Clicking the Save button updates your live website (unless you’re using a theme testing plugin). Once you have saved your changes, there is no way to revert your layout to the last time you saved. See Chapter 10 for instructions on removing customizations.

Using SnapshotsBeing new to Headway, you may want to take advantage of snapshots. A snapshot is the state of your layout and design settings at a specific point in time. Taking a snapshot saves your current settings without doing an explicit save (as opposed to clicking the Save button).

To create a snapshot, click Snapshots in the Visual Editor menu bar, and then click the Save Snapshot button.

To restore your site to a snapshot, click the Rollback button next to the date and time of the snapshot you want to return to. Note that if you roll back to an earlier snapshot, you can later “roll forward” to any snapshot that’s later than the one you’re using.

The snapshot function is pretty simple, just snapshots with dates and times. If you’re going to be doing a lot of snapshots to be safe, you may want to keep notes somewhere of what’s significant about each one so you later know which to roll back to if you get in a pinch.

Some Terms to KnowAs you begin working in Grid Mode, you’ll need to understand these concepts.

Layout Selector

The dropdown in the menu bar of the Visual Editor, used to choose which layout or template you want to edit.

Options Panel

The panel that spans the bottom of Grid Mode. The options panel contains general settings and configuration for wrappers and blocks.

Layout Inheritance

Unless customized, a layout inherits settings from its parent layout. For more on layout inheritance, see Chapter 5.

18


Mobile Responsiveness SettingsMany websites are designed with desktop viewing in mind. Depending on your audience, your website will probably have mobile visitors, so it’s a good idea to make it responsive. When you enable the responsive grid, Headway will create the mobile experience for you, such as by stacking blocks vertically.

1 Click the Setup tab in the options panel if it’s not already selected.

2 Click the Responsive Grid subtab.

3 Click the Enable Responsive Grid check mark.

4 If you will have videos on your site and want them to resize for mobile devices, click the Responsive Video Resizing check mark.

5 Click the Save button.

A few of the block types have additional options for responsiveness to give you further control over the experience mobile visitors have on your site.

Selecting a Layout to CustomizeThe dropdown panel in the Visual Editor’s menu bar is called the layout selector. In Grid Mode, it lists all of the layouts that are possible for you to customize. On your first visit to the Visual Editor, Blog Index is selected by default, unless you have created a static homepage.

To select a layout, click the layout selector to open it. Then mouse over the layout and click the Edit button (see the image at right). The grid, which is the main viewport or window in the Visual Editor, loads the layout you selected.

Clicking the Single and Archive layouts expands them to show their child layouts. You can customize either of these layouts or their children.

WrappersA wrapper is a major section of your layout that will contain blocks. Wrappers determine the size of the grid and therefore the space available for blocks. They also determine the fluidity of your layouts—whether the width changes or stays fixed as site visitors resize their browser windows. Wrappers are arranged in a stack, so they can’t be embedded within

19


each other or arranged side by side.

If you start with an empty grid or a preset, you will see a single wrapper in the grid. You can add more if you like.

Types of Wrappers ● Fluid wrapper with fixed-width grid:

This wrapper’s width is 100% of the browser window. Columns and gutters have static widths and have auto left and right margins to keep elements centered inside the wrapper. This allows you to have a background image or color that runs the width of the webpage and also keep the content centered in the page as the browser’s width changes.

● Fluid wrapper with fluid-width grid: This wrapper’s width is 100% of the browser window. Columns and gutters run across the entire wrapper and change width as the wrapper’s width changes. Because blocks occupy a set number of columns and the columns are fluid, blocks maintain a corresponding percentage of the available space as the browser’s width changes.

Use this type of wrapper if you want the sizes of the blocks in the wrapper to change as the browser’s width changes.

● Fixed wrapper: This wrapper’s width is the total of the column and gutter widths, and it is centered in the webpage due to auto left and right margins. This is the wrapper used in versions of Headway prior to 3.5. Most WordPress themes use a fixed width.

Use this type of wrapper if you want your site’s appearance to stay the same when the width of the viewer’s browser changes (on a computer). In other words, your blocks won’t change size depending on the available space. However, if you have the responsive grid switched on, blocks will still change size based on available space when your site is viewed on a mobile device.

Opening a Wrapper’s Menu and OptionsAs you mouse over a wrapper, a set of buttons appears to the right. Do one of the following to open the wrapper menu:

Some Terms to KnowAs you begin working in Grid Mode, you’ll need to understand these concepts.

Grid, Columns, Gutters

The grid is the main area in Grid Mode where you build and customize the layout you have selected.

One of the first things you notice about the grid may be the vertical gray and white stripes inside the wrapper (the large white area). The gray stripes are columns, and the white spaces between them are gutters. Columns define the space available for blocks. Gutters create space between blocks arranged next to each other. Blocks span both columns and gutters.

The purpose of columns is to help you line up blocks and control their size and placement within wrappers.

For more about wrappers and blocks, see “Using Wrappers” and “Using Blocks” in this chapter.

20


● Right-click the cog button in the set of buttons.

● Right-click anywhere in the wrapper that is not occupied by a block.

Do one of the following to open the wrapper’s options in the options panel:

● Click the cog button in the set of buttons to the right of the wrapper.

● Click Open Block Options in the wrapper menu.

Changing a Wrapper’s FluidityThe default wrapper for layouts where you start with an empty grid is a fixed-width wrapper. This may not suit your needs, or, after adding another wrapper, you may decide to change its fluidity.

Fall Guys ExampleDave Tripp wants the Fall Guys site to have a header with a background that runs all the way across the page, but the header content stays in place over the page content. He also wants the rest of the page to be a fixed width and centered. This design requires two wrappers: one fluid-width wrapper with a fixed grid, and one with a fixed width. To save space, Dave wants the navigation and search field in the header.

The homepage will have a slider highlighting content from other parts of the site. It will also have a chunk of static text introducing visitors to the problem that gravity presents and the purpose of the Fall Guys organization. The homepage will also have a set of widgets and a footer.

Kim Tumble starts with the Front Page layout. Here’s her sketch of the layout and an illustration of the design as it would be represented in Grid Mode, with two wrappers and various blocks:

LOGONAVIGATION

SLIDER

WIDGET

INTROTEXT

FOOTER

WIDGETWIDGET

WIDGET

SEARCH

FLUID-WIDTH WRAPPER WITH FIXED GRID

FIXED WRAPPER

HEADERNAVIGATION

CONTENT

WIDGETAREA

WIDGET AREA

FOOTER

SLIDER

WIDGET AREA

21


1 Right-click the cog button to the right of the wrapper you want to change.

2 Click one of the Change options. The following image shows the change options that appear for a fluid wrapper with a fixed-width grid.

3 If needed, change margin, column, and gutter settings (see “Setting a Wrapper’s Margins” and “Setting Other Wrapper Options” in this section).


Setting a Wrapper’s MarginsLeft and right margins are set when you select a type of wrapper, but you can set the top and bottom margins a couple of different ways. Each method updates the margin property for that instance of the wrapper in Design Mode (Chapter 6 explains instances in detail).

Method 1: In the Grid

In the set of buttons to the right of the wrapper, click and drag the upper arrow to adjust the top margin, and click and drag the lower arrow for the bottom margin.

Method 2: In the Options Panel

1 Click the cog button to open the wrapper’s options.

2 In the options panel, with the Grid & Margins subtab selected, change the Top Margin and Bottom Margin values.

Adjust top margin

Adjust bottom margin

22


Note: Negative margins can’t be set using these methods. To offset the edge of a wrapper from its original position, use the Nudging property group in Design Mode. See “Moving or Overlapping Wrappers and Blocks” on p. 61 for instructions.

Setting Other Wrapper OptionsTo open a wrapper’s options, click the cog button to the right of the wrapper. The options appear in the options panel. We’ll focus on the grid settings at this point. The wrapper must be empty in order for you to change these settings.

● Columns: Recommended values are 9, 12, 16, and 24 (the default). These values can help you divide your design evenly into halves, thirds, or fourths, but use what you find works best for you. The more columns you have, the more flexibility you have with the width of your blocks. Click and drag the slider button to set this value.

● Use Independent Grid: If you want to set the column and gutter widths to be different than the default, click this check mark. (See “Setting Wrapper Grid Defaults” on the next page for instructions about changing the defaults.)

● Column Width: Set the width of columns, which determines the intervals for block sizing. A block’s width is determined by the number of columns and gutters it spans.

● Gutter Width: Set the amount of space between columns, which determines how close together you can place blocks within the wrapper.

● Grid Width: Because the total grid width is a combination of all column and gutter widths, you can’t change this value directly.

● Wrapper Alias: Though this isn’t a grid setting, it can be helpful to set an alias, or name, for the wrapper. To do so, click the Mirroring & Config subtab. The alias appears in places such as the Mirror Blocks From Another Wrapper dropdown instead of just the ID Headway assigned when you created the wrapper. The ID probably won’t mean much to you, so it’s recommended you give each wrapper an alias.

When to Use Multiple WrappersMuch of the time, using a single wrapper in a layout will get you what you need in terms of your website’s visual width, the grouping of blocks, and any background images you want to appear.

However, because each wrapper can be fluid or fixed, you would use multiple wrappers if part of your page needs to have a fluid width and another needs a fixed width (see the Fall Guys example on p. 20). Another example: say you want both your header and footer to appear to span the width of the entire page, but you want the content in between to be fixed in the center. In this case, you would add three wrappers:

1 A fluid wrapper with just the header block

2 A fixed wrapper with the content block and other blocks as desired

3 A fluid wrapper with just the footer block

23


A second reason to use multiple wrappers is to set differing visual styles for major sections of your webpages. For example, if you wanted the upper section of your page below the header to have a white background, but the lower section should have a tan background, using a wrapper for each section is the quickest way to accomplish this.

Setting Wrapper Grid DefaultsA new Headway installation has a set of default values for columns and gutters. If you expect to be adding multiple wrappers with the same grid settings, it will save you time to set the defaults to the values you want before you start adding wrappers.

1 Click the Setup tab in the options panel.

2 With the Grid subtab selected, use the sliders to set values for Default Column Count, Global Column Width, and Global Gutter Width.


Note: Changing the grid defaults doesn’t affect existing wrappers, even if they are using the defaults. The defaults are applied only when you create a new wrapper.

Remember, the defaults can be overridden for any specific wrapper by toggling on Use Independent Grid in the options panel.

Adding a WrapperButtons for adding wrappers are located above and below the grid (you may need to scroll to see the button at the bottom). Clicking the button adds a fixed-width wrapper.

See “Types of Wrappers” on p. 19 for information about when to change the new wrapper to a different type. “Changing a Wrapper’s Fluidity” on p. 20 describes what to do if you want a different type.

When you add a wrapper, it appears at the top of the grid if you use the options at the top. The new wrapper appears at the bottom if you use the options at the bottom.

Fall Guys ExampleThe default wrapper for a new layout has a fixed-width grid, and that’s one of the types of wrapper Kim Tumble needs. She sets grid defaults of 12 columns because the layout will need to be split evenly into halves and possibly into thirds.

She adds a wrapper above the existing one and changes it to a fluid wrapper with fixed-width grid.

24


After you have added the wrapper, you may want to change its settings. See “Setting a Wrapper’s Margins” and “Setting Other Wrapper Options” earlier in this section.

Resizing a WrapperTo resize a wrapper, click and drag its bottom edge up or down.

A wrapper’s height on the grid isn’t its actual height—on your live site, the wrapper will resize automatically to fit the content inside it. The main reason to resize a wrapper is to make it large enough in Grid Mode to accommodate the blocks you want to put in it.

Changing the Order of Wrappers1 Click the handle button to the right of the wrapper you want to move.

2 While pressing the left mouse button, drag the wrapper up or down until it appears where you want it in relation to other wrappers. As you begin dragging the wrapper, large wrappers collapse so you can see the structure of the layout.

{Collapsedwrapper

Wrapper can bedragged to one

of these positions

3 Release the mouse button.


25


Deleting a Wrapper1 If the wrapper you’ll be

deleting contains any blocks you want to keep, click and drag the blocks into a different wrapper.

2 Right-click the cog button to the right of the

wrapper you want to delete.

3 Click Delete Wrapper.

4 Click OK to confirm.

Note: Deleting a wrapper also deletes any blocks inside it.

BlocksA block is a section of your layout with a particular purpose and function. In Grid Mode, blocks have a dashed border. As you mouse over a block, its edges glow, and a tooltip appears, displaying basic information about the block (see the illustration of a widget area block at right).

Blocks can’t overlap each other in Grid Mode.

Adding a Block and Choosing Its Type1 Click inside a wrapper, and while pressing the mouse

button, drag down and to the right.

2 When the block is about the size you want, release the mouse button.

3 In the options panel, click the block type for this block. If you don’t complete this step, the block will disappear.

Headway Base comes with 13 block types, and any others you’ve downloaded and installed (as a plugin) from Headway Extend appear as available block types here, too.

26


Note: You don’t need to try drawing blocks at the height you want them to appear on your live site. The height you draw will be a minimum height, but the block will expand vertically on the live site to fit the content inside it.

Resizing a BlockClick and drag the edge of the block to the position where you want it.

Moving BlocksBlocks can be moved one at a time, or multiple blocks can be moved simultaneously.

One Block

Click anywhere inside the block and drag it to the new position.

Multiple Blocks

1 Enter mass block selection mode by double-clicking a block. A notification appears near the upper-right corner of the screen while you’re in this mode.

2 Double-click each additional block you want to select. (To deselect a selected block, double-click it again.)

3 Click and drag one of the blocks to move all selected blocks.

4 Click the X in the selection mode notification, or press the Esc key, to return to normal mode.

Click to close mass block selection mode

Selected blocks(double-click todeselect)

Double-click ablock to select it

Click

Drag

Drawing Blocks on the Grid

27


Lining Blocks UpAs you’re adding and arranging blocks in your layout, be aware that if they’re not lined up properly, they may not appear where you expect on your live website.

As discussed at the beginning of this chapter, Grid Mode is a layout mode, so it’s not designed for pixel-perfect placement of all your elements. It’s designed to give you a simple interface that allows you to place the various bits and pieces of your website onto a drawing canvas. In translating that information to a website, Headway will fit the blocks together. Headway tries to logically arrange your blocks into columns and rows (see the illustration at right).

Important: The term column used in this sense reflects the code Headway generates for your live site, not the columns (and gutters) displayed in wrappers in Grid Mode.

Sometimes, odd block placement can have unexpected results. So keep in mind:

● If you’re going for three columns in your layout, line up the top edge of the top blocks in each column. This is typically good design sense anyway, but if you don’t follow this guideline, you may find that one of your columns or blocks drops out of place, as shown here:

© 2013 Crazy Blue Tiger

CRAZY BLUE TIGER

1 2 3

1

2

3

4Offset blocks

Offset blocks

● If you’re going for a multiple-column layout in which one or more of the columns is made up of multiple stacked blocks, don’t put a lot of space in between the blocks that are stacked on top of each other (see the right column in the Fall Guys example on p. 35). The blocks will fit themselves together in the browser. Putting a bunch of space between two vertical blocks is a signal to Headway that you’re trying to start a new row—and your second block on the left will get pushed out of place and below everything else.

If you want to purposely offset blocks from each other, use padding or nudging. See “Moving or Overlapping Wrappers and Blocks” on p. 61.)

COLUMNS

RO

WS

1 2 3

1

2

3

28


● If you need blocks grouped a certain way, you may want to try using multiple wrappers rather than leaving it up to Headway to try to interpret how you want the blocks to line up.

Changing a Block’s Type1 Right-click the block.

2 Click Switch Block Type.

3 Click the new type in the options panel.

4 Click OK to confirm the switch.

Tip: If you will want to use the block’s settings later in this or another layout, you can save time by exporting the block settings and importing them when you need them. See “Block Settings” on p. 48.

Deleting a Block1 Right-click the block.

2 Click Delete Block.

Setting Block OptionsEach block has a type that determines the content it displays and the options that are available to you. When you create a block, assign it a type in the options panel before doing anything else (or the block disappears because it doesn’t know what to do with itself). The block’s options then appear there.

To open the options later, right-click a block, and click Open Block Options. The options panel contains a set of subtabs along the left side for accessing the various categories of options.

Note: The Config and Import/Export subtabs are included in each block’s options. See “Config Options” at the end of this subsection for information about that set of options. Importing and exporting is discussed in Chapter 5.

Some block types have somewhat extensive options, so it’s a good idea to look through the options of each one to see what you can do with them. This section explains some of the ways to configure the main blocks that are included in the basic installation of Headway Base, but it’s not exhaustive. These instructions also assume you have the block’s options open in the options panel.

Additional blocks are available through Headway Extend. Some information about official Headway Extend blocks is found in Chapter 8.

29


Header

● Replacing the Title and Tagline with an Image: With the General subtab selected, follow these steps:

1 Click the Choose Image button for the Header Image option. Then do one of the following:

■ Under the From Computer tab, upload an image from a local drive.

■ Under the From URL tab, type or paste the URL of an image.

■ Under the Media Library tab, click Show next to an image you have already uploaded.

2 Click the Use Image button.

● Displaying the Image at Full Size: Toggle off the Automatically Resize Header Image option. Then, on the grid, adjust the size of the header block to show as much of the image as you want.

● Hiding the Site Tagline: Click the Hide Tagline check mark. It’s not necessary to use this option if you have replaced the title and tagline with an image.

Note: You specify the tagline in the WordPress admin panel. Go to Settings ► General. The default tagline is “Just another WordPress blog,” so you should definitely change it.

Headway uses the tagline for search engine optimization. You can hide it from the header block, and it will still show up in the site’s <title> tag—unless you edit your SEO template settings and remove it (Chapter 7).

Navigation

● Adding a Search Field to the Block (applicable to horizontal navigation only): Click the Search subtab, and follow these steps:

1 Click the Enable Navigation Search check mark to add a search field to the block.

2 Select the horizontal placement of the field in the Search Position box.

3 Type search prompt text in the Search Placeholder field.

● Configuring the Home Link: By default, Headway includes a “Home” item in the navigation. To hide this link or change the text, click the Home Link subtab.

Fall Guys ExampleThe Fall Guys organization has a logo that will be in the header. Katie Tumble adds the logo, replacing the title and tagline.

Later, when she gets to the point of defining styles in Design Mode, she’ll also add a background image to the wrapper that contains the header block.

Fall Guys ExampleKatie Tumble leaves the search field and the home link switched off for the navigation. Instead, for the search field, she’ll use the Search widget in a widget area block.

The navigation block’s orientation is horizontal and is right aligned. At this point, the site is small enough that no submenus are needed.

30


■ To remove the link, click the Hide Home Link check mark.

■ To change the text of the link, type the new text in the Home Link Text field. For example, you may want to call the page “Welcome” or have it reflect a call to action encouraged on that page.

● Aligning the Navigation Menu and Items: By default, menus are oriented horizontally as a navigation bar with the overall menu aligned left. To change either of these settings, click the Orientation subtab.

■ To orient the menu vertically as a navigation column, click the Vertical Navigation check mark.

■ To change the alignment of the menu items, click the Alignment box, and choose Left, Right, or Center.

In horizontal navigation, the text is centered within the menu items. The alignment determines where the menu as a whole is aligned within the navigation block. In vertical navigation, the menu items are as wide as the block. The alignment determines how the text is oriented inside the menu item.

● Configuring Dropdowns (Submenus): By default, submenus don’t appear with any animation effect, and it takes a hover of more than an instant to show the submenu (the “hover intent”). To change these settings, click the Dropdowns subtab.

■ If you want child menu items to appear and disappear with a fade or slide effect, select your preference in the Drop Down Effect box.

■ The Hover Intent option being selected prevents dropdowns from being a distraction when the site visitor doesn’t mean to be using the menu and happens to mouse over the menu. If you want dropdowns to always appear if the parent item is moused over, clear the check mark.

● Making the Menu Mobile-Friendly: If you have enabled the Responsiveness Grid feature under Setup in the options panel, you can also switch on the Responsive Select option next to the Responsiveness subtab. This feature converts menus to a more mobile-friendly list for smartphones (but not tablets).

● Adding Links to the Navigation Menu: See “Creating a Navigation Menu” on p. 35 to set up your menu items and any submenus. Until you create a menu and associate it with the block, a set of placeholder links appears in Grid Mode.

Content

● Using a Custom Query for Displaying Content: If you leave a content block with the default setting for the Mode subtab, the block will display whatever WordPress tells it to. For Blog Index, the default is to display a certain number of the most recent posts as defined in the WordPress admin panel under Settings » Reading. For page layouts (including Front Page), the default setting is to display the page content.

Most of the time this is what you’d want. However, with Headway’s flexibility, it’s possible to put multiple content blocks in the same layout, each with a different query. Follow these steps to change the query used in a content block:

31


1 Click the Mode subtab, and then change the Query Mode option to Custom Query.

2 Click the Query Filters subtab (which appears only when Custom Query is selected).

3 Set the options that will result in the content you want. Some items to be aware of:

■ If you select a page for the Fetch Page Content option, all of the other options are ignored because they have to do with displaying posts.

■ The default categories mode is to include categories—all of them, or specific categories you select using the Categories option. To do the reverse and filter out particular categories, change Category Mode to Exclude.

■ Selecting multiple post types will result in their being intermixed on the live webpage.

■ Selecting Random for the Order By option shuffles the content every time the corresponding webpage is loaded.

■ You could display the most popular posts based on number of comments by ordering the query results by comment count.

Note: If you want a more customized query than what these options offer, you will need to build the query in PHP and put it in a custom code block instead of using a content block.

ExamplesHere are a few ideas for using custom queries.

Random Post from the Archives

Instead of displaying the page’s content, you would set the content block to custom query mode. Then you would set the number of posts to 1 and Order By to Random.

Random Post from a Specific Author

If each contributing author has a bio page, you could add a content block with this same type of custom query as a random post from the archives. The only difference is that you’d want to include posts from only the author whose bio page is being displayed.

Newspaper or Magazine Layout

If you are building a newspaper or magainze type of layout, you could have multiple content blocks on the homepage. Each could display the most recent one or two articles (posts) from a specific category.

● Configuring Post Navigation and Other Display Options: Click the Display subtab to view and change options for posts, such as what the “Read More” link and previous and next link text is. Help icons are available for all of the options here in case you have questions. Mouse over a help icon to view the item’s help box.

32


Display options include a set of “column layout” options for showing post excerpts (and featured images) side by side instead of in a single column running down the page.

Important: If you use the column layout options, set the Featured Posts option to 0. The column layout is designed for excerpts, not full posts.

● Configuring the Appearance of Post Meta Data: The meta data is the information about a blog post that appears with the post—the author’s name, when it was published, and how many comments have been left. To change where and how this information is presented, click the Meta subtab.

● Configuring Comment Form Text: To change the text for the comments area heading and reply form, click the Comments subtab.

● Configuring Featured Images: A featured image is a graphic or photo that is specific to a post or page and is displayed near the top. You add such an image using the Featured Image meta box in the WordPress post or page editor. If you include a featured image, you can also set its position using the post or page editor in WordPress.

Click the Featured Images subtab for a content block to edit settings that apply to all content in this block, including overrides of post- or page-specific featured image settings. For example, you can switch off featured images completely, even if some posts have them, or override their positions so they all appear in the same place relative to the post content.

To change the sizing of featured images, use these options:

■ Featured Image Size. Applicable when the image position is left or right. The thumbnail’s width and height are set to the number of pixels selected with the slider.

■ Featured Image Height Ratio. Applicable when the image position is above the title or above the body. The slider sets the image’s height as a percentage of the block’s width. If the block is 600px wide and the ratio is 75%, the image will have a height of 450px when viewed on the site.

■ Crop Featured Images. Applicable when the image position is above the title or above the content. Cropping images may avoid adding a lot of scrolling to the entry. When cropping is on, the image width is set to the width of the block to create something of a banner.

Footer

Edit the following settings with the Content subtab selected.

● Hiding Default Text: The default footer displays a login link, a “Go to Top” link, a Headway theme attribution, and a copyright statement. Click the check mark for any one of these items to hide it.

● Changing the Copyright Statement: The copyright statement can be changed to anything at all—it doesn’t even have to be a copyright statement (though they’re standard for websites). Type whatever you want the text to be in the Custom Copyright field.

33


Breadcrumbs

Click the General subtab to edit options for the breadcrumbs’ appearance. If desired, add a prefix, and specify the text and separator.

Widget Area

A widget area block, also called a sidebar in theme terms, is a container for WordPress widgets. If you have researched other themes, you have probably seen the phrase “widget-ready theme.” Having at least one widget area block in a layout makes your website widget ready. See “Adding Widgets to a Widget Area Block” on p. 36 for instructions on adding content to this type of block.

Though widgets are typically considered to be in sidebars, they can also be oriented horizontally, such as for a widgetized footer. To arrange widgets horizontally, click the Widget Layout subtab, and then click Horizontal Widgets.

Custom Code

This block supports custom HTML, JavaScript, PHP, WordPress shortcodes, and plain text (though there’s a text block for that). With the Content subtab selected, click the Content pencil icon, and then type or copy and paste your code.

Text

The text block is for small amounts of static text, such as an author bio or short “about us” blurb. With the Content subtab selected, click the Content pencil icon, and then type or copy and paste your text. Some formatting options are available above the text area.

You can also put HTML in a text block. Click the </> (source) button in the formatting options, and then type or copy and paste your HTML.

If you plan to have the text stay the same over a long time or show up in different places around your site, or you need to input your own HTML, use the text block. But if you will be regularly changing simple text and it will show up in only one place, it’s better to use a widget area block with the WordPress text widget because it’s quicker to update the text in WordPress.

Embed

Embed a video or image in your layout from a URL (typically a video or photo sharing site). With the Embed Options subtab selected, type or copy and paste the URL in the Embed URL field. A site has to be whitelisted (allowed) for the WordPress oEmbed function for the content to show up in the block. For example, linking to an image that’s on your friend’s blog won’t work unless you whitelist that site.

Fall Guys ExampleKim Tumble uses three widget area blocks for the Fall Guys homepage:

● In the top wrapper for the search field widget

● Beneath the slider for a list of recent blog posts

● Above the footer for a row of widgets (the block orientation is horizontal)

34


For a complete list of whitelisted sites and instructions for whitelisting other sites, see http://codex.wordpress.org/Embeds.

Slider

A slider rotates through a set of images. Typically displayed on the home page, a slider draws attention to specific pages or posts (or even other websites if you wish) and gives the visitor the opportunity to click through to the featured content.

● Adding Images to the Slider:

1 With the Slider Images subtab selected, click the Choose Image button. Then do one of the following:

■ Under the From Computer tab, upload an image from a local drive.

■ Under the From URL tab, type or paste the URL of an image.

■ Under the Media Library tab, click Show next to an image you have already uploaded.

2 Click the Use Image button (you may need to scroll to locate the button).

3 In the Hyperlink field, type or copy and paste the webpage where you want visitors to go when they click the image.

4 Type a short description or teaser in the Caption field.

5 For each additional slide, click the plus icon, and repeat steps 1–4.

6 If desired, click the Randomize Image Order and Crop and Resize Images check marks.

● Changing the Slider Animation:

1 With the Animation subtab selected, click the Animation box, and select Slide Horizontal, Slide Vertical, or Fade.

2 Move the Animation Speed slider to the desired value in milliseconds (for example, if you want the animation to take 1 second, change the value to 1000 ms).

3 If you don’t want the slider to advance through the images automatically, toggle off the Automatic Slide Advancement option.

4 Move the Time Between Slides slider to the value for the length of time you want each image to appear. (This value includes the animation speed setting.)

Fall Guys ExampleThe slider on the Fall Guys homepage has three slides that link to these pages:

● The “Our Purpose” page, which states their mission and encourages people to join or donate

● The “Our People” page

● A recent blog post of Dave Tripp’s choice, changed on a weekly basis

35


● Removing Slide Navigation: The default slider has previous and next arrows and a bullet for each slide so visitors can browse through the slides. To remove the navigation, click the User Interface subtab, and then toggle off Show Pager Navigation and Show Next/Previous Arrows.

Config Options

All blocks have a “Config” subtab in the options panel. Blocks share the following options:

● Mirror Block. For information about mirroring blocks, see “Mirroring” on p. 41 (in Chapter 5).

● Block Alias. Each block can have an alias, a short and descriptive name. If you enter an alias, it’s displayed in various WordPress and Visual Editor options instead of the ID that Headway assigned when you created the block. This gives you the opportunity to name the block something meaningful to you so you’re not later asking yourself, “Which navigation block is the one I want to select, #3 or #5?” For this reason, it’s recommended you give each block an alias.

● Responsive Grid Block Hiding. If you want this block to not display on certain devices and orientations, click the pencil icon, and select the devices and orientations. An example of when you might use this is if you have a sidebar to the left of your content when viewed on a computer. Since using the responsive grid makes blocks stack vertically on mobile devices, the main content will be pushed down. It’s not really a good idea to make visitors scroll on their smartphones to get to the content, so you could switch block hiding on for that left widget area block.

● Custom CSS Class(es). If you’re somewhat advanced at using CSS and want to assign your own classes to the block, type them here with no punctuation and separated with a space. Use the Live CSS Editor to define the styles for your custom classes. See “Using the Live CSS Editor” on p. 61 and “Adding Your Own CSS Classes to Blocks and Wrappers” on p. 62.

● Add Custom CSS Class(es) to Row/Column. If you’re advanced at using CSS and have added custom classes to this block, you may want the same classes to be applied to each row or column as well, such as menu items in a navigation block. If so, click this check mark.

● Block Title and Block Subtitle (not applicable to all block types). If you want additional text above your block, such as a title and description, type them in these fields.

Creating a Navigation MenuNow that your layout is put together, it’s a good time to build a navigation menu for the navigation block. When you place a navigation block in Grid Mode, it displays some default links. You’ll want to replace these with your own navigation.

Creating a navigation block creates a “theme location” that can be assigned a menu. Before you assign menus, it’s recommended that you give each navigation block an alias using the options panel.

Follow these steps in your WordPress admin panel.

1 Click Menus in the Appearance menu.

36


2 Type a name for your menu, and then click the Create Menu button.

3 Select pages or categories, or enter custom links, and add them to the menu. For pages, click the check box for each page you want to include, and then click the Add to Menu button.

4 In the Menu Structure section, click and drag menu items to set their order.

5 In the Menu Settings section, select the theme location (layout and navigation block) where this menu should show up.

6 Click the Save Menu button.

1 2

3

4

5

6

Adding Widgets to a Widget Area BlockIf you have at least one widget area block, you’ll need to add one or more widgets to it in the WordPress admin panel so the live site has something to display in the block.

1 Click Widgets in the Appearance menu.

2 If needed, expand the widget area box on the right by clicking its heading.

3 Click and drag a widget from the Available Widgets box to the widget area box.

4 Set your preferred options for the widget.

37


5 Click the Save button, and then click Close to collapse the widget’s options.

6 Repeat steps 3–5 for any additional widgets you want to add to the block.

1 2

3

4

5

Customizing More LayoutsWhen your first layout is done, you may need to customize other layouts in Grid Mode. If you have a static front page and have customized only the Front Page layout, you’ll at least need to also customize the Blog Index layout—or vice versa.

When you click the Edit button in the layout selector for an uncustomized layout, the Grid Wizard opens. While customizing a layout, open the Grid Wizard at any time by clicking Grid Wizard in the Tools menu.

The steps of customizing layouts discussed in this chapter apply to any layout you want to customize. However, Headway provides methods for copying entire layouts or parts of layouts across your website to make building your site easier. These methods are discussed in Chapter 5.

See “Removing Layout Customizations” on p. 79 if you decide to reset a layout to its original state.

Fall Guys ExampleWith Front Page finished up, Kim Tumble moves on to Blog Index. She’ll reuse some of the components of Front Page on Blog Index to save time and make sure there is consistency across the site (see the examples in the next chapter).

38


Fall Guys ExampleKim Tumble is nearly done with the Front Page layout. The illustration below shows how this layout looks in Grid Mode with most of the block options set.

Note: Grid Mode displays the default query for content blocks as the blog loop, no matter the layout being customized. Rest assured that if your layout is for a page, you don’t have to do anything for the page content to work. All this means is that the grid is illustrating that the block will run the default WordPress query for the layout.

39

Reusing a Layout across Your Site New Member’s Guide

CHAPTER

5Reusing a Layout across Your Site

Chapter 4 provided steps for creating a brand new layout in Grid Mode. As you build the rest of your website, you could start from scratch on each layout. However, doing so is not only inefficient, but if you want the layouts to be identical (or nearly so), trying to draw and place each block exactly the same would be a challenge.

Headway provides these methods for reusing customizations:

● Layout inheritance

● Mirroring

● Cloning

● Shared layouts

● Import/export settings

See Chapter 7, “Using Headway Templates” on p. 65 for information about how to reuse your layout and design settings across websites.

Layout InheritanceLayout inheritance refers to the way that your layout customizations flow down through a hierarchy to the individual pages and posts on your website. Customizations to a layout are inherited by any uncustomized child layouts. This inheritance works automatically, and it applies to work done in both Grid Mode and Design Mode.

The Blog Index layout is at the top of the hierarchy. Your arrangement and settings of wrappers and blocks for Blog Index apply to all other layouts, pages, and posts, unless you override that inheritance by customizing layouts beneath it in the hierarchy. You may want to think of it as a cascade, similar to CSS—layout and styles cascading from the top of the hierarchy to the bottom, with the potential to be overridden with more targeted styling.

Exception: If you have a static home page, it is not included in the hierarchy. If you want it to look like Blog Index or another layout, you will need to use one of the other methods described in this chapter to copy that layout.

If you want the same design across your website, customize only the Blog Index layout, and let its customizations apply to your entire site. However, if you want to make a type of webpage on your site have a different layout, even if it’s to add or change only one block, you customize that layout. You can customize layouts down to specific pages and posts.

40

New Member’s Guide Reusing a Layout across Your Site

The following illustration shows how any layout can have customizations that override layout inheritance:

Blog IndexCustomized

Header

Navigation

Widget area

Footer

Content

Archive 404 LayoutSingleCustomized

Text

PageCustomized

Post

Text

Customcode

Layout inheritancein effect

Layout inheritanceoverridden due tocustomizations

The children of Blog Index are Single, Archive, and 404 (“page not found”). In the illustration, both the 404 layout and the Single > Page layout (a child of the Single layout) are customized.

The 404 layout has a text block added where the site administrator will write suggestions for effective searching, and a custom code block for showing a set of posts. The Page layout has a text block added so a particular call to action or sales blurb will appear on all WordPress pages.

Fall Guys ExampleKim Tumble customized the Front Page layout first. Next, she’ll customize Blog Index. At this point, customizations she makes to Blog Index affect every other layout except Front Page.

41


MirroringWith mirroring, you reuse the settings of a block or wrapper from one layout in a corresponding block or wrapper in a second layout. Changes to the settings of the source block or wrapper apply to the second block or wrapper. Only the settings and content of the original wrapper or block are reflected—the second one doesn’t have to be the same size or in the same place as the original.

Custom CSS classes that you added in the source block or wrapper are not mirrored in the second block or wrapper. You can add the same custom CSS classes to the second block or wrapper, however.

Mirroring BlocksMirroring a block is a way to copy the source block’s settings (except those belonging to the Config subtab) to another layout but still allow the block to be moved and resized. Changes to the first block’s options are reflected in the second block.

This method works well when you want two blocks on different layouts to have the same settings but be in different places in the layout. Think of a text block with testimonials that you want in a central place in one layout but in a sidebar in a different layout.

To mirror a block in another layout:

1 In the layout where you want to mirror a block, draw the block and select its block type.

2 Right-click the block, and click Open Block Options.

3 Click the Config subtab in the options panel.

4 Click the Mirror Block box, and select the block to mirror.

Note: If you enable mirroring for a block that already has settings, Headway remembers those settings in case you later switch mirroring off for that block.

Disconnect two blocks by selecting Do Not Mirror in the Mirror Block box. The second block’s previous settings are restored.

Fall Guys ExampleOne of the widget area blocks on the Front Page layout has a list of the most recent posts. It doesn’t make sense to show this on the Blog Index page where excerpts of the most recent posts are displayed.

However, it would make sense to have the Single > Page layout display that list of recent posts. When Kim customizes Single > Page, she’ll mirror that widget area block from Front Page.

42


Mirroring WrappersMirroring a wrapper copies all included blocks within the first wrapper, plus its column, gutter, and margin settings. The second wrapper can be reordered, and the wrapper type (fluid or fixed) can also be changed. However, the contents of the second wrapper can’t be changed.

1 In a layout where you want to mirror, add a wrapper (or skip this step if you’re using the default empty wrapper).

2 Mouse over the empty wrapper, and then click the cog button to the right.

3 Click the Mirroring & Config subtab in the options panel.

4 Click the Mirror Wrapper From Another Layout box, and select the wrapper to mirror.

Note: If you enable mirroring for a wrapper that already has blocks and other settings, Headway remembers those settings in case you later switch mirroring off for that wrapper.

Disconnect two wrappers by selecting Do Not Mirror in the Mirror Wrapper From Another Layout box. The wrapper’s previous blocks and settings are restored.

CloningCloning a layout is a way to copy all wrappers and mirror all of the blocks they contain (the wrappers themselves are not mirrored). You get a layout that will have all of the wrapper and block settings of the mirrored layout, but the wrappers and blocks can be rearranged. Even templates can be cloned.

Because the mirroring can be removed from individual blocks, cloning is the best way to get started customizing a layout when you need it to be mostly the same as a layout you have already customized. It’s much quicker to clone a layout and then unmirror and customize one or two blocks than it is to try to create a new layout and hope you can redraw most of the blocks the same and get their settings right.

Cloning a layout that is mirroring blocks will mirror the blocks from the original layout.

Warning: If you have already begun customizing a layout, opening the Grid Wizard and cloning a layout will remove your customizations from the current layout. The only way to undo the cloning action is to switch to another layout (or to Design Mode) without saving.

Fall Guys ExampleBecause the design calls for the same header on every page, Kim Tumble adds a top wrapper to Blog Index and sets it to mirror the top wrapper from Front Page. Any changes to this wrapper on Front Page will also apply to Blog Index.

43


To clone a layout:

1 In the layout selector, click the Edit button next to the layout you want to customize. For an uncustomized layout, the Grid Wizard opens. For a customized layout, click Grid Wizard in the Tools menu.

2 When the Grid Wizard opens, click the Clone Existing Layout tab.

3 Select a layout to clone.

4 Click the Clone Layout button.

Fall Guys ExampleThe Single > Post and Single > Page layouts will have a content block taking two-thirds of the width of the page and a widget-area block taking the other third. The layouts will be similar enough (but not identical) that Kim Tumble builds the Single > Post layout and then clones it in the Single > Page layout.

She sets the top wrapper in both layouts to mirror the one on Front Page, just so she won’t accidentally make any changes to that wrapper in either layout. On Single > Post, she places a text block in the side column that invites visitors to become Fall Guys members and contribute a blog post.

On Single > Page, she replaces the text block with a widget area block that mirrors the one on Front Page that lists recent posts.

Shared LayoutsA shared layout is a layout outside the layout hierarchy that you can assign to any individual layouts. Unlike with cloning, once you assign a shared layout to a regular layout, that layout can’t be customized directly. Use a shared layout when you want to lock particular layouts down and not allow customizations to any one of them separately.

Changes to a shared layout apply to all layouts using that shared layout. Further, due to layout inheritance, any uncustomized children of a layout that has a shared layout assigned will also inherit the shared layout.

In addition to being assigned to a layout in Grid Mode, shared layouts can also be assigned to individual posts and pages in the WordPress admin panel.

Once you have assigned a shared layout to a regular layout, to customize that layout without changing the template, you will need to disconnect the template from it. If you disconnect the shared layout, any prior customizations to the layout are restored.

44


Example Imagine you want your Single and Archive layouts to look different from Blog Index, and you want them to have the same design as each other. If you had no other options, you would have to customize each of these two layouts. But chances are, you may not get every detail the same between the two. Cloning could help—you could customize the Single layout and then clone it in the Archive layout.

But later, what if you decide to make a change to the layout? You would need to make the changes to the Single layout and try to replicate them in the Archive layout.

Shared layouts simplify this process by providing you one place to make changes and have them apply to multiple layouts across your site. In this example, you would create a shared layout (let’s call it Layout X) and apply it to both Single and Archive. You could assign Layout X to any other layout where you wanted to use this same layout. Any changes you make to Layout X later will immediately appear in all of the regular layouts using it.

In general, you customize a shared layout the same way you customize any layout.

The following illustration shows how shared layouts work with layout inheritance:

Blog IndexCustomized

Header

Widget area

Footer

Slider

Archive 404 LayoutSingleCustomized

Text

PageCustomized

Post

Text

Customcode

Layout inheritancein effect

Layout inheritanceoverridden

Layout X

ContentNavigation

Widget area

Sharedlayout

assignedContent

45


Creating a Shared Layout1 In Grid Mode, open the layout selector, and then click

Shared Layouts (see the illustration to the right).

2 Type a short but descriptive label for the new shared layout in the Shared Layout Name field.

3 Click the Add Shared Layout button.

4 Mouse over the new shared layout’s name, and then click the Edit button.

5 Customize the layout as described in Chapter 4, as well as using mirroring and cloning as appropriate for your needs.

Applying a Shared Layout in Grid ModeFor a layout you haven’t previously customized:

1 In the layout selector, mouse over the name of the layout, and then click the Edit button. The Grid Wizard opens.

2 Click the Use Shared Layout tab.

3 Select the shared layout you want to apply, and then click the Assign Layout button.

For a layout you have already customized:

1 In the layout selector, mouse over the layout, and then click the Edit button.

2 Click Shared Layouts in the layout selector.

3 Mouse over the shared layout’s name, and then click the Use Shared Layout button.

Note: Assigning a shared layout to a customized layout does not delete your customizations. However, your customizations are ignored while the shared layout is assigned.

Applying a Shared Layout to a Post or Page in WordPressShared layouts can also be applied directly to specific posts and pages from within WordPress. While writing or editing a post or page, select a shared layout in the Shared Layout meta box (shown in the following image).

46


Disconnecting a Shared Layout from a LayoutIn the layout selector, mouse over the layout’s name, and then click the Remove Template button.

Deleting a Shared Layout1 Click Shared Layout in the layout selector.

2 Mouse over the name of the shared layout you want to delete, and then click the X next to the name.

3 Click OK to confirm that you want to delete the shared layout.

4 For each layout that used the shared layout, disconnect the shared layout or assign a new one.

Choosing Between Cloning and Shared LayoutsWhen deciding whether to clone an existing layout or to design and use a shared layout, keep these pros and cons in mind.

47


Cloning:

● Pro: Cloning just copies the blocks from another layout. Further changes to the current layout won’t affect other layouts on your site.

● Pro: Cloning a layout provides you with all the same blocks as the layout you clone from, as well as their block options, because the blocks are mirrored.

● Con: Cloning can result in some convoluted relationships when it comes to mirrored blocks. For example, say you’ve customized your “About” page by cloning the Single > Page layout and changing some things. If you then want to use the About page layout on your “Contact Us” page, you would go to the “Contact Us” layout and clone “About.” As a result, “Contact Us” will mirror blocks from both “About” and Single > Page.

● Con: Because cloned layouts don’t retain any relationship to each other aside from blocks that are mirrored, changes to the arrangement of wrappers or blocks on a layout you cloned in the “About” page won’t trickle down to “About.” This gets particularly hairy when you have 10–15 customized layouts, all similar but cloned from a common “parent” (or from each other)—and you’ve decided to add a new block. That new block will need to be added to each customized layout you want it to show up in.

Shared layouts:

● Pro: Shared layouts let you swap between layouts on specific WordPress pages, archives, and so on. It’s as easy as trying on hats.

● Pro: It’s quick to “turn off” a shared layout for a layout and revert back to the customizations you had prior to applying it.

● Pro: Changes to a shared layout are reflected on all the layouts that have the template applied, so you need to make a particular change only once.

● Con: Changes to the shared layout are reflected on all the layouts that have the shared layout applied (notice that this same quality of shared layouts is both a pro and a con). If you wanted something unique to a specific page, a shared layout won’t help.

In short, cloning makes sense when you’re planning on customizing further, and you want those customizations to be unique to the layout you’re working on. Shared layouts make sense when you have a set of blocks with a particular order or configuration that will be reused in various places throughout the site as-is.

Exporting and Importing SettingsBlocks and entire layouts can be reused from one website to another through exporting and importing .json files containing their settings.

48


ExampleAn example of when you might export and import settings is if you create websites for a number of clients, and you have a complex PHP function that you place on sites you create. You can create a custom code block containing that code on one site and then export it to later import it into other sites. This way, you don’t have to remember the function or store it somewhere and repeatedly copy and paste it.

Block SettingsSome blocks have quite a few options. Mirroring blocks is great for working within a website, but you can also reuse a block’s settings across websites by exporting and then importing a block settings file.

A block settings file contains both the block options, including images, and the design settings that are then converted to CSS on your live site.

Exporting a Settings File

1 In Grid Mode of the site where you have the block set up, right-click the block, and click Open Block Options.

2 In the options panel, click the Import/Export subtab.

3 Click the Download Export File button.

4 Save the .json file to your computer.

Importing a Settings File

1 In Grid Mode of the site where you want to import the settings, right-click your block, and click Open Block Options. The block must be of the same type as the one the settings were exported from.

2 In the options panel, click the Import/Export subtab.

3 Click the Select File & Import button.

4 Locate and select the .json file.

LayoutsIf you have an entire layout you want to reuse in another website, export and import a layout file. A layout file contains no CSS.

You can make changes to a layout after importing a file as you would with any other layout.

49


Exporting a Settings File

1 In the Grid Mode layout selector, click the Edit button next to the layout you want to copy.

2 In the Tools menu, click Grid Wizard.

3 Click the Import/Export tab.

4 Click the Download Export File button.

5 Save the .json file to your computer.

Importing a Settings File

1 In the Grid Mode layout selector, click the Edit button next to the layout you want to import the settings to.

2 In the Tools menu, click Grid Wizard.

3 Click the Import/Export tab.

4 Click the Select File & Import button.

5 Locate and select the .json file.

50


51

Defining Visual Styles New Member’s Guide

CHAPTER

6Defining Visual Styles

With Headway, you define your site’s visual styles in Design Mode of the Visual Editor. As you use Design Mode to select values for the various properties of blocks and other elements, Headway converts these settings into CSS classes and rules on your live website. As a result, if you’re not an expert with CSS, you can rest easy knowing that Headway is taking care of it. In case you are familiar with CSS, however, Headway provides tools to give you added control over your design.

Where Grid Mode shows you a basic representation of your site, Design Mode gives you a live preview as you make changes to the design.

Opening Design Mode1 Log in to your WordPress admin panel.

2 In the Headway menu, click Visual Editor ► Design. Alternatively, if you want to work in WordPress and the Visual Editor simultaneously, right-click Design, and click the option to open the link in a new tab.

If you are already in Grid Mode in the Visual Editor, click the Design Mode icon in the menu bar at the top of the editor. Design Mode opens to the same layout you had open in Grid Mode.

When you first open Design Mode, a tour opens. Just as with Grid Mode, it’s recommended you take the tour before you start customizing.

See the next page a basic diagram of Design Mode:

52

New Member’s Guide Defining Visual Styles

Menu bar Modes (Grid and Design)

Viewport

DesignEditor

Tools Admin

Menus

Snapshots SaveView Site

See savedchanges live

Layoutselector

Currently Editing: Blog Index

Using the InspectorThe inspector is a feature in Design Mode that allows you to select specific elements for styling. It also displays an element’s border, margins, and padding when you select the element. Margins are represented by orange, and padding is purple.

As you mouse over elements in the viewport, a tooltip displays the style hierarchy for the element your mouse pointer is touching. Right-clicking and then clicking one of the Edit options in the menu opens the style options for that element in the options panel. (See “Selecting an Element and Level of Customization” on p. 53 for information about the Edit options.)

To switch off the inspector, click the Disable Inspector button in the upper-right corner of the options panel. If the inspector is disabled, you have only the ability to open block options (not design options) or change a block’s type. You can still select elements in the element tree on the right side of Design Mode.

Setting Style PropertiesStyling your website consists of selecting an element and then setting its styles in the Design Editor. This section covers these two main steps in detail. As you customize properties, the changes are reflected in the viewport so you can see the effects.

Some elements have what are referred to as child elements for the purposes of Design Mode.

53


For example, the content block has child elements such as the entry container and title. The methods for customizing child element properties is the same as for parent elements, so in this section, the term element includes child elements. In the element tree of the Design Editor, view child elements by expanding elements that have a plus [+] icon.

For a list of the styles that come defined with Headway Base, see “Headway Base Default Styles” on docs.headwaythemes.com.

Selecting an Element and Level of CustomizationThe Design Editor is the panel on the right side of Design Mode. Under the Navigator tab, you’ll find the element tree, which is a list of elements that can be customized, and the properties panel, which appears when an element is selected and displays CSS property groups. (The Styles tab is discussed later in “Editing Existing Styles” on p. 60.)

The element tree contains these groupings of elements:

● Global Defaults. You can set some text and block defaults to avoid specifying other styles later. To view and select these elements, expand the Global Styling section in the element tree.

● Structural Elements. This type consists of the <body> and wrapper elements. They do not have child elements. The body element can be styled for the current layout, and wrappers can be styled for the current layout and individual instances (see the next subsection for an explanation of instances). To view and select these elements, expand the Structure section in the element tree.

● Blocks and Child Elements. Blocks can be styled in general, or you can select child elements within them. To view and select these elements, expand the Blocks section in the element tree. The illustration to the right shows how the Design Editor looks with a child element, Site Title, selected.

To apply the same styles to blocks of different types without setting those styles for each one, use CSS classes (see “Adding Your Own CSS Classes to Blocks and Wrappers” on p. 62).

Elements

Child elements

Currently selected level of customization

54


An alternate way to select structural elements, blocks, and child elements is by right-clicking and choosing an Edit option in the viewport (described in the next section).

For most elements, you can choose to have your customizations be wide or narrow in scope. This subsection discusses these levels of customization from general to specific.

Important: When you select an element to customize at any of these levels, the lower section of the Design Editor above the property groups indicates exactly what you are editing (see the illustration to the right). Be sure that you’re editing the element at the correct level, or you’ll get results you don’t expect.

Level 1: Editing the Regular Element

The most general customizations are for the regular element, affecting all layouts—in other words, your entire website. If you edit the styles for the header block regular element, for example, you’re saying you want your styles to apply to all header blocks across your site.

Select the regular element by doing one of the following:

● In the element tree, click the element in the list on the left side.

● In the viewport, right-click the element, and then click Edit Regular Element. (If you’re having a hard time getting the exact element you want, you can right-click a child element, go to Parents, and select the correct element. The menu then specifies that element.)

Level 2: Editing for This Layout

The next level of customizations is for a particular layout—usually the layout you’re working on. Customize an element for the current layout when the element on that layout needs to be different from that same element on other layouts.

Customize an element for the current layout by doing one of the following:

● In the element tree, click the element in the list, and then click the Customize For Current Layout button.

55


● In the viewport, right-click the element, and then click Edit Regular Element ► Edit For This Layout.

Level 3: Editing an Instance

An instance of an element is a specific layout-element combination—for example, the header block with the ID of 9 on the Single layout. Target an instance when you have multiple blocks or elements of the same type in a layout and you need to apply a given style to only one of them.

Instances don’t get as specific as selecting one menu item out of a particular navigation block. However, if you have two navigation blocks in one layout, using instances allows you to target the menu item element in only one of those menus rather than targeting all menu items in all menus in the layout.

To customize an instance, do one of the following:

● In the element tree, click the element (and child element if applicable). Then expand the Instances subsection and click the instance you want to customize.

● In the viewport, right-click the element, and then click Edit This Instance.

Fall Guys ExampleThe Front Page layout on the Fall Guys website has three widget area blocks. The widget area block in the header needs to be styled differently than widget area that’s beneath the slider and also differently than the widget area above the footer.

Kim Tumble needs to edit the instance of each widget area block on Front Page in order to set styles unique to each one.

56


Note: Mirroring blocks results in an exception to the way instances work. If you customize an instance of an element in Layout A and then mirror the containing block in Layout B, those styles apply to the element in Layout B as well. In other words, even though you specified the styles to apply to only one element on one layout, they are also applied to the element in the second layout because of mirroring.

Editing Hyperlink States

In addition to the various levels at which you can edit properties, hyperlink elements have states, such as hover and clicked, that can be customized at those levels. In CSS terms, some states correspond to pseudo-classes. The states available for customization can vary depending on the specific element.

To edit a hyperlink state for all layouts

● In the Blocks section of the element tree, click the element and child element. Then expand the States subsection and click the instance you want to customize.

● In the viewport, right-click the element, click Edit Regular Element ► States, and then select a state.

To edit a hyperlink state for the current layout

● In the Design Editor, follow the same steps as the first bullet above, and then click the Customize for Current Layout button.

To edit a hyperlink state for an instance

● In the Blocks section of the element tree, expand the Instances subsection of the child element you want to customize. Then click the state and instance combination you want to customize.

● In the viewport, right-click the element, and then click Instance States, and then select a state.

Taking Advantage of the Levels of Customization

As you customize styles, work through these levels of customization from general to specific. For example, if all header blocks will share some properties, such as padding of 0, set these shared styles for the wrapper regular element first. Then get more specific by customizing individual header blocks where the properties need to be unique.

If you try setting styles for individual elements first, you’ll mostly likely find yourself setting some of the same properties repeatedly. Going from general to specific will save time.

Fall Guys ExampleThe entire navigation block has one background color. Kim Tumble sets the background color of the Menu Item element’s Hover state to be a different color so that when a visitor mouses over a menu item, it changes color.

She sets the background of the Selected state to a third color. She also sets the Font Styling property to Bold.

57


Customization Levels and Layout Inheritance

Layout inheritance applies to style customizations. Even if you customize a style for a particular layout or instance only, any uncustomized child layouts will also have that style applied because the entire layout and associated styles are inherited.

Setting PropertiesOnce you have selected an element, applicable property groups appear in the Design Editor. Each property group contains one or more properties.

1 Click the name of a group to expand it.

2 Do one of the following to customize a property:

● Click Customize next to a property you want to edit, and then set the value.

● Change the value if one is already specified.

● Set a property to inherit the value of its parent by mousing over the property and clicking the X that appears.

Important: Some properties are “progressive enhancements,” meaning they are recent additions to CSS, and only the more recent versions of web browsers support them. In particular, rounded corners, text shadows, and box shadows won’t work in older browser versions.

As you customize properties, you’ll see the following types of input.

Dropdown

A dropdown appears if a specific list of values is defined for a property or a certain range of values is considered reasonable.

An example of a dropdown containing a reasonable range is the Line Height property in the Fonts property group. Really, you could specify any positive integer for line height, but the dropdown maxes out at 300% because anything larger than that is likely going to create needless amounts of white space and make multiple lines harder to read.

You will also see dropdowns where you can specify a unit of measurement (such as percent vs. em).

Numeric Field

A numeric input field appears when the property takes a pixel value. Depending on the property, numeric fields can appear individually or in sets of two or four.

58


Sets of two or four fields include a chain link icon. Click the icon if you want the value you enter in one field to be copied to the rest.

Note: For wrappers and blocks, the Margin property group doesn’t include left and right margins. Headway calculates them based on the placement of your blocks in Grid Mode.

Color Picker

For the Color property in a property group, click the swatch to open the color picker. Note the following about using the picker:

● Use the slider along the right side of the color window to change the colors displayed in the window.

● Use the slider along the bottom of the color window to change transparency.

● You can enter values manually for RGB, hue (H), saturation (S), brightness (B), opacity (A), or even the hexadecimal value for the color (#).

● To save a color as a swatch (essentially a favorite), click the add icon . Swatches are saved in a row along the bottom of the picker.

Image Selector

Click the Choose button, and then use the standard WordPress image selector to pick an image from your computer, a URL, or your site’s media library.

To remove an image you’ve selected, click the X next to the file’s name, and then click OK.

59


ExampleIn Grid Mode, blocks that you want to overlap should be arranged next to each other. Then, in Design Mode, you use the properties in the Nudging group to move them to the precise location you want.

In the following images, three text blocks are used to contain <img> tags. The blocks are arranged side by side in Grid Mode. In Design Mode, the nudging options have been set so the images overlap in a staggered way. (The images also have thick white borders and box shadows for effect.) To ensure there’s enough room for the images and they don’t overlap the footer, the footer block has a top margin of 90px.

Here are the nudging properties of the text blocks that result in the positions and order you see in the second image:

Left Block

● Vertical offset: 24

● Horizontal offset: 60

● Method: relative

● Layer index: 1

Middle Block


● Horizontal offset: 0


● Layer index: 3

Right Block


● Horizontal offset: -90


● Layer index: 2

Continued on the next page →

60


I’m Seeing SpotsAs you customize style properties, orange dots appear next to elements and property groups to show you where you have made changes from the default values.

Editing Existing StylesA second way to customize styles is using the Styles tab of the Design Editor to make changes to properties you’ve already set.

Use your preferred method of selecting an element (see “Selecting an Element and Level of Customization” on p. 53), and then click the Styles tab. All of the property groups and properties that have explicitly set values for that element are listed. Click the value you want to change, and then change it below in the properties panel.

Using this view is a good way to quickly locate a property that you have previously customized and experiment further with it.

Example (continued)

Mind image credit: Salvatore Vuono, freedigitalphotos.net

61


Moving or Overlapping Wrappers and Blocks As discussed in Chapter 3, the purpose of Grid Mode is the general placement of your wrappers and blocks. When you’re finished creating your layouts, you may not have your wrappers and blocks exactly where you want them. This is especially true if your design calls for blocks or wrappers to overlap or even to have a block hanging over the boundary of its containing wrapper.

CSS includes properties for nudging, or offsetting, elements. Using the nudging properties can get you the overlapping or other pixel-perfect arrangements you’re looking for.

To use these options, select an element, and then expand the Nudging property group. This group includes these properties:

● Vertical Offset. Moves the element the specified number of pixels up or down. Positive values move the element down, and negative values move it up.

● Horizontal Offset. Moves the element the specified number of pixels to the left or right. Positive values move the element right, and negative values move it left.

Tip: After you have selected an element, you can nudge it vertically or horizontally using the arrow keys. The offset properties are updated accordingly. Hold down the Shift key to nudge elements 5 pixels at a time.

● Method. The option you choose here determines the element’s behavior in the flow of the HTML document.

● Layer Index (z-index). The z-index specifies a stacking order. The higher the value, the closer the element is to the top. If two elements are set to overlap but don’t have z-index values, it’s left up to the browser to essentially guess which one should be on top, and it may not be the one you want.

Using the Live CSS EditorThe Design Editor in Design Mode provides most of what you’ll need to design your site. But if you want to apply additional styling and are comfortable writing your own CSS, try the Live CSS Editor. The editor displays a separate, global stylesheet that will be applied after all other stylesheets, so it takes precedence over any other styles you apply in Design Mode.

To open up the Live CSS Editor, do one of these things:

● Click the Open Live CSS Editor button in the menu bar.

● Click the Edit in Live CSS button next to an element in the element tree.

If you open the Live CSS Editor from the element tree, selectors are added to the style sheet for the element or block that you are customizing. If you want to add other styles, click elsewhere in the editor and write your code.

62


Important: Before using the Live CSS Editor, see “Editing CSS Directly” and “Headway CSS Map” at docs.headwaythemes.com for guidance in properly targeting WordPress and Headway HTML.

Just as with other changes in Design Mode, your changes in the Live CSS Editor are reflected immediately in the viewport. The editor includes syntax highlighting to help you notice any mistakes while coding. The editor can also be moved or resized.

To close the editor, click the X in the upper-right corner. Be sure to save your changes before selecting a different layout or going to Grid Mode.

Adding Your Own CSS Classes to Blocks and WrappersYour design may call for the same properties to apply to multiple blocks or wrappers. To save time, you may want to add a custom class and then apply it to the blocks or wrappers so you don’t have to set the same properties for all of them separately.

1 Click the Open in Live CSS Editor button in the menu bar.

2 Add your custom class and properties.

63


Here’s an example of CSS for a box shadow to be applied to various blocks:

.shadowbox {

box-shadow: 2px 2px 5px 5px #aaa;

-moz-box-shadow: 2px 2px 5px 5px #aaa;

-webkit-box-shadow: 2px 2px 5px 5px #aaa;

}

3 For each block you want to add your custom class to:

a Mouse over the block or wrapper until the tooltip displays the information for that element.

b Right-click, and then click Open Block Options.

c Click the Config subtab.

d Type the name of your custom class in the Custom CSS Class(es) field. If you have multiple classes to add, separate each one with a space.

For the example in step 2, you would type shadowbox in this field.

4 To add your custom class to wrappers, first click the Save button, and then click Grid Mode in the menu bar. Then do the following for each wrapper in Grid Mode:

a Mouse over the wrapper, and then click the cog button .

b In the options panel, click the Mirroring & Config subtab.

c Type the name of your custom class in the Custom CSS Class(es) field. If you have multiple classes to add, separate each one with a space.


64


65

Using Headway Templates New Member’s Guide

Using Headway Templates

Chapter 5 described ways to reuse a layout or parts of a layout across your website. But what if you want to reuse your entire setup, both layouts and design settings, to get a big jumpstart on building an entirely separate site?

Headway templates provide this capability. Not to be confused with layout templates, a Headway template is a collection of all of your layouts (including layout templates), block settings, and design settings. You export a Headway template from one site and import it into another. One way to think of Headway templates is as themes that can be used interchangeably while still having Headway activated as the actual theme. A set of Headway templates is like a wardrobe for your website.

When you first install and activate Headway, the selected Headway template is Headway Base. As you make changes in the Visual Editor, the active Headway template is updated to include those changes. So if you don’t import and activate any other Headway template, then your changes apply to Headway Base. But you can export all of your settings as a new Headway template at any time.

And any time you import and activate a Headway template, you can make changes to it in the Visual Editor.

This chapter describes how to develop your own Headway template and then goes into how to import and activate a Headway template that you created on a different site or that you got from a third party.

But First: Headway Templates vs . Child ThemesChild themes are often thought of as being for design customizations. But even though Headway templates contain custom designs, the templates and child themes aren’t incompatible.

As you customize your site using Headway, those changes are saved in a way that they’re not overwritten when you update the theme. So there really isn’t much reason to use a child theme for style customizations.

However, you will still want to use a child theme if you need to make changes to the theme PHP files because otherwise, your changes will always be overwritten when you update your theme. (An example of when you would customize PHP files is with custom post types.) If you use a child theme, your design customizations, or any Headway templates you import, to the parent Headway theme still apply to the child theme.

CHAPTER

7

66

New Member’s Guide Using Headway Templates

Creating a Headway TemplateA Headway template consists of the layouts, block settings, layout templates, design settings, and Live CSS code for your site. If you have started with Headway Base and then export your site’s settings as a Headway template, you can name it whatever you choose.

Any time you export a Headway template, it represents a “snapshot” of your current website’s settings. If you make further changes that you want to add to a template file that you already exported, reexport the template and save the .json file over the previous one.

Creating a Headway Template from Your Existing Design1 Click Templates in the Headway menu.

2 Click Export Current Template.

3 Set the name, author, version, and the thumbnail image that will represent the template on the Templates page.

4 Click the Export Template button.

5 Select a location on your computer or network, and save the template file.

Creating a Headway Template from Scratch1 Click Templates in the Headway menu.

2 Click Add Blank Template.

3 Type a name for the template, and then click OK.

4 Design your site as described in Chapters 4–6. Whenever you save changes, your template is updated. Export the template at any time to create a file you can import into other sites.

Getting Additional Headway TemplatesSome Headway templates are available through Headway Extend. (Other templates may be available from third-party developers.)

1 Log in to the Member Dashboard at https://headwaythemes.com/dashboard/.

2 Under “Your Downloads,” click Download next to the Headway template you want to download.

3 Choose a location on your computer to save the .zip file, and save the file.

Importing a Headway Template1 Click Templates in the Headway menu.

67

Using Headway Templates New Member’s Guide

2 Click Install Template.

3 Browse to and select the template .json file.

Activating a Headway Template1 Click Templates in the Headway menu (skip this step if you have just added the template).

2 Hover over the template's thumbnail image.

3 Click the Activate icon.

4 Go to the WordPress admin panel and assign menus to your navigation blocks (see “Creating a Navigation Menu” on p. 35). Otherwise, Headway adds a default set of page links.

5 In the WordPress admin panel, assign widgets to your widget area blocks.

Note: If you are not currently using a Headway template but have developed your site using Headway Base, your settings are saved as the Headway Base template. You can restore those settings at any time by activating the Headway Base template.

If you switch back and forth between Headway templates where you have already configured menus and added widgets, those settings will be remembered.

Deleting a Headway Template1 Click Templates in the Headway menu.

2 Hover over the template's thumbnail image.

3 Click Delete.

68

New Member’s Guide Using Headway Templates

69

Optimizing Your Site for Search Engines New Member’s Guide

CHAPTER

8Optimizing Your Site for Search Engines

If you want your website to be found by any and every web surfer, search engine optimization (SEO) is an important consideration. The good news is that Headway does some of the work on its own—it has built-in SEO settings designed to improve the rankings of your site in search engines. Headway also works nicely with WordPress SEO plugins, such as All-in-One SEO Pack. Headway’s settings supersede plugin settings where redundancies exist.

Note: If you are switching to Headway Base from another theme with SEO options, such as Thesis, there won’t be any negative impact on your search engine rankings.

In addition to automatic settings, Headway provides SEO options for each template, or type of page, on your website and for individual pages and posts.

Automatic SEO SettingsSome settings improve your search engine rankings by default.

Canonized URLsHeadway canonizes your site’s URLs so that redundant URLs like http://www.mysite.com and http://mysite.com don’t compete for search engine rankings.

Tagline Visibility in Search RankingsIn the default WordPress setup, the tagline has very little, if any, impact on SEO. Because the tagline typically conveys what your website is all about, potentially much more than the blog’s name, Headway places greater importance on the tagline for SEO purposes by placing it in each webpage’s <title> tag. (You can remove the tagline from <title> by customizing the SEO templates, but it’s not recommended.)

Tip: Typically, you have certain search terms that you want search engines to associate with your website. It is recommended that you put keywords in your tagline that match those search terms to increase the probability that your site will appear for those searches.

70

New Member’s Guide Optimizing Your Site for Search Engines

Template-Level SEO SettingsWith Headway, an SEO template corresponds to a type of webpage on your site. To view and change the SEO settings for an SEO template:

1 Click Options in the Headway menu.

2 Click the Search Engine Optimization tab.

3 Select a template above the SEO settings. (The default selection is Blog Index.)

4 Configure the settings as described below.


The following template-level SEO options are available:

● Title. This is the text that will appear in the <title> tag for a given webpage, and it will be the largest text in search engine result pages (SERPs).

● <meta> Description. This text appears in SERPs beneath the title.

● Advanced Options:

■ Page Indexing. Enabling noindex makes pages from this template not findable in search. The idea here is reducing the number of unique URLs per page or post that are recognized by search engines. You may want to check this box for the category template unless you include the category name in post permalinks.

Fall Guys ExampleDave Tripp thinks the SEO settings will work as they are, other than on the Front Page layout. On the homepage, he’d like the text after the pipe character to read, “Support Fall Guys”—just to help get the idea across a little more.

Kim Tumble selects the Front Page template in the SEO options and types “Support” before the %sitename% placeholder.

71

Optimizing Your Site for Search Engines New Member’s Guide

Similarly, you may want to check this box for the author template unless the names of post authors are included in permalinks.

■ Link Following. Check this box only if you have a specific reason for not wanting search engines to crawl the links in pages with this template.

■ Page Archiving. Check this box if search engines shouldn’t save a copy of pages with this template.

■ Snippets. nosnippet tells search engines not to display excerpts of the page or the meta description in search results.

■ Open Directory Project. Check this box if you prefer that search engines not use the title and description contained in the Open Directory Project for your site’s pages. Checking this box maintains your control over the text displayed in search results, particularly if you are taking advantage of Headway’s SEO options.

■ Yahoo! Directory. Similar to NOODP, enabling this tag ensures that the titles and descriptions you craft in WordPress are used instead of the Yahoo! Directory title and description.

● Comment Authors’ URL. The only reason you may want to check this box is if you have a lot of spam comments. Checking the box will ensure you’re not increasing the spammers’ SEO for their sites. If you use an effective spam plugin and don’t have spam comments being posted on your site, leave this box unselected.

Page- and Post-Specific SEO SettingsThese options give you more control over your search engine rankings and display. Configure a page or post’s SEO options below the text editor (see the illustration on the next page). See the following descriptions of page- and post-specific settings:

● Title. If you want the <title> tag for the page or post to contain something different than what Headway will put there based on the template settings, or you want the title to be something other than the post or page title, type the custom title here.

● Description. If you want the <meta> description for the page or post to contain something different than what Headway will put there based on the template settings, type the custom description here.

● noindex. See “Page Indexing” in the Template-Level SEO Settings section in the previous section.

● nofollow. See “Link Following” in the previous section.

● noarchive. See “Page Archiving” in the previous section.

● nosnippet. See “Snippets” in the previous section.

● noodp. See “Open Directory Project” in the previous section.

● noydir. See “Yahoo! Directory” in the previous section.

72

New Member’s Guide Optimizing Your Site for Search Engines

● 301 Permanent Redirect. Occasionally, you may need to retire a page or post, but other sites link to it. Instead of asking people to update their links, you can put in the permalink you want to redirect visitors to when they try to visit the old page or post.

73

Using Additional Blocks New Member’s Guide

CHAPTER

9Using Additional Blocks

Headway Base has a set of built-in blocks, and additional blocks are available to Headway members. Download and install a new block from Headway Extend. These blocks are managed like WordPress plugins.

This section provides instructions for adding Headway Extend blocks and configuring official Headway Extend blocks.

Important: Community or third-party blocks are not supported by Headway Themes. If you encounter a problem with one of these blocks, consult the developer’s documentation or contact the developer for help.

Downloading and Installing an Extend Block1 If you have the Visual Editor open, save your work

and close it.

2 Log in to the Member Dashboard at https://headwaythemes.com/dashboard/.

3 Scroll down to the “Your Downloads” section of the page.

4 Do one of the following:

● Click Download next to a block. Choose a location on your computer to save the .zip file, and save the file.

● To add a new block to your dashboard and to your site, click Extend in the site header, and then click Blocks. Click a block, add it to your cart, and purchase and download the .zip file.

5 Go to your WordPress admin panel.

6 Click Add New in the Plugins menu, and click Upload.

7 Click the Browse button, and then locate and select the .zip file you downloaded.

8 Click Install Now.

Customizing Your Login Page

If you’re using BuddyPress or WooCommerce, you’re going to want people to have accounts and log in to your site. This means you may want to customize the login page so it has your logo instead of the WordPress one and looks in other ways like it belongs to your site.

For information about customizing this page, see http://codex.wordpress.org/Customizing_the_Login_Form.

If you’re not comfortable with CSS, you’ll probably want to try a plugin.

74

New Member’s Guide Using Additional Blocks

9 When the installation is complete, click Activate Plugin. The block is now available in the Headway Visual Editor.

Once you have installed a block, manage it in the WordPress admin panel like any other plugin by clicking Installed Plugins in the Plugins menu.

Using BuddyPress and the Community Builder BlockBuddyPress is a plugin that adds social features to your WordPress site. Using the Headway community builder block requires that you install BuddyPress, which is from the same company as WordPress and is free. Out of the box, BuddyPress includes community registration, member profiles, updates, friends, private messaging, and an activity stream.

Once you have installed BuddyPress, click BuddyPress in the Settings menu. Work across the tabs to configure your community settings. Each component needs a WordPress page associated with it under the Pages tab. The layouts for these pages can be customized in the Visual Editor like any other WordPress page.

Note: If you’re signed in to WordPress, BuddyPress recognizes that you’re already registered and won’t load the registration page (even if WordPress-to-BuddyPress profile syncing is switched off).

You aren’t required to use the community builder block to make BuddyPress work on your Headway site. Add content blocks on the pages you associate with BuddyPress components, and leave the default query in place. This will display the default content on those pages.

The community builder block allows you to place some BuddyPress components on other layouts, such as in a sidebar. For example, the option to display which members are online would work well in a sidebar. If you want to use the community builder block, install it using the steps provided in “Downloading and Installing an Extend Block” on p. 73.

75

Using Additional Blocks New Member’s Guide

Fall Guys ExampleAfter the Fall Guys website has been live for several months, Dave Tripp decides that the site would be a good place to help the organization’s leaders and volunteers connect with each other and build an online community. He asks Kim Tumble to add community features to the site.

Kim installs and activates BuddyPress, and then she creates a set of pages for registering, viewing the activity stream, and so on. She also installs the community builder block from Headway Extend.

In Grid Mode of the Visual Editor, Kim lets the new pages inherit the Single > Page layout, which contains a content block that will display the appropriate BuddyPress content on each page. She creates a “Community” page that includes a community builder block to display the activity stream, and a second community block in the sidebar to display the login form.

Configuring the Storefront BlockThe Headway storefront block requires the WooCommerce plugin from WooThemes. If you have a Headway developer license, the plugin is available to you at no extra cost.

Installing and Configuring WooCommerce1 If you have the Visual Editor open, save your work and close it.

2 Go to http://woothemes.com/woocommerce, and then click the Download WooCommerce button.

3 Save the file.

4 In your WordPress admin panel, click Add New in the Plugins menu.

5 Upload the WooCommerce .zip file. Install and activate the plugin.

6 When the list of plugins appears, click the Hide This Notice button in the message that says your theme doesn’t declare WooCommerce support.

7 In the “Welcome to WooCommerce” message, click the Install WooCommerce Pages button.

8 When the completion page appears, click the Settings button. Then work your way across the tabs, setting your preferences and saving them as you go.

Configuring WooCommerceWooCommerce has a wide array of options for your store. If you have questions about setting it up in the WordPress admin panel, see the official documentation at http://docs.woothemes

76

New Member’s Guide Using Additional Blocks

.com/documentation/plugins/woocommerce/.

Working with WooCommerce in Grid ModeInstalling WooCommerce pages adds many pages to the layout selector. These can be customized like any other page.

For WooCommerce to work on these pages, use the content block with the default settings (like you did with BuddyPress pages—see “Using BuddyPress and the Community Builder Block” on p. 74).

You will need to customize at least the following layouts, assuming you allowed WooCommerce to create the pages it needs (see “Installing and Configuring WooCommerce” earlier in this section). To speed up the customizations to these layouts, clone another layout and make sure the content block has the default settings. Some of these layouts have child layouts that you may also want to customize, but you can allow layout inheritance to take effect instead.

Under the Single layout:

● Mijireh Secure Checkout

● Cart

● Checkout

● My Account

● Product

● Variation

● Coupon

Under the Archive layout:

● Taxonomy

● Post Type

■ Product

■ Variation

■ Coupon

77

Reducing Your Site’s Load Time New Member’s Guide

Reducing Your Site’s Load Time

Many factors come into play with load speeds of a Headway site. Most of them affect WordPress sites in general. These factors are explained here and recommendations provided. Follow these recommendations if you or your visitors are seeing long loading times when they would otherwise expect your site to be fast (such as if they’re on high-speed connections).

You may want to try these ideas even if no one’s complaining—it doesn’t hurt for your site to be that much faster.

Headway CachingIt isn’t recommended that you turn off Headway’s caching. You may have done this in the past to avoid problems you were seeing in the Visual Editor (and if you encounter problems, post a message in the support forums at headwaythemes.com so the Headway team can help out). But it’s typically best to turn caching back on as soon as possible.

In case you switched caching off but don’t remember where this option is:

1 In the WordPress admin panel, click Options in the Headway menu.

2 Click the Advanced tab.

3 Clear the box labeled Disable Headway Caching.


Added BlocksBlocks that you add to Headway by downloading from Headway Extend and activating a plugin are not part of Headway itself. They are much like any other plugin.

When people view your website, each plugin you have installed results in a set of requests to the server for files, which can include PHP, CSS, JavaScript, and images. The same is the case with blocks you have installed and activated.

Some plugins load faster than others. For example, some Headway members have found the Soliloquy or Slider PRO plugins to run faster than the SliderPlus block. You may want to experiment with different plugins that offer comparable functionality and see which one offers the fastest load times.

CHAPTER

10

78

New Member’s Guide Reducing Your Site’s Load Time

Caching PluginsSome WordPress caching plugins are available, so you may want to use one if you have a lot of plugins and added blocks. A caching plugin will set some CSS and JavaScript files into a cache, allowing repeat visitors to see faster load times on your site.

Hyper Cache, W3 Total Cache, and WP Super Cache are three such plugins. Before you use one or another, be sure to learn more about their features and limitations.

Note: If you install a caching plugin, you should disable Headway’s caching so your site isn’t doing double duty and causing itself confusion over which cache it should access.

Query VariablesIf you’re using a caching plugin or a content delivery network (CDN), having Headway stop WordPress from including query variables in URLs can help with your site’s speed.

1 In the WordPress admin panel, click Options in the Headway menu.

2 Click the Advanced tab.

3 Check the box labeled Remove Query Variables from Dependency URLs.


Web HostingWeb hosts vary in the number of websites hosted per server, how PHP and MySQL are configured, and many other ways. The lower a hosting account costs, the more sites the hosting company would need to add to the same server to cover the cost of the server, meaning more load on each server. All of this can mean slower load times for your site.

If you’ve tried everything else with little or no improvement to your load times, you may need to contact your web host about it and even do some shopping around for a web host that is proven to run WordPress sites efficiently.

79

Removing Layout and Design Customizations New Member’s Guide

Removing Layout and Design Customizations

Removing Layout CustomizationsTo reset a layout so that customizations are removed and layout inheritance takes over:

1 In Grid Mode, open to the layout selector, and click the Edit button next to the layout you want to reset.

2 Click the Reset button.

3 Click OK to confirm.

Note: Resetting the Blog Index layout applies the original preset.

Removing Style Customizations from a Layout

Currently, there is not a way to remove all style customizations at once. Individual style customizations can be removed by setting properties to inherit.

1 In Design Mode, go to the layout selector, and click the Edit button next to the layout with styles you want to reset.

2 Select an element or block in the element tree or viewport.

3 In the Design Editor, expand the property group that contains the attribute you want to reset.

4 Mouse over the property, and click the X next to the property’s name. The customization is deleted.

Removing All CustomizationsThis process will remove ALL of your Headway settings as if you had just installed and activated Headway Base, so use it with care.

CHAPTER

11

80

New Member’s Guide Removing Layout and Design Customizations

1 In the WordPress admin panel, click Tools in the Headway menu.

2 Click the Reset tab.

3 Click the Reset Headway button.

4 Click OK.

81

Troubleshooting New Member’s Guide

Troubleshooting

If you start seeing errors or functionality breaking on your Headway website, follow the flow in this chapter. If you contact Headway support without doing this, they’ll ask you to try these steps anyway, so get a head start on the process here.

Note: If the problem you’re having is more along the lines of not seeing your changes in Grid Mode or Design Mode take effect, see “Why Aren’t My Changes Showing Up?” at docs.headwaythemes.com for troubleshooting steps.

Start Here

Go to your WordPress admin panel.

Can you log in?

Yes

No Go to C on p. 78.

Click Plugins, and apply the Deactivate bulk action to all plugins.

Has the problem stopped?

Activate the first plugin and check your website.


Yes

No

A

Yes

No

Activate the next plugin and retest. Go to A and repeat with each plugin.

Deactivate the plugin. Find a new one with the same functionality and test, or contact the developer for help. Then go back to A and resume testing plugins.

Activate the default theme (TwentyTwelve or TwentyThirteen) and check your website.


Yes

No

Go to E on p. 78.

Go to F on p. 79.

B

REVIEW BY FOLLOWING THE VAR-IOUS PATHS AND ENSURING THEY MAKE SENSE

CHAPTER

12

82

New Member’s Guide Troubleshooting

E Reinstall Headway. See “Reinstalling Headway” on p. 7.


Yes

No

Congrats! You’re done.

Get help from the Headway team. See “Contacting Headway Support” on p. 83.

C Access the file system of your site using FTP or your web host’s file manager program. In the directory where WordPress is installed, locate the plugins folder inside the wp-content folder.

Change the name of the plugins folder to old-plugins. This makes WordPress think the plugins are deleted.


Yes

No

Create a new folder in wp-content called plugins.

Via FTP or your web host’s file program, move the first plugin’s folder from old-plugins to plugins.


Go to B on p. 77.

Yes

No

Move the next plugin folder from old-plugins to plugins and retest. Go to D and repeat with each plugin folder.

Deactivate the plugin. Find a new one with the same functionality and test, or contact the developer for help. Then go back to D and resume testing plugins.

D

83

Troubleshooting New Member’s Guide

F

Contacting Headway SupportIf instructed in the flowchart to contact Headway support, log in to your Headway member dashboard, click Support Forums, and create a new message. Do the following in your message:

● Provide your full system information, found in your WordPress admin panel. To locate this information:

1 Click Tools in the Headway menu.

2 Click the System Info tab.

Copying and pasting this information into your forum message.

● Describe the problem with as much detail as possible, including any and all steps you took prior to the problem occurring.

● Mention what troubleshooting you’ve already tried.

Reinstall WordPress. Create a full backup of your site. Then, in the WordPress Dashboard ► Updates section, click the Re-install Now button.

Is the site working?

Yes

No

Activate Headway and check your website.


Contact your hosting provider or an IT specialist.

Yes

No

Go to A on p. 77 and start activating and testing plugins one at a time.

Get help from the Headway team. See “Contacting Headway Support” on p. 83.

84

New Member’s Guide Troubleshooting

Documents

NEW MEMBER’S GUIDE TO - Amazon S3 · WordPress version: 3.9 Headway version: 3.7 NEW MEMBER’S GUIDE TO The Drag-and-Drop WordPress Theme