Studio Editor: Adding and Customizing Shape Dividers

Add shape dividers to create an interesting and stylish transition between sections. Instead of using clear-cut lines to divide content, choose a shape (e.g. Ellipse, Waves) or upload your own. These dividers can go at the top and bottom of a section, and you can customize their design as needed.

An example of a section with shape dividers at the top and bottom

Adding a shape divider

Get started by adding a shape divider to the relevant section. You can add a divider to the top or bottom of the section, or both.

There are a range of shapes you can choose from, as well as additional designs in the Media Manager. You can also upload your own SVG file to give this transition a personal touch.

Uploading your own file?

See the FAQs section below for guidelines on file size and proportions.

To add a shape divider to your section:

Go to your editor.
Select the relevant section.
Click the Shape Dividers icon .
Click the Top or Bottom tab to choose where to add the divider.
Select a divider to add:
- Suggested designs: Click one of the styles available in the panel.
- Additional designs offered by Wix:
  1. Click + More Shapes.
  2. (In the Media Manager) Select a design from the Media from Wix tab.
  3. Click Choose File to apply it.
- Your own shape divider:
  1. Click + More Shapes.
  2. (In the Media Manager) Select the shape the Site Files tab, or upload a new one.
  3. Click Choose File to apply it.

The Shape Dividers panel next to a section with dividers already applied, highlighting the tabs at the top of the panel

Tip:

After selecting a shape from the Media Manager, it appears as More shapes in the Shape Dividers panel for the specific section. If you ever want to pick another shape from the Media Manager, click the Change icon

above More shapes.

Designing a preset shape divider

After choosing one of our shape dividers, design it to your liking. Adjust the height, color, opacity and layers to personalize the transition and make it look exactly how you want.

Note:

The available options depend on the shape divider you choose.

To customize the design of a preset shape divider:

Go to your editor.
Select the relevant section.
Click the Shape Dividers icon .
Click the Top or Bottom tab to access the divider you want to design.
Click Customize Design at the bottom.
Choose how you want to adjust the look of the shape divider:
- Opacity & color: Choose the color you want for the divider, and make it more or less visible on the section.
- Height: Set how high or low you want the divider to go on the section.
- Horizontal offset: Re-position the shape divider, moving it to the left or right.
- Layer effect: Enable the toggle to add a fade effect to the divider, then select a direction from the drop-down:
  - Centered: The effect is visible on the entire divider.
  - Fade to top: The effect lessens towards the top of the divider.
  - Fade to bottom: The effect lessens towards the bottom of the divider.
- Invert: Invert the shape of the divider (vertically).
- Flip: Set the divider to display the opposite way on the section.
- Number of repeats: Set how many times the pattern repeats across the divider.

The Divider Design panel, showing the options for the 'left wave' preset divider

Designing a custom shape divider

When you upload your own shape divider, you can use a variety of options to further personalize it. Adjust settings like the divider's color, visibility and scale to create a unique structure and design on your page.

Note:

The available options depend on the specific file you upload. See the FAQs section below for more details.

To customize the design of your own shape divider:

Go to your editor.
Select the relevant section.
Click the Shape Dividers icon .
Click the Top or Bottom tab to access the divider you want to design.
Click Customize Design at the bottom.
Choose how you want to adjust the look of your shape divider:
- Opacity & color: Choose whatever color you want for your divider, and make it more or less visible on the section.
- How's the divider scaled?: Select whether you want the divider pattern to stretch across the section or repeat.
- Height: Set how high or low you want the highest point of the divider to be on your section.
- Horizontal offset: Set the divider's offset from the sides of the section.
- Flip: Set the divider to display the opposite way (horizontally) on your section.

The Divider Design panel, showing the options for a custom divider

FAQs

Click a question below to learn more about shape dividers.

Are shape dividers responsive?

What kind of custom shape dividers can I upload?

Can I customize the design of my own uploads?

How do I remove a shape divider from a section?