Follow

Overlaying CTA button (call-to-action) on background image on website

  • Drag and drop an Image widget into any custom page or your homepage. Drag until you see a green line appear, then drop.

Image-widget-drag-drop.png

  • Click on the empty Image widget (gray box with camera+symbol).
  • The editor will open on the left. Click Select Image.

Image-Widget-select.PNG

  • Select Button from the All Types drop down menu (or upload your own button. We recommend dabuttonfactory.com for making buttons). Click the image you would like to use.

Button-stock-image.png

*Please note: The button will appear quite large. You'll learn how to make the button smaller in a later step. 

  • On the left, add a Click-Through Link. The Click-Through Link will be the website address you want the visitor to go to when they click the button. (Don't forget the http://). Also, add an Alt Tag. Adding an Alt Tag will help with SEO. 

Button-link-alt-tag-blank.PNG

Button-link-alt-tag-filled.PNG

  • Adjust the size of the button by clicking on Edit Image.

Edit-image-button.PNG

  • Move the Zoom slider bar to the left to make the button smaller.

Button-zoom-out.PNG

  • Click Complete.

button-zoom-complete.PNG

  • To begin adding the background image, click Edit Row Settings.

Button-edit-row-settings.PNG

  • Click Select by Background Image.

Button-background-image-select.PNG

  • Any image can be used as a background image. For the best result, we recommend using an image that is at least 1200 pixels wide (up to 5120 pixels wide is supported). Click the image you would like to use.
  • To fit the image in the container click Fill.

Background-image-fill.PNG

  • Position the image in the container using the arrows or by clicking the black dot in the center.

Background-image-position.PNG

  • If you would like the row and/or image to stretch to the edge click Stretch to Edge, then click Stretch Content to Edge. Otherwise, skip this step.

Button-background-image-stretch-to-edge.PNG

*Please note: you must be using a layout that supports stretch to edge functionality and have stretch to edge turned on for your website for the option above. For more information please click here

  • Set the opacity of the image by clicking the Overlay button.

Overlay-background-image.PNG

  • Select the opacity by clicking on an option below the color palette or by using the color spectrum and the slider. Then, click Done

Opacity-background-image-select.PNG

  • Then, click Complete.

Button-background-image-complete.PNG

  • Re-position the button by clicking on it, then click Edit Image

Button-background-image-Edit-Image.PNG

  • Click and hold on the button and drag it to re-position it within the container. 
  • Then, click Complete.

Edit-image-position-complete.PNG

  • Finally, scroll down and hit Complete.

Button-background-widget-complete.PNG

Button-background-image-final.PNG

 

 

 

 

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Article is closed for comments.