Landing Page Series: Photographer

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

Admittedly, this landing page does not have a slider of any sort but you certainly could adjust the portfolio section to have one.

Here’s what the tweaked landing page looks like.
landing-page-photog

Just as before, 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!

General Settings

I changed the Site Title in WordPress » Settings » General to say Photographer.

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

This is the exact same as in the previous tutorial. Five blocks: A header block, a navigation block and 3 text blocks. Here’s what my wrapper looks like in Grid Mode
Visual_Editor__Front_Page_and_Front

Once again, 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).

As you can see, I’ve changed the text in all 2 of the 3 text blocks so it fits in with the Photographer Design.  The anchor links and custom classes are still there except I’ve changed the classes to represent the colors used in this design.

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

2nd Wrapper/Packages

As you can see from the preview, I’ve changed the text in all of the text blocks and instead of 3 images (one for each package), I’ve added one image underneath the “title”, which is Packages. Then I’ve also changed the alias for each text block underneath the “title” text block to it better represents the content.

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 package 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 Packages title as you could just use the block title option.

Visual_Editor__Front_Page

For the icon, I again created it using FlatIcons.net but to cut down on images, you could use an icon font instead (such as FontAwesome).

3rd Wrapper/Portfolio

This section consists of a content block set in the middle of the grid to 943px wide.  This could be done in many different ways, such as a custom post type for portfolio items and you fetch the post type items instead.Visual_Editor__Front_Page

My settings are:

Mode: Custom Query

Query Filters:  In this case, I simply created a category called Wedding and have selected that in the Categories filter. Number of Posts is set to 3 because I envisioned 1 row of 3 items.

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.

4th Wrapper/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.Visual_Editor__Front_Page

5th Wrapper/Clients Love Us

Used a content block set in the middle of the grid that is 943px wide set to Custom Query.  It is fetching the Testimonials page.  I had envisioned several testimonials on top of each other.
You could also fetch a custom post type of testimonial and have it set to display in columns!Visual_Editor__Front_Page

I also changed the block alias to “Clients Love Us”.

6th Wrapper/Contact Us

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

Once again, 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.  I’ve given the header block (instance) a gold/orange background color and set it to be somewhat transparent using the transparency slider in the color picker.

Visual_Editor__Front_Page

 

I’ve done the same thing for the navigation block (instance).  And set the menu item (regular element) color to white with a black hover.

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.

Packages

I’ve centered the entire block.    Packages 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 the same gold/orange color but given it more transparency with the slider.   Portfolio 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.

Clients Love Us (Testimonials)

I’ve set the background color to the same gold/orange color but given it more transparency with the slider.  Clients Love Us is a block title so the styling is already done.  I’ve centered the whole block.

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.
I’ve given the navigation block a black background.  Menu Items are already set to white from above. I’ve given a hover color of gold for the menu item instance.

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 Landing Page

Spread the word!

6 Responses

  1. Jamie…this is awesome!! I plan on devouring this info when i get a chance!
    My quick newbie question….i dont understand the directions for installing fontawesome into my site. can i install it with out coding? (or simple coding instructions at least?)

Leave a reply

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