Notice: Function register_rest_route was called incorrectly. REST API routes must be registered on the rest_api_init action. Please see Debugging in WordPress for more information. (This message was added in version 5.1.0.) in /home/thrivethemes/dev/thrivethemes/staging.thrivethemes.com/wp-includes/functions.php on line 6078

Notice: Function register_rest_route was called incorrectly. The REST API route definition for membership/v1/tags/schema is missing the required permission_callback argument. For REST API routes that are intended to be public, use __return_true as the permission callback. Please see Debugging in WordPress for more information. (This message was added in version 5.5.0.) in /home/thrivethemes/dev/thrivethemes/staging.thrivethemes.com/wp-includes/functions.php on line 6078

Notice: Function register_rest_route was called incorrectly. The REST API route definition for membership/v1/tags/activity/(?P[\d]+)/(?P[\d]+) is missing the required permission_callback argument. For REST API routes that are intended to be public, use __return_true as the permission callback. Please see Debugging in WordPress for more information. (This message was added in version 5.5.0.) in /home/thrivethemes/dev/thrivethemes/staging.thrivethemes.com/wp-includes/functions.php on line 6078

Notice: Function register_rest_route was called incorrectly. The REST API route definition for tve-dash/v1/growth-tools is missing the required permission_callback argument. For REST API routes that are intended to be public, use __return_true as the permission callback. Please see Debugging in WordPress for more information. (This message was added in version 5.5.0.) in /home/thrivethemes/dev/thrivethemes/staging.thrivethemes.com/wp-includes/functions.php on line 6078

Notice: Function register_rest_route was called incorrectly. The REST API route definition for tve-dash/v1/growth-tools is missing the required permission_callback argument. For REST API routes that are intended to be public, use __return_true as the permission callback. Please see Debugging in WordPress for more information. (This message was added in version 5.5.0.) in /home/thrivethemes/dev/thrivethemes/staging.thrivethemes.com/wp-includes/functions.php on line 6078
How to Add Shape Dividers and Spice Up Your Page Design
Notice: Function wp_get_loading_optimization_attributes was called incorrectly. An image should not be lazy-loaded and marked as high priority at the same time. Please see Debugging in WordPress for more information. (This message was added in version 6.3.0.) in /home/thrivethemes/dev/thrivethemes/staging.thrivethemes.com/wp-includes/functions.php on line 6078

Notice: Function wp_get_loading_optimization_attributes was called incorrectly. An image should not be lazy-loaded and marked as high priority at the same time. Please see Debugging in WordPress for more information. (This message was added in version 6.3.0.) in /home/thrivethemes/dev/thrivethemes/staging.thrivethemes.com/wp-includes/functions.php on line 6078

Notice: Function wp_get_loading_optimization_attributes was called incorrectly. An image should not be lazy-loaded and marked as high priority at the same time. Please see Debugging in WordPress for more information. (This message was added in version 6.3.0.) in /home/thrivethemes/dev/thrivethemes/staging.thrivethemes.com/wp-includes/functions.php on line 6078

Want to add shape dividers to your WordPress landing pages?

These eye-catching elements are easy to add to your pages, even if you have limited technical skills. 

Here's our step-by-step guide to adding WordPress shape dividers. 

Why Add a Shape Divider to Your Page?

Most people with WordPress websites start with a template

Why?

Because they give you an incredible starting point to build a professional-looking website. 

However, we all want to make sure our sites have that person feel - that they're not just carbon copies of 1,000 other websites out there. The difficulty is, most of us aren't web designers, so adding professional-looking but original design elements to our sites isn't easy.

Whenever it comes to web design, we always say this: keep it simple!

One way you can continue to keep things simple while giving your website a personal touch is with shape dividers. They look professional, add character to your site, and most importantly, they're easy to pull off.  

WordPress shape divider example

Example of a shape divider

So, if you're looking to add a simple but high-impact new element to your WordPress page, follow along to this guide to adding WordPress shape dividers. 

5 Steps to Add WordPress Shape Dividers to Your Page

We're going to show you how incredibly easy it is to add a range of shape dividers to your page.

Step 1: You Need a Good Landing Page Builder

Screenshot of Thrive Architect Sales Page

If you're using the WordPress block editor (the native editing tool), then you might already know this: it's quite hard to bring your vision to life with just the basics. 

To give your site the additional personal touches you envision, you need a high-quality page builder. 

If you're not an expert coder or designer and you want a simple yet powerful visual builder, then your best bet is Thrive Architect. Our team of world-class designers has given you an amazing starting point, but it's backed up by our developers who have made it incredibly easy for you to personalize your site in every imaginable way. 

Throw in the fact that our team of expert marketers test everything to make sure it's highly conversion-focused and you've got everything you need. 

Oh, and of course, it makes it incredibly easy to add shape dividers!

Just check out the pricing page and install the plugin following this handy guide. 

You'll instantly have access to tons of awesome landing page templates, a powerful page editor, and gain control of the small details of your website design. 

Check out Thrive Architect!

Pro tip: Add Shape Dividers to Your Theme

If you want to add shape dividers across your entire website, you can do that by editing your theme with Thrive Theme Builder


Check out this guide to landing page builders vs theme builders and find out which one best fits your needs. 

Step 2: Choose Your Shape Divider

Now it's time to see how easy it is to add a shape divider. 

Just hover over Pages in your WordPress sidebar and click Add New, give your page a title and then click Edit With Thrive Architect

You'll have the option to build a page from scratch or to start with a pre-made template. 

Create a new page

We recommend starting with a pre-made template, as it's a huge timesaver, but it's completely up to you. With Thrive Architect you have complete editing control to build your page how you see fit, so choose the option that best fits your needs. 

Then it's simply a case of clicking on a background section and choosing Decorations from the left-hand sidebar and choosing Fancy Divider from the dropdown menu. 

Choose shape divider

A new dropdown menu titled Fancy Divider will appear, and now you can choose what type of shape divider you would like to use. You'll notice there are over 50 to choose from, so you're bound to find the one that best fits your design.   

Shape divider options

Step 3: Pick Your Shape Divider Color and Change the Opacity 

When you add your shape divider, it's going to be a neutral white color, so now we want to change this to fit your design vision. 

In the left-hand sidebar, you'll now see additional options for editing your shape divider, including color options. Click on the color tab and you'll be able to select the color you want. Notice as well that Thrive Architect will suggest colors based on the existing color scheme of the page. 

Choosing color and opacity

Once you have the right color, your shape divider is going to be looking great, but there's another important step - opacity. The lower the opacity, the more your shape divider will blend into the background color behind it, giving it a seamless effect.

Play around with the options and find the color and opacity that works best for you. 

Step 4: Adjust Height and Padding

You want your shape divider to make a statement but you don't want it to distract from the content itself. If you have too much overlapping and it's hurting the user experience, then you need to adjust the height of the shape divider, or the padding of the background section. 

Adjusting the height of the shape divider will simply make it smaller so it doesn't take up so much space on the page. You can do this by dragging the Height slider until you perfect your design. 

Edit shape divider height

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

Adjust background padding

You can use either of these methods, or a combination of both, to get your shape divider looking exactly how you want it. 

Step 5: Check How Your Shape Divider Looks on Mobile

Whenever you design a webpage, it's important to always think about how it looks on mobile. This is where a ton of your traffic is going to come from, so you've got to make sure your site (and shape divider) looks perfect in this format. 

Desktop view

Bad Mobile Display

In the examples above, we can see that this shape divider looks great on desktop, but it's really distracting on mobile. Luckily, Thrive Architect makes it incredibly easy to edit how your page looks on mobile. Just click the mobile icon at the bottom of the page and start editing. 

Check mobile view

With just a few tweaks to the shape divider height or the background section padding, we can make sure our fancy divider looks perfect on mobiles as well as desktops. 

Mobile shape divider example

Looks good!

Additional Tips When Using Shape Dividers

It’s very important to consider the following guidelines when using the shape dividers feature in order to avoid design disasters.

1. Images + Shape Dividers = Lousy Friends

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

It's about demanding attention. When you use a shape 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 shape divider will compete to grab the attention.

That's why in the image examples for this blog post, we used background sections with (solid) colors to illustrate how the shape dividers works.

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

2. Don’t Overuse Gradients

It's important to have a smooth transition between two background sections with the help of a shape divider.

In a nutshell, here’s the secret:

Using gradients

Gradients & Solid Colors

In the example above, the shape 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 shape divider and guarantee a good look.

Learn More About Key Web Design Principles

Designing a website or landing page can be a bit of a minefield, especially if you don't have strong technical skills. 

It's certainly not impossible though!

Tons of people create incredible web pages without coding knowledge or having taken a web design class. One thing they do, though, is stick to (consciously or subconsciously) certain key design principles. 

Before you take the next steps with your site, we recommend you check out this complete guide on 13 Fundamental Web Design Principles. It's been put together with the help of our Head of Design, and it's got some incredibly useful tips!

You're Ready to Create Amazing Shape Dividers

As you can see, adding a WordPress shape divider to your page is pretty straightforward. 

Just follow the steps and you'll have characterful, yet professional dividers that your visitors will love. 

Want even more great web design tips?

We've got you covered.

Now there's just one thing left to do!

Get Thrive Architect and start adding shape dividers to your designs. 

About the Author William P


Get In Touch
>