The second tab in the Component menu is the Style tab. Here you can alter the appearance of a component. Styling options differ between components. Below is a non-exhaustive list of common styling options.
Size and position
|Size||Size this component by specifying the width & height. This can be done by using different units: |
px: A fixed way of sizing your component
%: Size your component by choosing a percentage of the size of the parent of this component.
vh/vw: Size your component by choosing a percentage of the viewport
grid: Size your component by using a grid
unset: Use the default browser behaviour of sizing this component.
|Position||Position this component by specifiying the x & y coordinates. This can be done by using different units: |
px: A fixed way of positioning your component
%: Position your component by choosing a percentage of the size of the parent of this component.
vh/vw: Position your component by choosing a percentage of the viewport
grid: Position your component by using a grid
|Z-Index||The Z-Index value determines which components appear on top of others when they overlap in a two-dimensional space. Components with a higher |
|Horizontal alignment||The Horizontal alignment lets you configure whether your component positions itself by using the left side of its parent or whether it uses the right side of the parent. |
A component with x: 10px and Horizontal alignment set to “left” will position itself 10px from the left side of its parent. While a component with the same x value & Horizontal alignment set to “right” will position itself 10px from the right side of its parent.
|Vertical alignment||The Vertical alignment lets you configure whether your component positions itself by using the top side of its parent or whether it uses the bottom side of the parent. |
A component with x: 10px and Vertical alignment set to “top” will position itself 10px from the top side of its parent. While a component with the same x value & Vertical alignment set to “bottom” will position itself 10px from the bottom side of its parent.
|Position is fixed||Setting a position to fixed will make sure a component scrolls along with the user.|
|Hidden||Setting this value will hide or unhide a certain component.|
These are the possible action views:
|Normal||The normal view.|
|On hover||When hovering with the mouse over the component.|
|On focus||When the cursor is in the input field. Usually applies to form components.|
|When active||When a link or one of the component’s buttons is clicked.|
You can reset each option below to its default values by clicking the refresh icon next to the option’s name.
These are the styling options:
|Border||Adds a border that surrounds the component. Options:|
– Border type: the general appearance of the border, for example dotted or solid.
– Color: the color of the border.
– Width: alter the width of the border.
– Radius: increasing this value will round the corners of the border.
By pressing the unlink button in the middle, you can change the border on every side of the component separately.
|Padding||Creates extra space within a component. By pressing the unlink button in the middle, you can change the padding on every side of the component.|
|Background||Adds a background to the component. This can be a solid color or a (non-)repeating image. Options:|
– Background color: choose a solid color as background.
– Background image: choose an image as background. Provide a link to it or select it from the media library.
– Background attachment: sets whether a background image scrolls with the rest of the page, or is fixed.
– Background position x: move the background along the x-axis (positive value is to the right)
– Background position y: move the background along the y-axis (positive value is downwards)
– Background repeat: choose whether or not the background should repeat, and how.
– Background size: alter the size of the background.
– Background origin: set the origin of the background.
|Font||Changes the font for components that contain text. Options include:|
– Font type: select a font type from this drop-down menu.
– Size: select the size of the font (in the same menu as the font type).
– Color: the color of the text.
– Weight: make your text lighter or bolder.
– Stretch: increase the horizontal width of each word.
– Variant: choose a variant of the font.
– Caps variant: alter the capitalization of the text.
– Text alignment: change the positioning of the text in its container.
|Inputfield border||Similar to Border but specifically for input fields within a component.|
|Overflow||This specifies what happens if a component overflows this component’s box.|
Choose whether to clip content or to add scrollbars when a component’s content is too big to fit.
|Shadow||Adds shadow to the edges of the component. Options: |
– Color: the color of the shadow.
– Offset x: offsets the shadow to the right, following the horizontal x-axis.
– Offset y: offsets the shadow downwards, following the vertical y-axis.
– Blur radius: blurs the edges of the shadow. The higher this number, the further towards the center of the shadow the blur penetrates.
– Spread radius: increases the size of the shadow.
|Cursor||Choose the type of cursor that appears when the user hovers over this component.|