Widget Container Settings
A widget can contain one or more containers. Each container can be adjusted by size and a couple of other settings. To see the Container settings menu, either click on the container you want to adjust in the workspace or select your container 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.
You can adjust the width of the container by percent, by clicking this indicator, which will open a slider. Slide the middle bar to adjust the percentage width of the containers. You can also add new containers here by clicking the plus sign.
- 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.
- 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 easily be changed by clicking "Change". You can also select the size of the background image.
This setting allows you to edit the margin around the container, i.e add space between the container 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.
This setting allows you to edit the padding inside the container, i.e add space between the container 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.
Hide on Desktop/Mobile
The last setting is to hide or show the container 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 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.