Landing Page Series: Designer

Welcome to our Landing Page Series where we are going to do a series of tutorials to create different landing page types.  The tutorials will not actually be a complete step by step tutorial but rather, will be more general in nature where I explain how to do certain areas.  However, I will show you screenshots of the grid and some of the settings.

First up, is a landing page for a Designer or Design Company!  Here is what the landing page looks like that I’m basing this tutorial on.

Designer
Click the image to see the whole thing

 

So as you can see, there are 7 different sections.  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).

Top Wrapper/Header Area

I’ve used 5 blocks for this. A header block, a navigation block and 3 text blocks.  Here’s what my wrapper looks like in Grid Mode

landing-page-designer-top_header
I’ve added wrapper aliases to all wrappers and block aliases for the blocks that I needed to in order to style them properly and for the navigation block, so I know which navigation block to assign which menu to later on. (Please see Naming blocks and wrappers for more on how give wrappers and blocks names/aliases)

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

Header Block and Navigation block

Default settings except I’ve hidden the tagline in the Header block

1st Text Block

No special settings but I’ve created 3 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)

CTA Text Block

I’ve given the text block custom classes for styling. I’ve created a link to an anchor link to the contact form at the bottom of the page (For more on anchor links, please see this external resource).

CTA2 Text Block

I’ve also used custom CSS classes for styling and I’ve again created an anchor link to the section right after this one.

Services 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: Services.  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 services section.

Visual_Editor__Front_Page_and_iTunes

For the 3 blocks in the text blocks that appear in columns, I’ve added an icon for each one as well as text underneath you could use to describe each service. For the icons, I created them using FlatIcons.net but to cut down on images, you could use an icon font instead (such as FontAwesome).

Portfolio

Used a content block set in the middle of the grid that is 943px wide using the following settings:

Mode: Custom Query

Query Filters:  In this case, I simply created a category called portfolio and have selected that in the Categories filter. Number of Posts is set to 6 because I envisioned two rows of 3 columns.

Display:  Entry Content Display is set to Hide.  Featured Posts is set to 0 so no full width post displays.  Enable column layout is checked with 3 columns.

Meta: Removed everything for meta content above/below

Featured Images: Image Position is set to Above Title.  Featured Image Height is set to 100%. Crop Featured images is on because I want all images to be the same height/width.

About

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.

Team

Used a content block set in the middle of the grid that is 943px wide set to Custom Query Mode and is fetching the Team Page.

Contact

Used a custom code block that is 943px wide with the short code from my form plugin to display the form I created.  Before the form, I added the code so that the Get a Quote anchor link targets this section.

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/Header

The Site Title in the Header Block I’ve left to the default font and set the font size pretty large

In the navigation block, I’ve set the font color to a light grey with a gold hover and selected color.

In the first text block, the first two Heading are set to the Heading font (Nunito).  The first line font size is set to 2rem.  The next Heading is set to 3rem.  The last heading (before the CTA buttons) is set to the default font and 2.5rem for the font size.

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.

Lastly, I’ve set the background image and overlay in the Live CSS editor simply because you can’t add both in the visual editor currently.  The background size is set to cover and the image does not repeat.

Services

I’ve centered the entire block.    Services 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.

Porfolio

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

About

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

Team

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

Contact Us

I’ve centered the entire block. About 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 Landing Page

 

 

Spread the word!

12 Responses

  1. Thanks Jamie for the very detailed tutorial. Is it possible to make the template available to download. It will make more sense if we can play around with the template while reading your instructions. Very appreciated.

  2. Love this type of instruction. Would really like to see more like this Jamie. It is a great way to learn and see how sites are put together using headway. Being relatively new to HW and site design, this is the easiest way for me to learn. Please keep posts like this coming.

    • Hey Russell,

      Glad you like it! We have another that will be published Tuesday. And if you have any specific suggestions for tutorials, please shoot me an email (jamie@headwaythemes.com).

  3. Thanks so much Jamie! I am wondering if the only way to create anchor points between blocks is by using the Custom Code block. Is there a way to do this within other blocks? Like Gravity forms ?
    Thank you so much!

    • I’m not sure I fully understand your question. Could you please explain more? Anchors require HTML so anywhere you can add HTML you can create anchor links.

Leave a reply

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