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.
22 replies on “MarieForleo.com Style E-Mail Subscribe Box For Genesis”
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.
Yes. Customization support for members. http://wpsites.net/registration/
Any idea on how to link this to Ontraport?
That’s a question i would ask the plugin Developer of the Genesis eNews Extended plugin.
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!
Use any theme you like.
Ask the plugin Developer about which email marketing services work with the Genesis eNews Extended plugin.
read my mind christine 🙂
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.
Hi
Just add a conditional tag
after the function like this:
Thank you! Worked perfect!
Its magic!
It made its’ own widget.
What made its own widget?
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.
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?
No. I used Mailchimp. Would that be the problem? I will try MadMimi.
Let me take a look at your site and see what the problem is later on when i have time.
I looked at your site and there is no problem. This is how it looks on every page of your site:
Thank you. Forgive me for not remembering to empty the cache. It’s perfect.
Glad you like it Christine.
You’re forgiven!
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