Spice Up Your Webdesign with These Fancy Dividers

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.

More...

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.

Why?

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.

Author: David Gavrilut

David is a content marketer at Thrive Themes, previously in charge of the Thrive Knowledge Base articles and video tutorials. When not at his working desk, he enjoys driving like an enthusiast, visiting the beautiful cities of Transylvania for the 100th time. Either that, or he could end up watching an entire season of Friends in one day.

  • Joe M says:

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

    • David Gavrilut says:

      Really glad to hear that, Joe! :)

  • Holden H says:

    Welcome David!

    Thrive, you are one of my favorite companies.

    • David Gavrilut says:

      Thank you, Holden!

  • Falk says:

    Why you are the best… ;)

  • Chik Q says:

    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!

    • Hanne says:

      Hi Chik great to hear :) We’re not a great fan of sliders anyways ;)

  • Juan Z says:

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

    • David Gavrilut says:

      Thanks a lot, Juan! :)

  • Alain F says:

    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.

    • Hanne says:

      We still have quite a few tricks up our sleeves, Alain ;)

  • Lakia Robinson says:

    LOVE this!

  • Mike C says:

    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!

    • David Gavrilut says:

      Thank you, Mike! Still, maybe you could sneak a “subtle” divider in there :)

  • Quentin P says:

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

    • David Gavrilut says:

      Thank you, Quentin :) Glad to hear that!

  • Mark B says:

    Super cool new feature. Thanks!

  • Tim says:

    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?

    • Andrew T says:

      They addressed the GDPR issue in a previous update Tim

      • Luke says:

        What was that issue about?

      • Tim says:

        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!

      • Shane Melaugh says:

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

  • Kevin B says:

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

    • Jafar I says:

      Very nice feature

    • Hanne says:

      That would be cool indeed. Unfortunately, making these SVGs work they way they do is quite tricky. I don’t know if we can make them user-uploadable, but maybe there’s something else we can do to provide a more extensive library of dividers.

  • James R says:

    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!

    • David Gavrilut says:

      That’s the spirit! :)

  • What a great feature to make our pages look more modern!

  • Evangeline G says:

    Great new feature! Looking forwarding to implementing.

  • Luke says:

    Nice feature. Maybe I’ll use it one day on my blog.

  • Shane says:

    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.

    • Hanne says:

      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.

  • Carmen R says:

    So excited about this! My biggest challenge is going to be not going overboard. :-)

  • Sharon Landis says:

    You guys are awesome.

  • Katrina S. says:

    Oh my…I just fell in love with Thrive even more! : )

  • gareththomasnz says:

    looks good

  • Lex D says:

    Love this.

  • jimross412 says:

    David, You are just like ME mate :P 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 :P

    • David Gavrilut says:

      That’s awesome! :D

  • Cole says:

    Awesome new feature. Cheers

  • Paul C says:

    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!

  • Andrea says:

    WOW!! I love that!

  • Sonia says:

    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…

    • David Gavrilut says:

      Thank you very much, Sonia! Definitely, the next video is coming up soon :)

  • ilyas says:

    oh my god..

    You guys really do listen to your customer..

    This is the best membership i’ve spent for my money..

    • David Gavrilut says:

      Really glad to hear that, Ilyas! We’ve got even more features coming up :)

  • David Stringer says:

    What a fantastic addition to Thrive Themes. I look forward to using it in the proper context. Thank you! You are always innovating.

  • Kathie Holmes says:

    This is one of my favourite features you have added – can’t wait for the list to expand even further – can’t get enough fancy dividers lol

  • Tony B says:

    GR8 new feature & welcome to the camera David.

  • Andrew T says:

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

    • David Gavrilut says:

      Thank you, Andrew! :)

  • Ramesh says:

    really nice feature, great tutorial, thanks, David

  • Thanks, David. Another awesome feature from Thrive.

    Quick question: do all these fancy styles affect overall site speed in any way?

    • Shane Melaugh says:

      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.

  • Gaëtan N says:

    I missed that one! Thank you for sharing a such cool feature :-)

  • Nathalie N says:

    The “INVERT” button does not show up in my decoration box…why?

  • What a knock-out, way kewl feature!!!!!!!!!!!!!

  • Alexey K says:

    David, thanks for the amazing lesson. I’ve already implemented it – https://prnt.sc/k18ihr

  • Susanna M says:

    This is super cool! I was just wishing that this was a feature a few weeks ago! :)

  • Priya says:

    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.

  • Yarik B says:

    Hey David, what fonts are you using in the example? haha

    • Yarik B says:

      Nvm, found it, It’s Ubunutu =p

  • Maximilian P says:

    i really like the beard on you hanna.. Kudos on the bold look.. :)

    • Hanne says:

      I’m rocking it, right? :p

  • Detlev says:

    A nice feature and a very helpful tutorial. Thanks David and thanks Thrive Themes.

  • Zaw Min oo says:

    It look awesome!

  • Adrien L says:

    Already loved dividers. The fancy ones (clouds!!!) are the best addition since Architect’s release. Thank you Thrive team!

  • Jamaica says:

    Genius!

  • >

    Join Thrive University (it's FREE!)