Image Settings

A widget can contain one or more images. Each image can be adjusted by size and a couple of other settings. To see the Image settings menu, either click on the image you want to adjust in the workspace or select your image in the right menu. As you edit the settings, they will render in the workspace. When you are satisfied with your changes, press Save at the bottom of the settings menu.  

Image Size

The size of the widget canvas can be adjusted by the slider, or by entering a percentage in the field.

Image File

The name of your current image is displayed here. You can change the image by clicking "Change". Select a image from your library or upload a new one.

Border

This setting allows you to add and customizea border to the image.

  • All sides: Allows you to change the border of all sides at the same time, ie. if all sides should have a 5px border.
  • Separated sides: Allows you to change the border of each side separately, in the order: Top, Right, Bottom, Left.

Rounded Corners

This setting allows you to edit the image and make it more or less round.

  • All corners: Allows you to change the radius of all corners at the same time, ie. if all corners should have 4px radius.
  • Separated corners: Allows you to change the radius of each border separately, in the order: Top, Right, Bottom, Left.

Margin

This setting allows you to edit the margin around the image, i.e add space between the image and the next element. 

  • All sides: Allows you to change the margin of all sides at the same time, ie. if all sides should have a 20px margin.
  • Separated sides: Allows you to change the margin of each side separately, in the order: Top, Right, Bottom, Left.

Padding

This setting allows you to edit the padding inside the image, i.e add space between the image's outer edges and the container around it.

  • All sides: Allows you to change the padding of all sides at the same time, ie. if all sides should have 10px padding.
  • Separated sides: Allows you to change the padding of each side separately, in the order: Top, Right, Bottom, Left.

Shadow

This setting allows you to add and add shadow around the image.

  • Color: Select the color you want to have on the shadow. 
  • Horizontal: Select the horizontal (right/left) position of the shadow.
  • Vertical: Select the vertical (up/down) position of the shadow.
  • Blur: Select the amount of blur you want to have on the shadow. Left = no blur, Right = full blur.
  • Spread: Select the amount of spread you want to have on the shadow. Left = no spread, Right = full spread.

Hide on Desktop/Mobile

The last setting is to hide or show the image on desktop vs. mobile devices. This setting is used to customize the widget to different devices. For example, you might want to have an image in the widget on the desktop, but on mobile, you want to hide it to decrease the overall size of the widget. To so do, select the element you want to hide and click hide on desktop/mobile, depending on your desired outcome.

Did this answer your question? Thanks for the feedback! Please reach out to support@triggerbee.com if there's anything you'd like to add. There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us