What are footer row shape dividers?
Footer row shape dividers are SVG shapes that can be added to the top or bottom of a row to provide a horizontal separator between a footer's 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 create your own SVGs from third party websites and then add them to your footer row as a custom shape divider using HTML code.
How do I add a shape divider to a footer row?
Go to Website > Settings > Footer.
Click the Content tab.
Find the row that you are looking for and click Shape dividers in the drop-down menu under More in the Options column.
Under the Top heading
Select a Type.
Optionally, pick a Colour*.
Enter a Height.
Select a Position.
Enter a Custom SVG**.
Under the Bottom heading
Select a Type.
Optionally, pick a Colour*.
Enter a Height.
Select a Position.
Enter a Custom SVG**.
Click the Update button
* 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.
** Custom SVGs can only be entered if Custom is the selected Type.
How do I edit a shape divider?
Go to Website > Settings > Footer.
Click the Content tab.
Find the row that you are looking for and click Shape dividers in the drop-down menu under More in the Options column.
Edit the details for the Top and Bottom shape dividers.
Click the Update button.
How do I delete a shape divider?
Go to Website > Settings > Footer.
Click the Content tab.
Find the row that you are looking for and click Shape dividers in the drop-down menu under More in the Options column.
Clear the Top or Bottom Type.
Click the Update Button.
Where can I create a custom SVG?
There are many websites that allow you to create custom SVG shape dividers which you can then copy and paste as a Custom SVG, here are some free options that work well with Airsquare to get you started:
Why isnt my custom SVG working?
When creating a custom SVG from a third party, you can copy a lot of code that isnt required when using Airsquare, such as the example below:
.shapedividers_com-2120{
overflow:hidden;
position:relative;
}
.shapedividers_com-2120::before{
content:'';
font-family:'shape divider from ShapeDividers.com';
position: absolute;
z-index: 3;
pointer-events: none;
background-repeat: no-repeat;
bottom: -0.1vw;
left: -0.1vw;
right: -0.1vw;
top: -0.1vw;
background-size: 100% 90px;
background-position: 50% 0%; background-image: url('data:image/svg+xml;charset=utf8, <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" fill="%23fbd8c2"/></svg>');
}
@media (min-width:2100px){
.shapedividers_com-2120::before{
background-size: 100% calc(2vw + 90px);
}
}
The only code you need to enter for a Custom SVG is the SVG tags and the code within them, which for the example above would be:
<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" fill="%23fbd8c2"/></svg>