Launch Template for Headway

Launch Template Setup Guide

This is the setup guide for the Launch Headway template. We’ve tried to make the template as easy to use as possible, but if you get stuck at any point, come back and reference this guide.

Before you begin

To ensure things go smoothly, we recommend you download everything you need before you start the setup process. This includes the latest version of Headway, the Launch template and optionally the demo sample content (not recommended for existing Headway installs).

Important: Once you’ve downloaded the Launch (Unzip First).zip file, you will need to extract the archive (unzip), which will give you this:

Demo Content (Unzip First).zip Sketch Source (Unzip First).zip Templates (Unzip First).zip All the files with the .zip extension need to be extracted too.

Demo Content

Once extracted you’ll end up with:

  • /Demo Content/
  • /Demo Content/Launch – Demo Content – HWR Edition.xml
  • /Demo Content/Launch – Demo Content – Standard Edition.xml

This is the sample content from the two Launch demos.

The Standalone version is the normal template with support for Headway’s core layouts.

The Bundle version includes additional styling and Shared Layouts for our Headway blocks.

Sketch Source

Once extracted, you’ll have the Launch.sketch, which can be opened with Sketch.app (the application Launch was designed in).

Launch Templates

Once you have extracted the Launch – Templates (Unzip First).zip file, you will end up with the following:

  • /Templates (Unzip First)/
  • /Templates (Unzip First)/Headway Template – Launch – Standalone 1.1.json
  • /Templates (Unzip First)/Headway Template – Launch – Bundle 1.1.json

As mentioned earlier, you will only use the Bundle version if you are planning on using our blocks with Launch. Otherwise install the Standalone version.

The template can be installed by going to Headway > Templates > Install Template and following the on-screen instructions.

Standalone version

Below are the basic setup steps for the standalone version of our Launch Headway template.

Step 1.)

Install a fresh copy of WordPress or create a full backup if you are setting up on an existing site. Always better to be safe than sorry.

Step 2.)

Install and activate Headway (if you haven’t already).

Step 3.)

Optionally, install the demo’s sample content, using the WordPress Import tool, which is located under Tools in the WordPress admin sidebar.

It’s important that you install the sample content before you install the Launch template, if you want the various template assignments to remain intact.

After clicking the Upload file and import button, you will be presented with a screen with the headings, Assign Authors and Import Attachments.

The Assign Authors section lets you select an author to use for the imported content. Select your sites admin username.

The Import Attachments section lets you decide whether file attachments should be imported as well.

Tick this box if you’d like the demo images to be imported.

Step 4.)

Install the Launch template via Headways template overview page. The link to get there is located below the Visual Editor sub-menu item in the WordPress admin sidebar.

Step 5.)

The last important step, is to assign or create a WordPress menu, to the placeholder in the template. You can do so by going to Appearance > Menus, then tick the box below your selected menu.

See below for an example

Activate the menu in WordPress

Step 6.)

By now you template should be nicely setup. You can optionally increase the number of Recent Posts (default is 5) and enable category counts from your Widgets admin page.

Step 7.)

Make any needed customisations in the Headway Visual Editor. There is some custom css located in Headways editor, but most of the styling should be possible using point and click.

Shared Layouts

There are also a number of pre-built shared layouts for general layout control.

Shared layouts

Bundle version

Below are the basic setup steps for the bundled version of our Launch Headway template.

Frontpage Header Image

To setup the Frontpage header image, edit the Frontpage Shared Layout in Headways Design mode. The background is set on the Header Wrap wrapper. Right-click on the wrapper and select “Edit This Instance” and set the background via the Background property group.

Home Contact Form

Configure the contact form with your own email address and adjust the address for the map on the Frontpage Shared Layout.

Home Features

The block is created using the Features block. The icons for the individual feature items are added using the Font Awesome icon library and are set by adding the appropriate class. See here for more info and examples -> http://fortawesome.github.io/Font-Awesome/examples/.

Home Testimonials

The testimonials block on the home page will pull in all Testimonials that have the “home” tag.

Home Brand Icons

The brand icons on the home page are added using the Features block, with only images enabled and the grid set to 6 columns.

Newsletter

The newsletter section is using our MailChimp block. All that needs to be done to set it up is to add your own MailChimp signup url. Note, you need to use the full expanded version, not the eepurl version. See here for detailed instructions -> http://headwayrocket.com/launch/guide/mailchimp-setup. This also applies to the newsletter Shared Layout.

Blog

The blog has two Shared Layouts you can choose from. Either the more traditional layout, or the Pinboard version. To use, simply apply the Shared Layout to the Blog Index page.

Faq

The FAQ layout uses the Features block, with the content source set to WordPress. The “faq” items are added via the Features post type in your WordPress admin. It’s important to add the items you’d displayed in your FAQ page to the Faq category.

Team and testimonials

The Team and Testimonial layouts are using the Testimonials block, with the content added via WordPress.

Features and pricing

The Pricing layout is using the Features block, with the content source set to Headway.

Contact

The contact page Shared Layout is using our Contact block and will need to be configured with your own email address.

General layouts

There are three basic layout templates that are included in the Shared Layouts. Sidebar Left, Sidebar Right and Full Width. Apply these to any pages where you want the sidebar position changed (or removed).

MailChimp setup

Both versions of Launch come with support for our free MailChimp block.

In order to use, you need to first download and install the block from the MailChimp product page.

Once that is done, simply install it as you would any other plugin.

To speed up the setup process, we’ve created an export file of the MailChimp block options and design settings.

Download the export file (right click on the link and select “Save Link As”) and make a note of where it located on your computer.

Next, we need to add a MailChimp block instance to the Blog Shared Layout.

This is what your Blog layout should look when you first install Spark:

// Launch blog default

Drag a new block instance and select the MailChimp option.

// New MailChimp instance

Once selected, you’ll be presented with the MailChimp blocks options.

// MailChimp block options

Skip to the Import/Export tab, to import the MailChimp settings.

// MailChimp import

To import, click on the Select File to Import button, then locate the MailChimp export file, you downloaded earlier.

Once imported, you can proceed to enter your MailChimp signup url. Our MailChimp setup video has detailed steps on how to do this.

Navigation

More

Company

AboutServicesBlog

Support

OverviewFaqsGuides