Jump to content

Custom section dividers using shapedivider.app - What do I do with HTML and .svg provided?

Recommended Posts

Has anyone had success using the shapedivider.app to create custom section dividers? You customize the divider on their site and it outputs the html, css and .svg file for you (see screenshot).

Where does the HTML code go (Page Settings/Advanced/Page Header Code Injection?) and how do you call out the specific section id? The app says, "Please put this html directly in your section wrapper element where you want to show shape divider. Note: That section wrapper element "position" property value must be set to "relative".

Also what do I do with the .svg file?

Shapedivider seems like a great tool - I am just not sure what to do with HTML and .svg in Squarespace. My site is in early development and not visible yet. I would be very grateful just for an example to work from.

I've already input the CSS. Here is the HTML they gave me:

<div class="custom-shape-divider-top-1647545539">
    <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
        <path d="M600,112.77C268.63,112.77,0,65.52,0,7.23V120H1200V7.23C1200,65.52,931.37,112.77,600,112.77Z" class="shape-fill"></path>

Screen Shot 2022-03-17 at 12.32.27 PM.png

Edited by WellandGood
added a bit more info
Link to comment
  • Replies 1
  • Views 936
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.