Styling
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.
Blend Mode
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.
Options
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
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).
Remove
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.
Clip
The Clip property allows a background to be clipped by various elements (Border-box, Text...)
Options
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
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.
Remove
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.
Filters
To get a complete list and description of the filters available, check the Filters documentation.
Select
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).
Remove
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.
Clip Path
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.
Toggle
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.
Blob
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.
Toggle
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.
Modify
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.
Remove
Click blue dot to remove required customisation(s).
Shape Type
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.
Polygon
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).
Select
Find Shape type
Select Polygon in dropdown.
Remove
Click blue dot next to Shape type to remove.
Poligon Points
The Polygon Points parameter allows you to modify, add or remove points on your polygon to create even more complex shapes.
Modify
Find Shape type
Select Polygon in dropdown
Find Points
Modify desired point (Top, Left).
Remove
Click "-" icon to remove a point.
Add
Click "+" icon to add a new point.
Modify as required.
Ellipse
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).
Modify
Find Shape Type.
Select ellipse in dropdown.
Modify height, width, position (left, top).
Remove
Find Shape Type.
Click blue dot to reset.
Circle
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)).
Select
Find Shape type.
Select Circle in dropdown.
Modify
Modify Centre, Left, Top.
Remove
Find Shape Type.
Click blue dot to reset.
Last updated