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.
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:
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...
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:
This will add white clouds at the top of the background section:
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:
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:
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.
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 works.
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:
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:
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:
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:
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.
I really love this feature. Thanks for always increasing the value of my membership. Thrive is an awesome company.
Really glad to hear that, Joe! 🙂
Thrive, you are one of my favorite companies.
Thank you, Holden!
Why you are the best… 😉
Thanks Falk 😉
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!
Hi Chik great to hear 🙂 We’re not a great fan of sliders anyways 😉
it look likes you are the new content marketer at Thrive Themes . Great post , great video, and amazing feature.
Thanks a lot, Juan! 🙂
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.
We still have quite a few tricks up our sleeves, Alain 😉
Really glad to hear that, Lakia! 🙂
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!
Thank you, Mike! Still, maybe you could sneak a “subtle” divider in there 🙂
As always, Thrive just keeps getting better. I’ve got a project for this one immediately. Well explained too.
Thank you, Quentin 🙂 Glad to hear that!
Super cool new feature. Thanks!
Oure pleasure, Mark!
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?
They addressed the GDPR issue in a previous update Tim
What was that issue about?
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.
Very nice feature
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.
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’s the spirit! 🙂
What a great feature to make our pages look more modern!
Yep, totally agree 🙂 Enjoy!
Great new feature! Looking forwarding to implementing.
Absolutely, Evangeline! Go right ahead 🙂
Nice feature. Maybe I’ll use it one day on my blog.
Absolutely, Luke! You could experiment with it and see how it fits your blog 🙂
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?
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 😉 )
So excited about this! My biggest challenge is going to be not going overboard. 🙂
I know what you mean, Carmen 😀 Best of luck, you can do it!
You guys are awesome.
You’re awesome too, Sharon! 🙂
Oh my…I just fell in love with Thrive even more! : )
Haha I’m glad to hear that, Katrina! 🙂
Glad to hear that, sir 🙂
Thanks, Lex 🙂
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 😛
That’s awesome! 😀
Awesome new feature. Cheers
Thanks, Cole 🙂
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!
Thanks a lot, Paul! Best of luck 🙂
WOW!! I love that!
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…
Thank you very much, Sonia! Definitely, the next video is coming up soon 🙂
oh my god..
You guys really do listen to your customer..
This is the best membership i’ve spent for my money..
Really glad to hear that, Ilyas! We’ve got even more features coming up 🙂
What a fantastic addition to Thrive Themes. I look forward to using it in the proper context. Thank you! You are always innovating.
That’s great 🙂 Thank you for your comment, sir!
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
Haha I know what you mean 😀
GR8 new feature & welcome to the camera David.
Thanks a lot, Tony! 🙂
Always increasing member value! I love knowing that you are constantly giving us useful features to use on our own and client projects. Kudos!
Thank you, Andrew! 🙂
really nice feature, great tutorial, thanks, David
Thanks a lot, Ramesh!
Thanks, David. Another awesome feature from Thrive.
Quick question: do all these fancy styles affect overall site speed in any way?
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.
I missed that one! Thank you for sharing a such cool feature 🙂
Our pleasure, Gaëtan 🙂
The “INVERT” button does not show up in my decoration box…why?
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 🙂
What a knock-out, way kewl feature!!!!!!!!!!!!!
Haha I know right!? 😀
David, thanks for the amazing lesson. I’ve already implemented it – https://prnt.sc/k18ihr
Oh that’s awesome! Really glad to see this, Alexey 🙂
This is super cool! I was just wishing that this was a feature a few weeks ago! 🙂
That’s awesome! Glad to hear that 🙂
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.
We’ll definitely add more features 🙂 Thanks for your comment, Priya!
Hey David, what fonts are you using in the example? haha
Nvm, found it, It’s Ubunutu =p
Haha yep, I know it’s a cool looking font 🙂
i really like the beard on you hanna.. Kudos on the bold look.. 🙂
I’m rocking it, right? :p
A nice feature and a very helpful tutorial. Thanks David and thanks Thrive Themes.
Thank you for your comment, Detlev! 🙂
It look awesome!
Already loved dividers. The fancy ones (clouds!!!) are the best addition since Architect’s release. Thank you Thrive team!
I couldn’t have said it better! 😀
Thank you for your comment, Adrien!
Haha thank you! 🙂
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.
Well, I’m so glad you stayed with us, sir! We have even more awesome features coming your way 🙂
This is such a nice feature! Cannot wait to give this a play with my up and coming redesign! 🙂
That’s awesome! Thanks for the comment, Adam 🙂
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 🙂