Add Second Button to Divi Slider Slides

Written by Dan Mossop

Divi Booster lets you add a second button to slides in the Divi theme's slider module and fullwidth slider module.

Adding a Second Slide Button

With Divi Booster installed, you'll find the following options added to the Slide Settings:

  • Slide Settings > Content > Text > Button #2 Text
  • Slide Settings > Content > Link > Button #2 Link URL

These let you set the text and URL of a second button and when filled out will trigger the second button to show on the slide. You can easily find them in the settings for a given slide by entering "Button #2" in the settings search box as shown: 

Here's an example of a slide with a second button:

Note that the second button doesn't show in the visual builder preview, but should do so when the page is viewed on the front-end.

Styling the Second Button

Module Settings

Any styles applied to the standard slide button in the module settings will also be applied to the second button. You can also style the second button separately by using the style options in the design tab.

To apply styles to the second button on a single slide, go to:

Slide Settings > Design > Button 2

To apply styles to the second button on all slides in a slider, go to:

Slider Settings > Design > Button 2

These options are available from Divi Booster 4.0.2 upwards. 

CSS

By default, the second button inherits the same styles as the first. However, Divi Booster also adds an additional CSS class "db_pb_button_2" to the second button, that you can use to style the second button separately. Here's an example of some CSS which uses that class to change the colors of the second button only:

.et_pb_slider .db_pb_button_2 {
	background-color: lightgreen;
	color: green;
}
That will change the color of the second button on all sliders on the site. If you'd like to restrict it to a particular slider (or sliders), you can add a class name in "Slider Settings > Advanced > CSS ID & Classes > CSS Class" – for example "my-slider" – for those sliders. Then you can apply the CSS to just those sliders like so:
.my-slider .db_pb_button_2 {
	background-color: lightgreen;
	color: green;
}

The button itself is implemented as an <a> tag, so any style that works on a normal link can in theory be used.

Add a Second Button to Your Divi Sliders!

Boost your Divi site's interactivity with Divi Booster by adding a second button to your slider slides. Customize each slide with tailored button text and links effortlessly.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

8 Comments

  1. Hi, could you elaborate on the following point:

    "You can style the second button separately with CSS code by using the "db_pb_button_2" class added to the second button"

    How do I add the CSS to the second button? I can't seem to find it.
    Would be a HUGE help. Thx in advance!

    Reply
    • Hi Joel, sorry it wasn't clear. What I was meaning to convey is that Divi Booster itself adds the CSS class to the second button – you don't need to add the class yourself. To make use of this class, you can include it in CSS such as that from the example from above:

      .et_pb_slider .db_pb_button_2 {
      	background-color: lightgreen;
      	color: green;
      }
      

      This CSS code should be placed in one of the main CSS files (e.g. by adding it in the "WP Dashboard > Divi > Theme Options > General > Custom CSS" box). It can't be added via the slide settings.

      I'll look into adding options for styling the second button via the slide settings in a future update.

      I hope that helps, but let me know if not. Thanks!

      Reply
  2. Hi, I'm having the problem that I can't excess the CSS code specifically for the second button, could you help me out? Or to prevent miscommunication, would it be possible for you to make a video showing how I can change the color of the second button? Would make the whole thing much easier. Thx in advance! :)

    Reply
    • Hi Nick, Divi Booster itself adds the CSS class to the second button. To make use of this class, you can include it in CSS such as that from the example from above:

      .et_pb_slider .db_pb_button_2 {
      	background-color: lightgreen;
      	color: green;
      }
      

      This CSS code should be placed in one of the main CSS files (e.g. by adding it in the "WP Dashboard > Divi > Theme Options > General > Custom CSS" box). It can't be added via the slide settings.

      I've updated the post above to slightly clarify, but I'll try to add a video (or screenshots at least) in the future.

      I hope that helps, but let me know if not. Thanks!

      Reply
  3. Looks like this is deprecated. I only see options for one button.

    Reply
    • Hey Mike, they haven't been deprecated and are still working for me in the latest version of Divi (currently 4.11.1), so I'm not sure why they aren't showing for you. Is there any chance you're able to send through a login (using the contact form), so that I can look into it for you? If that's not possible, perhaps you can send through a screenshot of the slide settings showing where you'd expect to see the settings? If you send a message through the contact form selecting bug report as the message type you'll get an automated email reply to which you can attach the screenshots. Thanks!

      Reply
  4. Hi, I have an issue where the text above the buttons takes on the hyperlink from the first button. When there was only a single button this did not happen. After I added the plug-in and the two buttons it started and I can't figure out how to shut off the link. I also opened a support ticket on this and waiting to hear back. If someone could let me know soon, I need to watch the site this weekend this buggy is holding us up. TIA, Barry

    Reply
    • Hi Barry, the issue you were seeing with the linked title is actually Divi's default behavior. If there is a headline set and the first button link is set (i.e. not the default "#") then Divi will apply the link to the headline too. You mention in your follow up to the ticket that you've been able to solve your issue in a different way, but if still have a need to change this headline linking behavior, please let me know and I'll try to work out a way to do it. Cheers!

      Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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

We may earn a commission when you visit links on our website.

Latest From Divi Booster

How to Add the Post Status in Divi's Dynamic Content

Divi's Dynamic Content feature is great for enhancing your post/page templates with post-specific information. While Divi includes an option to show information such as the Post Created Date using Dynamic Content, there is no equivalent option for the Post Status....

Fix Divi Text Module "Regular" Font Weight Not Working

Are you encountering an issue where the font weights in Divi's Text Module don't seem to apply as expected? In particular, you might find that when you set the text module's body text font weight to "Regular", your font is actually assigned a weight of 500 instead of...

Make the Divi Gallery Module Swipeable

The Divi Gallery Module comes with a slider mode that lets you display images in a slider with clickable left/right arrows to scroll through the images. For mobile / touchscreen users, you can improve the user experience by allowing your user to swipe to navigate to...

How to Use Divi Dynamic Content in Woo Modules Product Selector

Divi's Dynamic Content is a powerful feature that lets you populate your Divi modules and theme builder templates with data pulled in various sources, such as custom fields. This allows for efficient organization and maintenance of your sites.Unfortunately, Divi's...

Random Divi Posts