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.

Request Help

Add a Fullwidth slider module and create new slide.
Make sure you are on the text editor mode for the slide
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.



&lt;a class=&quot;phoneFixExample et_pb_more_button et_pb_button second_button special_button_front&quot; href=&quot;https://YourLink1.com&quot;&gt;Button 1 Text&lt;/a&gt; &lt;span class=&quot;hideStuff&quot;&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;/span&gt;&lt;a class=&quot;phoneFixExample et_pb_more_button et_pb_button second_button special_button_front&quot; href=&quot;https://YourLink2.com&quot;&gt;Button 2 Text&lt;/a&gt;

Add this to your child theme…

 /*------------------------------------------------*/ 
/*---------------[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; 
}
}

No Child Theme Version – Slide 2

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



&lt;a class=&quot;makeBlock et_pb_more_button et_pb_button second_button special_button_front&quot; href=&quot;https://YourLink.com&quot;&gt;Button 1 Text&lt;/a&gt; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;a class=&quot;makeBlock et_pb_more_button et_pb_button second_button special_button_front&quot; href=&quot;https://YourLink2.com&quot;&gt;Button 2 Text&lt;/a&gt;

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

position: relative; 
top: 30px; 
padding-top: 0; 
padding-bottom: 0; 
min-height: 225px;

1 Comment

Xavier on June 16, 2020 at 5:06 pm
Great, thanks, that was very helpful! :)
Reply