The text-on-image component

The text-on-image component, whose option icon is shown in figure 1, creates an image with text positioned over it.

Figure 1. the text-on-image option icon

By placing real text on top of an image (instead of incorporating the text into the image file itself), the text remains accessible both to people who cannot see the image and to search engines.

An example of the text-on-image component is shown in figure 2. In the example the caption is positioned over a blank area in the top-right corner of the image. This creates a more compact and attractive appearance than having the caption in a separate text component below the image.

Figure 2. an example of the text-on-image component

Editing a text-on-image component

The text and image can be edited in the same way as text and image components. When editing the text, fours arrows are shown in the corners of the text box, as shown in figure 3.

Figure 3. editing a text-on-image-component

To resize and position the text box, click and drag the arrows.

Linking text-on-image components

To make a text-on-image component function as a link, you only need to set its image to be a link.