.entry-content tr td,.entry-content table{border:none!important}.disable-lightbox a{pointer-events:none}.disable-lightbox .et_overlay{display:none!important}Home
Tutorials
Reviews
Plugins
Divi Discount
MailerLite email marketing for small business
ADD BUTTONS TO TEXT FIELDS INSIDE MODULES
Divi Tips
By Divi Dude
One of the areas that Divi could improve upon is adding a way to add a button to a module with a text field. Luckily,in this tutorial,I explain how.
Step 1:Add Row
The first thing you’re going to do is add a row. Don’t worry about size or how many columns or anything,because we will be deleting it shortly.
Now insert a Button Module into the row. Just use # for the URL. We’ll be using this module to get the code we’ll use to create a button.
Also,I find it helpful to open a text editor separately. I use Notepad or Notepad++on my PC but use whatever is easiest for you. I do this so I have a handy place to put the code that I’m going to copy and paste without having to constantly open and close modules.
Step 2:Style Button
Go through the button settings and style the button the way you want. In our example below we made a yellow button with green text. We also added shadows and a border radius and border.
Step 3:Use Inspect for HTML Code
Right click on the button you just styled and choose Inspect. You’ll want to copy the html code. It will look like the code below. Paste that code into your open text editor (from my suggestion is Step 1) so you have it handy.
Learn More
Step 4:Use Inspect for CSS
Right click on the button you just styled and choose Inspect. You’ll want to copy the class rules. Be sure to copy all the CSS that corresponds to the button you created. In our case,we look for all rules that are for .et_pb_button_0.
Paste the code you copied into the custom CSS panel of your choosing (whether you use Theme Options,Theme Customizer or your child theme).
After you paste it you will need to give the button a unique class name. The key here is to change the 0 (or whatever number has been assigned to the button you created) to a unique number (or you can change the name altogether,I just find it easier to change the number). In my case,I change the name to .et_pb_button_99.
Here is the CSS we copied for the button we styled (see above photo).
body #page-container .et_pb_section .et_pb_button_99{color:#32952d!important;border-width:1px!important;border-radius:10px;font-family:"Alegreya Sans",Helvetica,Arial,Lucida,sans-serif!important;background-color:#f0ff23;display:inline-block}.et_pb_button_99:hover{border:2px solid transparent;padding:.3em 2em .3em .7em}.et_pb_button_99,.et_pb_button_99::after{transition:all 300ms ease 0ms}.et_pb_button_99{text-shadow:0em 0.08em 0em rgba(0,0,0,0.4);box-shadow:0px 12px 18px -6px rgba(0,0,0,0.3)}.single-product .woocommerce-product-gallery .woocommerce-product-gallery__trigger{display:none}