This tutorial explains how to add a call to action to your WordPress website using the Divi Visual Builder.

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 WordPress & Divi Tutorial

Hello, this is Jimi Blevins. Today I’m going to be walking you through: “How To Add A Call To Action With The Divi Visual Builder.”

First off, all we need to do is add the appropriate module. So I’m going to click on the gray plus (+) sign, and then we’ll search and select “Call To Action.” This will start us off and provide everything that we need to do to get this going.

HowToAddCallToAction

The first thing I’m going to do is add a background image to this and the reason I want to do the background image first is, it’s going to dictate my font choice, color, and all those things.
To get a background image put into your call-to-action, you want to click on “Design” and scroll down to “Background Image.“I’ve already got my beach image uploaded so that will pop right in there.

HowToAddCallToAction2

The next step is to put the “Title” in and then for the “Button URL.” (While I’m doing these tutorials, I just put in a hashtag, which just makes the URL clickable.) Obviously, this is where you would put your URL into the signup form or whatever call-to-action page you want it to lead to.

HowToAddCallToAction3

For our “Button Text,” I’m going to say, “Sign-up To Win.”

HowToAddCallToAction4

We’re not using a background color now. You’ll notice, and I don’t know if this is a bug with the module or just a feature that’s in the CSS in the background, but you notice if I say I’m not using a background color, it automatically eliminates the padding. (I’ll show you how to fix that in a minute.)

There’s another thing I want to do really quick, and that’s just to put in my text into the “Content” section, “1 in 10 sign-ups is a winner.”

HowToAddCallToAction5

The last thing we want to do is you’ll notice the “Text Orientation,” right now my text is lined up in the middle of the call-to-action, I want to move that over to the left so it balances a little bit with my seashell. So now I’ve got my text over here, my picture over here, and it balances the call-to-action out a little bit

HowToAddCallToAction6

So that’s everything with my “General Settings.

Now we can get into the design, so I’m going to click on “Design.

HowToAddCallToAction7

The first thing I want to do is, change my “Header Text Color,” I want to go with something a little dark, kind of a reddish-brown. I’m going to make it bold and I’m going to bump up the size quite a bit, so it really grabs your attention.

HowToAddCallToAction8

Here’s a really easy trick, if I want my “Body Text” to be the same color, I just double click here:

HowToAddCallToAction9

and copy this value. This is the hexadecimal value of that color. So I want to copy it somewhere else, put my hashtag in first and then paste.

HowToAddCallToAction10

Now everything is the same color within the module. Not going to worry about changing the font right now.

So here in this “Custom Padding,” this is where I fix the padding that I lost when the background image was changed.

HowToAddCallToAction11

I’m going to go to the 2ems all the way around. Em is a term used in your “Stylesheet Settings,” which em is better to use for your responsive websites. If you put in a pixel value, like say I went with 20 pixels, it might look great here but it might be too big of a gap on a mobile phone. If I use the em what that does is, it creates a height double to what the font size is, the default font sizes for your document. So em is a great way to have your padding on your element and still be able to have it gauge it’s size because on my mobile device the font size might be smaller which means my padding is going to be less. The call to action is going to look a little bit differently but proportionately my padding is still going to be where it needs to be.

I want to make this body text a little bit bigger, so I’m gonna bump up the “Body Font Size.

HowToAddCallToAction12

Now I want to put some custom CSS on my button.
Right here, “Use Custom Styles for Button.” I want to turn that “On.”

HowToAddCallToAction13

Now I can do whatever magic I want to do with my button.
I can make the “Button Text Size” a little bit bigger so it lines up with the modules. Leave the text color the same, but I am going to put a “Button Background Color” on this so it pops out a little bit more.  Keep it the about same as the general color, and I’m to make it transparent. You can still see the image through it just a bit.

HowToAddCallToAction14

I want to change the icon under “Button Icon,” thumbs up icon. I also want the icon to display all the time, not just when it hovers.

HowToAddCallToAction15
I’m going to click on this button as well, “Only Show Icon On Hover For Button.

HowToAddCallToAction17

So now when I mouse over it, the icon stays.

 

One last thing I’m going to do, I’m going to change the “Button Hover Background Color.”

You can change all of these if you want, you can change the color of the text, the background, and the border.

So, on the hover color, I want to go to make it a little bit brighter. That’s perfect. So now when I hover over, it actually becomes opaque and gives some nice feedback for the user.

HowToAddCallToAction18

So that’s the end of this tutorial on: “How To Setup A Call To Action With The Divi Visual Builder.

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