Separators

When you have multiple sections in one page, it is nice to separate them with some kind of line or background. This is where separators come in to play.

Top Separator

Separator Type

The Separator Type property defines the style of the background divider that will be used.

Modify
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Separators tab

  6. Find the Type property

  7. Select the desired separator type value

Separator Color

The Separator Colour property defines the colour of the background separator.

Modify
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Separator tab

  6. Find the Colour property

  7. Open the Colour Picker by clicking on the Colour circle in the text Colour property

  8. Select your Colour in the Colour Picker or click on a Global Colour

Reset
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects panel

  5. Select the Separator tab

  6. Find the Colour property

  7. Click dot(s) to reset

Separator Height

The Separator Height property defines the height of the background separator.

Modify
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Separator tab

  6. Find the Separator Height property

  7. Enter the desired separator height value

Reset
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Separator tab

  6. Find the Separator Height property

  7. Click dot(s) to reset

Separator Width

The Separator Width property defines the width of the background separator.

Modify
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Separator tab

  6. Find the Separator Width property

  7. Enter the desired separator width value

Reset
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Separator tab

  6. Find the Separator Width property

  7. Click dot(s) to reset

Flip Y

The Flip Y property allows you to flip the separator vertically.

Activate/Deactivate
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Separator tab

  6. Find the Flip Y property

  7. Toggle the property to activate/deactivate

Flip X

The Flip X property allows you to flip the separator horizontally.

Activate/Deactivate
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Separator tab

  6. Find the Flip X property

  7. Toggle the property to activate/deactivate

Separator Shadow

The Separator Shadow property adds a shadow to the background divider, giving it more depth.

Activate/Deactivate
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Separator tab

  6. Find the Separator Shadow property

  7. Toggle the property to activate/deactivate

Bottom Separator

Separator Type

The Separator Type property defines the style of the background divider that will be used.

Modify
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Separators tab

  6. Find the Type property

  7. Select the desired separator type value

Separator Color

The Separator Colour property defines the colour of the background separator.

Modify
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Separator tab

  6. Find the Colour property

  7. Open the Colour picker by clicking on the Colour circle in the text Colour property

  8. Select your colour in the Colour Picker or click on a Global Colour

Reset
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects panel

  5. Select the Separator tab

  6. Find the Colour property

  7. Click dot to reset

Separator Height

The Separator Height property defines the height of the background separator.

Modify
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Separator tab

  6. Find the Separator Height property

  7. Enter the desired separator height value

Reset
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Separator tab

  6. Find the Separator Height property

  7. Click dot(s) to reset

Separator Width

The Separator Width property defines the width of the background separator.

Modify
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Separator tab

  6. Find the Separator Width property

  7. Enter the desired separator width value

Reset
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Separator tab

  6. Find the Separator Width property

  7. Click dot(s) to reset

Flip Y

The Flip Y property allows you to flip the separator vertically.

Activate/Deactivate
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Separator tab

  6. Find the Flip Y property

  7. Toggle the property to activate/deactivate

Flip X

The Flip X property allows you to flip the separator horizontally.

Activate/Deactivate
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Separator tab

  6. Find the Flip X property

  7. Toggle the property to activate/deactivate

Separator Shadow

The Separator Shadow property adds a shadow to the background divider, giving it more depth.

Activate/Deactivate
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Select the Separator tab

  6. Find the Separator Shadow property

  7. Toggle the property to activate/deactivate

Toggle
  1. Select a block

  2. Open the Block Inspector

  3. Navigate to the Design tab

  4. Open the Effects tab

  5. Open the Separator tab

  6. Choose Top or Bottom and toggle on

  7. Find the Shadow property

  8. Toggle on/off

Last updated