# 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. 

<details>

<summary>Modify</summary>

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

</details>

### Separator Color

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

<details>

<summary>Modify</summary>

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

</details>

<details>

<summary>Reset</summary>

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

</details>

### Separator Height

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

<details>

<summary>Modify</summary>

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

</details>

<details>

<summary>Reset</summary>

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

</details>

### Separator Width

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

<details>

<summary>Modify</summary>

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

</details>

<details>

<summary>Reset</summary>

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

</details>

### Flip Y

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

<details>

<summary>Activate/Deactivate</summary>

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

</details>

### Flip X

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

<details>

<summary>Activate/Deactivate</summary>

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

</details>

### Separator Shadow

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

<details>

<summary>Activate/Deactivate</summary>

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

</details>

## Bottom Separator

### Separator Type

The Separator Type property defines the style of the background divider that will be used.&#x20;

<details>

<summary>Modify</summary>

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

</details>

### Separator Color

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

<details>

<summary>Modify</summary>

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

</details>

<details>

<summary>Reset</summary>

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

</details>

### Separator Height

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

<details>

<summary>Modify</summary>

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

</details>

<details>

<summary>Reset</summary>

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

</details>

### Separator Width

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

<details>

<summary>Modify</summary>

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

</details>

<details>

<summary>Reset</summary>

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

</details>

### Flip Y

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

<details>

<summary>Activate/Deactivate</summary>

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

</details>

### Flip X

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

<details>

<summary>Activate/Deactivate</summary>

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

</details>

### Separator Shadow

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

<details>

<summary>Activate/Deactivate</summary>

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

</details>

<details>

<summary>Toggle </summary>

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

</details>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.cwicly.com/design/effects/separators.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.