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:
|
| Align Self | Aligns the widget within its layout element. For more information on layout elements, see Structure Widgets | Possible values for Align Self are the following:
|
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:
- List view (a Data Container widget)
- Container (a Structure widget)
- Buttons (all Button widgets)
- Text (a Text widget)
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:
|
| 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:
|
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:
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:
The color for each value depends on your settings in the Theme Customizer. For details, see Theme Customizer. |
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:
|
| Full Width | The button takes the whole width of a layout element it is placed in. For more information on layout elements, see Structure Widgets. | 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. This option has no effect on buttons which are rendered as links.
|
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:
|
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:
|
| Color | Changes the color of the text | Possible values for Color are the following:
The color for each value depends on your settings in the Theme Customizer. For details, see Theme Customizer.
|
| Alignment | Aligns the text | Possible values for Alignment are the following:
|
| Transform | Changes letter case of the text | Possible values for Transform are the following:
|
| Wrap Options | Wrap a long text into multiple lines | Possible values for Wrap Options are the following:
|