← Back to Sections
Section Dividers
A versatile section divider that adds visual separation between content areas with beautiful, customizable SVG shapes. Choose from 9 distinct divider styles including wavy patterns, diagonal cuts, curves, triangles, and decorative book-style designs to match your brand aesthetic.
Key Features:
- 9 unique divider designs: wavy (3 styles), diagonal (2 styles), curve, triangle (2 styles), and book shape
- Fully customizable colors for both background and divider elements
- Responsive height controls - set different sizes for desktop and mobile devices
- Clean, scalable SVG graphics that look crisp on all screen sizes
- Zero padding/margins for seamless integration between sections
- Compatible with any theme color scheme or custom branding
Perfect for: Creating visual breaks between hero sections and content, separating different page areas, adding decorative elements to long pages, or creating smooth transitions between contrasting background colors.
{% style %}
.section-{{ section.id }} {
line-height: 0;
background-color: {{ section.settings.background_color }};
}
.section-{{ section.id }} svg {
fill: {{ section.settings.divider_color }};
}
{% if section.settings.divider_design == "diagonal_1" %}
.section-{{ section.id }} path {
transform: rotate(180deg);
transform-box: fill-box;
transform-origin: center;
}
{% endif %}
{% if section.settings.divider_design == "curve_1" %}
.section-{{ section.id }} path {
transform: rotate(180deg);
transform-box: fill-box;
transform-origin: center;
}
{% endif %}
{% if section.settings.divider_design == "triangle_1" %}
.section-{{ section.id }} svg {
height: {{ section.settings.divider_height }}px;
width: 100%;
}
{% endif %}
{% if section.settings.divider_design == "triangle_2" %}
.section-{{ section.id }} svg {
height: {{ section.settings.divider_height }}px;
width: 100%;
}
.section-{{ section.id }} path {
transform: rotate(180deg);
transform-box: fill-box;
transform-origin: center;
}
{% endif %}
{% if section.settings.divider_design == "book_1" %}
.section-{{ section.id }} svg {
height: {{ section.settings.divider_height }}px;
width: 100%;
margin-top: -2px;
}
{% endif %}
{% if section.settings.divider_design == "diagonal_2" %}
.section-{{ section.id }} svg {
transform: scaleX(-1);
}
{% endif %}
.section-{{ section.id }} svg {
height: {{ section.settings.divider_height }}px;
width: 100%;
display: block;
}
@media screen and (max-width: 767px) {
.section-{{ section.id }} svg {
height: {{ section.settings.mobile_divider_height }}px;
}
{% if section.settings.divider_design == "triangle_1" %}
.section-{{ section.id }} svg {
height: {{ section.settings.mobile_divider_height }}px;
}
{% endif %}
{% if section.settings.divider_design == "triangle_2" %}
.section-{{ section.id }} svg {
height: {{ section.settings.mobile_divider_height }}px;
}
{% endif %}
{% if section.settings.divider_design == "book_1" %}
.section-{{ section.id }} svg {
height: {{ section.settings.mobile_divider_height }}px;
}
{% endif %}
}
{% endstyle %}
<div class="section-{{ section.id }}">
{% comment %} Designed and Developed by Bungalow Creative. Get sections like these at The Section Studio https://bungalowcreative.co/pages/the-section-studio {% endcomment %}
<!-- wavy 1 -->
{% if section.settings.divider_design == 'wavy_1' %}
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z"></path>
</svg>
{% endif %}
<!-- wavy 2 -->
{% if section.settings.divider_design == 'wavy_2' %}
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 22" preserveAspectRatio="none">
<path d="M1662.81146,7.80455a4.6784,4.6784,0,0,1-1.50244.07818,14.41371,14.41371,0,0,1-9.38818-4.56366,10.96779,10.96779,0,0,0-15.81592.09375c-6.52393,6.35864-13.26831,5.56806-19.04761-.01886a11.19678,11.19678,0,0,0-16.02124.08521c-6.41357,6.26593-13.17822,5.52612-19.04419-.15491-4.27148-4.13666-10.9646-4.52673-16.04736.199-6.26587,5.826-12.65576,5.96563-18.83521-.10108-4.45556-4.37433-11.134-4.48425-16.04687.004-6.50562,5.94318-12.7771,6.07294-19.019-.07318-4.25855-4.19306-10.98072-4.543-16.043.14679-6.30445,5.84094-12.65869,6.00616-18.83179-.05744a11.18069,11.18069,0,0,0-16.01782-.00708c-6.4563,6.31012-13.20508,5.58753-19.041-.07007-4.312-4.18017-11.01513-4.53961-16.05322.11109-6.34448,5.85663-12.64893,6.03693-18.834-.00891-4.72242-4.61609-11.45-4.3819-16.22779.08276-6.21606,5.80866-12.65454,5.91608-18.83862-.15137a11.15588,11.15588,0,0,0-16.01343.08423c-6.40552,6.25678-13.16821,5.52686-19.04443-.16241-4.2688-4.13294-10.9607-4.52521-16.04688.20685-6.25927,5.82342-12.65527,5.95855-18.83593-.10865-4.45459-4.37274-11.13086-4.48181-16.04615.0116-6.498,5.94012-12.77612,6.0661-19.01977-.081-4.25489-4.18915-10.97657-4.54163-16.04224.15454-6.29761,5.83819-12.6582,5.99908-18.83227-.06519a11.1793,11.1793,0,0,0-16.01758.00037c-6.449,6.30121-13.19507,5.58832-19.04151-.07758-4.30835-4.1756-11.011-4.53845-16.05273.11878-6.3374,5.85394-12.64868,6.02966-18.83447-.0163-4.72022-4.61365-11.44532-4.38055-16.227.09021-6.20948,5.8056-12.6543,5.90875-18.83936-.15893a11.15907,11.15907,0,0,0-16.01416.09075c-6.33936,6.18085-13.0332,5.60682-18.85254-.01025-4.7688-4.60309-11.48486-4.37469-16.23828.05481-6.24927,5.82349-12.65405,5.95209-18.83569-.1153-4.45288-4.37072-11.12714-4.48-16.04566.01917-6.49048,5.93726-12.7746,6.05963-19.02-.08868-4.25262-4.18647-10.97455-4.53888-16.04175.16223-6.29028,5.83569-12.657,5.99225-18.83306-.07276a11.17807,11.17807,0,0,0-16.01722.00757c-6.441,6.2923-13.18432,5.58954-19.0415-.085C948.0155-.815,941.31329-1.17769,936.27,3.48448c-6.32929,5.85113-12.64825,6.02252-18.83508-.024-4.71918-4.612-11.443-4.37744-16.22626.098-6.20154,5.80243-12.65442,5.90125-18.84027-.16668a11.15376,11.15376,0,0,0-16.01288.09869c-6.39038,6.24023-13.149,5.52753-19.04462-.17719-4.26513-4.12725-10.95562-4.51983-16.04571.22242-6.24426,5.81762-12.65473,5.9439-18.83728-.12391a11.16264,11.16264,0,0,0-16.01459.05713c-6.43793,6.29218-13.20557,5.523-19.0437-.135C773.09-.8138,766.39221-1.19564,761.321,3.51219c-6.28326,5.83307-12.65661,5.9851-18.83368-.08051-4.46093-4.38037-11.14416-4.48907-16.04858-.01648-6.52533,5.95075-12.7796,6.09149-19.01782-.05243-4.27027-4.20562-10.9961-4.54351-16.04407.12592-6.32239,5.84839-12.662,6.02777-18.83008-.03693-4.55572-4.47937-11.36133-4.46216-16.233.10926-6.18793,5.80645-12.66339,5.9049-18.83447-.17719a11.18522,11.18522,0,0,0-16.01831.10956c-6.37964,6.23505-13.13721,5.527-19.04376-.184a11.10478,11.10478,0,0,0-15.82788.09765c-6.54078,6.37378-13.28779,5.56525-19.048-.007a11.19883,11.19883,0,0,0-16.02167.07288c-6.42663,6.2807-13.19213,5.52423-19.04357-.14294a11.11471,11.11471,0,0,0-15.82978.05487c-6.53778,6.36242-13.25244,5.63617-19.04522.03473-4.491-4.34278-11.14881-4.47821-16.05573-.00019-6.51764,5.94788-12.77777,6.0846-19.01825-.0603-4.26678-4.2016-10.99115-4.54272-16.04358.13391-6.31531,5.84552-12.65863,6.01837-18.83087-.04474A11.18334,11.18334,0,0,0,411.63452,3.429c-6.468,6.3244-13.22034,5.5874-19.0412-.05762-4.32348-4.19293-11.02777-4.53644-16.05395.09808-6.41687,5.917-12.76477,5.99835-19.02338-.15558a11.06148,11.06148,0,0,0-15.82043.097c-6.53015,6.36267-13.275,5.56775-19.0481-.01459a11.19763,11.19763,0,0,0-16.02142.08039c-6.41748,6.27081-13.183,5.52685-19.04407-.15015-4.27441-4.14032-10.96924-4.52637-16.04755.19415-6.26934,5.82764-12.65564,5.9704-18.835-.09619C248.24158-.952,241.56171-1.06008,236.6521,3.42363c-6.50952,5.94488-12.77716,6.07745-19.01874-.06836-4.26221-4.19672-10.98565-4.5423-16.04309.142-6.30823,5.84284-12.65851,6.011-18.83148-.05267a11.18181,11.18181,0,0,0-16.01788-.01166C160.28064,9.748,153.53064,9.021,147.69965,3.36753c-4.31678-4.18536-11.02082-4.53808-16.05353.10621-6.34815,5.85815-12.64826,6.04174-18.83344-.00416-4.72564-4.61926-11.45489-4.38128-16.22809.078-6.21936,5.8103-12.65435,5.92084-18.8385-.14661a11.15722,11.15722,0,0,0-16.01367.07959c-6.40954,6.26184-13.17175,5.52582-19.044-.158a11.09925,11.09925,0,0,0-15.827.07221C20.2403,9.871,13.44232,8.8021,7.41425,3.1107A11.75132,11.75132,0,0,0,2.03339.25151C.31219-.19057-.0083.44609.00043,1.91221.035,7.71617.02368,13.52043,0,19.3245v.25226a4.97088,4.97088,0,0,1,0,.80554v1.71833c.21655.02087.45227.03363.72717.03363q831.04212-.06968,1662.08429-.04541Z"/>
</svg>
{% endif %}
<!-- wavy 3 -->
{% if section.settings.divider_design == 'wavy_3' %}
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 54" preserveAspectRatio="none">
<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>
{% endif %}
<!-- diagonal 1 -->
{% if section.settings.divider_design == 'diagonal_1' %}
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M1200 120L0 16.48 0 0 1200 0 1200 120z"></path>
</svg>
{% endif %}
<!-- diagonal 2 -->
{% if section.settings.divider_design == 'diagonal_2' %}
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M1200 120L0 16.48 0 0 1200 0 1200 120z"></path>
</svg>
{% endif %}
<!-- curve 1 -->
{% if section.settings.divider_design == 'curve_1' %}
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 100" preserveAspectRatio="none">
<path d="M0,0V7.23C0,65.52,268.63,112.77,600,112.77S1200,65.52,1200,7.23V0Z"></path>
</svg>
{% endif %}
<!-- triangle 1 -->
{% if section.settings.divider_design == 'triangle_1' %}
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M598.97 114.72L0 0 0 120 1200 120 1200 0 598.97 114.72z"></path>
</svg>
{% endif %}
<!-- triangle 2 -->
{% if section.settings.divider_design == 'triangle_2' %}
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M598.97 114.72L0 0 0 120 1200 120 1200 0 598.97 114.72z"></path>
</svg>
{% endif %}
<!-- book 1 -->
{% if section.settings.divider_design == 'book_1' %}
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 669.4 133.88" preserveAspectRatio="none">
<path d="M0 0c0 133.88 334.7 0 334.7 133.88C334.7 0 669.4 133.88 669.4 0z"></path>
</svg>
{% endif %}
</div>
{% schema %}
{
"name": "BC Section Dividers",
"tag": "section",
"class": "section",
"settings": [
{
"type": "header",
"content": "Colors"
},
{
"type": "color",
"id": "background_color",
"label": "Background Color",
"default": "#ffffff"
},
{
"type": "color",
"id": "divider_color",
"label": "Divider Color",
"default": "#000000"
},
{
"type": "header",
"content": "Divider Design"
},
{
"type": "select",
"id": "divider_design",
"label": "Divider Style",
"options": [
{
"value": "wavy_1",
"label": "Wavy 1"
},
{
"value": "wavy_2",
"label": "Wavy 2"
},
{
"value": "wavy_3",
"label": "Wavy 3"
},
{
"value": "diagonal_1",
"label": "Diagonal 1"
},
{
"value": "diagonal_2",
"label": "Diagonal 2"
},
{
"value": "curve_1",
"label": "Curve 1"
},
{
"value": "triangle_1",
"label": "Triangle 1"
},
{
"value": "triangle_2",
"label": "Triangle 2"
},
{
"value": "book_1",
"label": "Book 1"
}
],
"default": "wavy_1"
},
{
"type": "range",
"id": "divider_height",
"label": "Divider Height",
"min": 20,
"max": 300,
"step": 5,
"unit": "px",
"default": 120,
"info": "Controls the height of the divider SVG"
},
{
"type": "range",
"id": "mobile_divider_height",
"label": "Mobile Divider Height",
"min": 10,
"max": 200,
"step": 5,
"unit": "px",
"default": 80,
"info": "Controls the height of the divider SVG on mobile devices"
}
],
"presets": [
{
"name": "BC Section Dividers"
}
]
}
{% endschema %}
