Widget Canvas Settings

Widget Canvas Settings

The foundation of the widget is called the Canvas. It has a couple of settings that can be adjusted. To see the settings menu, click the "Widgetcanvas" button 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. 

Width

The width of the widget canvas can be adjusted by pixels. Simply change the width of the canvas by changing the pixels. If you uncheck the width option, the widget will have a width of 100% of its parent element. 

Background

  • Unchecked: transparent background
  • Checked: select your background color by clicking the color box. Color can be selected by dragging around in the color pad, or by HEX-, RGBA- or HSLA codes.

Background Image

  • Unchecked: no background image
  • Checked: select your background image in the appearing prompt. You can select a previous image from your library or upload a new one. Once selected, the imaged can easliy be changed by clicking "Change". You can also select the size of the background image. 

Rounded Corners

This setting allows you to edit the corners of the widget and make them more or less rounded.

  • 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 widget, i.e add space between the widget and the next element.
This setting is mostly used for widgets that are placed at the bottom, top or in any corner of the website.

  • 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 widget, i.e add space between the widgets outer edges and the elements inside.

  • 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 widget.

  • 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. 
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