Soliloquy is perhaps the best WordPress slider plugin out there. It is simple, light-weight, very well optimized for speed and comes with excellent support.
Note: Soliloquy does not have the bells and whistles like layers that are present in LayerSlider and Revolution. If you need layers and a variety of animations, go with one of those.
In this article I show how we can set up a full width responsive Soliloquy slider below the Navigation in Genesis.
Summary of steps:
- [Optional] Load Arvo Google font for slide title and Call to Action button text
- Register Home Slider widget area
- Display Home Slider widget area's contents below Navigation on homepage
- Upload slides and configure Soliloquy especially the HTML for captions to show a title, content and a CTA button
- Add CSS to ensure that slide images go full width, style caption elements and display the caption below images at lower widths.
Step 1
Add the following in child theme's functions.php:
https://wordpress.org/plugins/soliloquy-lite/
Thanks for all the posts about standard genesis. Very helpful!
Thanks Sridhar,
The level of detail of your tutorials always makes implementation a breeze. Question…how can one remove both the arrow key and circle navigation on each slide?
Those are settings in Soliloquy itself, in the config tab I believe.
Yes. Just uncheck http://i.imgur.com/aBURDYM.png
Thanks Stephane and Sridhar. I’m using the free “lite” version of the plugin for now which does not apparently have that option in the setup panel. The premium/paid version does include these check boxes that you pointed out.
This is super cool… the only issue I come across is the responsiveness of the slider drags ‘over the top’ of blog contents as it stretches out. If I full screen it on my iMac there appears no limit to the slider over the contents of the site inner.
Understand?
Ah OK, just been looking at the CSS further and I’ve added max-height: 100% !important; in which seems to have solved the issue as below –
.home-slider .soliloquy-container {
max-width: none !important;
max-height: 100% !important;
}
Would you concur with this?
Cheers again 🙂
Nice. I am updating my post with this. Thank you.
Hi Sridhar, when I asked Tom Griffin (Plugin Developer) about removing the border-bottom 1px in Genesis, he told me to use this code:
.soliloquy-container a{
border-bottom: 0px !important; text-decoration: none !important;
}
Each time I have asked about CSS customisations for the slider he seems to recommend using !important; at the end of each line of CSS. I am not sure why, but I did what he told me.
Hope that helps a bit – Seb
Where possible write more specific selector to avoid using !important.
when i open in imac the slider floats to the left leaving a gap on the right how do i center?
Can you provide the URL of site in question?
http://svsgauckland.org.nz
Add this CSS:
.home-slider .soliloquy-container .soliloquy-item-image {
width: 100% !important;
}
Thank you so much your a champion!
Soliloquy slider in Genesis looks great !
Unfortunately when I try to install it I have a problem at step 4.
In the Appearance > Widgets of my WordPress I don’t have the ”Soliloquy widget” to drag it into ”Home Slider”.
Someone has an idea how to solve this issue ?
Thank you very much
Xavier
Have you installed and activated Soliloquy plugin?
The free version of this plugin does not come with its own widget. Drag a text widget into the Home Slider area. Insert Soliloquy short code and save. Done
Hey just wanted to say thanks for this great little post! I just tried it out on a new Genesis-based project I’m working on and it worked perfectly.
Thank you for this tutorial Sridhar!!! Once again I search for what I’m trying to accomplish and land on one of your tutorials. I used this tutorial http://www.sridharkatakam.com/full-width-slider-parallax-pro/ for a home page and then used this one to put a different slider on a landing page. I’m trying to duplicate that now on 3 additional landing pages, but I can’t quite get it right. 🙂
BTW, I was able to able to duplicate the chunk of code for 4 separate page templates. 🙂 Thank you!!
Hi whenever I implement this in the homepage slider section, it leaves the original section with a blank white box (I have executive pro childtheme) it seems to be unable to push it out of the wrap in the theme. Any suggestions on how to fix this would be great!
Thank you
Hi Leah,
If you need help in implementing this in your site/theme, please contact me via http://GenesisCustomizations.com/
Hello! Thanks for your tutorial. It really seems easy to me because I am used to making changes in Genesis, but when I add the code to the php file I get a syntax error. Can you please tell me where I should add the code. I tried to add it at the beginning and at the end, but it just won’t work…. I am using the Genesis Sample child theme.
Thanks!
Eva
Just want to let you know that I managed to get the slider working. And it looks great!
I compared the child themes functions php file with the additional php, and found out that you have to leave out: <?php and start with and the end of the child themes functions php file: //* Do NOT include the opening php tag.
Problem solved!
Hi Sridhar,
Your tutorials are pretty amazing! I did this one and generally got it to work in my Cafe Pro child theme. However, there is a ~90px space between the “before header” section and the slider. The same happened when I tried your tutorial for full-width Genesis Responsive Slider. When I turn on Firebug or Safari’s Inspector to see what’s causing that space, the space disappears…only to reappear when I turn off Firebug. So frustrating…any ideas?
My sandbox: http://www.tongsofficial.com/health
Thanks
OK, I finally figured it out. It had to do with the CSS for the site title and site description in the header since the slider was replacing that. I took out all the CSS relating to the site title/description and then only added back .site-header and .site-header .wrap styles.
Is there a way to install the slider widget AND use a different slider in the header for each page? Would I just add it to Functions.php and then add a different text box for each slider and use the “visible” conditional? I’m heavily customizing Genesis Lifestyle Pro and the clients requests that (in addition to having a logo and the nav bar float over the header as well… I’ve figured that part out – popped in the code but was having a few problems to tweak so soliloquy is not currently there). Thanks in advance for any help!
Hi there, thank you so much for the easy to understand tutorial! I love your style. 🙂
I did exactly what was instructed in the tutorial, but the slider isn’t full width for me: http://marshallberchandassociates.com/ – front end password is ‘sinoun’.
I am using AgentPress theme. What am I missing?
I can’t view your site. When I enter the password and submit the form, get “Incorrect Password”.
Sorry for the late reply, I was able to figure out a couple of things when I was waiting for you. The password is now “berch”. I have a different issue now. If you go to the site and look at the home slider, make your screen smaller than 1180px. The Soliloquy slider’s caption begin to get to too close to the header. I found the code that changes it:
.soliloquy-container .soliloquy-caption { bottom: 200px!important; }
I changed it to 100px and put it in the @media for 1180px section, but it doesn’t seem to pick it up. I already have the code above in custom CSS outside of @media, so it could be causing the problem. The problem is that if I take out “!important”, the code doesn’t work, but then it’ll work for @media 1180px. How do I handle this? I need to be able to move the caption around for when the screen gets smaller because it gets hidden under the header.
I appreciate your insight!
Can you tell me how you got it to go full width, ive got the same problem here.
Thanks
Hi, my slider wont go 100%, ive double checked the tutorial and ive done it all correctly. Using Enterprise Pro, with the paid version of Soliloquy
Thanks
Nice!
How can I pop the slider behind the Nav bar and Logo in Agentpress?
Thanks
You mean replace the big couch image in http://demo.studiopress.com/agentpress/ with Soliloquy?
Yes. I got it sorted, but would quite like to have the featured widget over the top of slider instead of the Soliloquy caption which disappears on mobile, even when ‘Show captions on Mobile’ is selected.
Hello Their,
Is it Possible to use this slider in fullwidth below navigation in other website Pages and Blogs Post.
It will really help me & others lot who wish to have responsive images instead of parallax scroll. Coz The parallax section images are not responsive which create viewing issues on mobile devices. This can help lot to deliver right message through the images.
I will appreciate your support on the same.
Warmest,
Amol
I have followed this tutorial to install Soliloquy on Altitude Pro theme and it looks beautiful, but I have noticed that after installation there is an issue with the front page featured images displaying improperly. Anyone have a suggestion?
Try this: http://www.studiopress.com/forums/topic/altitude-pro-background-images-are-not-loading-correctly/page/3/#post-152735.
Hi,
Did this fix the issue?
I have Soliloquy on Altitude Pro on a couple of sites. Working great on Firefox and Safari but the background images in Chrome are not loading. If I remove the slider they load.
I tried the suggestion in your link above Sridhar but still can’t get it to display correctly in Chrome. Any suggestions?
http://www.northlandhaircompany.co.nz
Can you try commenting out or deleting
background-attachment: fixed;for.front-page-1,.front-page-3,
.front-page-5,
.front-page-7
in style.css?
Do let me know if it doesn’t work.
Background images appear in Chrome now but the Parallax effect has been lost.
I will give this a try on my localhost and post an update.
Here you go: http://sridharkatakam.com/how-to-replace-front-page-1-image-section-with-a-soliloquy-slider-in-altitude-pro/.
Follow that.
I can confirm it worked! I started again with your new instructions from link above. Background images are now appearing in Chrome and the Parallax effect is also working!
Thank you Sridhar, you are a genius!
I have a slider setup on this site http://pixelperfectdesignstudio.com/drlisacooney/ but for some reason it won’t transition through the slides, it just shows the first one (there are only two right now). Do you know what would cause that?
I got it figured out with some help from the Genesis Facebook Group.
Amazing. Thanks.
How can a use this slider in the header area, instead of after the header? Currently, my navigation is on the top, then the header space, then an Opt-in widget area. I would like the slider to appear in the header space. Please see the dev site here: http://dev.bizzieliving.com/
How would you add this exact full width slider to the top of the default WooCommerce archive page before product listings (outside of the default wrap)?
Been driving me nuts!
Srid how do I adapt this for the home slider section in Dynamik? Would l love to use this in Dynamik. Thanks
Is there another modification that needs to be done for this to work with Minimum Pro, does the background image need to be removed as i have a massive gap from the slider to to the tagline section now.
Thanks
Hi Jodie,
Follow https://sridharkatakam.com/how-to-replace-background-image-in-minimum-pro-with-responsive-slider/
I’ve followed the tutorial and everything looks great, but now the site is not responsive. Any idea what would cause that to happen? https://www.beachesfamilydentistry.com/
You can add CSS code to make the caption appear below the image below certain viewport widths like this:
Also, looks like there’s a closing brace missing at the end in your child theme’s style.css.
Great tutorial as ever. Did you ever answer the question about doing this on other pages? Many thanks