1. Commerce
  2. Store Front
  3. Website Content
  4. Image Content
  5. Image Text Overlay
  6. Adding an Image with Text Overlay

Adding an Image with Text Overlay

You can use Site Management Tools (SMT) to add images with text overlays to different areas of your website. For more information about SMT, see Site Management Tools Overview.

To add an image with text overlay:

  1. Log into Site Management Tools. For details, see Logging into Site Management Tools.

  2. Go to the page where you want to add an image with text overlay.

  3. Click the Add icon Add Icon from the site management toolbar.

  4. Drag the Image Text Overlay content type onto the page. You can add the content type to multiple areas of the page:

    • If you drag onto an area marked all pages, your content shows on any page that contains that area.

    • If you drag onto an area marked page type, your content shows on any page of that type.

    • If you drag onto an area marked this page, your content shows only on that page.

    Note:

    If you don't see this content type, first check that the extension has been installed and is active. Then, click the gear icon on the site management toolbar and select Custom Content Types. Drag the content type from the Inactive Content Types list to the Active Content Type list.

  5. In the Settings side panel, enter a description for your new content in the Name field.

  6. Set when you want to display the content. Choose from Always Visible or Visible on Specific Dates. For details, see View Site as of a Specific Date in Site Management Tools.

  7. Use the Image Manager to select the image you want to display. For details, see Image Manager.

    Note:

    The maximum image height for Image Text Overlay is 750 px. If your image is taller, it will be resized to fit.

  8. In the Image Alignment field, select the position of the image in the content box. Choose from top, center, or bottom.

  9. In the Image Overlay field, select the image opacity. Choose from dark, light, or no overlay.

  10. In the Alt Text field, enter an image description. This text helps with accessibility and Search Process Optimization (SEO).

  11. In the Text field, enter the message you want to display over the image. You can use simple HTML tags such as <strong> for bold text, <em> for italic, and <li> for bulleted lists. When entering your message, enclose any body text with <p> tags and use <h> tags to create headers.

  12. From the Text Alignment field, select the position of the text and button overlay. Choose from left, right, or center aligned.

  13. In the Text Color field, choose your text color. By default, this field uses the color scheme of your theme.

  14. In the Button Text field, enter the text you want to display on the button. Leave this field blank if you don't want to display a button.

  15. In the Button Style field, choose your button style.

  16. In the Button Link field, enter the URL you want the button to open.

  17. Select Open in New Window if you want the button's link to open in a new tab or window.

  18. Add keywords in the Tags field to help filter your content. For more information, see Content Tags and Filter Tools.

  19. Click Save.

Related Topics

General Notices