Widgetized Landing Page in Genesis

This tutorial provides the steps to create an advanced full-width Widgetized Landing Page in Genesis.

Here is a sample preview with the required HTML structure which covers all the important container and classes to design different landing pages for your Business, Portfolio or Services.

This tutorial will help you in creating the starter template for the Landing page. Landing Page content designs are coming soon.

Prerequisite:

It is not required but recommended. Totally depends on your requirements for the landing page.

1. Create a file name landing.css under child-theme/css/ folder. Create the folder /css/ if not present in the child theme.
2. Create a file name landing.js under child-theme/js/ folder. Create the folder /js/ if not present in the child theme.

Let's start.

STEP 1

Register Two widget areas for Landing Page. Add the following in functions.php of your child theme.

//* Register landing page widget areas in functions.php
genesis_register_sidebar(
	array(
		'id'          => "landing-page-1",
		'name'        => __( "Landing Page 1", 'genesis-sample' ),
		'description' => __( "This is the landing page 1 section.", 'genesis-sample' ),
		//'before_title' => '<h1 class="entry-title" itemprop="headline">',
		//'after_title'  => '</h1>',
		'before_title' => '<h2 class="first-title heading widgettitle widget-title">',
		'after_title'  => '</h2>',
	)
);
genesis_register_sidebar(
	array(
		'id'          => "landing-page-2",
		'name'        => __( "Landing Page 2", 'genesis-sample' ),
		'description' => __( "This is the landing page 2 section.", 'genesis-sample' ),
		'before_title' => '<h2 class="second-title heading widgettitle widget-title">',
		'after_title'  => '</h2>',
	)
);

Remember, If you have multiple landing pages, You will need to add additional widget areas with different widget ID.

You can change the class, add h1 and more.

STEP 2

Create a file name landing-pro.php under your child-theme and add the following.