WP SITES

2633

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

MarieForleo.com Style E-Mail Subscribe Box For Genesis

This tutorial enables you to make exactly what you see in this screenshot.

A e-mail subscribe box like the one you can see on www.marieforleo.com

marieforleo.com style email subscribe box

Its a little bit different as i used pure CSS rather than images for the text and button.

There’s 2 steps involved to get this thing happening:

  1. Create a new widget area below the header. In this case using the genesis_after_header hook.
  2. Add the CSS to style the Genesis eNews Extended widget.

Create the After Header Widget

Simply copy this PHP code from the view raw link in the Gist labelled functions.php and paste it at the end of your child themes functions.php file using a code editor.

Once you’ve added the CSS, you can install and configure the Genesis eNews Extended widget settings.

Style The Subscribe Widget

Simply add this CSS at the end of your child themes style.css file.

Tools You Need

Mobile Responsive

The CSS for Media Queries isn’t included because its built in Genesis for the eNews widget which you would have in your sidebar already and re-sizes perfectly when used in the sidebar.

No need to display 2 opt in forms when on a mobile.

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

    .marieforleo-subscribe-box {
	display: none;
	}
}

Add this CSS to your Media Queries near the end of your child themes style.css file.

This solution is coded very differently to what her designer used as you can see if you inspect the CSS.

2 Changes You Might Consider

You might want to vertically align the e-news widget so its in the middle and use different CSS to code the button so it extends over the edge of the widget container.

You could also filter the e-news widget title and wrap the second word in span tags so you can make it italic with CSS.

Reader Interactions

Comments

  1. Is it possible to place this widget elsewhere? My client asked if we can place it between home-top and home-bottom on an Outreach Pro site home page. We have sidebar optin boxes on the inner pages.

  3. Do you have to use Beautiful Pro for this? I want to use the Magazine or the Minimum theme, but otherwise? This is perfect for what I need. Also, I’m using Ontraport, not MadMimi. Can I still use their HTML for the registration?

    Thank you!

  4. Hi Brad, how can I use this on the home page only? I was going to use the Visibility in the Jetpack plugin but would rather just add whatever to the functions file.

  6. OK, I think I got it except that in Beautiful Pro, the styling for the new box is only on the front page. The other pages are just the e news extended widget without your styling

    • Looks the same on all pages on my local installation.

      Did you add the PHP code as well or use an existing widget?

      If you’re using an existing widget, you will need to change the widget class in the CSS from

      .marieforleo-subscribe-box

      to your existing widget class

Leave a Reply