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 Image: Courtesy Elegant Themes
The code produces 2 widgets inline.
- The left column widget is 66% wide and populated with a slider.
- The right column widget is 33% wide and populated with the Genesis eNews widget.
Code Installation
- 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.
- 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.
- The left column widget is populated with the super fast loading Soliloquy slider.
- 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:
Slider Configuration
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.
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.
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.
Clearly there are 2 lines which you can remove using CSS and also add some padding/margin-bottom.
Hi Brad,
Will this work with Minimum Pro?
Thanks,
Elise
Hello Elise
Yes but not tested on that theme and may need a tiny bit of code tweaking.
Updated.
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:
You’ll need to modify the values for the colors, image and height.
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.
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!
Fixed and code updated.
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.
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.
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.
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.
Here it is http://wpsites.net/web-design/divi-by-elegant-themes-change-footer-links-style-social-icons/