Horizontal Opt-in with a full width background image in Genesis

In this article I show how we can display a horizontal opt-in form with a full width background in Genesis.

Summary of steps:

1. Register a custom widget area for our Horizontal Opt-in
2. Display this Opt-in widget area after header + navigation on homepage
3. Enqueue Backstretch on homepage
4. Set the desired image as background for the horizontal opt-in div via Backstretch
5. Populate the custom widget area with a Genesis eNews Extended plugin's widget

Step 1

Upload jquery.backstretch.min.js to child theme directory/js. Ex.: at wp-content/themes/genesis-sample/js/jquery.backstretch.min.js. Create js directory if it does not exist.

Step 2

Create a file named backstretch-init.js having the following code and upload it to the same location as above.