Add text and links/buttons to image elements

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

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

How to add text to images

All of the following options can be set on the second tab:

Option	Description
Headline	This will be displayed as the first line of text. It has the largest font size.
Text	This will be displayed below the headline. Compared to the headline, the font size is much smaller.
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 will not be visible on the image. To open the added link, visitors can select any part of the image. 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 the added link to open in a new tab, activate this checkbox. This can, for example, be useful when you link to an external page so that visitors can more easily return to your website.
Show button on image	If you have added a link, you can activate this checkbox to show a button. This clearly signals to your visitors that the image is actually a link. Even if you have added a button, your visitors can still select any part of the image to open the link.
Button text	If you have decided to show a button, you should also add a text to it. This can be anything you want. Make sure to use clear wording that motivates your visitors to actually select the button. 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

All of the following options can be set on the third tab after you have added text to an image.

Note

Depending on the selected theme and the type of image element, the design may vary in position and style.

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. The text color of the button is either black or white, depending on the color of the button.
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, the width of the color overlay depends on the length of the added text. However, the overlay only extends to a predefined point before the text breaks into a new line.
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. If you don't want to use the overlay, set the opacity to 0. By selecting an opacity of 100% for the color overlay, the image will be completely covered. This way, you can easily create text boxes in different colors.