Divi Help

Tips and Tutes For Beginners and DIY’ers

Triangle Sections For Divi

In this weeks tutorial, we are going to take a step back from some of the super fancy stuff we have done the past couple of weeks and show you how to create triangle sections for DiviĀ using some very basic CSS (still utilizing copy and paste) that when used properly, can add some cool flair to your web sites. What we are about to show you is by no means something new, and has been around for awhile, but we feel this method makes it easier to add to most Divi modules as well as make it available site wide.

If you have any problems after going through this tutorial, please leave a comment at the end of this tutorial, and we’ll assist you. But if you ask for assistance, please make sure you have both the code we are proposing in this tutorial in place as well as a live site URL for us to help troubleshoot the problem(s).

Let’s get started!!!

STEP 1

We will start by copying the main CSS code below and pasting it in the custom CSS dialog box Divi -> Theme options (access that by clicking on the left hand WordPress menu, and then scroll all the way to the bottom of the page.) You can also add it to your style.css under Appearance -> editor, but only do so if you have a child theme in place to prevent the CSS from being overwritten from any Divi updates.

triangle sections for Divi
triangle sections for Divi
/* Begin Dropdown Arrows */


/** Up arrow **/

  .dd-up::before {
    position: absolute;
    content: '';
    pointer-events: none;
    left: 50%;
    width: 50px;
    height: 50px;
    -webkit-transform: translateX(-50%) rotate(45deg);
    transform: translateX(-50%) rotate(45deg);
  }

  .dd-up {
    position: relative;
    height: 325px;
  }

  .dd-up::after {
    top: -20px;
    z-index: 10;
    background: inherit;
    position: absolute;
    content: '';
    pointer-events: none;
    left: 50%;
    width: 50px;
    height: 50px;
    -webkit-transform: translateX(-50%) rotate(45deg);
    transform: translateX(-50%) rotate(45deg);
    top: -20px;
    z-index: 10;
    background: inherit;
  }

/** Down arrow **/

  .dd-down::before {
    position: absolute; content: '';
    pointer-events: none;
    left: 50%;
    width: 50px;
    height: 50px;
    -webkit-transform: translateX(-50%) rotate(45deg);
    transform: translateX(-50%) rotate(45deg);
  }

  .dd-down {
    position: relative;
    height: 325px;
   
  }

  .dd-down::after {
    bottom: -20px;
    z-index: 10;
    background: inherit;
    position: absolute;
    content: '';
    pointer-events: none;
    left: 50%;
    width: 50px;
    height: 50px;
    -webkit-transform: translateX(-50%) rotate(45deg);
    transform: translateX(-50%) rotate(45deg);
    bottom: -20px;
    z-index: 10;
    background: inherit;
  }


/** Left arrow **/

  .dd-left::before {
    position: absolute;
    content: '';
    pointer-events: none;
    bottom: 50%;
    width: 50px;
    height: 50px;
    -webkit-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
  }

  .dd-left {
    position: relative;
    height: 325px;
  }

  .dd-left::after {
    left: -20px;
    z-index: 10;
    background: inherit;
    position: absolute;
    content: '';
    pointer-events: none;
    top: 50%;
    width: 50px;
    height: 50px;
    -webkit-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
    left: -20px;
    z-index: 10;
    background: inherit;
  }

/** Right arrow **/

  .dd-right::before {
    position: absolute;
    content: '';
    pointer-events: none;
    top: 50%;
    width: 50px;
    height: 50px;
    -webkit-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
  }

  .dd-right {
    position: relative;
    height: 325px;
   
  }

  .dd-right::after {
    right: -20px;
    z-index: 10;
    background: inherit;
    position: absolute;
    content: '';
    pointer-events: none;
    top: 50%;
    width: 50px;
    height: 50px;
    -webkit-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
    right: -20px;
    z-index: 10;
    background: inherit;
  }

/* End Dropdown Arrows */

STEP 2
Add a new page, and give it any title you like, we are calling ours Pointer Arrows.

Next, let’s add a new row with a single column with a text Module to our layout, and then do the easiest step of all, add one little piece of text, that is called a CSS class (more on that in a moment). Please see the following screenshots below.

Quick lesson (I couldn’t resist). All websites these days use a combination of HTML (the content) CSS (the styling of the page) and some form of JavaScript or JQuery (for example, all of those popup boxes everyone uses on their sites to get you to sign up). The two basic things to know about when working with CSS is the difference between a CSS ID and a CSS class. A CSS ID starts with a # and can only be used one time for that particular style (like in the Divi menu) and has to be unique. A CSS class starts with a . and can be used multiple times and in multiple areas of the site. We’ll stop there for now and get back to our tutorial. Just slowly introducing you to the basics of CSS so that you don’t have to be afraid to learn some basics like in this tutorial to make simple, yet very effective changes to your site.

triangle sections for divi
triangle sections for divi

STEP 3
 

Now that we have our module setup and our CSS class code in place, let’s make some basic module changes to tidy some things up. The first things we want to do are under the modules general tab. Change #1 (but not a requirement depending on your preferences or design needs) is to make the row fullwidth. The second is to set the use custom gutter with to yes and change the width to 0. (you have to type 0 and hit enter, but it will still say 1) Please see the screenshot below for an example.

triangle sections for divi

Next, we only need to make one change in the advanced design settings, and that is to set the background color of our column. Please see screenshot below.

Note: When we wrote this tutorial, we forgot this step quite a few times. If your arrows are not showing up, this step is crucial for this to work. If you forget the background color, you arrow will not show up. So if you are having trouble, this is one of the first places I would check.

Now save your changes and preview your page for the moment of truth :o)

P.S – Remember, you can save and export just a section only to the Divi library which can speed up development time should you want to reproduce this technique on other sites. ;o)

triangle sections for divi

If you got a down arrow on your page, CONGRATULATIONS!!!

There are three other possibilities, you can also have an up pointer, and the CSS class is (dd-up), a left pointer, (dd-left), and a right pointer, (dd-right). Now try to make another pointer on a new row using either the up, left, or right CSS class, or challenge yourself on how to figure out how all four were used together in the additional example sections below.

If you didn’t get a pointer the first time, don’t get discouraged, neither did we (a bunch of times!!). Re-check your steps to make sure you have the initial parts setup correctly. If you are still having problems, please check out the FAQ section below for troubleshooting tips we learned along the way. And if you still are having problems, please leave a comment and it will notify us via email.

Have fun with it, be creative, and especially learn :o)

Additional Examples

This is a Blurb Module

You can even get fancy with text and an image easily, just by making changes to the modules normal settings!!

The possibilities in your design are endless!!!
Now go create :o)

This is a CTA

Click me!!!

%

Counter Module

I am Batman (Image module)

CSS Pointed Arrows – FAQ’s

Why are my pointed arrows not showing?

Three of the main reasons we found out when making this tutorial on why the pointer arrow wouldn’t show are this (and check them in this order).

1) Under the row settings custom css, the CSS class was put in the columns CSS ID box and not the Column CSS class box.

2) The class name was not entered in all lowercase. For example, you cannot use DD-DOWN, DD-down, etc. it has to be dd-down (or dd-up, dd-right, or dd-left)

3) And probably the easy one to miss, and just as crucial as the other two. The column color was not set in the row advanced settings.

0 Comments

Submit a Comment

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

FREE TIPS & TRICKS NEWSLETTER

Subscribe to our newsletter to stay on top of new tutorials and free resources!

SIGN UP NOW!