Compatibility:

WebSite X5 Evo an Pro

When designing a web page, paying attention to spacing and graphic details can make the difference between an ordinary design and a truly memorable one. Empty spaces help give content breathing room, but with the Optional Object Shape Separator, you can do much more: add visually appealing separators that not only organize but also enhance your page’s visual layout.


The Shape Separator Object lets you go beyond simple straight lines and choose from dynamic shapes like waves, curves, or complex dividers. You can even import your custom SVG masks to create entirely unique separators, making your website’s design truly one of a kind. In the Preview page, you can find examples of how to turn a simple separation into a distinctive graphic element.


How It Works

In simple terms, most web page elements are "drawn" as rectangles. This usually means that sections of a page are divided by well-defined horizontal lines. To create more complex separators, such as waves, you need to use SVG masks.


#tip - SVG (Scalable Vector Graphic) is a vector format commonly used for illustrations, icons, logos, and graphic elements because it has a smaller file size, can be modified via CSS, is scalable without quality loss, and supports animations.


By using an SVG mask, you can give a separator the desired shape. Once the shape is defined, you "attach" the separator directly to the top or bottom of the relevant section, matching the colors of the preceding and following sections.


How to Create a Separator

Let’s walk through the steps to achieve the result illustrated in the example image: 


   

  • At Step 4 - Page Creation, insert a Text Object and an Image Object side by side in row 1. In row 2, insert the Shape Separator Object. 
  • For the objects in row 1, set a yellow background color by clicking the Style button in the toolbar and using the Background Color option
  • Double-click on the Shape Separator Object in row 2 to access the settings window.
  • First, set the Height of the separator in pixels.
  • Now, adjust the colors:
    • The separator must connect to the preceding page section, so set the Color to the same yellow used for the background of the objects in row 1.
    • For the Background Color, leave it white.
  • To add a 3D effect, enable a shadow for the separator and customize its color, thickness, and diffusion factor.
  • Finally, select the shape of your separator from the Type list. In this example, we used "Shape 10." Depending on the arrangement of your page content and the desired visual effect, you can also choose to rotate the separator shape vertically or horizontally.
  • You’ve finished configuring your separator, but to ensure there are no empty spaces between rows 1 and 2 on your page - and thus, the separator is perfectly connected to the preceding section - you still need to check the margins. Click OK to exit the Shape Separator Object settings window and return to the layout grid in Step 4.
  • Select each object in rows 1 and 2, one by one, and click the Margins button . Use the available options to set the External margins to zero. This way, there will be no gaps between the preceding section and the separator, making them appear as a single element with a wavy bottom edge.


Of course, this is just one of the results you can achieve with the Shape Separator Object. Now that you understand the basic mechanism, you can easily experiment with alternative solutions until you find the ones that best suit your page designs.

  

How to Create a Custom Shape 

In addition to the predefined shapes, the Shape Separator Object allows you to use a custom SVG mask. Here’s how to create one:

  • Open a vector graphic program like Softonic Inkscape, Adobe Illustrator, Affinity Designer, or even tools like Adobe XD, Figma or Sketch. Alternatively, use an online tool like ShapeDivider, which is free and offers both SVG creation and HTML code output
  • Design your desired shape.
  • Convert the drawn object into a path. For example, in Inkscape, select the object and use the Path > Object to Path command. View the SVG code via Edit > XML Editor.
  • If your graphic software doesn’t allow this, save the SVG file and open it in a text editor (e.g., Notepad) to view and copy the data.
  • In ShapeDivider, use the configurator to create the separator. Once satisfied, click the cloud button to access the HTML code.  
  • In any case, the important thing is to obtain an SVG code like this: 
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
        <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
    </svg>

As you can see, the structure is very similar to HTML, although it uses different tags. The elements of the code that are relevant to you are the values assigned to 'viewBox' and 'd' (path data); in the example, these are the values highlighted in yellow.

  • Back in WebSite X5. Open the Shape Separator Object and select 'Custom Shape' as the Type. 
  • Enter the ViewBox values in the corresponding field.
  • Copy the path (d) data from the SVG code and paste it into the Shape (d) field.  
#tip - Copy only the values within the quotes for both viewBox and path, excluding the quotes themselves, to avoid transcription errors.  
  • Preview your page locally to ensure the result matches your expectation.


#tip - Alternative Options. Besides the Shape Separator Object, WebSite X5 also offers the Separator Object and Simple Separator Object. The Separator Object creates a linear graphic element. The Simple Separator Object adjusts spacing between two contents. For precise spacing control, use the 'Margin and Alignment' settings accessible via the toolbar above the grid. 



Are you curious to use this Object on your website pages? Install Shape Separator now


You don't have enough Credits to buy this Object? Check out our Credit Packs