1. Commerce
  2. Store Front
  3. Website Content
  4. Image Content
  5. Image Text Overlay

Image Text Overlay

The Image Text Overlay extension lets you add an image with text overlay by using Site Management Tools. Images can be enhanced with dark and light overlays. You can choose the text color based on your Theme Settings, and select the position of your content. You can add a call-to-action button and select the button style. For example, with Image Text Overlay, you can create attractive images for home and landing pages that prominently feature your brands.

Important:

Commerce extensions are only available if provisioned, installed, and activated for a selected domain in your account. For more information, see Commerce Extensions.

Note:

Extensions require SuiteCommerce or the Aconcagua release of SCA or later.

This image is an example of image text overlay.

Image Text Overlay

This topic explains how to:

Add an Image with Text Overlay

You can add an image with text overlay to multiple areas on your website using Site Management Tools. For more information on Site Management Tools, see Site Management Tools Overview.

To add an image with text overlay:

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

  2. Click Add on the Site Management toolbar.

  3. Drag the Image Text Overlay content type to the page.

    Note:

    If you do not see this content type, check that the extension has been installed and activated. Click Settings on the Site Management toolbar to access the Content Manager. Drag the content type from the Inactive Content Types list to the Active Content Type list.

    You can drag the Image Text Overlay content type to multiple areas of the page:

    • If you drag it to an area marked as all pages, then the content displays on any page that contains that area.

    • If you drag it to an area marked as page type, then the content displays on any page of that type.

    • If you drag it to an area marked as this page, then the content displays only on the page to which you add it.

  4. In the Settings side panel, use the Name field to enter a description of your new content.

  5. Set the content visibility options.

    See Visibility Dates.

  6. Select the image you want to display using the Image Manager.

    See Image Manager.

    Note:

    Image Text Overlay allows a maximum image height of 750 px. If the image height is greater than 750 px, the image is resized to fit.

  7. In the Image Alignment field, select the positioning of the image within the content box.

    You can choose the focus of your image. The options are top, center, or bottom.

  8. In the Image Overlay field, select the image opacity.

    You can select dark, light, or no overlay.

  9. In the Alt Text field, enter an image description.

    This text is used to improve web accessibility for visually impaired users and for SEO purposes.

  10. In the Text field, enter the text you want to display over the image.

    You can use basic HTML formatting tags such as <strong> for bold text, <em> for italic, and <li> for bulleted lists, for example. When entering your text, enclose any body text with <p> tags and use <h> tags to create headers.

  11. In Text Alignment, select the positioning of the text content and button overlay.

    You can choose left, right, or center aligned.

  12. In the Text Color field, choose the text field colors.

    By default, the colors are taken from your theme. If you select Dark, the text uses the dark text color as defined in your theme. If you select Light, the text uses the light text color as defined in your theme.

  13. In the Button Text field, enter the text you want to display on the button. If you leave this field blank, the button does not display.

  14. In the Button Style field, choose the button style you want to display.

  15. In Button Link, enter the URL you want to open when the user clicks the button.

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

  17. Use the Tags field to enter keywords that help you filter your content.

    See Content Tags and Filter Tools.

  18. Click Save.

Discard or Remove an Image with Text Overlay

If you have not published your image with text overlay and you decide to remove it, you can discard it. If you have already published your image with text overlay, you can remove it directly from the page where it is located. For more information on the differences between discarding and expiring content, see Discard Content Vs Expiring Content.

To discard an image with text overlay:

  1. Go to the Review & Publish Changes list.

  2. Select the image with text overlay from the list.

  3. Click Discard.

  4. Click OK.

To remove an image with text overlay:

  1. Go to the page that contains the image with text overlay.

  2. Click the Image Text Overlay box.

    This highlights it and displays the content controls.

  3. Click Remove.

  4. Click OK.

Change the Button Link

After the image text overlay is configured, if you need to change the button link or text, use the following procedure.

To change the button link or alternative text

  1. Go to the page that contains the image with text overlay.

  2. Click the Image Text Overlay box, and then click the Settings button.

    This displays the Image Text Overlay Settings in the side panel.

  3. Enter the URL for the link in the Button Link field or enter the alternative text in the Alt Text field.

  4. Click Save.

Related Topics

General Notices