Adding an Image to a Button


If you want to add some extra pizzazz to your landing page, you can customize your buttons to show an image of your choice.

Adding an image works to the following button options:

  • button_button.png Button
  • lightbox_button.png Lightbox Button
  • form_button.png Form Confirmation Dialog Button 

To add an image to a button:

  1. If you haven't already, add a new button by dragging and dropping the appropriate widget from the panel on the left.
  2. Go the Properties tab on the right-hand side of the builder and scroll down to the Appearance section of the tab.
  3. Select the Image option in the Style drop down menu. A new dialog box will appear.
  4. In the Choose Window dialog box, select or upload the image you would like to display as your Lightbox button image preview.
  5. image4.png


    Note: The image will not be editable within the Page Builder, so you will need to ensure the image is already sized as desired.

  6. You can change the size of the button to fit the size of your image by dragging the edges of the button, or by using the Geometry section of the Properties tab. If you want the builder to automatically adjust the size of the image for you, you can check the box entitled Fit button to Image in the Appearance section of the Properties tab.
  7. image8.png
  8. In the same Appearance section of the Properties tab, you can also add images to your button that will appear when your page visitor is clicking, or hovering over the button. This is a great feature if you want to give your visitor the appearance of actually clicking a physical button when they click on your link. Click on the Hover or Active tab and then click the Change Image button to add the image of your choice.
  9. image9.png

Now go forth and add images to your buttons!

Related articles:

Working with Lightboxes

Loading a Form into a Lightbox

Do you agree or disagree with this statement: This article helped me find the information I needed quickly and easily.

Select an option and leave us some feedback in the comments:

Strongly DisagreeDisagreeSomewhat DisagreeUndecidedSomewhat AgreeAgreeStrongly Agree

Measuring Customer Effort Score with Nicereply