What are shape dividers?
Shape dividers are shapes that can be added to the top or bottom of a row to provide a horizontal separator between content.
In addition to being a separator for content, shape dividers can be an attractive design feature that can make your website look fresher and more modern.
There are a range of pre-made shape dividers for you to choose from or you can add your own custom SVGs.
Where are shape dividers supported?
You can use shape dividers on page or footer rows.
How do I add a shape divider to a row?
On the content row, click Shape dividers in the drop-down menu under Design in the Options column.
Then you can choose to add a shape divider to the top or bottom of the row (or both!):
Select a Type. There are many pre-built shapes to choose from.
Optionally pick a Colour. If no colour is selected then the shape divider will use the primary background colour of the row above or below, depending on whether it is a Top or Bottom shape divider.
Optionally change the Height. You can make the shape short and subtle, or tall and loud!
Optionally change the Position. You can position dividers above, below, behind or in front of the adjacent row.
Click the Update button.
Help! I can't make it work!
Things to check:
Shape dividers only work if the background between rows is different (i.e. you can't see a shape if both row backgrounds are white).
You can't use gradient backgrounds and shape dividers. The row must have a flat
background colour or image.
For background images, you must apply the shape divider to the row with the background image. Shape dividers won't work above and below them.
How do I edit a shape divider?
Find the row that you are looking for and click Shape dividers in the drop-down menu under Design in the Options column.
Edit the details for the Top and Bottom shape dividers.
Click Update.
How do I delete a shape divider?
Find the row that you are looking for and click Shape dividers in the drop-down menu under Design in the Options column.
Clear the Top or Bottom Type.
Click Update.
Can I use my own custom SVG shape?
Absolutely. When selecting a Type, use the Custom option. The Custom SVG box will then appear where you can add in your SVG code.
Where can I get custom SVGs?
There are many websites that allow you to create custom SVG shape dividers which you can then copy and paste in. Here are some free options that work well with Airsquare to get you started:
Why isn't my custom SVG working?
The only code you need to enter for a Custom SVG is the <svg> tag and the code inside. Here's an example:
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1143.58 27.83"><path d="M1143.58 1.7H0V0h1143.58ZM0 1.7h2.94c-.98 0-1.96.23-2.91.23zm1143.58 0v6.8a85.35 85.35 0 0 0-34.47-6.8Zm-105.96 26.08a103.1 103.1 0 0 0-61.39-26.14h126.42a102.87 102.87 0 0 0-65 26.17zm-137.32 0A103.1 103.1 0 0 0 838.9 1.64h122.56a104.75 104.75 0 0 0-61.12 26.14zm-137.32 0c-39.16-34.66-97.92-34.66-136.8 0a103.1 103.1 0 0 0-61.37-26.14h259.34a104.75 104.75 0 0 0-61.12 26.14zm-274.1 0a102.98 102.98 0 0 0-65-26.09h126.19a104.48 104.48 0 0 0-61.12 26.14zm-137.06 0A102.98 102.98 0 0 0 286.83 1.7h129.8c-23.27.8-46.4 9.8-64.7 26.14zm-137.06 0A102.98 102.98 0 0 0 149.78 1.7h129.8a102.66 102.66 0 0 0-64.71 26.14zm-137.05 0A101.68 101.68 0 0 0 15.05 1.7H142.5c-23.28.8-46.4 9.8-64.71 26.14z"/></svg>
Make sure you have preserveAspectRatio="none" attribute in the <svg> tag. You may also want to get rid of any fill="" attributes in the <path> tags and let Airsquare handle the colours automatically.