Divi Help

Tips and Tutes For Beginners and DIY’ers

Connections Codepen for Divi

In our last tutorial, we introduced you to a web site called Codepen, what it is, and how to use one of the basic pens which contained HTML and CSS. This tutorial builds upon that lesson and we have included a new layout called Advanced Codepen that we will be using for this tutorial. The difference between the basic Codepen from the first tutorial and the advanced Codepen for this tutorial is that we have added another code module that will contain our JavaScript (or in this case JQuery) code for the animation portion to work. If you have not read that tutorial Digital Layout With Text, we recommend you at least preview it to understand some of the basics, as much of what we went over in that tutorial applies to this Connections Codepen as well. If you have any problems after going through this tutorial, please review the basic tutorial first to troubleshoot where your problem might be or leave a comment at the end of this tutorial, and we’ll assist you. But if you ask for assistance, please try to work through the basic tutorial first as both of these tutorials have been tested successfully by multiple users. I will warn you ahead of time… Once you see how easy this is, and how many pens there are to choose from on Codepen, you might become a Codepen junkie like me, and get so many great ideas on how to use this code on your sites. Let’s get started!!!

Another Super

Connections

Cool Effect

As a disclaimer, we originally set out for Divihelp.com to not contain css tips and tricks, but I could not help myself, and teaching people something that for the most part is copying and pasting the code, I could not resist. Also, DO NOT attempt these on a live site in case it breaks something. Divi Help is not liable for the code or anything that can happen to your site. We have not had anything bad happen, but that also does not mean that it cannot. We do not say this to cause any scare, but as a formality, and as with any code, proceed with caution.
STEP 1
We will start by clicking on the link below and download the advanced Connections Codepen that uses HTML, CSS, and javascript and / or JQuery Advanced Codepen. Now in the left side menu go to Divi – Divi Library and choose the Import / Export button, then the import tab (see screenshots below). Once you import the json file we will be ready to make our first page.
connections codepen
connections codepen
connections codepen for divi
STEP 2
Add a new page, and give it any title you like, we are calling ours Connections. Now click on the Load From Library section.
screenshot 4
and then add from library and find the layout Advanced Codepen you imported into your library, and click on the load button. Your screen should look like the following:
Screenshot 5
We have already included the code for this tutorial below, but in case you wanted to see this Codepen for reference, please go to this link Connections
STEP 3
  We will start with the CSS portion and work our way down like it shows in the diagram above. Below is the code for the CSS (code) module. Click on the icon that looks like two sheets of paper (second to the last icon from left to right) to copy the code.
@import url("https://fonts.googleapis.com/css?family=Montserrat:200,300,400,600");

body {
  margin: 0;
  padding: 0;
  overflow: visible;
  width: 100%;
  height: 100%;
  background: #000000;
}

.title {
  z-index: 10;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  font-family: "Montserrat";
  text-align: center;
  width: 100%;
}
.title h1 {
  position: relative;
  color: #EEEEEE;
  font-weight: 600;
  font-size: 60px;
  padding: 0;
  margin: 0;
  line-height: 1;
  text-shadow: 0 0 30px #000155;
}
.title h1 span {
  font-weight: 600;
  padding: 0;
  margin: 0;
  color: #BBB;
}
.title h3 {
  font-weight: 200;
  font-size: 20px;
  padding: 0;
  margin: 0;
  line-height: 1;
  color: #EEEEEE;
  letter-spacing: 2px;
  text-shadow: 0 0 30px #000155;
}
Click on the hamburger button icon (grey section) for the CSS module on your page. However, don’t paste your code just yet. Be sure you click below the opening tag where it says style type=… and then paste your code in between the opening and closing tags. Now hit the save & exit button. Pretty simple huh, and GREAT job, we are half way there!! Next, the HTML portion. Below is the code for the HTML module. Click on the same icon below as the previous step to copy.
<div class="title">
    <h3>PLASM.it - 2017</h3>
    <h1>CONNECTIONS</h1>
    <h3>dot-life</h3>
  </div>
On your page, click on the hamburger icon (grey section again) for the HTML module, click on the text tab, then click in the content box to paste the text. Change the text between the tags to whatever you want it to display as on you page. Now hit the save & exit button. GREAT job!!! One more step and we’ll be done. In the last step, we are going to introduce you to the new section that contains the Javascript or JQuery section depending on the code, in this case it will be JQuery. But don’t worry, we are going to keep this simple like the rest of the tutorial, good ‘ol copy and paste :o)
STEP 4
  So a little background before we get started so you know what you are working with. According to the makers of JQuery. “jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.” Before we get into the last section of code, there are going to be two snippets of code. Normally you could do this in one step instead of two, but I figured it would be easier to learn and see how things go together and works. Then once you feel comfortable doing it and want to try other pens, you know what to do. This first part is just the shell part of the JQuery code that you will actually be pasting the actual JQuery code into. We suggest either copying and pasting this into a local document and saving it on your computer or as a separate page and save it in your Divi library. The reason we recommend saving this snippet is if you want to use some other JQuery down the road, this snippet will make it easier. All you need to do is paste your JQuery over the line alert(‘hello’); speeding up your development time. The rest of the code needs to stay the same. The second code snippet is the actual code we need to make the magic of this Codepen come to life.
STEP 4
 
<script type="text/javascript">
jQuery(function($){
    alert('hello');
});
</script>
<script type="text/javascript">
jQuery(function($){
 
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var max_particles = 300;
var particles = [];
var frequency = 100;
var init_num = max_particles;
var max_time = frequency * max_particles;
var time_to_recreate = false;

// Enable repopolate
setTimeout(function () {
  time_to_recreate = true;
}.bind(undefined), max_time);

// Popolate particles
popolate(max_particles);

var tela = document.createElement('canvas');
tela.width = $(window).width();
tela.height = $(window).height();
$(".connections").append(tela);

var canvas = tela.getContext('2d');

var Particle = function () {
  function Particle(canvas, options) {
    _classCallCheck(this, Particle);

    var colors = ["#feea00", "#a9df85", "#5dc0ad", "#ff9a00", "#fa3f20"];
    var types = ["full", "fill", "empty"];
    this.random = Math.random();
    this.canvas = canvas;
    this.progress = 0;

    this.x = $(window).width() / 2 + (Math.random() * 200 - Math.random() * 200);
    this.y = $(window).height() / 2 + (Math.random() * 200 - Math.random() * 200);
    this.w = $(window).width();
    this.h = $(window).height();
    this.radius = 1 + 8 * this.random;
    this.type = types[this.randomIntFromInterval(0, types.length - 1)];
    this.color = colors[this.randomIntFromInterval(0, colors.length - 1)];
    this.a = 0;
    this.s = (this.radius + Math.random() * 1) / 10;
    //this.s = 12 //Math.random() * 1;
  }

  Particle.prototype.getCoordinates = function getCoordinates() {
    return {
      x: this.x,
      y: this.y
    };
  };

  Particle.prototype.randomIntFromInterval = function randomIntFromInterval(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
  };

  Particle.prototype.render = function render() {
    // Create arc
    var lineWidth = 0.2 + 2.8 * this.random;
    var color = this.color;
    switch (this.type) {
      case "full":
        this.createArcFill(this.radius, color);
        this.createArcEmpty(this.radius + lineWidth, lineWidth / 2, color);
        break;
      case "fill":
        this.createArcFill(this.radius, color);
        break;
      case "empty":
        this.createArcEmpty(this.radius, lineWidth, color);
        break;
    }
  };

  Particle.prototype.createArcFill = function createArcFill(radius, color) {
    this.canvas.beginPath();
    this.canvas.arc(this.x, this.y, radius, 0, 2 * Math.PI);
    this.canvas.fillStyle = color;
    this.canvas.fill();
    this.canvas.closePath();
  };

  Particle.prototype.createArcEmpty = function createArcEmpty(radius, lineWidth, color) {
    this.canvas.beginPath();
    this.canvas.arc(this.x, this.y, radius, 0, 2 * Math.PI);
    this.canvas.lineWidth = lineWidth;
    this.canvas.strokeStyle = color;
    this.canvas.stroke();
    this.canvas.closePath();
  };

  Particle.prototype.move = function move() {

    this.x += Math.cos(this.a) * this.s;
    this.y += Math.sin(this.a) * this.s;
    this.a += Math.random() * 0.4 - 0.2;

    if (this.x < 0 || this.x > this.w - this.radius) {
      return false;
    }

    if (this.y < 0 || this.y > this.h - this.radius) {
      return false;
    }
    this.render();
    return true;
  };

  Particle.prototype.calculateDistance = function calculateDistance(v1, v2) {
    var x = Math.abs(v1.x - v2.x);
    var y = Math.abs(v1.y - v2.y);
    return Math.sqrt(x * x + y * y);
  };

  return Particle;
}();

/*
 * Function to clear layer canvas
 * @num:number number of particles
 */

function popolate(num) {
  for (var i = 0; i < num; i++) {
    setTimeout(function (x) {
      return function () {
        // Add particle
        particles.push(new Particle(canvas));
      };
    }(i), frequency * i);
  }
  return particles.length;
}

function clear() {
  // canvas.globalAlpha=0.04;
  canvas.fillStyle = '#111111';
  canvas.fillRect(0, 0, tela.width, tela.height);
  // canvas.globalAlpha=1;
}

function connection() {
  var old_element = null;
  $.each(particles, function (i, element) {
    if (i > 0) {
      var box1 = old_element.getCoordinates();
      var box2 = element.getCoordinates();
      canvas.beginPath();
      canvas.moveTo(box1.x, box1.y);
      canvas.lineTo(box2.x, box2.y);
      canvas.lineWidth = 0.45;
      canvas.strokeStyle = "#3f47ff";
      canvas.stroke();
      canvas.closePath();
    }

    old_element = element;
  });
}

/*
 * Function to update particles in canvas
 */
function update() {
  clear();
  connection();
  particles = particles.filter(function (p) {
    return p.move();
  });
  // Recreate particles
  if (time_to_recreate) {
    if (particles.length < init_num) {
      popolate(1);
    }
  }
  requestAnimationFrame(update.bind(this));
}

update();
});
</script>
Side note: One of the most important things to know when working with Codepen code is that the CSS, the Javascript or Jquery have to be in their native format. For example, if you have not gone to the link provided earlier in the article, please go to it here now Connections
You will notice in the screenshot below the current coding formats for the HTML, CSS, and Javascript / Jquery. The CSS is currently showing it formatted in SASS and the Javascript in Babel. If we were to copy the code like this and try to execute it in Divi it wouldn’t work, but that is easily changed.
To change the format of the code in Codepen, you click on the little dropdown arrow at the end of the code type box. The CSS needs to be in viewed compiled mode, and the Javascript / JQuery view compiled JS. When you have them set properly, the boxes will show compiled in place of SASS and Babel. I share this tip with you that if you decided to do other pens one of the major hangups of them not working.
STEP 5
So now we want to work with the JavaScript portion of our code. We are going to copy and paste the main JavaScript from Step 4 and we want to open our JavaScript (code) module and paste the code in there. There is nothing to paste over or in between, so just paste, then click on the save & exit button. Now one last thing we need to do is give the CSS (code) module a CSS class. The code we provided has the class hard-coded as connections. So click on the gray hamburger icon for the CSS (code) module and in the class field enter connections (see the screenshot below). Be sure to click on the save & exit button.
This is it… The moment of truth!!! Click on the save draft button and then preview you page, and you should (hopefully) have your first working Advanced Codepen working in Divi. If so, congratulations and GREAT job!!! If not, that’s okay, we didn’t get it right the first couple of times too. So go back through the steps of the tutorial and see if you have copied and pasted the provided code in the correct areas and that the code matches.
We appreciate your patience and time to go through this tutorial. If you study the basics of the modules in this tutorial and how they are used, you will open many more doors of possibilities in your designs and pages. This layout and these modules can be used over and over again for not only Codepens, but other sites like Codrops and others, giving you the power to takes your sites and development game to the next level. We also HIGHLY encourage you if you are planning on getting in to the web design and development field, to take the time to learn basic HTML, CSS, and Javascript. This will not only help you, but also give you the ability and confidence to help others in the Divi Community and other areas on the ‘Net. Here are a few good resources to get you started. WC3 Schools – HTML WC3 Schools – CSS WC3 Schools – Javascript Hopefully you learned some new skills and how powerful and versatile the code module in Divi truly is. Remember, coding doesn’t come easy at first, and it takes time, practice, and study. It might be frustrating at first, but stick it out, the reward is worth it and satisfying to know you can do it, and eventually help others. If you would, please take the time to leave a comment below and let us know what you thought of the tutorial. We too can learn to grow by making better tutorials, and improve our Divi Help staff members.

18 Comments

  1. Helen Bakker

    Really nice tutorial. Not being a coder I don’t understand anything of jQuery, but it is fun to use this and play around with it. For now, I only changed the colors of lines and dots. Thank you for this.

    Reply
    • admin

      Thanks so much for your comment Helen! We’re glad you like the tute.

      Reply
  2. Terry

    Thanks for this great tutorial! Every time I do one of these, including your tutorial, the effect always ends up below my footer. How can I fix that? http://prntscr.com/f1fabd

    Reply
    • Shawn Campbell

      Terry;

      Thanks for checking out our tutorials and sorry to hear you are having issues. Do you by chance have a URL you can post so we can look into?

      Reply
        • Terry

          Any thoughts???

          Reply
          • Shawn Campbell

            Still looking into this. Did you do a new page, followed the tutorial and made no other changes at all? I am trying to remember if I ever had this issue or not, but quite a few people have done this tutorial so far and I have not heard about this happening until now. I am trying to break mine to duplicate. That is why I asked if you did this on a new page or not. I with you as soon as I can either break it and fix it, or later when I get home and can access your provided URL from home as I cannot from my work computer. Your patience is appreciated :o)

          • Terry

            Its fore sure not your tutorial, this happens on several codepens I try to use…..just not sure why. Thanks for looking into it

          • Shawn

            Still been looking into this and have not been able to duplicate. Have you tried disabling your plugins to see if they are causing any conflicts? It also looks like you might have customized your footer code somewhere. Do you have any modified css pertaining to the footer somewhere in either your stylesheet, custom css box under divi -> theme options, or elsewhere?

          • Shawn

            Terry;

            With the help of another user and tester, we confirmed that your issues are caused by your footer changes in the Divi Booster plugin. For a quick test, disable your booster plugin. Will look at my booster plugins when I get back to the house.

    • Shawn Campbell

      willboss;

      Thank you for trying our new tutorial. I see by your URL you are not using a full page width. You can try the following to see if it will work for you. Click on the hamburger icon of the sections settings (blue) and change the custom padding right from 0 to 600px. Click on the row settings hamburger icon (green), under the general settings, turn off the make this row full width. Click on the advanced tab and put in 0’s for all of the custom margin settings. Please let us know how that works out for you. You might just have to play with these settings and tweak it a bit. Let us know and if this doesn’t work, we’ll see if we can’t get you fixed up!!!

      Shawn

      Reply
      • Shawn Campbell

        willboss…

        I have not forgotten about you. I how to fix the problem using Chrome inspector tools, but am trying to figure out JQuery on the fly as I did not write this code. The reason the code is overflowing is that the Jquery is using a detect screen size and compensate for it accordingly. If and when I get a solution, I will post it back here. Thank you for your continued patience :o)

        Reply
  3. PHILIP POLASKI

    Great post, thanks so much for adding a new dimension to Divi Themes! I have been trying to add an image as the background but have not been successful yet. Is it possible with the code that we are using? Thanks for the post!

    Reply
  4. Bernd

    Hello, you nameless webmaster!
    Thanks for these valuable tips. It worked very well. Kch have now tried to cook another pin exactly according to this cooking recipe. But I get a white page where everything is on it, down the links, up the heading, but with a empty area in the middle. I have tried it with 3 browsers, the cache is not. (https://codepen.io/plasm/pen/bqYOZy) what am I doing wrong? Or do I have to deal differently here? Thanks in advance!

    Reply
  5. kristie

    When I import the Advanced-Codepen.json file to the divi library, it imports as a section, not layout, and I cannot access it when creating a new page. I tried loading from the layout library and section library, but nothing comes up. What could I be doing wrong?

    Reply
    • Shawn Campbell

      Kristie;

      When this was created and saved, it was not a layout, but a section. Worse case scenario with this (or any section or layout as long as it is in the library) you can right click on it in the library and choose copy, then go to you page and right click and choose paste or paste after. Sorry you are having such troubles with this. You and one other has this happen and not sure why. Try what I suggested and you should be okay.

      Sincerely,

      Shawn

      a.k.a Batman

      Reply

Submit a Comment

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

Now get out there and sign up for a free Codepen account, find some pens you like and save them to your personal collection, and play with them in Divi using this tutorial as your guide. The Divi Help Team I believe in giving credit where credit is due, and I would like to personally thank Michael Breslow from Digital Oatmeal, Andrew Palmer from Elegant Marketplace, and Jonathan Bossenger for all of the help they offered and knowledge they shared. To Andy Tran who started the wheels in motion, and to all of the authors who have made and continue to make Codepens. And to all the people who helped proofread, test, and use our tutorials. Without any of these folks, this tutorial probably would have never happened, and I would not have a digital playground :o)

FREE TIPS & TRICKS NEWSLETTER

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