Spice Up Your Webdesign with These Fancy Dividers

At first glance, when you start using the Fancy Divider, you’re not really sure that it’s a good idea to apply on your website.

Why?

To illustrate this, let’s use a demo landing page with a simple background section:

Next, let’s add the fancy divider.

To do this, click on the background section, look for the “Decorations” option in the sidebar and apply it on the top:

Then, select “Fancy Divider” from the drop-down:

Your background section will now look like this:

It looks... Different. Quickly, you’re having second thoughts whether this is a good idea or not.

And rightfully so. It does look like a bit too much chili powder has been added to your design. Let me show you how to tone it down.

Here's how you can use the Fancy Divider feature if your website has normal design tastes, but could use a touch of flare...

The key here is to be subtle.

In the case of our demo landing page example, here’s how you can properly apply a Fancy Divider.

First, select the Background Section element, then go to the “Decorations” option, apply a Fancy Divider to the top part and, from the second drop-down, choose the “Clouds” shape:

This will add white clouds at the top of the background section:

In order to give the Fancy Divider that subtle look, set the level of opacity to 15% leaving the default white color. This will let the color of the background section shine through:

The final step here is to give the Fancy Divider a more realistic look. For this, enable the “Invert” option:

And just like that, the background section now looks like this:

As you can see, this changes the vibe of the background section to give it an interesting fun look.

It’s very important to consider the following guidelines when using the Fancy Dividers feature in order to avoid design disasters:

Be EXTRA careful when using Fancy Dividers on background sections with images. They rarely work well together.

It's about demanding attention. When you use a Fancy Divider on a colored background section, the divider adds a bit of spice and gets the attention.
When your background section is an image the Fancy Divider will compete to grab the attention.

That's why in both the video and image examples of this blog post, we used background sections with (solid) colors to illustrate how the Fancy Dividers work​s. 

However, if you ever find an image that you think works well with a Fancy Divider, go for it!

In the video I talk about the importance of having a smooth transition between two background sections with the help of a Fancy Divider.

In a nutshell, here’s the secret:

In the example above, the Fancy Divider is applied to the bottom of the upper background section (the one with the gradient).

In order to make a smooth transition between background sections, the bottom background section needs to have a solid color. This allows to apply the same solid color on the Fancy Divider and guarantee a good look.

If you start a page from scratch and you apply the Fancy Divider, it will look good on any device.

But when you add a Fancy Divider on an existing page, make sure to check how the Background Section + Fancy Divider combo displays on tablet and mobile.

For example, this is how the following background section looks like on a desktop interface:

On a mobile device however, the content from the top background section overlaps the Fancy Divider.

The reason for this is that this page was mobile optimized before adding Fancy Dividers. During that optimization process, the background section paddings were decreased to improve readability. But now, with the Fancy Divider we actually need that space:

That’s why you should always check your Fancy Divider background sections on mobile. ​

Here's your Fancy Divider design recipe to make sure that never happens:

In order to make space for your Fancy Divider on mobile, go to the mobile view and click on the background section. Now in layout and positioning, increase the padding. If you added a Fancy Divider to the bottom, add bottom padding (or top padding for a Fancy Divider applied to the top).

Adding padding to the background section will move any element that’s inside the background section up (or down) and will avoid overlap with the Fancy Divider.

Making this type of changes in mobile view will not affect your desktop or tablet view.

If the height of a Fancy Divider that overlaps the transition on mobile is too high, go ahead and decrease that, too.

In this example, we decreased the divider height from 245 pixels to 80 pixels.

Now, the page looks exactly as it should: 

If you're looking to learn more about mobile optimization in Thrive Architect, check out this tutorial.

Watch the video at the top of the page to find out how you can use the Fancy Divider feature to provide a smooth transition between your background sections, how to use this feature on a Content Box, as well as many more tips and tricks.

Don’t be afraid to spice your own pages up by using the Fancy Dividers. If you have any comments about this new feature, leave them below.