--- title: Divider Block description: How to use the Divider block in Ultimate Blocks to add horizontal or vertical divider lines with custom thickness, width, spacing, line type and color. url: "https://ultimateblocks.com/docs/divider-block/" updated: "2026-11-07" category: "Content & Layout Blocks" --- # Divider Block The **Divider** block in Ultimate Blocks lets you add a horizontal or vertical line to separate sections of a post or page. You control its thickness, width, spacing, line type and color. The block is free, and Ultimate Blocks Pro adds an icon in the middle (or at the side) of the divider. | **Block name in the editor** | Divider | | --- | --- | | **Plan** | Free (icon in the divider needs Pro) | | **Best for** | Separating sections in long posts, landing pages, columns and footers | | **Live demo** | [See the Divider block in action](https://ultimateblocks.com/divider-block/) | ## What you can use it for - Separate sections of a long article so readers see where a new topic starts. - Add a short, centered line under a heading as a decorative accent. - Put a vertical line between two columns. - Use a dotted or dashed line to divide content in a softer way. - Add an icon in the divider, such as a star or a leaf, to match your brand (Pro). ## How to add the Divider block 1. Open the post or page in the WordPress block editor. 2. Click the **+** (Block Inserter) button. 3. Search for **Divider** and click the block to add it. 4. A gray horizontal line appears. Use the sidebar settings below to change it. ![Add the Divider Block](https://ultimateblocks.com/wp-content/uploads/2023/05/Add-the-Divider-Block.png) **Tip:** You can turn a core Separator block into a Divider block. Select the Separator, click the block icon in the toolbar and choose **Divider**. The separator color is kept. ## Settings tab Select the block and open the block sidebar. The **Settings** tab (gear icon) has these panels: ### Line Settings - **Thickness:** how thick the line is, from 1 to 20 pixels. The default is 2. - **Height:** (horizontal divider) the empty space above and below the line, from 10 to 200 pixels. - **Width:** (horizontal divider) how wide the line is. You can use percent or pixels. The default is 100%. - **Line Height:** (vertical divider) how tall the vertical line is. The default is 300px. - **Orientation:** choose **Horizontal** or **Vertical**. - **Alignment:** place the line **Left**, **Center** or **Right**. This is useful when the width is less than 100%. ![General Settings of the Divider Block](https://ultimateblocks.com/wp-content/uploads/2023/05/General-Settings-of-the-Divider-Block.png) ![Set Alignment](https://ultimateblocks.com/wp-content/uploads/2023/05/Set-Alignment.png) ### Icon (Pro) - **Icon:** choose an icon from the icon library to show on the line. - **Alignment:** place the icon at the left, center or right of the line. - Icon size: make the icon bigger or smaller (the default is 30 pixels). ## Styles tab Switch to the **Styles** tab (half-circle icon) to change the look of the line: ### Divider - **Line type:** **solid**, **dotted** or **dashed**. ![Style the Border](https://ultimateblocks.com/wp-content/uploads/2023/05/Style-the-Border.png) ### Colors - **Line** > **Main:** the color of the line. With Pro, the divider icon uses this color too. - **Icon** > **Background** (Pro): a background color behind the divider icon, so the line does not run through it. ![Colorize the Divider](https://ultimateblocks.com/wp-content/uploads/2023/05/Colorize-the-Divider.png) ### Dimension Settings - **Padding** and **Margin:** extra space inside and around the divider. - **Icon Space** (Pro): the gap between the icon and the line on each side. ## Pro features - **Icon in the divider:** add an icon from the icon library to the line, choose its position (left, center or right) and size, give it a background color and set the space around it. The icon works with both horizontal and vertical dividers. [Get Ultimate Blocks Pro](https://ultimateblocks.com/pricing/) to unlock this feature. ## Extensions you can use with this block - [Visibility Control](https://ultimateblocks.com/docs/visibility-control/) (Pro): show the block only to certain users or on a schedule. - [Animation](https://ultimateblocks.com/docs/animation/) (Pro): animate the block when it comes into view. - [Responsive Control](https://ultimateblocks.com/docs/responsive-control/): hide the block on desktop, tablet or mobile. - [Custom CSS](https://ultimateblocks.com/docs/custom-css/): add your own CSS to this block only. - [Saved Styles](https://ultimateblocks.com/docs/how-to-save-a-style/) (Pro): save your design and reuse it on other posts. ## Frequently asked questions **How do I add a divider line in WordPress?** Add the Divider block from Ultimate Blocks, then set its Thickness, Width and Line type in the block sidebar. It works in posts, pages and any theme that supports the block editor. **Can I add a vertical divider?** Yes. Set Orientation to Vertical in the Line Settings panel and set the Line Height. It is useful between columns. **How do I change the space above and below the divider?** Use the Height setting in Line Settings. It sets the empty space above and below a horizontal line, from 10 to 200 pixels. **Can I make a dotted or dashed divider?** Yes. Open the Styles tab, go to the Divider panel and set Line type to dotted or dashed. **Can I add an icon to the divider?** Yes, with Ultimate Blocks Pro. Open the Icon panel in the Settings tab and pick an icon. You can set its position, size, background color and spacing. **Is the Divider block free?** Yes. The Divider block is part of the free Ultimate Blocks plugin. Only the icon in the divider needs Pro. ## Related docs - [Table of Contents block](https://ultimateblocks.com/docs/table-of-contents-block/) - [Heading (UB) block](https://ultimateblocks.com/docs/advanced-heading-block/) - [Icon block](https://ultimateblocks.com/docs/icon-block/) - [Styled Box block](https://ultimateblocks.com/docs/styled-box-block/) - [Ultimate Blocks Free vs Pro](https://ultimateblocks.com/docs/ultimate-blocks-free-vs-pro/)