Creating Call to Action buttons / Button configuration options

Jun 8, 2014 12:05 pm

The Landing Pages modules provides a button creator to customize the look of the Call to Action button on a Landing Page.

There are six tabs of options available for button creation:

  • Font
  • Size
  • Background
  • Border
  • Box Shadow
  • Text Shadow


By adjusting the options available in each of these tabs you can create a button that is customized for the specific needs of your site.

The options available in each tab function in a similar fashion. They are summarized here:

The Font tab:

  • Select the Font Family via the drop down menu.
  • Select if the text should be Bold or Italic via the checkbox options.
  • Select the Font Size via the slider.
  • Select the Font Color via the Color Picker.

The Size tab:

  • Select the "Set Automatically" checkbox to set the button size for best fit.
    Note that Button Height and Button Width sliders will be disabled.
  • Set the V-Padding via the slider.
  • Set the H-Padding via the slider.


Alternately:

  • De-select the "Set Automatically" checkbox to set the button size for best fit.
    Note that V-Padding and H-Padding sliders will be disabled.
  • Set the Button Height via the slider.
  • Set the Button Width via the slider.

The Background tab:

  • Select from a Gradient, Solid or Transparent button background via the radio buttons.
  • Set Gradient Color 1 and Gradient Color 2 when using the Gradient option.
  • Set Gradient Color 1 only when using the Solid option.
  • No Gradient Color is used when the Transparent option is selected.

The Border tab:

  • Adjust the Border Radius via the slider.
  • Adjust the Border Size via the slider.
  • Adjust the Border Color via the Color Picker.

The Box Shadow tab:
If you would like the Button to have a shadow, check the Box Shadow option. Settings will appear.

  • For an Inset shadow, place a check in the Inset option.
  • Adjust the shadow Vertical Offset via the slider.
  • Adjust the shadow Horizontal Offset via the slider.
  • Adjust the shadow Blur Radius via the slider.
  • Adjust the shadow Spread Radius via the slider.
  • Adjust the shadow Color via the Color Picker.

The Text Shadow tab:
If you would like the Button Text to have a shadow, check the Text Shadow option. Settings will appear.

  • Adjust the text shadow Vertical Offset via the slider.
  • Adjust the text shadow Horizontal Offset via the slider.
  • Adjust the text shadow Blur Radius via the slider.
  • Adjust the text shadow Color via the Color Picker.

The Color Picker (all tabs).

  • Click in the color field to show the Color Picker.
  • Use your mouse to click and drag to the color you wish to use for the option you are setting.
  • Click outside the Color Picker window to close the Color Picker window.

By using these options in combination you can create a Call to Action button that is appropriate for your page.