How to Add two Buttons the Divi Fullwidth Slider

For now it isn’t easy to add a second button on the fullwidth slider, but I expect Elegant Themes will eventually add it as a feature. Below I’ll provide a couple examples of how you can get it done.

  1. Add a Fullwidth slider module and create new slide.
  2. Make sure you are on the text editor mode for the slide
  3. Add your own variants code and don’t forget to save
  • Do not flip back and forth between text and visual editor or it will remove the formatting…
Slide 1 – Option 1 adds code to deal with alignment on phones.

Slide 1

Slide S1 Text            Button S1 Text

Slide 2

Slide S2 Text            Button S2 Text

With Child Theme: (Looks Better on Phones)


Insert the following code into the content area of the slide.

[html]

<a class="phoneFixExample et_pb_more_button et_pb_button second_button special_button_front" href="https://YourLink1.com">Button 1 Text</a> <span class="hideStuff">            </span><a class="phoneFixExample et_pb_more_button et_pb_button second_button special_button_front" href="https://YourLink2.com">Button 2 Text</a>

[/html]

Add this to your child theme…

[css] /*————————————————*/
/*—————[Button Example]—————–*/
/*————————————————*/
@media (max-width: 767px) {
.phoneFixExample {
display: block;
min-width: 225px;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
margin-bottom: 5px;
}
.hideStuff {
display:none;
}
} [/css]

No Child Theme Version – Slide 2


Insert the following code into the content area of the slide.

[html]

<a class="makeBlock et_pb_more_button et_pb_button second_button special_button_front" href="https://YourLink.com">Button 1 Text</a>            <a class="makeBlock et_pb_more_button et_pb_button second_button special_button_front" href="https://YourLink2.com">Button 2 Text</a>

[/html]


One method to reduce the height of the full width slider.


If you are trying to figure out how I made the slider above narrower… Go to the Advanced tab and add a variation of the following to “slide description”.

[css]
position: relative;
top: 30px;
padding-top: 0;
padding-bottom: 0;
min-height: 225px;
[/css]

1 Comment

  1. Xavier

    Great, thanks, that was very helpful! :)

    Reply

Submit a Comment

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