How to Create a Custom Shape Divider in WordPress (2 Ways)

Shape dividers are graphical elements you can add between sections of content to visually separates them with shapes like waves, triangles, circles, zig zags and more.

Implemented well, they not only look modern and stylish, but also improve user experience by organizing information into clear, digestible blocks.

In this comprehensive guide, we’ll explore:

• The types of shape dividers available
• Design principles for effective use
• Specific use case examples
• Two easy ways to add them in WordPress
• Customization and implementation tips

Let’s dive in!

The Different Types of Shape Dividers

Shape dividers come in different styles, angles and designs. Some common types include:

Waves: flowing curved shape

Triangles: pointing up or down

Circles: oval speech bubble style

Diagonal: slanted angle

Zig Zag: fragmented pyramid style

Abstract: irregular polygon and blob shapes

This covers some of the most popular options, but there are many more variations and styles available as well.

Now let’s see how they can be used effectively…

Design Principles for Shape Dividers

Applying basic design principles to your use of shape dividers helps ensure they work well:

Contrast

The divider itself should contrast the background color. A light shape on dark background, or vice versa works best.

Repetition

Use the same style divider in multiple places to visually tie different sections together.

Alignment

Keep dividers aligned and straight in line with other page elements.

Proximity

Place dividers closest to sections they are meant to separate for clear organization.

With these principles in mind, let’s look at some examples…

Use Case Examples for Shape Dividers

Some effective ways to use shape dividers on WordPress sites include:

Above Blog Post Titles
Add a wave divider above titles for an eye-catching effect:

Contact Page Forms
Set forms apart with an angled zig zag divider:

Between Pricing Tables
Separate pricing tiers cleanly with a diagonal shape:

And many other placements to visually organize sections of content!

Now let‘s see two great ways to implement them…

Method 1: Default WordPress Block

The simplest option is using WordPress’ built-in Separator block:

Pros

• No plugins required
• Simple horizontal divider option
• Color, width and style control

Cons

• Very limited shape styles
• Less customization

To add:

1. Open the post/page editor
2. Click + button to add a new block
3. Search “separator” and insert the block
4. Customize settings as needed

While easy to use, for more control let‘s look at plugin options…

Method 2: SeedProd Plugin (Recommended)

For greater shape variety and customization, using SeedProd is best:

Pros

• 180+ shape divider designs
• Height, width, offsets
• Color, flip and position control

Cons

• Must install plugin

To add with SeedProd:

1. Install and activate plugin
2. Create new page
3. Select block with divider
4. Open advanced tab to customize

You can add multiple dividers and fine tune each with exact sizing and color:

For consistency, SeedProd also allows site-wide implementation…

Adding Dividers Sitewide

Using SeedProd’s custom theme builder, shape dividers can be added globally across your WordPress site.

To make your shape dividers consistent on all pages:

1. Navigate to SeedProd Theme Builder
2. Select Global Theme Settings
3. Choose layout blocks with dividers built-in
4. Activate generated theme

This will apply chosen shape dividers on every page using your custom theme‘s layout.

Shape Divider Tips & Best Practices

Here are some professional tips for making the most of shape dividers:

• Use angles and pointed shapes to direct attention
• Softer curves transition smoothly between sections
• Watch contrast levels with bright backgrounds
• Consistent use ties coherent visual theme
• Avoid placing too close to other elements
• Be purposeful, don’t overuse on one page

In my experience, subtle divider use with strong alignment to content creates the best outcome.

I hope you found this guide helpful for adding and customizing shape dividers in WordPress. Let me know if you have any other questions!