• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Minima Designs

Online Business Strategy | Web Design Mentorship

  • ABOUT
  • PRAISE
  • WORK WITH ME
  • DESIGNERS
  • BLOG
  • SHOP
  • FREE
  • Contact
  • GET THE NUGGET

The art of the elegant opt-in

I’m so thrilled with the response to my last video – and a got a lot of questions about how I made the elusive horizontal opt-in.

I used widgets to hold my newsletter sign-up code – There are several widget areas already available for use in this particular theme (Parallax Pro Theme from studiopress.com). and I added another widget to specifically hold my interior page signup form.

Steps to adding a widget & newsletter opt-in

  1. in your functions.php file, register a new widget. Give it a name and id that makes sense to you (in this case, header newsletter)

    genesis_register_sidebar( array(
    	'id'          => 'header-newsletter',
    	'name'        => __( 'Header Newsletter', 'parallax' ),
    	'description' => __( 'This is header newsletter area.', 'parallax' ),
    ) );
    

  2. Write a function to display the widget (in this case, I didn’t want to show this widget on the home page, so I hid it)
  3. 
    function parallax_newsheader_genesis() {
    // Don't display on home page
      if ( is_home() ) {
    		return;
    	} 
    // display on other pages
    	else {
    		genesis_widget_area( 'header-newsletter', array(
    			'before' => '<div class="header-news">',
    			'after' => '</div>',
    		) ); 
    	}
    }
    
    
  4. Hook the function where you want it to execute (in this case, I wanted it to display after the header and before the site content). Use the Genesis hook reference chart to determine what element you want hook it to.
  5. add_action( 'genesis_after_header', 'parallax_newsheader_genesis' );
  6. Paste your newsletter code into the widget
  7. Style the look of the newsletter boxes using CSS – to make the widget sticky, use “fixed” positioning.

Reader Interactions

Comments

  1. webly says

    February 19, 2014 at 3:58 pm

    You’re a life saver Michelle. I’ve been wanting to code one of these but lost patience asking or trying to figure out.
    Very useful tip.

    Reply
    • Michelle Martello says

      February 19, 2014 at 4:38 pm

      Awesome Webly!

      Reply
  2. Ellissa says

    February 19, 2014 at 5:12 pm

    Great tutorial and a stunning site Michelle! I’ve recently switched from Woo to Genesis and I am just in love with the framework!

    Reply
    • Michelle Martello says

      February 19, 2014 at 5:26 pm

      Thanks so much Ellissa – glad you’re enjoying Genesis – it has certainly sped up my workflow!

      Reply
  3. Siddiqi Ray says

    February 21, 2014 at 3:11 pm

    What a genius example of a “Generous Newsletter”! I don’t even write code (I’m photographer, as you know because you designed my sight: http://www.au-ray.com) However, I’ve forwarded this sight to clients who are looking to build educational video. You are the perfect example of a professional who cares about other’s development and gives freely of your expertise.
    AMAZING.

    Reply
    • Michelle Martello says

      February 21, 2014 at 4:12 pm

      Thanks so much Sid! So appreciate your support!

      Reply
  4. Donnie says

    March 28, 2014 at 3:18 pm

    This is awesome. I updated my functions.php file and everything seems to be working ok.

    I’m using the “E News Extended” plugin in the newly created widget area to match the opt-in I have in my sidebar and after a post.

    At the end of this fantastic article you say “Style the look of the newsletter boxes using CSS – to make the widget sticky, use “fixed” positioning.”

    What would some simple css look like that would fix how wonky the e-news extended plugin looks in this widget area.

    You can see here: http://donnielaw.com/test-post/

    Thanks again for this tutorial!

    Reply
    • Michelle Martello says

      March 28, 2014 at 3:48 pm

      Hi Donnie – I’ll be honest, I never use e-news extended. I tend to hand-code my opt-ins using the code provided by mailchimp (or other provider). That way I can remove any extraneous code bits I don’t need. What you can do is use Firebug or Chrome Developer Tools to determine the name of the specific elements and give the input box and submit buttons % widths in your CSS. (you can see in my css below how I did the same thing to control the spacing of the input boxes.)


      #newsletter form input[type="text"],
      #newsletter form input[type="email"]
      {width:30%;font-size:22px;background:#b37b0b !important;color:#fff !important;padding:10px !important}

      #newsletter input[type="submit"]{width:15% !important;font-weight:bold;padding:14px}

      Reply
      • Donnie says

        March 28, 2014 at 3:52 pm

        Thanks for the quick response! I’ll mess around with this and see what I can figure out.

        Reply
  5. Bob Hafemeister says

    June 13, 2014 at 12:42 pm

    Hi Michelle,

    Great tutorial!
    I totally agree with you about not using plugins when possible, much more streamlined.

    Could you share the code you used in the opt-in text widget?

    Regards

    Bob

    Reply
  6. Casey Choate says

    October 5, 2014 at 10:07 am

    Thanks so much for this! Any chance you could create a post about how to create an opt in box like this using css or perhaps share the css you used?

    I’m using Parallax Pro as well and I’m having a hell of time with this!

    Reply
    • Michelle Martello says

      October 5, 2014 at 2:41 pm

      Hi Casey – you can see the CSS by peeking at my style.css file – Just view source on any page (in Chrome, go to View > Developer > View Source) and look for the link to the style.css file – then you can see anything I’ve done on the site (this is how you can find how anybody styles anything – while you can’t easily view the functions.php file, css files are open for anyone to view.) – I also recommend using Chrome web developer inspector tool – that makes it easy to see how each object is styled.

      Reply
  7. Casey Choate says

    October 5, 2014 at 10:45 am

    Hi again. I’ve figured out how to style my enews widget. The thing I’m having a difficult time with though, is making my front page opt in look like yours.

    I’m assuming that you somehow made home-section-2 the same size as your opt in form. How’d you do that?

    Reply
    • Michelle Martello says

      October 7, 2014 at 5:30 pm

      Hi Casey – I sized the block using CSS to fit it by adjusting the margins and padding – hope that helps! Each block has specific paddings/margins you can adjust manually in the stylesheet.

      Reply
  8. Chrissy says

    September 27, 2015 at 8:41 pm

    Hey stranger. Thanks a bunch for putting together this tutorial! I was working on putting a more in-depth tutorial together for one of my courses and this helped tremendously! I did it slightly differently but got it to work!

    I totally see why you didn’t put the opt-in below the header on the home page – Parallax Pro makes it kinda wonky! Here’s the final result on my test site http://wpsimfilied.net. I used the Magic Action Box plugin. I have a love/hate relationship with Genesis eNews that’s bordering on hate because it’s so limiting!

    Thanks again Michelle! See you in DSS!

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

FEATURED ARTICLES

Get your site ready for 2023 – free website checklist

Genius time management tips for real people

How to make modern business cards

Kajabi Pros and Cons Review (2023)

Three free tech tools to explain yourself faster

SEARCH THE SITE

business tips for web designers

get the minima guide to launching your website minima designs shop

Footer

MINIMA

  • Speaking
  • Contact
  • Affiliate Disclaimer
  • Terms + Conditions
  • Privacy Policy

OFFERINGS

  • Launch Brain
  • Minima Guide to Getting Paid Online
  • Minima Guide to Launching Your Site
  • Consulting
  • Shop
  • B-School
  • B-School Alumni
  • Time Genius
  • Facebook
  • Instagram
  • Pinterest
  • YouTube

Copyright © 2023 MINIMA DESIGNS

ALL RIGHTS RESERVED · Photos by MEOLA

7 FOOLPROOF WAYS to rise ABOVE THE NOISE.

GET YOUR free guide TO UP YOUR DIGITAL STRATEGY GAME AND GET NOTICED ONLINE.
GET YOUR GUIDE