Add Second Button to Divi Slider Slides

|

Divi Booster lets you add a second button to your Divi Slider module slides.

Adding a Second Slide Button

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

  • Slide Settings > General > Text > Button #2 Text
  • Slide Settings > General > 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: 

Note that the button displays on the front-end only, not in the visual builder preview.

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

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;
}
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

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

2 Comments

  1. 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

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