Custom page template design for header, menu with description and footer in Genesis

This tutorial provides the steps to design a Custom template for single pages having features - header with hero title, sidebar having a menu with description and footer design with a different layout in the Genesis Sample.

This tutorial could be very useful for those who are interested in working templates and sidebars.

The idea:

Here, What we are going to do.

Markup.

1. Output Featured Image and reposition Post title. (Header section) and SUBTITLE
2. Output description for Menu items contains Pages and SubPages (Primary Sidebar)
3.  Page Layout will be Primary Sidebar + Content.
4.  Footer Layout will contain 3 WIDGET AREA with width of 25%, 50% and 25%.
   FOOTER 1 (25%) = 1. Image Widget 2. Menu Widget (Name it footer1menu)
   FOOTER 2 (50%)= Drag 2 OR 4 Menu Widget. Each widget will get about 50% having two widgets in 1 line.
   FOOTER 3 (25%) = 1 Menu Widget.
5. Site Footer will contain 1. Text Widget in left and 2. Simple social Icons Widget in right.

Customization.

for Desktop.

1. Transparent site header with absolute positioning.

For Mobile

1. The header will remain the same with the white background.
2. The primary sidebar will be on top, Content will be below.

We are going to break the tutorial in 3 sections having multiple steps for each.

Prerequisite: