Design Section in Widgets of the Web Modeler

Last update: Download PDF Edit

1 Introduction

The Design section in Properties allows you to change spacing and alignment of a widget on a page, but is not limited to these functions. For some elements you can, for example, change their color. Hover over the information icon to get more details on each option.

2 Common Properties

The Design section has the following properties common to all widgets:

Property Description Possible Values
Spacing Top/ Spacing Bottom/ Spacing Left/ Spacing Right Adds margin above/ below/ left/ right of the widget Possible values for Spacing Top/ Spacing Bottom/ Spacing Left/ Spacing Right are the following:
  • None – no extra spacing is applied
  • Small – applies small spacing
  • Medium – applies medium spacing
  • Large – applies large spacing
  • Layout – applies the same spacing as the current layout (if you do not change the layout spacing, large and layout spacings are the same by default)
Align Self Aligns the widget within its layout element. For more information on layout elements, see Layout Widgets in the Web Modeler Possible values for Align Self are the following:
  • None – places the element next to the previous element
  • Left – aligns the element to the left (places the element to the left of its layout element)
  • Right – aligns the element to the right (places the element to the right of its layout element)

The example of how spacing works on a button is schematically shown on an image below:

2 Specific Properties

The following widgets have specific properties:

2.1 List View Specific Properties

Specific properties for List View are described in the table below:

Property Description Possible Values
Style Changes the appearance of lines in the list view. Possible values for Style are the following:
  • None
  • Striped
  • Bordered
  • Lined
  • No Styling
Hover Style Highlights a row when hovering over it. Only useful if the row is clickable. Enabled/Disabled
Row Size Changes the size of the row. Possible values for Row Size are the following:
  • None
  • Small
  • Large

2.2 Container Specific Properties

Specific properties for the Container widget are described in the table below:

Property Description Possible Values
Align Content Aligns content inside a container. Possible values for Align Content are the following:
  • None
  • Left align as a row
  • Center align as row
  • Right align as row
  • Left align as column
  • Center align as column
  • Right align as column

When aligning content as a column, elements inside a container will be aligned one under another; when aligning content as a row, elements inside a container will be aligned next to each other.
Background color Applies a background color. Possible values for Background color are the following:
  • None – color defined in Backgrounds > Default of the UI Customization section of the Theme Customizer
  • Default
  • Primary
  • Inverse
  • Success
  • Warning
  • Danger

The color for each value depends on your settings in the Theme Customizer. For details, see Theme Customizer in the Web Modeler.

2.3 Button Specific Properties

Specific properties for Buttons are described in the table below:

Property Description Possible Values
Size Changes the size of the button. You can change the size from the preset size by selecting one of the following:
  • Small – the button is smaller than the preset one
  • Large – the button is larger than the preset
Full Width The button takes the whole width of a layout element it is placed in. For more information on layout elements, see Layout Widgets in the Web Modeler. Enabled/Disabled
Bordered Changes the style of the button to a button with a transparent background, a colored border, and a colored text. Color of the border and the text are inverted from the background color, that means, if the button background is red, the background will become transparent, but the border and text will become red.
Enabled/Disabled
Align Icon Moves an icon (if any) to the right of the text or on top of it. Possible values for Align Icon are the following:
  • None – icon is to the left of the text
  • Right – icon is moved to the right side of the button or link
  • Top – icon is centered above the button text for button style and left-justified above the button text for link style (for more information on button styles, see Button Widgets in the Web Modeler)

2.4 Text Specific Properties

Specific properties for the Text widget are described in the table below:

Property Description Possible Values
Weight Changes the weight of the font Possible values for Weight are the following:
  • None
  • Light
  • Normal (this is the default if weight is set to None)
  • Semibold
  • Bold
Color Changes the color of the text Possible values for Color are the following:
  • Header color
  • Detail color (light-gray color)
  • Default – note that this is the default text color, not the default button color
  • Primary
  • Inverse
  • Success
  • Warning
  • Danger

Alignment Aligns the text Possible values for Alignment are the following:
  • None
  • Left
  • Center
  • Right
Transform Changes letter case of the text Possible values for Transform are the following:
  • None
  • Lowercase
  • Uppercase
  • Capitalize
Wrap Options Wrap a long text into multiple lines Possible values for Wrap Options are the following:
  • None – text is not wrapped
  • Wrap
  • No Wrap