Landing Page Series: Product

Last week, we showed you the how-to of creating a Photographer Landing Page. This week, we are going to be using the same structure but with a few tweaks to create a landing page for displaying a Product.

Here’s what the tweaked landing page looks like. (Click the image to see a full size version)

landingpage-product

 

So as you can see, there are 8 different sections this time.  I will go over each section in order, first in Grid Mode and then in Design Mode.  Make sense? Ok then, let’s get started!

Grid Mode

General Settings

You can use any grid width you’d like but all wrappers should be fluid with a fluid grid. (Please see Wrappers & Wrapper Options if you need help creating a fluid wrapper with a fluid grid).

I’ve added wrapper & block aliases when needed for styling and to keep track of everything. I would highly recommend that. (Please see Naming blocks and wrappers for more on how give wrappers and blocks names/aliases)

Top Wrapper/Nav Area

This is just a header block with the tagline hidden and navigation block.

2nd Wrapper/Display Product

I’ve used 4 blocks for this. An image block to show off the product and then 3 text blocks.

landingpage-product-product

You could combine the 3 text blocks into one or into one custom code block if you know CSS.

There is one text block there contains the 2 lines of text and then a text block for each “Call to Action” area in that wrapper.

Call To Action Blocks

No special settings but I’ve created 2 headings in HTML/code mode.(Click < > to enable HTML/code mode)

You used to be able to use the visual editor of the text block and add headings but unfortunately that was changed in recent updates to the script we are using for the text block. If you are not comfortable using HTML, then an option would be to use a content block instead and fetch the content from a page (See Using the custom query mode of a content block and look for the Displaying a Page section)

Features Section

This section has 4 text blocks. I’ve chosen this because I wanted to do 3 text blocks, in 3 columns to display the different services.

You could actually do this with a content block as well using the column option and either pulling in entries from a custom post type, one for each service or using the include by ID option to include the pages that describe the services. Doing it this way, it would be less blocks and you wouldn’t need the text block for the Services title as you could just use the block title option.

There is also a text block at the top to display the title of the section: Features.  In the text block, I used HTML/code mode and added in the target for my anchor link so when you click on “learn more” it takes you to the features section.  I’ve also added an icon that I created at FlatIcons.net but to cut down on images, you could use an icon font instead (such as FontAwesome).

landingpage-product-services

 

Offers

I have a content block on the left and an image block on the right.  The image block is a photo of the product.

landingpage-product-offers

Content Block Settings

Mode: Custom Query

Query Filters:  Fetching page “Offers”.

Display:  Featured Posts is set to 0 so no full width post displays. I’m hiding the title also as I’m using a Block Title here.  Entry Content Display is set to Normal.

Meta: Removed everything for meta content above/below

Config: Added a block title of “Offers”.

About Us

Used a content block set in the middle of the grid that is 943px wide set to Default Mode.  Since this is on the Front Page layout, it will pull in the content for the page set as the Static Front Page.  I’ve also added a Block Title “About Us” in the Config tab.

What People are Saying

Used a content block set in the middle of the grid that is 943px wide set to Custom Query Mode and is fetching the “What People are Saying” page. I’ve also added a Block Title “What People are Saying” in the Config tab.

Contact

Used a custom code block that is 943px wide with the short code from my form plugin to display the form I created.  I’ve also added a Block Title “Contact” in the Config tab.

Last Wrapper/Footer

Used 3 blocks: Social, Footer, Navigation

landing-page-designer-last

In the Social Block, added the icons I wanted to display and set it to horizontal display.  The Footer block has default settings except I’m hiding the admin login link and the go to top link.  The navigation block I’ve given a name/alias so I can identify it in the Menus admin page inside WordPress.

Design Mode

It’s time to style things!  While I’m not going to cover every single step/style here, I will cover the major areas.

General Styling

Global Styling section

I’ve set the default font to be the Google Font of Rubik.

I’ve styled all Block Titles to have:

Font Size: 3rem

Line Height: 180%

I’ve set all Headings to be the Google Font of Nunito (this is the rounded font)

Structure Section

For all wrappers, I’ve removed all margins (set to 0) and then set padding on all sides to be 2rem.

Top Wrapper/Nav

The wrapper was given a red background (#AC272F). The Site Title in the Header Block I’ve left to the default font and set the font size pretty large at 2 rem.

In the navigation block, I’ve set the font color to be white.

 

2nd Wrapper/Display Product

The background of the wrapper is set to a light yellow (#F4F2E9).  In the first text block, the first two Heading are set to the Heading font (Nunito).  The first line font size is set to 3rem.  The next Heading is set to 2em.

The call to action blocks are very similar except for the colors.  Both are set to a background color with a darker bottom border of 5px.

Features

I’ve centered the entire block.    Features is a H1 so it is set to the Heading font family and size.  I’ve increased the line height for the text block content to space things out a bit.

Offers

I’ve set the background color to a light yellow and I’ve also centered the entire block.   Offers is a block title so the styling is already done.

About Us

I’ve centered the entire block. About Us is a block title so the styling is already done.

What People are Saying

I’ve set the background color to a light yellow and I’ve also centered the entire block.   What People are Saying is a block title so the styling is already done.

Contact Us

I’ve centered the entire block. Contact Us is a block title so the styling is already done.

Last Wrapper/Footer

I’ve given the block a dark grey background.  I’ve used custom css to make sure the copyright area centers.  By default, there is some float added to make sure every option in the footer block displays if you want it to.

Final things to do

The last thing really to do is to assign your menu(s) to your navigation blocks.  (For more on that, we have a written tutorial and a video on that)

Download the Landing Page

Great news!  You can download the landing page as a Headway Template.  You need a static front page in order to see what the screenshot of the Template looks like.  (For help on installing Headway Templates, please see our documentation)

Download the Template

 

 

 

Spread the word!

11 Responses

  1. Yes, Jamie, these are great. I’m sure they’re extremely helpful to many learning Headway Themes. I’ve been using Headway for quite a while now but I always learn something when I read your tutorials. Keep em’ coming!

  2. Thanks for an interesting post Jamie, I use a simliar approach from time to time on my webpages (like this one: http://www.induowireless.com/t/antennkabel/ ). One thing that I would like to know is if it is possible to create a template with the wrappers and their visual customizations in order but change the contents of each wrapper from page to page? On this page I have custom wrapper A and B below the content, but it would help a lot if I could use it on another page as custom wrapper C and D with different content but simliar look. Hope you understand what I mean.

    • Hi Ulf – There is no way to export wrapper settings / design (although I think this would make a nice new feature) but you could copy and paste the design settings from one wrapper to another.

      CMD+C or CTRL +C to copy in design mode when you are editing the element and CMD+V or CTRL +V to paste into the other element (wrapper) you want.

  3. Nothing to say Jamie,you are simply awesome.I don’t how you make this so easy to understand!Now I have better idea then before,Surely now i have complete idea about headway.Great tutorial.anyway off topic question,is it possible to reduce the price of Headway theme or any upcoming offer?
    TIA

Leave a reply

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