Function: Use to bring attention to things that need to stand out amongst other content, such as a must-read article, big event or giving opportunity. Copy should be concise and to the point.
Number of options: 8
Note: Content-width call to actions can be used on pages with sidebars. Because we are showing both content-width and full-width versions here, we’ve chosen a template without a sidebar. Content-width versions will fit to the width of the area they are in unless you use the grid shortcode with them for layout purposes. Please see the grid shortcode recipe for more information on how to use it.
Step 1: Browse options and copy and paste shortcode
Look through all the options and select the one that will work best. The corresponding shortcode is directly under the call to action it creates. Copy and paste your chose shortcode into the WordPress Editor you wish it to appear.
*Copy all of the code, including the [ ] on either end.
Heading title Heading title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros eros, blandit nec leo laoreet, pulvinar consequat metus.
Heading title Heading title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros eros, blandit nec leo laoreet, pulvinar consequat metus.
Heading title Heading title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros eros, blandit nec leo laoreet, pulvinar consequat metus.
Heading title Heading title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros eros, blandit nec leo laoreet, pulvinar consequat metus.
Heading title Heading title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros eros, blandit nec leo laoreet, pulvinar consequat metus.
Heading title Heading title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros eros, blandit nec leo laoreet, pulvinar consequat metus.
Heading title Heading title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros eros, blandit nec leo laoreet, pulvinar consequat metus.
Heading title Heading title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros eros, blandit nec leo laoreet, pulvinar consequat metus.
Step 2: Customize your call to action
When crafting your copy for your call to action we recommend to keep it as short as possible. Intended to be no more than one line of headline and two lines max of copy. The more text, the less someone is likely to read it and that’s the opposite of what we want, especially with a call to action!
Within each shortcode there are attributes associated with that call to action. It is within these attributes that you can adjust and customize the content you wish to present. Below is a list of all the attributes along with what/how you can change for each attribute.
- Remember, when changing an attribute to keep the quotation marks. For instance, if you are wanting to change the heading to “Go Huskies”, make sure the code appears as follows: heading=”Go Huskies”
- Make sure that you are choosing an image that is the correct size and orientation for your call to action. Also, be aware that the image will not display in the mobile version as it is considered a background image.
Attributes:
- type: This determines what kind of call to action you are working with. Options are image and noimage (default is image)
- style: This dictates the style of call to action you are working with and is only available the image type. It adjusts the background color, text, and link. Options are purple, gold, white (default is purple)
- full_width: This is how you enable full-width. Use true to enable full-width and false to make the module content-width. Any other option, or lack of option, will make the module content-width. Options are true and false (default is false)
- img: Insert the URL of the image you want to be on the call to action, replacing the current placeholder image.
- spacing: This is how you adjust the spacing/padding around the call to action shortcode. Default includes top/bottom margin, top removes top margin, bottom removes bottom margin, all removes both top and bottom margin. Options are default, top, bottom, all (default is default)
- id: IDs are a way to assign a unique identifier to a specific shortcode or section. Some shortcodes have slightly different behaviors with the IDs than than others, to view those as well as best practices please visit our best practices for IDs page.
- heading: This is how you set the heading or title for the call to action. Required for this shortcode.
- heading_level: Heading tag used for the heading of the call to action and can be set to any heading level with the style of an h2. Options are h2, h3, h4, h5, h6 (default is h2)
- link_text: This is where you would change the link text for the call to action
- target: This is where you would set the link URL. Simply insert the link to whatever site or page you want the button to take your external user to.
To change the copy on your call to action, simply replace the current filler text found directly before [/uw_cta] with your desired copy.
Best practices for heading and copy
It’s recommended to keep your copy short and to the point. The more copy, the less people will read it!
Best practices for images
Image size for the call to actions should have a minimum width of 1000px. The recommended height depends on the image and the subject of the photo. Keep in mind these images are primarily wide and short in display so your image should be landscape in orientation. Recommended aspect ratios are 16:9, 15:8 or 3:2. Make sure the subject is in the center of the image and not overly zoomed in or something will cut off at various screen sizes.