Welcome to Day 74 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!
Hey Divi Nation! Thanks for joining us for another episode of our podcast and youtube show. This time around we’ll be sharing a handy tutorial on how to add links to Divi’s fullwidth slider images. Currently the slider module does not have this option but the good news is there is a workaround and I hope you can use this tip in your future designs.
How to Add Links to Divi Fullwidth Slider Images–Divi Nation Short
In this episode of Divi Nation I’m going to show you step-by-step how to make images on your fullwidth sliders clickable. The tip is very easy to achieve; requiring only a small snippet of CSS code. This code hides the button and the text but allows you to link the image to the desired page. Enjoy the video and summary below!
And of course if you have any questions please feel free to put them in the comments section and I’ll be happy to help.
All Subscription Options:
Summary: How to Add Links to Divi’s Fullwidth Slider Images
First login to your WordPress website. Go to the page you need to add the fullwidth slider to, making sure you are using the Divi Builder. Then add a fullwidth section.
Next insert the slider module.
Before you start adjusting the settings go ahead and click the custom CSS tab. This is where you need to add the code in the slide button section of the custom CSS tab.
Below is the code you need to paste in the slide button section of the custom CSS tab:
font-size: 0px; background-color: rgba(0, 0, 0, 0.0) !important; top: -1000px; right: -1000px; height: 5000px; width: 5000px; position: absolute;
While you are still on the fullwidth slider module settings popup, click on the general settings tab and add a new slide.
All you have to do now is to add the url and the background image. Remember the slider is going to be blank but it will link to the web page of your choice. Repeat the steps to add more images to the slider.
Finally click the save and exit button. To preview the changes, click on the blue update button on the top right and then preview the page. Test your links by clicking on the slider images. Below is a preview of my slider images.
Next Week on the Divi Nation Podcast: Nathan Interviews Josh Ronk, Project Lead on the Divi 3.0 Release
Next week Nathan will introduce the community to another talented member of Elegant Themes’ development team. Josh has lead development on a few large projects now–including Extra and Divi 3.0. We’re excited to share his story and experience with the whole community!