Sridhar Katakam

Genesis and WordPress Tutorials

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

by 24 Comments

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

horizontal-optin-with-bkgrd

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.

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • This worked for me—thank you! I wanted my opt-in box closer to the bottom of the image so I changed the following in the CSS:

    Instead of
    .horizontal-opt-in .wrap {
    max-width: 800px;
    padding: 200px 0;
    }

    I now have

    .horizontal-opt-in .wrap {
    max-width: 800px;
    padding: 250px 0 25px;
    }

    I have two follow-up questions for you:

    Is it possible to change the image to a slider?
    Is it possible to have this image display at the top of all pages (yes, contrary to what I had said I wanted before!).

    Many thanks!

    Reply

  • Hi,
    Thank you for this tutorial. I am wanting to have just a thin horizontal bar with the opt-in words to the left of the input boxes instead of above (as on Brain Gardner’s site)
    Can you assist in what I need to change/or add in the css to do this?

    Thank you!

    Reply

  • Krista / Sridhar;

    FYI the images in Parallax are actually color images that have been converted to B&W via Photoshop or other means. I found the images in one of the sites listed here: http://dustn.tv/find-free-images/ (great resource for finding images for Genesis).

    Thanks Sridhar for all your help and tutorials.
    mark

    Reply

  • Just the job, I was using this on the sample theme from the raw script for a scrolling content background and had a couple of issues. Your post cleared them my error – thanks Sridhar.

    Reply
    • >