Select Page

Creating a Clickable Slider


Over the last year I’ve seen quite a few Divi slides which had no button but in their graphics was a graphic button that said click here and there was nowhere for them to click, I’ve actually personally used this idea on this site to link to other Divi-related resources, which is why today I want to help you make a clickable slider in case one day need it.

First thing we are going to do is assign our full-width section an ID of clickable so that only this slider will inherit this styling.

we now need to know what height our slider is, the best way to make sure our slide and links will be the same size is to set a height, so we are going to show you how to resize the slider, for this instance we will make our slider fullscreen.

Next, we will adjust our button to take up the whole slider and to make it clickable, for demo purposes we’ve added a background colour so that you can see what is happening

Now to make it really fullwidth we need to edit 2 divs that the button is inside of because they have some margin and padding which is why it is not full screen yet.

Now to make it really fullwidth we need to edit 2 divs that the button is inside of because they have some margin and padding which is why it is not full screen yet.

Our slider will now look like this, except your will be transparent

Lastly, we need to make sure that our slider still looks good on different devices,

You can adjust the height to be whatever size you like, to make it fit your design if you have any issues with it on mobile devices you can try adding the following CSS for mobile.

be sure to adjust all of the heights so that it will look right for your needs.

I hope that some of you will find this tutorial helpful 🙂

4 Comments

  1. Dominic de Souza
    • Facebook
    • Twitter
    • LinkedIn
    • Google+
    • Buffer
    • Pinterest
    • reddit
    • StumbleUpon

    This is an awesome concept.

    My only question is – for a visitor, if there’s no CTA, then they won’t know to click, right? The only indication will be a cursor change.

    If on mobile, even that indication will be gone.

    Reply
    • James Fosker
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon

      It all depends on the website and the client, one of the users in the Divi community, had a site last year where the slider graphics has buttons in the slider background, so when you have a website like that it makes sense to make the slider clickable, you can see the site I’m talking about here https://www.boltthemes.com/creating-a-clickable-divi-slider/

      It definitely not something to use on every website 🙂

      Reply
  2. maria
    • Facebook
    • Twitter
    • LinkedIn
    • Google+
    • Buffer
    • Pinterest
    • reddit
    • StumbleUpon

    what fields are you entering the CSS? is this within the section module custom css settings?

    Reply
    • James Fosker
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon
      • Facebook
      • Twitter
      • LinkedIn
      • Google+
      • Buffer
      • Pinterest
      • reddit
      • StumbleUpon

      I personally put the CSS into my Child themes stylesheet, other wise you can add it to custom CSS box in the Divi Theme options

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Why use The Divi Framework.


Divi is a leading WordPress theme which powers almost 2 million websites around the world, Divi makes building a website super simple as it has one of the most powerful drag and drop builders for WordPress.

We've been using Divi since December 2013 to help speed up client projects, it has made our workflow 1000% times better and has saved us countless hour everyday.

Divi Stride is a Divi Third Party developer, we spend countless hours building tools and resources for the Divi Community.

We are the creators of Section Style Manager (the 5th Divi Plugin to be released), Divi Commerce & Tighten.

| 8 minutes

Pin It on Pinterest

Share This

Share this post with your friends!

No products in the cart.