How to add a divider or separator in a WordPress website using Elementor

There are two ways to add a divider or separator in a WordPress website using Elementor:

Method 1: Using the Divider Widget

1. Go to the Elementor editor and create a new section.
2. From the left-hand side menu, drag and drop the Divider widget into the section.
3. In the Divider widget settings, customize the following options:
   • Width: Set the width of the divider.
   • Height: Set the height of the divider.
   • Border: Set the border style, color, and width of the divider.
   • Background: Set the background color of the divider.
   • Padding: Set the padding of the divider.
   • Margin: Set the margin of the divider.

Method 2: Using the Spacer Widget

1. Go to the Elementor editor and create a new section.
2. From the left-hand side menu, drag and drop the Spacer widget into the section.
3. In the Spacer widget settings, set the height of the spacer to the desired height of the divider.
4. In the Advanced tab, set the left and right margins of the spacer to 50%.

Additional Tips

• You can add an icon or text to the divider by using the Divider widget.
• You can add multiple dividers to a section by dragging and dropping additional Divider widgets into the section.
• You can change the position of the divider by dragging and dropping it within the section.
• You can style the divider using CSS.

How to add a divider or separator in a WordPress website using Classic editor

There are two ways to add a divider or separator in a WordPress website using the Classic editor:

Method 1: Using the Horizontal Line button

1. Go to the WordPress dashboard and click on Posts.
2. Click on the title of the post or page where you want to add the divider.
3. In the editor, click on the Horizontal Line button in the toolbar.
4. The divider will be added to your post or page.

Method 2: Using the HTML tag

1. Go to the WordPress dashboard and click on Posts.
2. Click on the title of the post or page where you want to add the divider.
3. In the editor, switch to the Text editor.
4. In the text editor, add the following code:

Code snippet

<hr />

Use code with caution. Learn morecontent_copy

5. Click on the Update button to save your changes.

The divider will be added to your post or page.

Here are some additional things to keep in mind when adding dividers to your WordPress website:

• You can change the style of the divider by using different HTML attributes, such as color, width, and height.
• You can also add text to the divider by adding it between the opening and closing hr tags.
• You can add multiple dividers to your post or page.
• You can also add dividers to your WordPress theme’s templates.

How to add a divider or separator in a WordPress website using Gutenburg editor

To add a divider or separator in a WordPress website using the Gutenberg editor, follow these steps:

1. Go to your WordPress dashboard and click on the “Posts” or “Pages” tab.
2. Click on the “Edit” button next to the post or page you want to add the divider to.
3. In the editor, click on the “+” icon to add a new block.
4. Search for “separator” and select the “Separator” block.
5. The separator will be added to your post or page. You can customize the style of the separator by clicking on the “Block” settings icon.
6. Once you’re happy with the look of the separator, click on the “Publish” button to save your changes.

Here are some additional tips for adding dividers or separators in WordPress:

• You can add multiple dividers to your post or page.
• You can change the style of the divider, such as the color, thickness, and height.
• You can add text or images to the divider.
• You can use dividers to break up your content and make it more visually appealing.

Here are some examples of how you can use dividers in your WordPress website:

• You can use dividers to separate sections of content, such as an introduction, body, and conclusion.
• You can use dividers to highlight important information, such as a call to action or a disclaimer.
• You can use dividers to create a more visually appealing layout for your website.

How to add a divider or separator in a WordPress website using WPBakery Page Builder

To add a divider or separator in a WordPress website using the Gutenberg editor, follow these steps:

1. Go to your WordPress dashboard and click on the “Posts” or “Pages” tab.
2. Click on the “Edit” button next to the post or page you want to add the divider to.
3. In the editor, click on the “+” icon to add a new block.
4. Search for “separator” and select the “Separator” block.
5. The separator will be added to your post or page. You can customize the style of the separator by clicking on the “Block” settings icon.
6. Once you’re happy with the look of the separator, click on the “Publish” button to save your changes.

Here are some additional tips for adding dividers or separators in WordPress:

• You can add multiple dividers to your post or page.
• You can change the style of the divider, such as the color, thickness, and height.
• You can add text or images to the divider.
• You can use dividers to break up your content and make it more visually appealing.

Here are some examples of how you can use dividers in your WordPress website:

• You can use dividers to separate sections of content, such as an introduction, body, and conclusion.
• You can use dividers to highlight important information, such as a call to action or a disclaimer.
• You can use dividers to create a more visually appealing layout for your website.

I hope this helps!