Add text and links/buttons to images

You can add text and links/buttons to most image content elements in the Editor. This is optional, but can improve the appearance of your website and make it look more professional.

Simply hover over the respective image in the preview area of the Editor and select .
On the different tabs, you can make the following settings:

• 
  On this tab, you can set an alternative text (alt text). This is a short description of the image that helps convey its content. This is important for visitors who use a screen reader or if the image fails to load. For further information, refer to Define alternative texts for images.
• 
  On this tab, you can add text to images. For further information, refer to the section How to add text to images.
• 
  On this tab, you can customize the text design. For further information, refer to the section How to edit the text design.

Note

Text settings are not available for product images and only for specific image elements in the Editor.

If the content element contains multiple images, text settings usually only apply to the selected image. To add text to multiple images, edit each image individually.

How to add text to images

The following options are available on the second tab:

Option	Description
Headline	Displayed as the first line of text. Uses the largest font size.
Text	Displayed below the headline in a smaller font size.
Link	If you want to add a link to your image, add it to this field: If you want to add an internal link to a page or product on your website, select Pages or Products. You can then select the item you want to link to. Alternatively, you can also enter search terms in the field Enter link or search page/product to more easily find the item you would like to link to. Note You can only link to published products. If a product is still in draft state, you’ll need to publish it first before you can link to it. If you want to add a link to an external website, enter the desired link in the field Enter link or search page/product. Confirm by selecting to the right of the link field. The link is not visible on the image. Visitors can select any part of the image to open it. For further information on adding links to one of your website pages or to one of your products, refer to Add links to elements on your website.
Open link in new tab	If you want an added link to be opened in a new tab, activate this checkbox. This is useful for external links so visitors can easily return to your website.
Show button on image	If a link is added, activate this checkbox to display a button. This makes it clear that the image is a link. Even with a button, visitors can still select any part of the image to open the link.
Button text	If you display a button, add a label to it. Use clear wording that motivates customers to select it. The use of "buy", for example, could stop visitors from doing so as they might be worried of accidentally making a purchase. Instead of "Buy now", you could opt for a solution like "Discover now" or "View products". For further information, refer to Encourage your customers to buy with effective Call-To-Actions.

How to edit the text design

The following options are available on the third tab after text has been added to an image.

Note

The design may vary depending on the selected theme and image element type.

Option	Description
Text color	Use the drop-down menu to choose from your website colors as well as black and white. Make sure to choose a color that contrasts well with the background to ensure the text is easy to read.
Button color	Use the drop-down menu to choose from your website colors as well as black and white. If you don't display a button, this option is not available. Button text is automatically set to black or white depending on the button colour.
Color overlay	Use the drop-down menu to choose from your website colors, as well as black and white. Make sure to choose a color that contrasts well with the text color to ensure the text is easy to read. In some themes and depending on the type of content element, overlay width depends on the length of the text, but only up to a predefined line break point.
Color overlay opacity	Set the opacity of the overlay by moving the slider or changing the number on the right-hand side. Make sure to set an opacity level that provides a good contrast between the added image and the text so that the text is easy to read. Set opacity to 0 to disable the overlay. Set opacity to 100% to fully cover the image and create a solid text box in the chosen colour.