WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

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

Reader Interactions

Comments

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

    • 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.

  3. 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?

    • 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.

  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!

  5. 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.

Leave a Reply