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 Spark template and optionally the demo sample content (not recommended for existing Headway installs).
Important: Once you’ve downloaded the Spark (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.
Once extracted you’ll end up with:
- /Demo Content/
- /Demo Content/Spark – Demo Content – HWR Edition.xml
- /Demo Content/Spark – Demo Content – Standard Edition.xml
This is the sample content from the two Spark 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.
Once extracted, you’ll have the Spark.sketch, which can be opened with Sketch.app (the application Spark was designed in).
Once you have extracted the Spark – Templates (Unzip First).zip file, you will end up with the following:
- /Spark (Unzip First)/
- /Spark (Unzip First)/Spark - Templates (Unzip First)/Spark – Standalone 1.1.json
- /Spark (Unzip First)/Spark - Templates (Unzip First)/Spark – Bundle 1.1.json
As mentioned earlier, you will only use the Bundle version if you are planning on using our blocks with Spark. Otherwise install the Standalone version.
The template can be installed by going to Headway > Templates > Install Template and following the on-screen instructions.
Standalone setup steps
Below are the basic setup steps for the standalone version of our Spark template.
We’ve tried to be as comprehensive as possible, but we would love to hear from you via our contact form, if you think there is anything we can improve.
Before you begin
Be sure to check out the Before you begin guide before proceeding with the rest of the steps.
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.
Install and activate Headway (if you haven’t already).
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.
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.
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.
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.
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.
There are also a number of pre-built shared layouts for general layout control.
Please note the above screenshot is of the Bundled version Shared Layouts. The Standalone version comes with layouts for all the core Headway layouts.
Bundle setup steps
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.
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/.
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.
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 -> https://www.headwayrocket.com/guides/mailchimp-setup. This also applies to the newsletter Shared Layout.
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.
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.
The contact page Shared Layout is using our Contact block and will need to be configured with your own email address.
There are 3 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).