Styling
Last updated
Last updated
The Styling tab allows you to set specific styling to the background of blocks, such as Blend Mode, Clips, Filters and Clip Paths.
The Styling tab is located inside the Background tab in the Design tab.
The Background Blend Mode property defines how the background image should be merged with the background colour, including: Inherit, Normal, Multiply, Screen, Overlay, Darken, Lighten, Colour-Dodge, Colour-Burn, Hard-Light, Soft-Light, Difference, Exclusion, Hue, Saturation, Colour, Luminosity.
The Background Blend Mode property only appear when an image has been selected for the Background Type.
Inherit The blend mode is inherited.
Normal The block does not blend.
Multiply Defines the blend mode to multiply.
Screen Defines the blend mode to screen.
Overlay Defines the blend mode to overlay.
Darken Defines the blend mode to darken.
Lighten Defines the blend mode to lighten.
Colour-Dodge Defines the blend mode to colour-dodge, lightens the colours of the base layers and reduces the contrast resulting in saturated mid-tones.
Colour-Burn Defines the blend mode to colour-burn, darkens the colours and increases the contrast of the base colours, then blends the colours of the blending layer.
Hard-Light Defines the blend mode to hard-light, the transition between light and shadows is very harsh and defined.
Soft-Light Defines the blend mode to soft-light, the transition between light and shadows is more of a gradient and much smoother.
Difference Defines the blend mode to difference.
Overlay Defines the blend mode to overlay, a colour tint is added.
Exclusion Defines the blend mode to exclusion.
Hue Defines the blend mode to hue, the background colour in degrees.
Saturation Defines the blend mode to saturation, the amount of grey.
Colour Defines the blend mode to colour.
Luminosity Defines the blend mode to luminosity, the amount of brightness.
Select a block.
Open the Block Inspector.
Navigate to the Design Tab.
Open the Background Tab.
Open the Styling Tab.
Find the Blend Mode property.
Select the desired option in the dropdown: (Inherit, Normal, Multiply, Screen, Overlay, Darken, Lighten, Colour-Dodge, Colour-Burn, Hard-Light, Soft-Light, Difference, Exclusion, Hue, Saturation, Colour, Luminosity).
Select an block.
Open the Block Inspector.
Navigate to the Design Tab.
Open the Background Tab.
Open the Styling Tab.
Find the Blend Mode property.
Click blue dot to remove.
The Clip property allows a background to be clipped by various elements (Border-box, Text...)
inherit Inherits the clip property set by the parent block.
border-box Allows the background to extend all the way to the outside edge of the element's border.
padding-box Clips the background at the outside edge of the element's padding and does not let it extend into the border.
content-box Background extends underneath the element's content box.
text Allows a background image to be clipped by a text element.
Select a block.
Open the Block Inspector.
Navigate to the Design Tab.
Open the Background Tab.
Open the Styling Tab.
Find the Clip property.
Select desired option in dropdown.
Select a block.
Open the Block Inspector.
Navigate to the Design Tab.
Open the Background Tab.
Open the Styling Tab.
Find the Blend Mode property.
Find option to be removed.
Click blue dot to remove.
To get a complete list and description of the filters available, check the Filters documentation.
Select a block.
Open the Block Inspector.
Navigate to the Design Tab.
Open the Background Tab.
Open the Styling Tab.
Find the desired filter.
Input or slide to add required amount of selected filter(s).
Select a block.
Open the Block Inspector.
Navigate to the Design Tab.
Open the Background Tab.
Open the Styling Tab.
Find the desired filter.
Click blue dot to remove.
The Clip Path property creates a clipping region that defines what part of an entire element should be displayed, such as Blob or Shape type.
The Clip Path property is only available on a Div block.
Select a div block.
Open the Block Inspector.
Navigate to the Design Tab.
Open the Background Tab.
Open the Styling Tab.
Find the Clip Path property.
Toggle on/off as required.
The Blob property allows you to add creative shapes to your Div to add a unique flavour to your page or post.
You can customise the height, generate a random blob, or a more complex one.
By default, the Blob property is toggled on so if you want to construct your own clip paths, you need to toggle Blob off.
Select a div block.
Open the Block Inspector.
Navigate to the Design Tab.
Open the Background Tab.
Open the Styling Tab.
Find the Clip Path property.
Toggle on.
Find Blob property.
Toggle on/off as required.
When the Blob property is toggled on, you can customise the height, generate a random blob, or a more complex one to suit your needs.
Find Blob property(ies) you wish to customise.
Input Height, Random, Complex units as required.
Click blue dot to remove required customisation(s).
You can customise the background of a selected div by choosing a Shape Type such as Polygon, Ellipse or Circle and modifying the size (height, width) and position (distance from left or top).
Blob must be toggled off to select a Shape Type.
The Polygon shape type allows you to choose between different polygon shapes for your background clipping area. You can add a point(s) and/or further modify each Point (top, left) of the Polygon.
Top Allows you to choose the height of a point (vertical axis).
Left Allows you to choose the horizontal position of your point (horizontal axis).
Find Shape type
Select Polygon in dropdown.
Click blue dot next to Shape type to remove.
The Polygon Points parameter allows you to modify, add or remove points on your polygon to create even more complex shapes.
Find Shape type
Select Polygon in dropdown
Find Points
Modify desired point (Top, Left).
Click "-" icon to remove a point.
Click "+" icon to add a new point.
Modify as required.
The Ellipse Shape type allows you to choose an ellipse shape for your background clipping area. You can further modify the Height, Width and Position (Left, Top).
Find Shape Type.
Select ellipse in dropdown.
Modify height, width, position (left, top).
Find Shape Type.
Click blue dot to reset.
The Circle shape type allows you to choose a circle for your background image clipping area. You can modify the diameter (Centre) and position (Left (Horizontal), Top (Vertical)).
Find Shape type.
Select Circle in dropdown.
Modify Centre, Left, Top.
Find Shape Type.
Click blue dot to reset.
