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

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

2 Column Widgets Inline For Slider & Genesis E-Mail Subscribe Form

The screenshot below shows you exactly what the code generates after installation.

If you want to place a slider next to a email subscribe optin box, that’s exactly what this tutorial is all about. As long as you’re using a child theme which runs on Genesis.

slider opt in form

Slider Image: Courtesy Elegant Themes

The code produces 2 widgets inline.

  1. The left column widget is 66% wide and populated with a slider.
  2. The right column widget is 33% wide and populated with the Genesis eNews widget.

Code Installation

  1. Copy the PHP code from the Gist labelled functions.php and paste it at the end of your child themes functions.php file using a text editor.
  2. The CSS in the Gist labelled style.css goes near the end of your style sheet before your Media Queries.

Alternative Method

Here’s another way to code this solution:

Register for full access

Widgets

The code generates 2 widgets.

  1. The left column widget is populated with the super fast loading Soliloquy slider.
  2. The right column widget is populated with the Genesis eNews plugins widget.

Replace Background Color With Image

.slider-email-box {
    background-image: url(images/image.png);
}

And here’s the result:

image background

Slider Configuration

slider settings

You could also use this tutorial to place a image or video next to a email subscribe form and use any Aweber, MailChimp or any other form code on a text widget.

Will Code Work in All Themes?

I also tested the exact same code on the Enterprise Pro theme and this is the result without any tweaking of the CSS.

use on other themes

Clearly there are 2 lines which you can remove using CSS and also add some padding-bottom.

This shows you that you will need to do some work depending on which theme you use this code with.

Related Tutorials

  • How To Wrap Widget Areas in a Div Class

Reader Interactions

Comments

  1. jay says

    August 12, 2014 at 4:38 am

    will this work in outreach pro and do i need to get those other plugins, i figured yes right! i have added the code to my site already. i do see the new widgets area!!!

    Log in to Reply
    • Brad Dalton says

      August 12, 2014 at 4:44 am

      I also tested the exact same code on the Enterprise Pro theme and this is the result without any tweaking of the CSS.

      use on other themes

      Clearly there are 2 lines which you can remove using CSS and also add some padding/margin-bottom.

      Log in to Reply
  2. Elise says

    May 27, 2014 at 6:27 am

    Hi Brad,

    Will this work with Minimum Pro?

    Thanks,
    Elise

    Log in to Reply
    • Brad Dalton says

      May 27, 2014 at 6:31 am

      Hello Elise

      Yes but not tested on that theme and may need a tiny bit of code tweaking.

      Updated.

      Log in to Reply
  3. Stephanie says

    May 26, 2014 at 4:38 pm

    I also get a “1” appearing when I input the text widgets. Also, how do I get a background image behind both images that goes straight across from left to right?

    Log in to Reply
    • Brad Dalton says

      May 26, 2014 at 5:23 pm

      Thanks for letting me know about the 1 appearing.

      I will update the code as soon as i fix this bug.

      There’s a class which covers the entire wrap generated by the PHP code:

      Your CSS would look something like this:

      .slider-email-box {
          background-image: url(images/your-image.png);
          color: #FFFFFF;
          height: 350px;
      }

      You’ll need to modify the values for the colors, image and height.

      Log in to Reply
    • Brad Dalton says

      August 12, 2014 at 5:43 am

      That’s been fixed now. just s simple typo in the PHP code and i decided to re-write all the code anyway so its gone now.

      Log in to Reply
  4. JP says

    May 20, 2014 at 11:45 pm

    Hi Brad,

    Thanks so much for your EXTREMELY helpful Tutorials. I have referred to them many times.

    In this case, instead of using the slider I have a text widget in the Left Column. A “1” appears between the two widgets. If I remove the text widget from Left Column the “1” goes away. Any ideas?

    Thanks!

    Log in to Reply
    • Brad Dalton says

      August 12, 2014 at 5:44 am

      Fixed and code updated.

      Log in to Reply
  5. Keith Davis says

    May 10, 2014 at 8:43 am

    The pink caught my eye Brad and then I stopped and read the code.

    If code is poetry then you are one fabulous wordsmith.

    Thanks for another coding gem.

    Log in to Reply
    • Brad Dalton says

      May 10, 2014 at 10:06 am

      Hello Keith

      Just got an email from Elegant Themes which gave me the idea for the colors and someone asked on the forum how to do this.

      Hoping to write some tutorials relating to customizing Elegant themes soon.

      Log in to Reply
      • Keith Davis says

        May 10, 2014 at 10:20 am

        Thought I recognised the pink image.
        Check out my post on my Divi theme site:
        http://divitheme.co.uk/divi-theme-overview-awesome-divi-builder/

        “Hoping to write some tutorials relating to customizing Elegant themes soon.”
        that’s great news – any chance you can start with the Elegant Themes footer.

        Log in to Reply
        • Brad Dalton says

          May 10, 2014 at 10:33 am

          Yeah. Let me know exactly what you want done with the footer and as soon as i get access to the themes i’ll work it out.

          Log in to Reply
          • Brad Dalton says

            August 12, 2014 at 5:46 am

            Here it is http://wpsites.net/web-design/divi-by-elegant-themes-change-footer-links-style-social-icons/

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.