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
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:
- Create a new widget area below the header. In this case using the genesis_after_header hook.
- 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
- Free – Genesis eNews Extended Plugin
- Free – Mad Mimi e-mail marketing account
- Premium – Genesis theme framework
- Premium – Beautiful Pro child theme by StudioPress
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.
Liz says
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.
Brad Dalton says
Yes. Customization support for members. http://wpsites.net/registration/
Rachel Brenke says
Any idea on how to link this to Ontraport?
Brad Dalton says
That’s a question i would ask the plugin Developer of the Genesis eNews Extended plugin.
Christine says
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!
Brad Dalton says
Use any theme you like.
Ask the plugin Developer about which email marketing services work with the Genesis eNews Extended plugin.
Rachel brenke says
read my mind christine 🙂
AnitaC says
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.
Brad Dalton says
Hi
Just add a conditional tag
after the function like this:
AnitaC says
Thank you! Worked perfect!
Brad Dalton says
Its magic!
Christine says
It made its’ own widget.
Brad Dalton says
What made its own widget?
Christine says
Sorry. I added the php code and that gave me a new widget area. I then dragged my e news extended into the new widget area.
Brad Dalton says
That’s what i did so it should work perfectly as long as you configured the e-news widget settings.
Did you use Mad Mimi?
Christine says
No. I used Mailchimp. Would that be the problem? I will try MadMimi.
Brad Dalton says
Let me take a look at your site and see what the problem is later on when i have time.
Brad Dalton says
I looked at your site and there is no problem. This is how it looks on every page of your site:
Christine says
Thank you. Forgive me for not remembering to empty the cache. It’s perfect.
Brad Dalton says
Glad you like it Christine.
You’re forgiven!
Christine says
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
Brad Dalton says
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