Place Call-To-Actions on images

No matter if you are already an old hand dealing with CTAs or if you just learned about CTAs in our article "Encourage your customers to buy with effective Call-To-Actions".
In this article, we'll explain you what you need to do to place a CTA on an image.

Skip to:

• Impressions
• Things to know
• Add text on an image
• Modify colors

Impressions

Look what you can do with CTAs! Great, isn't it?

Image slider with CTAs combined with color boxes

Single image combined with text as well as color boxes with CTAs

Things to know

For the creation of CTAs you can use the following content elements in the Editor:

• Image slider
• Image, single column
• Image, two columns
• Image, three columns
• Image and text, two columns
• Text and image, two columns
• Image and text, three columns

Note
There's no option to place CTAs on product images though.

Depending on which theme you use, the CTA on the image may vary in position and style. Don't worry, it's for your own good. Our designers crafted the perfect solution for each theme.

Add text on an image

Headline and text

1. In the sidebar of your cockpit, navigate to Website > Editor.
2. Navigate to the content page that you'd like to edit.
3. Make sure that you've added an image to your chosen content element (see also Things to know).
4. In the preview area, navigate to the image, and select  .
5. Select the tab .
6. In the input field Headline, enter a meaningful headline. Once you start typing, you'll see the immediate result as a preview on the image.
7. In the input field Text, enter a text of your choice.
8. Select Save.

Here's a visual from our example business:

Links and buttons

Headline and text ain't all. You'd like to encourage a visitor to go to a specific page? Add a link to your CTA: 

1. Repeat steps 1 to 5 from the section Add text on an image > Headline and text.
2. In the input field Link, enter a link of your choice. 
3. By selecting the checkbox Open link in new window, once a visitor selects the image or button, the referenced page will open in a new browser window.
4. Select Save.

Note
We recommend to select the checkbox Open link in new window, if you've entered a link to an external page, e.g. a YouTube video.

We also offer the option to make the link a button:

1. Select the checkbox Show button on image.
2. Fill in the input field Button text.
3. Select Save.

To give you an impression how it works and what it looks like, here's another visual:

Modify colors

Note
The option to modify colors is only available, if you've made entries on the tab . 

Text color and button color

You can easily amend the colors of your Call-To-Action. The software provides a pre-selection of colors. It's comfortable for you, as these colors perfectly fit your selected theme, or the colors that you've chosen yourself, see our article Change colors.

Select the tab  and practice it: Play around with Text color and Button color, and see which combination suits best. You'll see the immediate result as a preview on the image. If you're satisfied with the result, select Save.

Overlay

In addition to text and button color, you can also amend the overlay color and its opacity using the slider. If you're satisfied with the result, select Save.

Here's the magic in action:

Note
If you choose a color overlay opacity of 100%, you can easily create the color boxes, that we've shown in our examples in the above section Impressions.