Last updated on

Customizing the Buttons used on your website is easy when you have the Post and Page Builder installed, but some buttons are slightly more difficult to customize when they are not part of you page content and reside in other locations.  Buttons in your Call to Action (CTA) widget are one such example.

Post and Page Builder controls do not work when modifying content in widget areas so the best tool to customize your CTA button is custom CSS added through your website’s Customizer.

The default  button in the CTA widget uses the button-primary class and this class along with some classes directly associated with the CTA will be used in our CSS rules to target the button specifically.

This is the selector combination that we will use to target out CTA button:

.palette-primary .call-to-action-wrapper .button-primary {

}

Now that we have our selectors in place we can start adding design rules, one per line, between the two braces.  There are many customization options available and typically you will want to change the text color, background, border radius, and button padding.

This code will change the CTA button to have white text on a blue background with 15 pixels of padding surrounding the text and slightly rounded corners.  Increasing/decreasing the padding value will change the size of the button and changing the border-radius value will change the roundness of the button corners.

.palette-primary .call-to-action-wrapper .button-primary {
color: white;
background-color: blue;
padding: 15px;
border-radius: 5px;
}

These are just a few of the rules that you can add there are plenty of additional rules that you can add to further customize your button designs.

 

SIGNUP FOR

BOLDGRID CENTRAL  

   200+ Design Templates + 1 Kick-ass SuperTheme
   6 WordPress Plugins + 2 Essential Services

Everything you need to build and manage WordPress websites in one Central place.

2 thoughts on “How to Customize the Call to Action Button in Hydra

    • Hi Mimi,

      If you’re using BoldGrid Post and Page Builder for WordPress you should click the button to bring up it’s edit options then add the text that you would like to be displayed in the “text” field, then save.

      I hope this helps!

Leave a Reply

Your email address will not be published. Required fields are marked *