Basic Promo

On this page:

Basic Info | Example | Tutorial | Accessibility Info | Screenshots

Basic Info

The Basic Promo is a customizable text and/or image-based teaser that allows site visitors to see promotional content for a particular content on another page.

Example

Tutorial

Adding/Editing a Basic Promo

1. Navigate to and open your page.
   
2. Add the Basic Promo component.
3. A new Basic Promo component placeholder icon will display in the space.
   
4. To configure the component, click or touch the placeholder. The component toolbar will display along the top of the space.
5. Select the wrench icon to configure.
6. A window will appear so you can customize the promo's overall appearance, add optional text, add an optional image, and insert the required title and link.
   
   1. Required fields:
      1. Title
      2. Link to
   2. Optional fields:
      1. Image asset
         
      2. Open link in new window
      3. Text
      4. Style
7. Add a required Title in the appropriate field. There is a character limit of 100.
   
8. In the Text field provide any additional optional text you would like to include. This field is optional and has a character limit of 140.
9. In the Link to field you can browse to select a CMS page or file in the DAM, insert an external URL, add "mailto:" before an email address, or add an anchor link.
10. Select a Style:
    1. Light - Default style, white background with violet accents.
    2. Bold - Violet background with white accents.
11. To insert an image in the Image asset field:
    1. Make sure to have the Side Panel opened before configuring a component.  (If it is not, you may also select the small image icon and browse to the image you wish to add.)
       
    2. Locate an image from the Assets menu in the left-hand Side Panel. Drag and drop it into the specified spot within the edit window.
    3. A crop is recommended for all images used in this promo.
       
       1. If uploading custom graphics for your Basic Promo, we recommend creating your images at the maximum display size of 450 pixels x 338 pixels.
    4. If you wish to choose a different image, drop another image from the Side Panel or select Pick under the current Image to manually select an asset from a folder.
       
    5. In the Accessibility tab, insert alternative text for the image. Alternative text is required if an image is added.
12. Select the checkmark icon to save and close. 
    

Specifying a Promo Image Crop

1. Select your configured promo to open the component toolbar and select the pencil icon to edit your promo image.
   
2. Enter fullscreen editing mode by choosing the icon to the left of the X or cancel icon to find the image crop feature.
3. Choose the crop icon in the very top left corner and select "4:3."
4. Resize and move the window to highlight exactly what you want to appear then confirm the crop by selecting the checkmark icon in the top right corner.
5. Once confirmed, you should see your newly cropped image.  You can now exit fullscreen.
6. To finish saving the crop, click the checkmark icon in the toolbar.

^ Back to top

Accessibility Info

Images

• Avoid images with text when selecting your promo image. Use stock photography or iconography instead.
• Images for the Basic Promo should be considered decorative, so make sure it's something that can complement your text content rather than replace it.

^ Back to top

Screenshots

^ Back to top