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

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.

 

 

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 style. So I did the following:

I created a test WordPress install and installed Divi on it. I used https://poopy.life for my test install (this tool seems to be no longer working). Then I created a new page, activated the Divi Builder on it and added a 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:

 

 

NOTE: I’m placing this Divi Builder code here like an image, because it’s a Divi code and if I wrote it here like code, Divi would show up here the CTA button – obviously, because it is a Divi code and I have Divi active on this blog.

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. And you might also be interested in my other tutorial on how to add a 3rd CTA button to the Divi fullwidth header module.