How do I add shapes between sections?

With Top edge shapes, you can add decorative shapes between sections to create a more unique and visually engaging website. Instead of a straight line, you can use curves, waves, angles, and other shapes to create transitions between different parts of your page.

In this article, we’ll explain how to add a shape, which options are available, and how you can use them to customize your website.

Step 1: Open the Editor

Go to the Editor and open the page containing the section you want to customize.

Step 2: Open the section settings

Click on the section to display the gray toolbar. Then click the Settings (Gear) icon > Top edge shape.

Step 3: Select a top edge shape

Open the Top edge shape dropdown menu and select the shape you want to use.

The selected shape is applied immediately to the top edge of the section, so you can easily compare the different options.


More information:

Available shapes


You can choose from the following options:

  • None: Keeps a straight edge between the sections.
  • Arch: Adds a smooth, rounded curve.
  • Tilt (up): Creates a diagonal edge that rises from left to right.
  • Tilt (down): Creates a diagonal edge that slopes down from left to right.
  • Peak: Adds a pointed shape in the center.
  • Valley: Creates an inward-pointing shape in the center.
  • Wave: Adds a large, flowing wave.
  • Double wave: Creates a transition with multiple curves.
  • Short waves: Adds a repeating pattern of smaller waves.
  • Zigzag: Creates a repeating angular edge.
     
How can I use shapes on my website?


Shapes can help separate different types of content and make important sections stand out. For example, you can use them to:

  • Separate sections with different background colors.
  • Highlight a testimonial, promotion, or call-to-action.
  • Create a smooth transition between an image and a text section.
  • Add a playful appearance to a creative or personal website.
  • Add movement to a modern business or portfolio website.
  • Break up a long page without adding extra divider elements.
Tip: Combine the shape with contrasting section colors or an image background to make the effect more visible.

 

Choosing the right shape

  • Use Wave, Double wave, or Short waves for a friendly and playful appearance.
  • Use Arch, Peak, or Valley for a softer, more decorative transition.
  • Use Tilt (up) or Tilt (down) for a clean and modern look.
  • Use Zigzag when you want to create a stronger visual contrast.
Tip: You don't have to add a shape to every section. Using them selectively can draw attention to important parts of your page without making the design feel too busy.

 

Please note: The shape is applied to the top edge of the selected section. The color or background of that section determines how the shape appears between the two sections.

 


Need help?

Our support team is here for you.

Reach out through our chatbot Webby in the bottom-right corner of your screen to get instant support regarding your question. If Webby can't help, we’ll be happy to help you personally by creating a support request through Webby or contact us via WhatsApp or social media messengers with your question(s).
 


  1. How do I add sections? 
  2. How to customize a Design's color scheme 
  3. How to re-design an existing website

Was this article helpful?