Find the DIV ID of the column or section where you want to add the shape divider. Then adjust the code by replacing the generated class name with the DIV ID, and adding <style> and </style> before and after the code.
Watch the video for more information on the above steps.
Your code should look like this:
<style>
#comp-jmhqqpju{
overflow:hidden;
position:relative;
}
#comp-jmhqqpju::before{
content:'';
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: 90px 100%;
background-position: 0% 50%; background-image: url('data:image/svg+xml;charset=utf8, <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130 1000"><g fill="%23015761"><path d="M81 1001c7-7 10-24 9-39s-4-30-6-44-6-29-5-44c2-19 9-35 12-54 4-26-1-56-8-79s-18-43-26-65-16-47-17-75c0-28 6-56 4-85a141 141 0 00-11-42 116 116 0 0011-39c2-25-4-50-4-76 1-25 8-48 17-67s18-37 26-58 12-48 8-71c-3-17-10-31-12-49-1-13 2-27 5-39s6-26 6-39-2-29-9-36H-1v1001z"/><path d="M91 1001c6-7 9-24 8-39s-3-30-6-44-5-29-4-44c1-19 8-35 11-54 4-26-1-56-8-79s-17-43-26-65-16-47-17-75c0-28 7-56 4-85a141 141 0 00-10-42c5-12 9-24 10-39 3-25-4-50-4-76 1-25 8-48 17-67s19-37 26-58 12-48 8-71c-3-17-10-31-11-49-1-13 1-27 4-39s6-26 6-39-2-29-8-36H8v1001z" opacity=".5"/></g></svg>');
}
</style>
Then, follow the instructions below and copy paste your code at step 4!
Adding Custom CSS to Your Wix Site
Important:
Before starting, validate that your site is published and has a connected domain.
- Go to Settings in your site’s dashboard.
- Click the Custom Code tab under Advanced Settings.
- Click + Add Custom Code at the top right.
- Paste the code snippet in the text box.
- Enter a name for your code.
Tip: Give it a name that is easy to recognize so you can quickly identify it later. - Select an option under Add Code to Pages:
- All pages: This adds the code to all of your site’s pages, including any new pages that you’ll create in the future. Choose whether to load the code only once per visit or on each page your visitor opens.
- Choose specific pages: Use the drop-down menu to select the relevant pages.
- Choose where to place your code:
- Head
- Body – start
- Body – end
- Click Apply.