Spice Up Your Webdesign with These Fancy Dividers

David Gavrilut   107

A new feature called “Fancy Divider” has been added to Thrive Architect. It can be found both on the Background Section and Content Box elements.

The Fancy Divider is like a powerful tool. Or better yet, a spicy food ingredient.

It can really spice up the design of your website, making it both attention grabbing and user friendly, if you know how to use the feature right.

However, if you overuse the Fancy Divider feature, your website may end up tasting like an over-spiced dish your visitors may hesitate giving a try.


Too Spicy...

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.


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

Nothing out of the ordinary

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:

Select the top part

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

Apply the “Fancy Divider"

Your background section will now look like this:

A bit too much chili powder

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...

Not Too Much, Just Perfect

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.

1. Choose the “Clouds” Fancy Divider Shape

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:

Select the “Clouds”

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

Getting better, but not quite there yet

2. Play with the Opacity

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:

Almost there...

3. Use the “Invert” Option

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

“Invert” the Clouds

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

Not too much spice, just perfect

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

Avoid a Design Fiasco

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

1. Images + Fancy Dividers = Lousy Friends

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!

2. Don’t Overuse Gradients

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:

Gradients & Solid Colors

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.

How about Mobile Devices?

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:

Desktop view

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:

Bad Mobile Display

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:

1. Increase Padding on the Background Section

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.

2. Decrease the Divider Height

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: 

Looks good!

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

Now It's Your Turn To Give Fancy Dividers a Try!

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.

by David Gavrilut  June 29, 2018


Enjoyed this article ?

You might also like:

Leave a Comment

  • I really love this feature. Thanks for always increasing the value of my membership. Thrive is an awesome company.

  • Great new add to TA! Eliminates the need for a slider plugin. Although not as robust as Smart Slider, it is enough for me to eliminate the need for it. Well done!

  • it look likes you are the new content marketer at Thrive Themes . Great post , great video, and amazing feature.

  • I think it’s a big step that he needs to give Architect and Thrive Themes not to be defeated by Elementor that is taking a good advantage, at least as a visual editor.

  • Nice feature – If only the design of my site was suitable for this, but it’s build on clean lines and only 3 strong colours. But I love that you’re always innovating!

  • As always, Thrive just keeps getting better. I’ve got a project for this one immediately. Well explained too.

  • Hi, very nice Feature as it seems! Still, I just have to ask again – as annoying as this maybe – are parts of the team concerning themselves with GDPR too? The Google Fonts remain a big Problem. Is there any solution in sight? With all the new Features in the Pipeline – that are all great – I am fearing this might not get done. Any update on this?

      • Thanks, Andrew. That would be wonderful. But are you sure we’re talking about the same thing? I mean the fact that TA calls Google Font whether I use them or not. Has that stopped? My ticket as to that is still open. Any more Information on that would be appreciated!

      • We’ve updated our themes to address this issue. Thrive Architect only loads the fonts in use on any given page.

    • Hello, Tim. We have a team that is dealing specifically with GDPR issues. As far as the Google Fonts, we took care of that 🙂

  • Excellent new feature – Is it possible for us to create and use our own dividers, David? Would be great for other skylines etc.

  • This is FUN!!! Now I’m going to have to reread the cautions about not overdoing it. 🙂 Oh and it’s also useful. 🙂 But it’s FUN!

  • That looks pretty good. How about a timeline type divider like the one that Thrive itself uses when showing the progression of it’s products. A divider that goes vertically up the page like that and allows the user to populate details at each alternating pointer would be helpful in a lot of situations.

    • Thanks for the suggestion Shane.
      That would be quite different from these dividers (wouldn’t be the same feature at all), but pretty cool I agree.

      • Hi Hane, any options currently to make vertical dividers other than just putting a border on a column?

      • Hi,
        No only horizontal.

        But if you’re using a content box (inside the column element) you can use the decorations options to add slanted edges or dividers (not the fancy dividers but some less fancy ones 😉 )

  • David, You are just like ME mate 😛 I travel same cities again and again Design Amazing websites with Thrive Architect and i also watched an entire season of FRIENDS in one day 😛

  • This is great! I am building a new sales page and am looking forward to what I might be able to do with this. You guys are the best!

  • Welcome David! You managed very well for your first video on a very exciting new feature for Thrive Architect. I hope we get to see you again soon…

  • Always increasing member value! I love knowing that you are constantly giving us useful features to use on our own and client projects. Kudos!

    • The fancy dividers use SVGs (vector graphics). It’s a super lean way of drawing something on a web page. Much smaller and faster than if it were an image file. In terms of speed impart, it’s more like having a few lines of text on the page than it is like loading an image.

    • Hmm, that doesn’t seem right. The best way would be to open a suport ticket for this issue. This will allow us to take a look and solve the problem fast. Thanks, Nathalie 🙂

  • Wow, this feature looks awesome, thrive architect is improving.
    Add more awesome features like this, it will be awesome for us.
    Thanks for introducing this.
    Will try it out.

  • I am thrilled you’ve brought this feature to TA. I was considering (dare I say this out loud) adding another great Page Builder (beginning with ‘E’) to my suite of tools for this feature.

  • This is one of the best features in my opinion, but I am not able to change the color of the fancy dividers anymore and I don’t knwo why 🙁 Also sometimes dividers are not shown up at the bottom or on the sides. Do you have an idea? Did I do something wrong? Thx and regards Robert

    • Hi Robert! The best solution in this kind of situation is to open a Support ticket, just so that we can see exactly how this occurs on your website. The guys here will be more than happy to help 🙂

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}