Back To Blog

WordPress Shape Divider: Master the Art of Separating sections

WordPress Shape Divider

Are you trying to make a better web page to advertise or showcase your content, services, and products? One such thing that may be handy is an element offered by PostX – Shape Divider.

Shape Divider is a design element or tool to create visually appealing and dynamic section dividers on web pages. It allows you to add unique shapes, patterns, or lines that separate different content sections, giving your website a more engaging and modern look.

But how to separate sections using a shape divider?

  • Well, first, create a page and add the Row block.
  • Then from the setting, select “Shape Divider.”
  • Add shape style to the top/bottom. 
  • Finally, you can add color, flip it, or adjust the width and height. 

It’s just the summary. You can do different things using shapes, and in this article, we’ve properly explained how to use a WordPress shape divider. So, keep on reading. 

How to Use a WordPress Shape Divider?

Now it’s time to explain a step-by-step guide on using Shape Divider. PostX offers multifunctional website section dividers. So if you aren’t using PostX, install and activate the PostX. 

πŸ‘‰ Get PostX Pro to unlock all exciting features and make amazing Websites

Step 1: Login and Create a Post/Page

First, Log in to your WordPress dashboard and then look for the “+ New” button at the top. Now hover the cursor there and, according to your preference, add a Post or Page.

add new page
add new page

Step 2: Add the Row-Column Block

Now click the “+” button, and a search box will appear to add a block. Then in the search box, type “Row,” and you’ll see the row-column block icon. Consider the following image if you need clarification.

add row column block
add row column block

Step 3: Choose Any Template

Now you’ll be asked to choose any layout. There are 10 preset layouts. Choose any of them as your preference. I am going with the 70:30 layout.

choose any layout
choose any layout

Step 4: Select the Shape Divider Setting

After creating the layout, you’ll find different options to customize the row in the setting. One of the options you’ll find is “Shape Divider.” Check the image to find it more easily. 

open shape divider option
open shape divider option

Step 5: Explore the Shape Divider Settings

Now we’re into the main segment. After selecting the “Shape Divider” button, you’ll find different setting options under it.

explore shape divider setting
explore shape divider setting

According to the image, we can see there are 9 initial customizable fields available. Now let’s have some ideas about the main functions. 

1. Position and Type

In the very first setting, you’ll have to select the position. There are 2 options for you. You can select the top, bottom, or both. Let’s start with the top position. After that, you’ll have to select the type. There are 8 preset shapes available. 

types of shape dividers
types of shape dividers

You can pick any one of them to design your page. Let’s explore a few of them. 

If you pick the 1st preset, it’ll appear as:

1st preset
1st preset

If you select the 3rd preset, it’ll appear as:

3rd preset
3rd preset

And if you select the last pre-set it’ll appear as:

last preset
last preset

2. Color

The next and other important function is the color setting. You can change the color of the shape according to personal preferences. Luckily there are options to select both the “Solid and Gradient. “Let’s see an example.

You’ll find different solid color options when you pick the “Solid” color setting. Pick any of them. Or, you can click the color picker (the brush icon) to open the color palette and choose your desired colors. Let’s go with the blue color and see how it appears:

choose desired color
choose desired color

Now, let’s go with the Gradient setting, and like the previous one, you’ll find some gradient colors. I’ve selected the “Juicy Cake” color, and here’s how it appears:

gradient color
gradient color

3. Width and Height

The next options you’ll find are width and height. You can easily change the width and height according to your wish. For example, let’s keep the “width 100 and height 500” and see how the shape appears –

adjust width and height
adjust width and height

4. Flip, Bring to front, and Offset

There are 3 more settings left that are specially used for further customization. Let’s explore a bit about them.

There is an option called “flip.”, By default, it is disabled. If you enable it, the shape will flip its position. Here’s how it’ll appear.

flip the shape divider
flip the shape divider

The next option is “bring to front.” The function of this setting is if any block overlaps the shape, you can select whether the shape will be upfront or the block. By default, the option is disabled, which means if you add any block, it’ll appear in front of the shape.

 

disable bring to front option
disable bring to front option

But if you want the shape to be brought to the front, enable the option. Let’s see how it looks, then. 

enable bring to front option
enable bring to front option

That’s everything about the dividers. I think by now you have understood the functionalities of it. However, to give you a better idea, let’s create a project together using Shape Divider by PostX.

Practical Use of Shape Divider 

As you’ve already understood the process of using a shape divider, this time, we’ll go straightforwardly and guide you to create any project using the Shape Divider powered by PostX.

Step 1: Create a Row Blok and Add Choose a 70:30 Layout

In the previous section about “How to use a shape divider?” we’ve shown how to add the PostX row block and select a layout. Just follow steps 1, 2, and 3 of the “How to use a shape divider?” section, and this step will be done.

Step 2: Select the Heading Button

Now click on the first block and add the “Heading” block of PostX. In the heading, we will add something related to a Gym in Miami.

add heading block
add heading block

Step 3: Add Paragraph and Button Under Heading 

Now under the heading, we’re adding a paragraph button to write something exciting about the gym to attract people.

add paragraph block
add paragraph block

Now add a button under the heading. For that, search for a button and add it.

add button block
add button block

Now, design it with a particular color and text. Let’s check what we did. 

Step 4: Add Image

Now on the empty block on the right side, we’ll add a catchy gym image to make it look professional. 

add image
add image

Step 5: Add Shape Divider and Design it

Finally, add the shape divider following the steps I’ve given below. Here we will add the shape divider for both the top and bottom parts and use gradient colors. Let’s see the final version. 

final output
final output

Final Words

That’s everything about Shape Divider. Shape Dividers offer a range of customizable options, such as selecting different shapes, adjusting their size and position, and choosing colors or gradients to match your website’s aesthetic. 

By adding Shape Dividers to your WordPress site, you can enhance its visual appeal, create a sense of originality, and make your content stand out with creative and captivating section divisions.

So, we think you’re now clear on everything about the element shape divider. 

πŸ‘‰ Get PostX Pro to unlock all exciting features and make amazing Websites

Like this article? Spread the word

Written byWPXPO

We are a group of WordPress professionals. We enjoy it's playing around and crafted WordPress Plugins & Themes.

Leave a Reply