Dividers

Shape dividers allow you to separate sections of content in visually engaging ways.

Built-in shapes

Book
Curve
Curves
Diagonal
Hills
Mountains
Rays
Triangle
Wave
Waves
Zigzag

Custom shapes

8560849c7ca797b9034253d8a6bfc83c89ce47c21ceef5db740dc99e94d4b5195b01b81894d0b1873f35f2d4d51eedffe8dd63006fac5e048a4c8bf0e5a0a22d792572aacf9368b8b47b33a9d6182535d2e5c1c9125a0471534ce865e9edd435c7eeb11179370d3953fc187afb09f26e4e695d7d7627f8c9aec3f40f058566a98f0181a54694af148bd3cdc551f3c38c0205b656afb5e6bd148dffc2e4b1097678c2a908f7b971d545eb203068e661263e210de9c51338ebdd89926c24070b667af1627b7f78a3c7e3fffb6b0faf2ad483507fdadcd77061e3ae1295617114ab65c004615d1bf83342125cb16b7e007c31ce64734a9e3f0331bf16df312b64254f3d6d23678697b051bbbd4f589949084234da347c77569dae9f73eb7a647cee5f11d4a89cfc797ed02b1d330db100155ae9daa36ab131b0c2fea2dd1bb6452f5c309583db98c3654629be20972ca18ae6a12997cda4548a41b4fa41249e41c84c7ac593799fc37d392161160572b8b0ccffe56393be56654f5a9d1e7b95536012b6adc85643967277ca15f5450e7c07b6ca437351c220d0141ac1cf12ff8059c01d41beef278e218495a3786389b3cdf3e731ea4b29575e63569b8f62702490300bdbfbaa7eac8dd362684f471071e8fac5b5ad46d68df1a514db72a8d46957d0bf51eddc4ba386f368e66f6c6ec9589879b1cebb4b9af39b43a30a9f206ef7dc6c12a1dcda6fe0efb57bf3141a114a3f26bf27899684719f5d08ea926fbaba27e8772ac93dc016231f7995edc3bd532ce53b1e23141e503d5a72b77b12cb741f50332aef7e8cc0a33b18c14e8ad925b25b54d2b6e192ca7f28931704859463c3c249c5d45590c8dd42685a696a45751d5cd43bc1f59936b46d55b613c50b88d346f80d794ed085c34400902299877c04835fbdaf807cc47959ff21be731c11bf4392dc9d841acecab8c434a7f76dc9e18bd52b789a7a5626e4cac76a5404b75cc220b3e2b9c69583d5c56f5161e85d65ddef543b68bb9c3a2091b3aebe3333e475c65594f04704f8e32ff3576b8e7a6347d54722fbce9493696dd531f286aaba447f60eb06c3f4361d3111897de5f995dce83bd2b8cce28e26d48e4db59c1b507f5eee3fa1a4f2d3dfa41591e78faea0ce2c03f0d8a6efaf097129ad173ae2b302488aa79ea8705cce142230b1a8a832a60a66d4afff173c4274707422d0396cd7d6b8d1b7ee8976039b564cc03d58a196ab17b671f8a9f03f9e283736710027262fe2b0b2b14e8bffb1fd8ae2f46cc21b4d4bc5074cf677052bb6b74af492c2a9551ca54706269c2abaf5d14f79f823a3c483f26c5511d1825b8fe860d96c451bbd010740ec55a7560b54b33d33dd4c10c6d162c415e5c9d421269c6ef09a624452e7ee13d3f3660a9dc9b00bf4499a6fd66a90ec3b4810f6e39ec89bc703650c232d2526968ea2dfffa47f7c537d21ee04ddd0577a2ed47fb8f1818dae7ece7e9876f23560c7876e024d837dfe675a78093bb53b501e1c49a18fbe8539efbe9f504ccb3718ab2829d74099c882a4041a574a0a5108dac2d01b9d710be09ade25f9aa499ee5c5f368e39048af6bb992f41de62d7d46aad584b6a054641579ad9108e486aec6b5b0770903779a35c99588c173c7d91cb23180cc09e369980116e4c22949ea0ba71b9ec7273c17e731c004ea6d23b1c9c65fc6e47c42d40962947d6b048955c4bc137681df012a003603bdb0bb17953db9cea537c61f3fde50f1c9d592e3b9a872671962dd5efbb353be7bbd486422ecb63c993fcc247f1e3b5187ad221609a464f248eff29b1febcdffc8f16dce07168e980a77c600bcadbeeaf7979f9ffa546d50b7859c8e612c8ea99b1077ef8cefc69d73fa1ab69cf716b3017e7d76795cf6de6cf65e4b7350891b644c6c03082e4dfbbefaff80c1484b0408163f0bb48165d7d3ad83af27fe7c672477a14aef4880c155e2b1c88c714a3bb319c7bace94fe13b0505487642c5c38b402e3312a2ee162f6f5353ff4b1b2f4d48cc4b38bb31fa4bfd347fccc4ebf0e0a21e120963ca72a1c716e0e6a4826
Triangle (asymmetric)
View code
9d98318f3ca88a761138964cace9624cfbc9a050b8fc6180359acf4a16afb69b30cd0cce6112333403c0ba0a3555910eca6fc96590668ccf0f4fdccc97a810189f871c5c5a3fb68a16c6aca2f11d93b61363069db02894eef059e8d00bc48cbd72ef5ad4a8db5fa3cf72cdd9d080072411316169b4589fcc68f6200d1cffc5bf6eae0de613f5e4f2e7971106b05d397e625a7e05934c2a8aa343f24398630ca9f5f80a3ad7ad5cfc2d74c7e557abc141d6ba9632a230ebbf4dc1ab89463b404b1edfb9f2614e5c66ce0a0192754cb4c8065ad19952de67f4e6ffc8f21d1b872e6d075456f158db062ad8a44903c3e3a194f70483ea2542828158ba93dc69f92b7b82fcb668179b9c48e9ea12d06e3080b4f3db3c80ef26880a37d94209689ec9f9a8f7ce9062dd0110f277ab82205f1a953e680b32834d9731f3146cf39c15828da9d36894ca9be21d929f4b9f211624c5c66bf5a57784aabe2ab86cddac8bf72a729e39f3f15696b4708d65f2b055ec0467025bba5bd04e22cd2256a6d790baee33cc72ab4f52328ec38f1c6116339469e39c1fa03d62c499371479922b28f8946b05459924dc60a476ba39dddfb8ae6536996b913a0370fec2bd4bf1880d31101abed0bb76dc1925d05fffbf76a96e
14103c1905a9bb4f2d3f18bafbeb98fff29c29af3445dd3500bf62534017c038c37ed72c0015d5c40403b08ba281ffaae459fcbc613d4af8c1dbb366022bf484266e1cf5daae7145e524202247a3c2c5acdcd49952dbc61d244bc50dba5be5beae2fa23e2c29fd274a78e860a42019a4557b11acfa0b6564f91a918f16e2fbff49b8783fb88457b954841e9e6da4c7fb9e1f18cda848188dc7cf2947962ff6f657a2e560117020576e9e7c5dfa6a566da20cea7999b467979475896780ee8c90fce1dc38ea621f0d689ae8ea33c5c69c63ae689ddfc8f14805fa62ece27ac33f8c8fff127e63441be1f9b48c342bca380e7bf2f1ea47da209a867879bccb81062ccdef872db8a52c0403635f42bc86d0bf4cd1689f0615221acfbecad9b3f85ff855f0198b3d4a42db99fbbc1557c074d939595fbead638f4fd4c53eab38f345d3296e885850f9971f511c03ac1e215530747279f37a13afba095bb0f9b3e98faeb010f73079027858d2d7eccb67af6485b6b1e981e8835e285208c1babc2f45453c78028810f317be097e74e33a371c93cca10b768c06e02b742983f269881ad93fae5245b1b956499d767650bba6f8bf6bb89cff308f1029b79031a81b64a4c4bfb7d3cb4433665a01244d01bfc9b041fb2c469f7a747996fe71aabd8b5c8807e6493f6755d2ae86238e65513dfe76c610a4eabe3020dd7129b0fa5937ffbc9db4668336f0626fc794c4123fbcf61ebdbc1748ce2cd44ef4562194687d8f4d

Shape dividers can be applied to the Home page hero section and page footer using the Hero shape divider and Footer shape divider theme settings, respectively. Because they are all inline SVG they can be easily styled using CSS and (re)positioned using utilities.

Replace the following part of the home_page.hbs template with the code of the pattern:

{{~#isnt settings.hero_element_shape 'none'}}
  <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" ... >
    <use xlink:href="#shape-{{settings.hero_element_shape}}" />
  </svg>
{{/isnt~}}}

There are even online SVG shape generators available that you can use to add even more shapes to your theme.

Related patterns

Footers

Footers

6 patterns

Headers

Headers

4 patterns