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:

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


Comments

14 responses to “2 Column Widgets Inline For Slider & Genesis E-Mail Subscribe Form”

  1. 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!!!

    1. Brad Dalton Avatar
      Brad Dalton

      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.

  2. Elise Avatar

    Hi Brad,

    Will this work with Minimum Pro?

    Thanks,
    Elise

    1. Brad Dalton Avatar
      Brad Dalton

      Hello Elise

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

      Updated.

  3. Stephanie Avatar
    Stephanie

    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?

    1. Brad Dalton Avatar
      Brad Dalton

      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:
      [code]
      .slider-email-box {
      background-image: url(images/your-image.png);
      color: #FFFFFF;
      height: 350px;
      }
      [/code]

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

    2. Brad Dalton Avatar
      Brad Dalton

      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.

  4. 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!

    1. Brad Dalton Avatar
      Brad Dalton

      Fixed and code updated.

  5. Keith Davis Avatar
    Keith Davis

    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.

    1. Brad Dalton Avatar
      Brad Dalton

      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.

      1. Keith Davis Avatar
        Keith Davis

        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.

        1. Brad Dalton Avatar
          Brad Dalton

          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.

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.