RESEARCH it logo  SHARE it logo    VERSO logo

 

UX ADMINISTRATION

Chapter 4. WORKING WITH PAGES AND WIDGETS

   

 

Call to Action

The Call To Action component lets you add a means by which your library’s patrons can respond to a specific need, concern or condition. The Call to Action can include a title, paragraph text, background image, and an “action” button.

To add a new Call To Action component:

  1. On the Page Settings screen for the desired page (see Creating and Editing Pages for more information), select Call to Action from the Select Component menu for the desired page block.
    • The Call To Action Component page displays.

Add Call to Action Component

Call to Action Component

  1. Enter a Title for the Call to Action in the Call to Action Title text box.
  2. Use the Call to Action Title Background color picker to select the desired background color for the Call to Action title (see Using the Color Picker for details).
  3. Use the Call to Action Image tools to locate and upload the background image file for the Call to Action component.
    • Click the Browse button.
      • A standard File Upload dialog displays.
    • Locate the desired image file, then click the Open button on the File Upload dialog.

      NOTE: For best results, use an image that is less than 1200px wide to cover large monitors.

      NOTE: Be sure the selected image is saved in a supported file format. Supported formats for image files include JPG, GIF and PNG.

      • The file name for the selected file shows to the right of the Browse button.
    • Click the Upload Image button to upload the selected image file.
      • A thumbnail of the image shows in the preview area when the upload is completed, and the message “image uploaded” shows briefly at the top of the screen.
  4. Enter an “alternate” text description of the image in the Image Alternate Text text box.

    NOTE: The Image Alternate Text description is used by “screen readers” to describe the content of the image. The Image Alternate Text description is also displayed when the cursor is positioned over the image.

  5. If desired, use the Target URL text box to create a link to an external web page when the Call To Action is clicked.
    • BE SURE to include http:// or https://, as appropriate.
  6. Use the Enable Call to Action Button checkbox to enable or disable display of the Call to Action button.

    NOTE: The Call to Action button is disabled by default.

    • A checkmark checkmark indicates display of the Call to Action button is enabled. 
    • An empty checkbox checkbox indicates display of the Call to Action button is not enabled.
    • Clicking the checkbox repeatedly will toggle it on and off.
  7. If display of the Call to Action button is enabled, enter a label for the button in the Button Label text box.
  8. If desired, click the More Options link to specify additional content and configure additional design elements for the Call to Action component.
    • Use the Opacity field to set the transparency level of the image, from 1.0 (no transparency) to 0.0 (100% transparency).
    • Use the Image Position text box to specify the position of the image within the page block (left, center, right, etc.)
    • Use the Image Sizing text box to specify the size of the image within the page block (auto, cover, contain, etc.).
    • Use the CTA Font Color color picker to select the desired font color for the Call to Action Title and Paragraph Text (see Using the Color Picker for details).
    • Use the Background Color color picker to select the desired background color for the Call to Action (see Using the Color Picker for details).
    • If the Enable Call to Action Button option is enabled, use the Button Classes text box to define the style for the Call to Action button (btn btn-primary, btn btn-info, btn btn-light, etc.).

      NOTE: The Button Classes option uses Bootstrap CSS to define the button color and style.

    • Enter the text for the Call to Action in the Paragraph Text text box.
    • Use the Paragraph Background Color color picker to select the desired background color for the Call to Action paragraph text (see Using the Color Picker for details).
    • Use the Flush in template checkbox to indicate whether or not the page block should be flush with adjacent blocks on the page.
      • A checkmark checkmark indicates the page block will be flush with adjacent page block.
      • An empty checkbox checkbox indicates the page block will not be flush with other page blocks.
      • Clicking the text box repeatedly will toggle it on and off.
  9. To preview your work while editing:
    • Click the Preview link to preview the component as it will appear when added to a page.
      • The screen refreshes to display a “preview” of the component.
  10. When all desired information for the component has been entered, click the Save and Close button to save the component. (Click the X button to cancel your work and discard the new component.)
    • The Call to Action Component page closes, the system returns to the Page Settings screen, and the completed Call To Action component displays.
  11. Click the Save Page Settings button to save the page settings. (Click the X button on the Page Settings screen to close the page without saving your changes.)
    • The message “Template Saved” shows briefly at the top of the screen.
  12. The Page Settings screen closes, and the system returns to the “Home” page.

To edit an existing Call To Action component:

  1. On the Page Settings screen for the desired page (see Creating and Editing Pages for more information), mouse over the Call to Action component you wish to edit, then click the Edit Component link.
    • The Call to Action Component page displays. The page is pre-filled with the current values for the component.

Call to Action Component Page

Call to Action Component Page

  1. Edit the Call to Action Title, Call to Action Title Background color and/or Image Alternate Text, as desired.
  2. If desired, use the Call to Action Image tools to locate and upload a new background image file.
  3. If desired, enter or edit the Target URL.
  4. If desired, edit the Enable Call to Action Button setting and/or Button Label as appropriate.
  5. If applicable, expand the More Options field to edit the image Opacity, Image Position, Image Sizing, CTA Font Color¸ Background Color, Button Classes, Paragraph Text, Paragraph Background Color and/or Flush in template values, as desired.
  6. To preview your work while editing:
    • Click the Preview link to preview the component as it will appear when added to a page.
      • The screen refreshes to display a “preview” of the component.
  7. When all desired information for the component has been edited, click the Save and Close button to save the component. (Click the X button to cancel your work and discard your changes.)
    • The Call to Action Component page closes, the system returns to the Page Settings screen, and the revised Call To Action component displays.
  8. Click the Save Page Settings button to save the page settings. (Click the X button on the Page Settings screen to close the page without saving your changes.)
    • The message “Template Saved” shows briefly at the top of the screen.
  9. The Page Settings screen closes, and the system returns to the “Home” page.