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.

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.