Welcome to Day 64 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!


In this Divi Quick Tip we’re going to learn how to use CSS to achieve a wide variety of section divider styles. Changing the design of your website sections can make your website look different, stylish and unique. As you can see on this page, I’ve created fifteen different section dividers, each creating a different effect as we scroll from section to section. You are able to achieve this by using simple snippets of CSS code.

15 Fun Divi Section Divider Styles You Can Use on Your Next Project

Subscribe To Our Youtube Channel

All of these section dividers follow the same pattern for setting up. To achieve the vast majority of the styles shown here, there are three steps.

Step 1
section_settings
Locate the section you would like to add a divider style to and open up its settings. Then, click on the custom CSS tab.

Step 2
section_css
In the accompanying blog post for this video, find the css snippet for the style you’d like to achieve and paste it into the after section.

Step 3
Save and preview the page.

1. The Upwards Arrow

The-Upwards-Arrow

Within Divi’s page builder open the custom css tab in the section window preceding the section you wish to add the arrow to. In the custom css section, place the following css in the text box titled ‘After’:

display: block;
position: absolute;
content: '';
width: 100px;
height: 100px;
bottom: -50px;
left: 50%;
margin-left: -50px;
background-color: #dddddd; /** Change This Value ***/
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 1;

2. Multi Upwards Arrows

Multi Upwards Arrows

Within Divi’s page builder open the custom css tab in the section window you wish to add the arrow to. In the custom css section, place the following css in the text box titled ‘Before’:

display:block;
position:absolute;
content:'';
top: -25px;
background: inherit;
box-shadow: -50px 50px 0 #3498db, 50px -50px 0 #3498db;
left: 50%;
width: 50px;
height: 50px;
-webkit-transform: translateX(-50%) rotate(45deg);
transform: translateX(-50%) rotate(45deg);

Note: You can change the hex values on the ‘box-shadow’ line to suit your design.

3. Multi Downward Arrows

Multi Downward Arrows

Within Divi’s page builder open the custom css tab in the section window you wish to add the arrow to. In the custom css section, place the following css in the text box titled ‘After’:

display:block;
position:absolute;
content:'';
left: 50%;
width: 50px;
height: 50px;
-webkit-transform: translateX(-50%) rotate(45deg);
transform: translateX(-50%) rotate(45deg);
bottom: -25px;
z-index: 10;
background: inherit;
box-shadow: -50px 50px 0 #3498db, 50px -50px 0 #3498db;

Note: You can change the hex values on the ‘box-shadow’ line to suit your design.

4. Folded Corners

folded corner

To add the divider, open Divi’s page builder then in the the custom css tab of a section window Paste the following code in the “before” section:
display:block;

position:absolute;
content:'';
bottom: 0;
width: 100px;
height: 100px;
right: 0;
background-image: -webkit-linear-gradient(top left, #37a2ea 50%, #3498db 50%);
background-image: linear-gradient(315deg, #3498db 50%, #37a2ea 50%);

Then in the same section add this code to the “after” section:

display:block;
position:absolute;
content: '';
bottom: 0;
width: 100px;
height: 100px;
right: 100px;
background-image: -webkit-linear-gradient(top left, transparent 50%, #236fa1 50%);
background-image: linear-gradient(315deg, #236fa1 50%, transparent 50%);

You then need to change the hex values to match your site. The colors work as follows:

  • #3498db is the colour of the background being revealed
  • #37a2ea is the highlighted colour of the bit being folded
  • #236fa1 is the shadow made from the fold

5. Three Dots

Three Dots

This type of divider is a great way to break up your content without changing the background color. Implementing three dots is simple: Open the custom css tab in the section window you wish to add the dots to the bottom of. Next, In the custom css section, place the following css in the text box titled ‘Before’:

display:block;
position:absolute;
content:'';
bottom: 20px;
width: 14px;
height: 14px;
border-radius: 50%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background: #fff;
box-shadow: 30px 0 #2072a7, -30px 0 #2072a7;

6. Two Lines Divider

Two Lines Divider

Like the three dots divider, this type of divider is a great way to break up your content without changing the background color. Implementing two lines is simple: open the custom css tab in the section window you wish to add the dots to the bottom of and place the following css code in the text box titled ‘before’:

display:block;
position:absolute;
content:'';
bottom: 30px;
width: 140px;
height: 2px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background: #fff;
box-shadow: 0 30px 0 #fff;

7. The Castle Divider

castle divider

In the custom css section, place the following css in the text box titled ‘Before’ to achieve the castle shapes.

display:block;
position:absolute;
content:'';
left: 0;
width: 100%;
height: 50px;
background-size: 200px 100%;
top: 0;
background-image: -webkit-linear-gradient(40deg, #81d742 50%, #e74c3c 50%);
background-image: linear-gradient(40deg, #81d742 50%, #e74c3c 50%);

Note: You need to change the two color values in each of the last two ‘background-image’ lines of the code.

8. The Zig Zag

The Zig Zag

The zig zag divider is created in a very similar fashion to the castle divider. Paste the following css code into the custom css tab in the box titled ‘before’. or box of the section you wish the zig zag to appear above.

display:block;
position:absolute;
content:'';
left: 0;
width: 100%;
height: 50px;
background-size: 100px 100%;
top: 0;
background-image: -webkit-gradient(linear, 0 0, 10% 100%, color-stop(0.5, #1e73be), color-stop(0.5, #81d742));
background-image: linear-gradient(15deg, #1e73be 50%, #81d742 50%);

Note: You must change the hex values in each of the last two ‘background-image’ lines to your site’s colors in order to achieve the effect.

9. The Half Circle

The Half Circle

To implement the half circle paste the following code into the custom css section, place the following css in the text box titled ‘Before’.
position:absolute;
content:”;
left: 50%;
z-index: 10;
width: 100px;
height: 100px;
border-radius: 50%;
background: #dd3333;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
top: -50px;[/css]
Note: If you want to add the circle to the bottom, place the following css in the text box titled ‘After’.

10. The Top Curve

The Top Curve

If you really want to take your site to the next level then this divider is for you. Implementing the curved divider is much more complicated than the other dividers. Don’t be intimidated though, you can always reach out to me if you get stuck.
Step 1: Create a blank section, above the section you wish to add the curve to.
Step 2: Make the row a single column and insert a text module into the row. Paste the following into the module:


Step 3: You need to change the ‘Fill’ and ‘Stroke’ hex values to the background color of your target section.
Step 4: Make the row full-width, change the bottom-padding of the row, section, and module to zero.
Step 5: Enable Keep Custom Padding on mobile
Step 6: Change the background color of the section to be the same color as the section directly above this one.

11. The Bottom Curve

The Bottom Curve

Creating the bottom curve is very similar to the top curve but there are a few crucial differences:
Step 1: Create a blank section, below the section you wish to add the curve to.
Step 2: Make the row a single column and insert a text module into the row. Paste the following into the module:


Step 3: You need to change the ‘Fill’ and ‘Stroke’ hex values to the background color of your target section.
Step 4: Make the row full-width, change the top-padding of the row, section, and module to zero.
Step 5: Enable Keep Custom Padding on mobile
Step 6: Change the background color of the section to be the same color as the section directly below this one.

12. Alternating Squares

Alternating Squares

Creating the alternating square pattern is relatively easy. Simply past the following code into the ‘before’ box of the section you wish to place the divider above.

display:block;
position:absolute;
content:'';
left: 0;
width: 100%;
height: 50px;
background-size: 100px 100%;
top: 0;
background-image: -webkit-gradient(linear, 100% 0, 0 100%, color-stop(0.5, #dd3333), color-stop(0.5, #fff));
background-image: linear-gradient(to right, #dd3333 50%, #fff 50%);
-webkit-background-size: 130px 100%;
background-size: 130px 100%;

Note: To achieve the pattern, change the hex values in the ‘background-image’ lines.

13. 3D Triangle Spikes

3D Triangle Spikes

Implementing this divider is very similar to many of the preceding examples. Paste the following code in the ‘before’ box of the section you wish the divider to appear above.

display:block;
position:absolute;
content:'';
right: 0;
left: 0;
z-index: 10;
display: block;
height: 90px;
background-size: 50px 100%;
top: -90px;
background-image: -webkit-gradient(linear, 0 0, 300% 100%, color-stop(0.25, transparent), color-stop(0.25, #3498db));
background-image:
linear-gradient(315deg, #3093d5 25%, transparent 25%),
linear-gradient( 45deg, #3498db 25%, transparent 25%);
background-position: 50%;

Note: You will have to adjust the hex values in the ‘background-image’ lines to achieve the correct pattern.

14. Diagonal Line

diagonal line

The first thing you need to do is assign a unique CSS Class to the section. Open the section settings of the section you would like the shadowed diagonal line to be on top of and give it the following CSS Class: diagonal-shadow

Then go to Appearance > Divi Theme Options > Custom CSS and add this CSS:

#et-main-area { overflow: hidden;} /* Hides all the items that float over the right margin */
 
    .diagonal-shadow::before,
    .diagonal-shadow::after {
        position: absolute;
        content: '';
        pointer-events: none;}
 
    .diagonal-shadow {
        z-index: 1;
        padding-top: 6em;
        background: #2072a7;}
 
    .diagonal-shadow::before, 
        .diagonal-shadow::after {
        top: 0;
        left: -25%;
        z-index: -1;
        width: 150%;
        height: 75%;
        background: inherit;
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;}
 
    .diagonal-shadow::before {
        height: 50%;
        background: #535353;
        -webkit-transform: rotate(-3deg);
        transform: rotate(-3deg);
        -webkit-transform-origin: 3% 0;
        transform-origin: 3% 0;}

15. Rounded Split

rounded split

The first thing you need to do is assign a unique CSS Class. So, open up the settings of the section you would like to have the rounded split on top of and give it the following CSS Class: roundedsplit

Then go to Appearance > Divi Theme Options > Custom CSS and add this CSS:

/* Rounded center split and bottom rounded */
 
    .roundedsplit::before,
    .roundedsplit::after {
        position: absolute;
        content: '';
        pointer-events: none;}
 
    .roundedsplit {
        border-radius: 0 0 80px 80px;}
 
    .roundedsplit::before,
    .roundedsplit::after {
        top: -70px;
        left: 0;
        z-index: 10;
        width: 50%;
        height: 70px;
        background: inherit;}
 
    .roundedsplit::before {
        border-radius: 0 80px 0 0;}
 
    .roundedsplit::after {
        left: 50%;
        border-radius: 80px 0 0 0;}

Tomorrow: A Brand New Type of Layout Kit

Tomorrow we’ve got something special in store for you. Mario has cooked up something really unique and useful for the community: a high-fidelity wireframe kit for mocking up websites quickly and easily. See you then!

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

.divi_cta{background-color: #8f43ee; color: #fff; font-size: 20px; font-weight: bold; padding: 20px; text-align: center; display: block; text-decoration: none; border-radius: 4px;}.divi_cta:hover{text-decoration:none;background-color:#7d37d6;}.divi_cta_red{background-color:#db1c1c;}.divi_cta_red:hover{background-color:#c51a1a;}

divi-2-6-logo

Divi 100 Day 64

The Countdown To Divi 3.0

This post is part of our Divi 100 marathon. Follow along as we post free Divi resources for 100 days in a row! This 100-day countdown will end with the game-changing release of Divi 3.0, including our brand new visual editor built from the ground up using React. Divi 3.0 will change the way you build websites with the Divi Builder forever!
Let the countdown begin.

jQuery(document).ready(function(){jQuery(“#DIV_TO_PLACE_COUNTDOWN”).jCountdown({timeText:”2016/9/7 7:00:00″,timeZone:-8,style:”slide”,color:”black”,width:0,textGroupSpace:15,textSpace:0,reflection:false,reflectionOpacity:10,reflectionBlur:0,dayTextNumber:1,displayDay:true,displayHour:true,displayMinute:true,displaySecond:true,displayLabel:true});});Learn More About Divi 3.0

.section-header{width: 520px; padding: 50px 40px 20px; margin: 100px 0; text-align: center; color: #fff !important; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #6c2eb9; background-image: url(http://cdn.elegantthemes.com/blog/wp-content/uploads/2016/04/divi-100.jpg); background-repeat: no-repeat;}.section-header h2{margin-top: 0 !important; color: #fff;}.section-header strong{color:#fff;}.section-header img{margin-bottom: 10px;}.section-header:after{position: absolute; bottom: -16px; left: 50%; margin-left: -16px; width: 32px; height: 32px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); content:”; background: #6c2eb9;}.divi-demo-link{border-bottom: 4px solid #00d5b5; margin-top: 15px; border-radius: 4px; transition: all.5s ease-in-out; display: block; width: 100%; padding: 10px 0; text-transform: uppercase; font-weight: bold; text-align: center; color: #1C695D; background-color: #00efcb;}.divi-demo-link:hover{text-decoration: none; background-color: #2CFFDF;}.divi-download-link{text-align: center; font-size: 18px; border-radius: 4px; padding: 20px; color: #fff; display: block; margin: 10px 0 10px; background-color: #7e3bd0; transition: background .5s; text-decoration: none; font-weight: bold;}.divi-download-link:hover{background-color: #C04BDE;}hr{border-style: solid; margin: 0 0 40px 0; border: 1px solid #EAEBEB;}

The post 15 Fun Divi Section Divider Styles You Can Use on Your Next Project appeared first on Elegant Themes Blog.

View @ ElegantThemes

Leave a Reply