This tutorial explains how to customize and add a button to a web page using the Divi Visual Builder for the Divi WordPress Theme.  Buttons are great for increased visibility for content you want your visitors to engage with.

Take A Test Drive

Sign up for a 15 day free trial to our powerful WordPress Hosting Platform.  Take advantage of everything we have to offer for free.  No credit card required!

TEXT VERSION OF THIS DIVI TUTORIAL

Hello, this is Jimi Blevins. Today I’m going to be going through the: “Button Module” with the Divi Visual Builder.

I’ve got the Visual Builder loaded up and I’m going to go ahead and add (+) in the “Button” module by selecting the gray plus (+) sign and searching and selecting “Button” module.AddAButtonNow, the “General” options of this are really self-explanatory.
Here’s where you put the link to where ever you want the button to go, “Button URL.”AddAButton2Here’s where you can specify the target under “URL Opens,” if you want it to be in the same window or a new window. A general rule for me is, if I’m linking to something within my website, of course, I want it to all run through the same window. If I’m linking to an external website, I really like that to pop up in another tab or another window. That way people can still get back to my web page, regardless of whether they go on the internet.AddAButton3The “Button Text,” this is just where you put the text that you want for your button. The “Alignment” is where you want it spaced within the column, so I can move it to the “Center,” the “Left,” or to the “Right.”AddAButton4Now, let’s get into the “Design.”AddAButton5This is something you’ll find throughout all the modules with the Divi Builder is, anytime there’s a button in a module, you have this option to completely ignore the custom styles, or “Turn On Custom Styles.”AddAButton6That’ll pop up a bunch of options for you to can change with the button. They’re pretty standard throughout most of the modules. Most being pretty self-explanatory. “Button Text Size,” will change the size of the text within the button. I can change what color the text is, “Button Text Color.” I can also give my button a background color under “Button Background Color” if I so desire. So I want to use this purple, but I want to just lighten it up quite a bit.AddAButton7I can “Use Border,” which I can change the color of the border. Right now, it seems to just do whatever the text is, but I can change that to something else. AddAButton8This is nice, I really like that you can round the edges, and of course space out the letters, change the font, and then add an icon. (Which I think is a really great feature, standard with all the buttons, just by default, the hover feature automatically shows the icon, so nice little animation there.) You can change that to where there’s always an icon, or that’s the default setting. So, that’s if you want an icon or you don’t.AddAButton9Then, you can change it, say I wanted the two arrows instead of just one.AddAButton10I can change the color, and make it specific. I can move it to the right, or to the left under “Button Icon Placement.”

This “Only Show Icon On Hover,” so if I always want the icon to show and I click on “No,” now you can see the icon just stays when I hover over it instead of popping in with the animation.

Here’s where I can change all the hover elements:AddAButton11I just want to change the “Button Hover Background Color” to show you how that works.AddAButton13What I really love about this button module is, there are so many ways to customize it. You can have a website with a hundred buttons, and no two of them will be alike. I think that it’s really great that they offer all these features and customizations to buttons because this is your call to action. This is something that you really want people to click on. It’s great that they give you so much control over how to make it look, how to design it, and how to really mesh it with the layout of your website so it grabs the eye and people want to click on it.AddAButton14That pretty much covers everything with the: “Button Module” in the Divi Visual Builder.

I’m Jimi Blevins and thank you so much for watching.