July Special Offer! Get UP TO 40% OFF - Limited Time Only!

How to Create Section Dividers for WordPress Websites

create fancy section dividers

Table of Contents

Wanted to add a section divider to your WordPress website?

Section dividers help create clean, crisp, and professional-looking web page designs. If you tend to publish long posts/pages, section dividers let you break your long pages and posts into smaller sections, making it easier for your readers to navigate through web page content.

In this article, we’ll show you how to add fancy dividers without any code.

Add Fancy Section Dividers to Your WordPress Websites Using Elementor & PowerPack Addons

Section dividers are often called shape dividers in WordPress. And as the name says, these shape dividers let you add various types of interactive shape dividers between your page sections.

However, in order to create dividers that perfectly match your existing page design requires prior design and coding knowledge.

If you’ve got a WordPress website built with the Elementor page builder, adding section dividers to your website is relatively easy!

Today we’ll see how you can add fancy section dividers to your websites using Elementor and the Divider widget by PowerPack Addons.

PowerPack Addons is one of the best addons for Elementor available in the market. You can enhance the built-in functionality of Elementor and create your dream websites using PowerPack 80+ creative widgets and powerful extensions.

Using the Divider widget of PowerPack, you can add creative and fancy dividers to your web pages – without spending any penny.

So without any further ado, let’s see how you can creatively fill the blank spaces between your page sections.

Before starting, ensure you have installed and activated Elementor and PowerPack Addons on your websites.

Step 1: Open the Page in Elementor Editor

First, create a new page or open an existing page using the Elementor editor.

Step 2: Drag and drop the Divider widget 

Next, drag and drop the Divider widget on your page section. Make sure to check the “PP” icon on the top left corner of the widget.

elementor divider widget

Step 3: Choose Your Divider Type

Like every PowerPack widget, the Divider widget also consists of 3 tabs.

Content, Style, and Advanced tab.

divider widget options

In the Content tab, you’ll find an option to choose the Divider type for your page.

With the PowerPack Divider widget, you can add:

  1. Plain Divider
  2. Divider with custom text
  3. Divider with custom image
  4. Divider with icon

Plain Divider 

If you choose the Plain Divider option, further you get options to:

  • Select the Direction of the divider. You can either create Horizontal Divider or Vertical Divider as per your preference.
  • Set the alignment of the divider to be Left, Center or Right.
divider widget for elementor

Divider with Custom Text

If you don’t want to add simple-looking plain dividers, you can also add a divider with custom text.

elementor divider with text

Divider with Icon

Want to go more creative with dividers? Create a stylish icon divider to enhance the look of your web page.

divider with icon

Divider with Custom Image

Last but not least, the PowerPack Divider widget lets you use a custom image with a divider.

divider with image

As you can see, the PowerPack Divider widget’s Content Tab options are straightforward. Next, move to the Style tab for divider customization options.

Step 4: Style Your Page Divider

In the Style tab, you get an option to choose the Divider style. You get four different divider style options:

  • Solid Divider Style
  • Dashed Divider Style
  • Dotted Divider Style
  • Double Divider Style
elementor divider types

You can mix and match Divider Type and Divider Style to create some beautiful divider designs. For instance, you can create a:

Solid Divider with Custom Text

divider with custom text


Dashed Divider with Custom Image

dashed divider with custom image

Double Divider with Icon

divider with icon

Other divider styling options depend on the divider type you chose in the Content tab.

For example, if you choose the Plain Divider type, you can style it by adjusting the divider’s Height, Width, and Color.

If you create a divider with a custom text, you can customize the text by changing its font, size, color, and more.

The icon divider type allows you to adjust the icon’s alignment to be left, center or right.

And if you uploaded a custom image, you get options to choose the ideal size of the image wrt to divider style.

And that’s it! This is how you can create fancy section dividers for your WordPress sites using Elementor and PowerPack.

Next, Add a Custom Cursor in WordPress With Elementor

PowerPack Addons is your one-stop solution for creating creative websites using Elementor. With its Lite version, you get features to build basic functioning websites. To add more innovative and advanced features to your WordPress sites, subscribe to PowerPack Pro.

Next, if you get bored with the default mouse cursor, and looking for a simple way to customize the cursor on your web pages, check out our article on how to add a custom cursor in WordPress with Elementor.

We hope this tutorial will help you create interactive and beautiful dividers on your website.

Click here to get the PowerPack Author List Widget for the Elementor page builder.

Also, join us on Twitter, Facebook, and YouTube.

Liked this Article? Join 5000+ Subscribers

Get latest Elementor updates, tutorials, and freebies in your inbox.
No Spam Guaranteed.
Editorial Team

Editorial Team

Leave a Comment

Get 70+ Elementor Widgets with PowerPack Addons for Elementor

Download PowerPack Free

Subscribe to receive latest updates, announcements, offers, deals & discounts.