Source: https://divicake.com/blog/add-divi-section-dividers/ [Blog](https://divicake.com/blog/)/[Blogging](https://divicake.com/category/blogging/) # Adding and Styling Divi Section Dividers: Step-by-Step Tutorial By Divi Cake·13 May 2025·Updated 19 August 2026·6 min read Adding and Styling Divi Section Dividers: Step-by-Step Tutorial We may earn a commission from affiliate links in this post. [Disclosure policy](https://divicake.com/affiliate-disclosure-policy/) On this page - [Step 1: How to Access Your Page in Divi](https://divicake.com#step-1-how-to-access-your-page-in-divi) - [Step 2: Choose the Section to Add the Divider](https://divicake.com#step-2-choose-the-section-to-add-the-divider) - [Step 3: Accessing Divider Settings in a Divi Section](https://divicake.com#step-3-accessing-divider-settings-in-a-divi-section) - [Step 4: Choose Divider Placement and Style in Divi](https://divicake.com#step-4-choose-divider-placement-and-style-in-divi) - [Add a Divider to the Bottom of the Section](https://divicake.com#add-a-divider-to-the-bottom-of-the-section) - [Preview Your Divider Style](https://divicake.com#preview-your-divider-style) - [Bottom Section Divider Design in Divi](https://divicake.com#bottom-section-divider-design-in-divi) - [Top Section Divider Design in Divi](https://divicake.com#top-section-divider-design-in-divi) - [Step 5: Customize the Divider Color in Divi](https://divicake.com#step-5-customize-the-divider-color-in-divi) - [Step 6: Adjust Divider Height and Flip Settings in Divi](https://divicake.com#step-6-adjust-divider-height-and-flip-settings-in-divi) - [Final Result](https://divicake.com#final-result) - [Conclusion](https://divicake.com#conclusion) Want to give your [Divi](https://divicake.com/go/divi/) website a modern and creative touch? Adding a stylish Divider to your Divi sections is one of the easiest and most effective ways to make your layout visually appealing and unique. Whether you’re working on a landing page, homepage, about section, or service area, Divi’s built-in Divider settings allow you to add eye-catching shapes, custom colors, and elegant effects all without touching a single line of code. In this step-by-step guide, we’ll walk you through the entire process of adding a Divider to the top and bottom of a section using the [Divi Visual Builder](https://divicake.com/blog/getting-started-with-divi-using-the-divi-builder/). It’s super simple, beginner-friendly, and by the end of this tutorial, your page will look more polished, professional, and engaging — all with just a few easy clicks. ## Step 1: How to Access Your Page in Divi Before we jump into adding a Divider to a section in the [Divi theme](https://divicake.com/blog/what-is-divi-wordpress/), let’s first make sure you’re on the right page. You’ll need to open the specific page where you want to place the Divider. #### Steps to Open Your Page in Divi: - From your WordPress dashboard, click on Pages. - Next, click on All Pages to view a list of your existing pages. - Find the page you want to edit, and click on Edit with Divi. Accessing a WordPress page from the dashboard and launching Divi Visual Builder to edit and add section dividers for custom page design and layout enhancements. ## Step 2: Choose the Section to Add the Divider Now that you’re on the right page, the next step is to pick the section where you want the Divider to appear. This is important because Divi lets you customize each section individually. In the screen below, we’ve already selected the section where I’m planning to add the Divider. You can do the same by hovering over the section and making sure it’s the one you want to update. Choosing a specific section in Divi Visual Builder to add a customized divider, allowing individual section styling and layout control for a personalized WordPress design. Read More: [Getting Started with Divi: Theme Options – General Tab](https://divicake.com/blog/getting-started-with-divi-theme-options-general-tab/) ## Step 3: Accessing Divider Settings in a Divi Section Alright, now that you’ve picked the section, let’s go ahead and add the Divider to it and the Divider option is found in the Design tab. #### Here’s how you can do it: - Click on the Settings icon (gear icon) of the section you selected. - Switch over to the Design tab. - Scroll down and click on Dividers. Opening section settings in Divi and navigating to the Design tab to add a stylish divider for enhancing layout appearance and improving WordPress page styling. ## Step 4: Choose Divider Placement and Style in Divi Once the Divider settings panel opens, you’ll notice two buttons at the top: Top and Bottom. These let you decide where you want to place the Divider — either at the top or bottom of your section. Divi Divider settings panel showing Top and Bottom buttons to choose the divider placement location within a section layout. ### Add a Divider to the Bottom of the Section For this tutorial, we’ll start by adding the Divider to the bottom of the section first. #### Follow these steps: - Click on the Bottom button to place your Divider at the bottom of the section. - Click on the Divider styles (as shown in the screenshot below). - Choose the Shape that you like best Divi offers plenty of stylish options! Choosing the bottom placement for a section divider in Divi and selecting a stylish shape from the available design options to enhance WordPress page layout. ### Preview Your Divider Style Once you [select a Divider shape](https://divicake.com/blog/shape-dividers-in-divi/), you’ll instantly see the bottom border of your section transform into that style and honestly, it looks pretty awesome! Divi applies the design in real-time, so you can check out how it looks right away (just like in the screenshot below). This makes it super easy to try different shapes until you find the one that fits your page perfectly. Real-time visual preview of a chosen bottom divider shape applied to a Divi section, enhancing the border design and helping customize WordPress page layout instantly. ### Bottom Section Divider Design in Divi We’ve decided to go with this Divider style for the bottom border, as shown in the screenshot below. But remember, the choice is totally up to you. Divi, the [WordPress](https://divicake.com/blog/wordpress-tutorial/) theme gives you a bunch of options and stylish shapes to choose from, so feel free to play around until you find the one that fits your design the best. Selected bottom border divider style applied to a Divi section, showing a polished and modern layout with customizable shape options for WordPress page design. ### Top Section Divider Design in Divi Now let’s take it a step further and add a Divider to the top of the section. This helps balance your design and gives the section a more polished look. #### Here’s how to do it: - Click on the Top button in the Divider settings panel. - Just like before, choose the shape from the options available (see the example below). Selecting the top placement for a divider in a Divi section to enhance layout symmetry, with customizable shapes for creating a balanced and professional WordPress design. ## Step 5: Customize the Divider Color in Divi Make your Divider more customised, You can easily change its color to match your site’s style. Just scroll down in the Divider settings panel and you’ll find the color options. #### To change the color: - Click on the Color option under the Divider settings. - Pick any color you like in our example, I selected red, just to show you how it works. Customizing the divider color in Divi’s section settings to match website design, with the option to choose transparent or vibrant colors like red for styling WordPress pages. Learn More: [A Look at Divi’s New Global Color System](https://divicake.com/blog/a-look-at-divis-new-global-color-system/) ## Step 6: Adjust Divider Height and Flip Settings in Divi Now let’s fine-tune your Divider to get the look just right. In the same Divider settings panel, if you scroll down a bit more, you’ll see options like Height, Horizontal Repeat, and Flip settings. #### Follow these steps to customize the Divider: - Set the Divider Height to 159px if you want to match the design I’m using or choose a height that suits your layout. - Adjust the Horizontal Repeat to 11x to stretch the shape nicely across the section. - Use the Horizontal Flip toggle if you want to reverse the shape. - You can also enable Vertical Flip to flip the Divider upside down. - Once everything looks perfect, click the green checkmark to save your changes. Fine-tuning the divider height, horizontal repeat, and flip settings in Divi to customize the section divider’s appearance and create a unique WordPress design layout. ## Final Result In the screenshot below, you can see how the Divider looks on both the top and bottom of the section. It really adds a clean and modern touch to your page design. Completed Divi section design with customized top and bottom dividers, enhancing the layout with a modern, clean look and fully customizable options for WordPress pages. ## Conclusion And that’s it! With just a few easy-to-follow steps, you’ve learned how to add stylish top and bottom dividers to your [Divi](https://divicake.com/go/divi/) sections using nothing more than Divi’s built-in settings. From selecting the right shape to customizing the color, height, and flip options, Divi gives you full creative control without the need to touch a single line of code. These small design elements may seem simple, but they can make a big difference in the overall look and feel of your website. Adding dividers is a smart way to break up content, create visual interest, and guide your visitors through your page more smoothly. Whether you’re a beginner learning the ropes or a seasoned Divi user polishing up your layout, experimenting with dividers is a great way to give your site a fresh and professional touch. If this tutorial helped you, be sure to check out more of our Divi tips and tricks to take your WordPress design skills even further! Learn More: [WordPress with Divi: The Perfect Website Combination](https://divicake.com/blog/wordpress-divi-perfect-website-combination/) ## Written by Divi Cake Divi 5 tutorials, layouts and fixes from the team that builds Divi sites every week. - [About Divi Cake](https://divicake.com/about/) ## Get the Divi Cake newsletter New Divi tutorials and Divi Cake product news, by email. First name (optional)Email Company website SubscribeSubscribeSubscribe Unsubscribe any time. [Privacy policy](https://divicake.com/privacy/) The sign-up form needs JavaScript for its spam check. Almost done. Click the link in the email we just sent to confirm your subscription. If you are already subscribed, there is nothing more to do. ## Submit a comment Comments are read before they appear. Your email is not published. Comment NameEmail Company website Submit commentSubmit commentSubmit comment The comment form needs JavaScript for its spam check. Thanks. Your comment is waiting for review and will appear here once it is approved. ## Do you need help with … - [Divi 5 migration](https://divicake.com/divi-4-to-divi-5-migration/) - [Divi websites](https://divicake.com/divi-website-development/) - [Divi plugins](https://divicake.com/divi-plugin-development/) - [Fix a site](https://divicake.com/fix-existing-site/) - [Beyond Divi](https://divicake.com/beyond-divi/) - [Technical SEO](https://divicake.com/technical-seo/) - [SEO content](https://divicake.com/seo-content/) ## Newsletter New Divi tutorials and Divi Cake product news, by email. First name (optional)Email Company website SubscribeSubscribeSubscribe Unsubscribe any time. [Privacy policy](https://divicake.com/privacy/) The sign-up form needs JavaScript for its spam check. Almost done. Click the link in the email we just sent to confirm your subscription. If you are already subscribed, there is nothing more to do. ## Save Annually on Divi [Save 69% on Divi VIP](https://divicake.com/go/divi-vip/)[Save 69% on Divi Cloud](https://divicake.com/go/divi-cloud/)[Save 69%, Divi Team](https://divicake.com/go/divi-teams/) ## WordPress Hosting & Tools [100% off on Kinsta for 1 Month](https://divicake.com/go/kinsta/)[Get up to 62% off Bluehost hosting.](https://divicake.com/go/wordpress-hosting-blue-host/)[Save Up to 15% on Rank Math](https://divicake.com/go/rank-math/)[Get 50% OFF on all WPForms plans](https://divicake.com/go/wpforms/) ## More in Blogging [ How to make money with Divi Blogging10 min read ### How to Make Money with Divi Nine ways to earn an income with Divi — affiliate marketing, services, digital products, courses, memberships, sponsored posts and ads — and what your site needs before any of them work. 15 October 2026](https://divicake.com/blog/make-money-with-divi/) [ Customizing Divi for advanced WordPress development projects Blogging4 min read ### Customizing Divi for Advanced WordPress Development Projects Seven ways to take Divi past its stock settings on an advanced build: custom CSS and JavaScript, child themes, integrations, hooks and filters, and performance work. 11 October 2026](https://divicake.com/blog/customizing-divi/) [ Selling Divi websites and child themes Blogging10 min read ### How to Make Money Selling Divi Websites and Child Themes How to earn from Divi three ways: building sites for clients, selling finished websites through a brokerage or marketplace, and packaging child themes for sale. 29 September 2026](https://divicake.com/blog/selling-divi-websites-and-child-themes/)