Compatibility:

WebSite X5 Evo and Pro

The graphics of a web page are not made up only of images and text: even the smallest details contribute to creating a unique visual experience. With the optional Object Animated Shape Separator, you can introduce animated separators that organize content while adding movement and personality to the design.


Choose one of the preset shapes, customize colors and animations, or upload your own SVG file to create tailored and animated separators. Thanks to the dynamic effect of the moving shapes, your pages will gain fluidity and energy, turning simple section dividers into true design elements. You can see some concrete examples of creative use in the Preview page.



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 an animated 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 Animated Shape Separator Object. 
  • First, you need to choose the shape for your separator by selecting it from the Type list: in the example, we used 'Shape 1', which features a wave. You can also decide how many Shapes to have: by selecting 4, the maximum, you will get a fuller animated separator; conversely, with a single shape, you will achieve a more linear and compact animation.
  • At this point, set the Height of the separator in pixels.
  • Depending on how your page content is arranged and the graphic effect you want to achieve, you can also choose to reflect the shape horizontally and/or vertically. To have the waves attached under the text and image as shown in the example, you need to apply a vertical reflection.
  • Now, set the colors. To ensure a seamless transition between the content and the separator, set the Color to the same yellow used for the background of the objects in row 1. For the Background Color, you should leave it white.
  • If you want to add a three-dimensional effect, you can activate a Shadow on the separator and define its color, thickness, and diffusion factor.
  • Finally, you must set the animation Speed.
  • 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 Animated 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 Animated 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.

  • Now you can go back to working in WebSite X5. Open the Animated Shape Separator Object and select 'Custom Shape' as the Type.
  • Set all the necessary parameters to define the separator and the animation. 
  • 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 - Alternatives. In addition to the Animated Shape Separator Object, the following objects are also available: Simple Separator, Separator, Shape Separator and Waves Separator. The first is used to manage the space between two contents, the second allows you to create a static linear graphic element, the third enables the creation of a static separator with a customized shape, and the last allows you to create an animated wave. Remember that you can always manage spacing using the 'Margin and Alignment' window, accessible via the  button located in the Toolbar above the page layout grid. It is not recommended to insert empty Cells or Rows to adjust the alignment of Objects. 



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


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