Call to Action Buttons

 

Use the Call to Action Buttons tool to create targeted calls to action for certain customers, users, groups of users, and/or types of users.

Call to Action Buttons appear in the header of your site.

Choose Call to Action Buttons from Admin > Content > Call to Action Buttons

The interface

  1. Add a new button.
  2. Set the text that appears on the button.
  3. Set the page(s) where you want the button to appear.  
  4. Choose the destination URL for the button's link. Keep good link building processes in mind here.
  5. Choose the user(s) who can see this button. See below for a detailed explanation.
  6. Choose the CSS class. You'll find several pre-built button styles in the drop-down menu, or you can insert your own class and use the Custom CSS File Editor to style the button.
  7. Add inline CSS styles to the button. This is completely optional.

As you build the button, you'll see updates to the "Preview" box. Keep in mind that your website's design and styling may be different from the design and styling shown on the preview.

To fully test it, set yourself as the target user and open your home page in another window. Refresh the home page as you update the button to see your changes on the website.

From Url

The From Url field is versatile, allowing you to determine exactly where you want your  Call to Action Button to appear:

  • * - Will display the Call to Action Button on all pages on the website.
  • /  -  Will display the Call to Action Button on ONLY the Homepage.
  • /myaccount/*  - Will display the Call to Action Button on all 'MyAccount' pages.
  • You can even copy the URL from a specific item detail page, category page, etc., allowing you to create a message that is specific to a particular item or category.

Target Users

The Call to Action Buttons tool allows you to determine who can see the button by using the "Target Users" option. There are some factors to remember when setting up the targets:

Each user will see only the first button that applies to their account, according to the WebAlliance order of preference. The panel on the left side of the admin tool shows all buttons in order of system preference, most specific to least specific. The "Target Users" drop-down box lists the options in the same order.

You can see a definition of the different types of target users and the WebAlliance order of preference in the Can you explain Targeted Users? article.

CSS Classes

The CSS Classes drop down list will contain a list of "preset" button styles for you to choose from.  Initially, you will only see the "Default" option available there.  "Default" represents the default button styling for your website.  For Advanced users who are familiar with CSS code, you can make additional options available in the drop-down list to choose from.

To make a new CSS Class available, you will need to access the Custom.css File Editor from the Site Manager menu in the Admin panel.  You can see some basic details on how to work with it in our Custom CSS File Editor article.

To add the CSS preset to the CSS Classes drop-down, you will need to put the following comment code both before and after your button CSS as shown above:

/* CTA:CustomClass */

You can add multiple CSS classes between the comment codes to make additional options available.  For instance, the code above would make "red" and "blue" presets available in the drop-down list.

It's best to use simple CSS here.  More advanced code either won't work at all, or could potentially cause issues with the site CSS.

CSS Inline Styles

Use the CSS Inline Styles section to design a button style on the fly.  You can create inline styles in three ways:

  • Type the CSS code directly into the CSS Inline Styles box.  Make sure to separate your styles with a semicolon ( ; ).
  • Paste CSS code directly into the CSS Inline Styles box.  Again, styles must be separated by a semicolon.
  • Click the "Edit Styles"  icon to the right of the CSS Inline Styles box to access the easy to use Inline Style Editor.

CSS Inline Styles are used in addition to or in preference over any CSS Classes you might have selected for your buttons.  

For example, let's say you created a CSS Class preset in your Custom CSS with a red background and white text.  Upon creating a new button, you select the preset from the CSS Classes drop-down.   You like the red background, but you would prefer yellow text for this particular button.  You could then simply set the Text Color to yellow with the Inline Style Editor.  The background would remain red.

Inline Style Editor Tips

  • Margin increases the space outside the button.  This would be useful if the button was too close to another element in the site header.  Setting the appropriate margin would allow you to put space between the two elements.
  • Padding increases the space inside the button, effectively making the button larger.
  • Outside of clicking any of the color fields to see the color picking tool, you may also enter hexadecimal color codes if you have something specific in mind like matching the color in your company logo.  Common color names are allowed as well in place of hexadecimal color codes.  You can simply enter "white" in any of the color fields, and the system will translate that to the correct code.