How to Insert a CTA Button as a Widget into your Sidebar

by | Last Updated: Nov 20, 2017 | Blog, Divi theme

If you ever need to place a Divi CTA button into your WordPress sidebar as a widget, I will explain you in this tutorial how you can do it. By default the Divi builder is not available for WordPress widgets and you will need to use a premium plugin like e.g. “Page Builder Everywhere”. However, there is also a way on how to do it for free, using just Divi.

 

CTA Button Sidebar Widget

 

Recently I was building a website with the Extra theme and my client also wanted to have a “Donate” button in the sidebar. And since the whole website was created with the Divi builder, I wanted that button to have the same Divi’s style. So I did the following:

I created a test WordPress install and installed Divi on it. I used http://poopy.life/ for my test install (it is a great free tool). Then I created a new page, activated the Divi Builder on it and added a CTA button module. Then I published that page.

After that I deactivated the Divi theme and activated the Twenty Seventeen WordPress theme. Then I clicked to edit the page on which I had created the CTA button and just copied the Divi Builder HTML code from it (make sure to copy the code from the “Text” editor, not “Visual” and also make sure that the “” characters are copied correctly and are not “” or ¨¨). This code should look somehow like the following code:

 

CTA Button Widget Code

 

If you know some HTML, you can further customize this code for your needs.

Then the last thing that I did was that I pasted this code into my sidebar’s Text widget (or a Custom HTML widget should work as well) on my client’s website. If you do the same, now you shall see your CTA button in your sidebar. To customize its color and CSS styles, you will need to edit your Divi customizer global design settings. Or you can also use some custom CSS code. For example, I used the following custom CSS code to make the background of my button white:

 

.et_pb_bg_layout_light.et_pb_module.et_pb_button { color: white; }

 

I hope this tutorial will help some of you. :) If you want to see more like this one, feel free to subscribe to my newsletter.

5 Free WordPress Plugins You Should Use

Divi Theme Design Services
Share This