Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Having a Call To Action button is essential for any website. The whole idea of having a website is to engage the visitor so that they either purchase, contact you, sign up for something or read something. And what better way than a large visible call to action.

Not only does Divi have a great CTA module, but it has built it’s CTA buttons in several of it’s modules as well such as the slider module, pricing module and subscribe modules.

But lets just say you wanted to create your own CTA in a small space that does not have room for one of these modules. Lets say for example I wanted to insert a CTA right here so that I can get you over to my other blog Your Monterey Bay. Like this button for example.

Launch Website

All I did was hyperlink my text, add a class in the html text editor and then use css to give it some style.

Here is how you do it.

 

1. Type in the text that you want to turn into the CTA anywhere on your page or in a module.

001

2. Using the standard hyperlink button, give your text a hyperlink

002

 

3. Switch to html text editor

003

 

4. Give the hyperlink a class by inserting the following markup before the url href. You can use any class name you want or you can just copy mine exactly to keep it easy.

class="blog-cta"

And this is where it should go in case you need a visual. Once you have made this change in the text editor, you can switch back to the visual editor anytime to continue working on your post/page.

004

 

The Magic of CSS

Now lets start to dazzle things up a bit with some CSS.

If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>ePanel>Custom CSS (which is located at the bottom of the ePanel)

Add this CSS.

 

a.blog-cta {
  line-height: 85px;
  font-size: 25px;
  color: #fff;
  background-color: #fd5a21;
  border: 2px solid #fd5a21;
  border-radius: 5px;
  padding: 15px 35px;
  -moz-transition: all 0.7s; 
  -webkit-transition: all 0.7s;
  transition: all 0.7s;}

a.blog-cta:hover {
  background-color: #fff;
  color: #fd5a21;}

 

Now let me explain what is in these rule sets so that you can make your own custom adjustments.

Properties For The First Rule Set

  • Line-height: this is going to make room for the button in your line. If you do not have any standard text above and below the button or you find you have too much space, you can decrease this value.
  • Font-size: Sets the size of the font in the button
  • Color: The color of the font in the button
  • Background-color: The background color of the button
  • Border: Border thickness, solid line (you can also use dotted, dashed, etc), color
  • Border-radius: Gives it the rounded corners. You can increase the curves by increasing the number. Remove it all together to keep it square.
  • Padding: Gives padding around the text making the button larger.
  • Transition properties: Slows down the hover rule set so that it eases into the color changes instead of instantly changing.

Properties For The Second Rule Set

  • Background-color: The background color of the button when hovering over it
  • Color: The color of the font in the button when hovering over it

 

Check out my magazine blog for ways I used this technique throughout the site. http://www.montereybayfun.com/

 


Well that’s all for now. I hope you find this article useful.


The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

©2012-2018 Geno Quiroz | Teach Learn Build Love | Divi Expert ServicesJohn 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest