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.
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!
I changed the Site Title in WordPress » Settings » General to say Photographer.
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
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.
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.
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.
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.
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!
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.
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.
Once again, 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 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.
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.
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.
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.
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.
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.
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
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)