Add Second Button to Divi Slider Slides

|

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

By default, the second button inherits the same styles as the first. You can style the second button separately with CSS code by using the "db_pb_button_2" class added to the second button. For example:

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

Related Post: Adding CSS to the Divi Theme

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.

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin

Download Divi Booster

4 Comments

  1. Mike on October 5, 2021 at 10:28 pm

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

    Reply
    • dan on October 7, 2021 at 10:51 pm

      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
  2. Barry Roos on May 26, 2021 at 1:56 pm

    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
    • dan on May 31, 2021 at 12:36 am

      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

Your email address will not be published.