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)
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!
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.
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)
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).
I have a content block on the left and an image block on the right. The image block is a photo of the product.
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”.
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.
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.
Used 3 blocks: Social, Footer, Navigation
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.
It’s time to style things! While I’m not going to cover every single step/style here, I will cover the major areas.
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)
For all wrappers, I’ve removed all margins (set to 0) and then set padding on all sides to be 2rem.
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.
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.
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.
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.
I’ve centered the entire block. Contact Us is a block title so the styling is already done.
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
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)