How to set up a Welcome section with Image at left and a Text widget on right in Genesis

In the Genesis Facebook group, a user wants to know how a welcome/hero section can be set to appear below the header similar to the one at http://www.melyssagriffin.com/.

In this tutorial I show how we can register a Welcome widget area and display it below the header in Genesis. We shall write responsive CSS to display an image at the left with a text widget placed in the widget area on its right. The image will be set to appear below the text at smaller viewport widths.

Screencast:

While the tutorial has been written for Genesis Sample child theme it should work with minor adjustments in any Genesis child theme.

Step 1

Add the following in child theme’s functions.php:

// Register Welcome widget area
genesis_register_widget_area(
	array(
		'id'          => 'welcome',
		'name'        => __( 'Welcome', 'my-theme-text-domain' ),
		'description' => __( 'Welcome section below header', 'my-theme-text-domain' ),
	)
);

// Display Welcome widget area below header
add_action( 'genesis_after_header', function () {
	genesis_widget_area( 'welcome', array(
		'before'	=> '<div class="welcome widget-area"><div class="wrap">',
		'after'		=> '</div></div>',
	) );
} );

Step 2

Upload your desired welcome section’s image to child theme’s images directory. In this example, I am using a 500 x 500 transparent png named headshot.png.

Step 3

Add the following in child theme’s style.css:

.welcome {
	background-color: #f5d355;
}

.welcome .wrap {
	background: url(images/headshot.png) no-repeat left bottom;
	padding: 170px 0;
}

.welcome .widget {
	text-align: center;
	/*float: right;*/
	max-width: 500px;
	margin-left: 580px;
}

.welcome .widget-title {
	color: #fff;
	text-transform: uppercase;
	font-size: 30px;
	font-weight: bold;
}

.welcome .button {
	text-transform: uppercase;
	background-color: #82dce9;
	border-bottom: 3px solid #73d2e0;
	border-radius: 3px;
	font-size: 18px;
	letter-spacing: 2px;
	padding: 14px 50px;
}

.welcome .button:hover {
	background-color: #73d2e0;
}

@media only screen and (max-width: 1200px) {

	.welcome .wrap {
		padding: 130px 0;
	}

}

@media only screen and (max-width: 1023px) {

	.welcome .wrap {
		background-size: 40%;
		padding: 60px 0;
	}

	.welcome .widget {
		margin-left: 400px;
	}

}

@media only screen and (max-width: 860px) {

	.welcome .wrap {
		padding: 70px 0;
	}

	.welcome .widget {
		margin-left: 300px;
		padding: 0 40px;
	}

}

@media only screen and (max-width: 771px) {

	.welcome .wrap {
		background-position: center bottom;
		background-size: 300px;
		padding-bottom: 350px;
	}

	.welcome .widget {
		margin: 0 auto;
	}

}

Step 4

At Appearance > Widgets, drag a text widget into Welcome widget area and fill in title and text.