Add Buttons to Text Fields Inside Modules

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.

<a class="et_pb_button et_pb_button_0 et_pb_bg_layout_light" href="#">Learn More</a>

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);
}

Step 5: Open Module with Text Field

Now you’ll open any module that has a place to add your own text. So modules like Blurb, Accordion, Text and others will work here.

Go to the text area and makes sure the Text Tab is chosen (and not the Visual Tab). You want to be in the place that you can put your code in.

Now paste the code you copied in the previous step.  If you want the button centered, then open the Visual Tab, place your cursor just before the button and hit the center button in the TinyMCE.

Do this in any module where you want your button entered. 

It will look something like this:

READ: [wpb-random-posts]

Video on How to Add Buttons to Text Modules

I’ve created two videos that showcase how to do what I just described above.  The first video shows how to add a button.  The second video shows how to stylize the button.

Video #1 Add Buttons to Text Fields Inside Modules

Video #2 Customize Buttons in Text Fields 

Must Have Plugins

WP Theme FAQs

WP Rocket - WordPress Caching Plugin

Duplicator Pro: WordPress Backups Made Simple




Favorite WordPress Theme

Divi WordPress Theme

Start Your Newsletter

MailerLite Email Marketing for Small Business

 

Constant ContactConstant Contact

Legal Disclaimer

To support the publication of this website, this site runs banner ads and is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to amazon.com. As an Amazon Associate I earn from qualifying purchases. Also other ads may result in commission payments or other compensation.

More From Divi Dude

3 Easy Ways to Add Pinterest Board Pins to Divi Websites Without Plugins

3 Easy Ways to Add Pinterest Board Pins to Divi Websites Without Plugins

Here’s the dilemma. When I build websites, I build them primarily for a landscape screen. Most of my photos are optimized for landscape screens. My Facebook and Twitter graphics are for landscape screens. But Pinterest prefers portrait style graphics for its pin boards. See the problem? My website has graphics that are wider than they are long (landscape). Yet, Pinterest wants graphics that are taller than they are wide (portrait).

MailerLite is an affordable, easy-to-use newsletter and email marketing platform

MailerLite is an affordable, easy-to-use newsletter and email marketing platform

For the longest time I used MailChimp. I was drawn to the 2,000 free subscribers.

But when MailChimp changed how they defined subscribers and made some other not so user friendly changes, I started looking for alternatives. Not just for the free tier, but for my paid subscriber lists (I have clients that send out newsletters and they need more bang for the buck than what many free tier offers).

Delete Spam Comments in Bulk Without Plugin on Cloudways

Delete Spam Comments in Bulk Without Plugin on Cloudways

Sometimes you screw up and forget to turn off comments on your WordPress website, or forget to configure your Askimet, or do both, and then you end up with thousands of comments that are nothing but spam. We’re talking hundreds of pages worth of comments that need to…

Join Our Awesome List

Join our mailing list to receive the latest news and updates from Divi Dude. We don't write often, but when we do, everything will more or less be spelled correctly (oh, and be interesting and fun and knowledge based).

Thanks Dude! You've successfully subscribed.

Pin It on Pinterest

Share This