How do you create wavy/diagonal/etc borders on sections?

kcgagner

Hi. I would like to know how to achieve section borders (either top or bottom) that are not straight across the page. An example of what I am trying to describe is found on the Gardener template which shows a wavy bottom border on the Hero/Intro section of the page. If I wanted to achieve the same or maybe a diagonal line or maybe even a brush stroke border on another page that I am working on. How would I go about doing that? Thanks!

Bruce_McCaughan

I use this widget from the Camel:
https://dev.thecamel.co/widget-description/shape-divider

visioncraft

Welcome to the community, @kcgagner!

There are probably an infinite number of ways of creating those non-straight section dividers — the longer you work with Web Design, the more you learn. I'll try to show you a couple of well-known techniques here that should help you cover a lot of different designs.

Repeated Pattern Border

Instead of having your sections end on a 'straight line', sometimes you want a wavy, jagged, crinkle-cur or some other type of section edge that repeats horizontally on a pattern — for example, like this:

Our edge here is made up of a 'tile', that is repeated horizontally along the edge. Our tile, in this case, will look something like this:

In order to create this kind of border, we'll use a 'transition section' between the top and bottom sections in our page layout. The transition section will contain nothing but our pattern:

In order to create a transition section, follow these steps:

1. Create an empty section between your 'top' and 'bottom' sections.
2. Remove all padding and margins from the transition section - make sure all measurements are set to '0' (zero). Make sure also that there is no margin at all between the transition section and the top and bottom sections.
3. In the 'Size' section of the Design Editor, set the height of your transition section to be exactly the same height as your tile image — the height of the tile that is going to be repeated horizontally. So, for example, if you have a tile image that is 45px high, make the transition section exactly 45px high, too.
4. In the 'Background' section of the Design Editor, choose the tile image as the Background Image for the section — and set it to 'tile':

When using this technique, I often use SVG images for the tile. I make the SVG shape the same colour as the bottom section. Because the SVG tile is transparent, I can then set the background colour of the transition section to the same colour as the top section, and it all blends in. To get you started, here are some simple SVG border tiles for you to play with — just open them in your favourite illustration app to change their colours as needed. The number at the end of the file name is the height of the tile:

border_tiles.zip

Background Image Border

The second technique is pretty simple: you can just use a single (non-repeating) background image at the top or bottom of a section. If that images matches the colour of the section next to it, it will look like a 'border' — like this:

The background image of a section is placed above its background colour, and below all your other section elements. So this technique is particularly useful if you don't mind having layout elements overlapping your borders:

To use this technique, follow these steps:

1. Select the section where you want to add the background image border. In its Design Editor, go to the 'Background → Image' section and add the image.
2. Still in the 'Background' section, make sure you select the 'Full Image' display option, and select the appropriate image position: centre bottom or centre top, depending whether you're adding the image to a 'top' or 'bottom' section:

I often use simple SVG shapes with this technique, which tend to have a dramatic effect on your layout — such as simple straight slopes or gentle organic curves. Here are a few for you to play with:

simple_bg_shapes.zip

Combining Techniques & Going Beyond

Although these 2 techniques might seem quite simple, there is A LOT that you can do with them. For example: you can use SVG shapes with drop shadows to create some impressive borders that make it look like your sections are 'overlapping' each other.

You can also combine both techniques: you can use a single, non-repeating background image in a transition section. This approach can be fiddly, but can give you some advantages — eg., if you want to have 'sloped' dividers but don't want to have elements floating over them.

I hope these tips help!