Andy from Webcrunch

Subscribe for email updates:

Portrait of Andy Leverenz
Andy Leverenz

February 21, 2017

Last updated November 5, 2023

How to Design and Code a Product Landing Page - Part 9

Continuing on in part 9 of the screencast series titled "How to Design and Code a Product Landing Page" we dive deeper into developing and styling the header portion of the page.

The first half of the video is dedicated to me walking you through how I make use of custom fields as well as implementing them.

To make my life easier I make use of Sublime Text snippets which I highly recommend you make use of if you use the code editor. Other code editors such as Atom or Visual Studio Code can do just as good a job. Use whichever editor you prefer. I find myself jumping from one to the other from time to time to keep things fresh.

The snippets I create in Sublime feature what is known as tab completion. This is a blessing when adding a snippet as you can code faster than you ever thought possible.

Learn more about creating snippets here.

Styling the custom fields

After adding both the data and the advanced custom fields code to the theme I begin styling each element accordingly. The second half of the video is dedicated to making the basic HTML output match the design of the product landing page as close as possible. In the next video, I wrap up styling the header and move on to the next sections.

The Series So Far

Link this article
Est. reading time: 2 minutes
Stats: 617 views



Part of the Design & Code a Product Landing Page collection