How to design beautiful separator in the Divi

Mar 26, 2020 | Divi Resources

How to design beautiful separator in the Divi theme

With the Divi theme, you get multiple features and customization options that you can apply to your website. It provides you a hand full of modules that takes designing a website to a whole new level. And the Divider module available inside the Divi module library is one of them. It gives users the ability to add a horizontal line among various sections of a page. Plus, a couple of designing options, which makes it useful.

But to get the best out of it or if you want to make the divider look more beautiful & attractive, then you have to write custom CSS and do some extra work. And it could be a time taking task if you’re new to designing.

Therefore, in this blog post, we’re going to look at a new module called Separator, which is part of the plugin Divi Plus. It’s a powerful multipurpose plugin with multiple Divi modules. This plugin allows the users to create Divi breadcrumbs, heading text, fancy text, and before and after slider.

Now, let’s create some appealing separators.

Steps to create beautiful Divi separators

To create unique separators on your Divi based website, you need to purchase the plugin Divi Plus here. Once purchased, download and install the plugin into your WordPress site. Also, don’t forget to activate the plugin. Once all done what mentioned, you’re good to create the Divi separators or dividers.

Step 1: Add the separator module to a page

After successfully installing and activating the plugin, create a new page, or edit the existing one, where you want to add separators. Choose “Build On The Front End,” and then build from scratch.

Build from scratch in Divi

Once the builder loads, add a new row and then from Divi modules library add DP Separator module.

Divi Plus separator module

Now, move on to the next step, which is choosing separator styles and content.

Step 2: Select separator content

Inside the content menu of the Divi Plus Separator module, you get the option to choose separator types. There are a total of 2 separator types at the moment, Line and Shadow.

Divi separator type

If you choose line type, then you get the option to select line style from a total of 8 line styles available.

Select line style option

Moreover, the line style gives you the option to use it with text or an icon.

Divi line style options

Step 3: Customize separator style

Once you’ve selected the line type and styles, you’re ready to customize the separator in the design menu.

Separator Styling

Inside the design menu, you can customize the separator style. This feature allows users to change the thickness and color of the separator.

Separator styling option

Text Styling

If you’ve chosen the separator with text, then the Text Styling option gives you the ability to customize the text elements, such as font, alignment, size, color & more.

Divi separator text styling option

Icon Styling

When you choose separator with icon, then DP Separator gives you an abundance of options to customize the separator icon.

Divi separator icon styling option

More features, or we can say options available to customize the icon if you want to apply. Such as icon font size, icon shape, background, and border.

Divi separator icon styling more options

There are a total of 3 available icon shapes to choose from that are Square, Circle, and Hexagon.

Divi Plus separator icon styling option

You can also apply shape background, shape border, and color.

Divi divider examples created using separator module

Below are some of the Divi divider examples created using the separator module of the Divi Plus plugin.

Divi divider made using 8 separator line styles

Divi divider made using 8 separator line styles

Separator line with text

Separator Line With Text

Divi divider example with positioned icon, and icon shape with color

Divi divider example with positioned icon, and icon shape with color.

Summary

In this blog post, I’ve shown you all the features of the Separator module comes with Divi Plus. And what’s possible to design using this module. Therefore, if you want to create awesome separators for your website, then go and purchase the plugin Divi Plus. And for your good, I want to remind you again that this plugin got multiple modules that are very useful. So, don’t wait and try the plugin now.

If you’ve already tried this module or Divi Plus plugin, then let us know what you think about it in the comments.

Posted By:
Vishvendra
Vishvendra believes in the keep learning process and applying those learnings into work. Other than technical writing, he likes to write fiction, non-fiction, songs, and comic ideas. He loves what he writes and writes what he loves. Search his name with "Nathawat," and you'll easily find him over the internet.

1 Comment

  1. mejores

    Awesome tutorial, just I was looking for 🙂

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

1 Comment

  1. mejores

    Awesome tutorial, just I was looking for 🙂

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

How to Start Your Fashion Blog with Divi and WordPress

How to Start Your Fashion Blog with Divi and WordPress

Creating a fashion blog allows you to express your passion for style and initiate passive income. Fashion bloggers can earn from $10,000 to $50,000 monthly. Many fashion enthusiasts boost their revenue by collaborating with affiliate marketing programs, sponsoring...

Internal Linking and SEO: Plus, How to Develop a Strategy for Your Blog

Internal Linking and SEO: Plus, How to Develop a Strategy for Your Blog

Internal links seem quite a petty website tool, but they are one of the most crucial SEO strategies, and unfortunately, they are underrated. Do you know about 100% of local business owners say that link building is one of the most effective strategies to boost local...

Divi WooCommerce Extended