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


Submit a Comment

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