Divi Help

Tips and Tutes For Beginners and DIY’ers

In this tutorial, we are going to show you how you can create a diagonal gradient background including text and a parallax effect. So get your favorite beverage, get comfortable, and get ready to see how easy it is to take your Divi pages to the next level!! This example is a very basic design that many people create using background images, but we are going to use good old fashioned CSS and HTML.  When you are done, you should have the following.

SWEET

Before we get started, we just wanted to give you a little history on how this tutorial came about. Staring earlier this year, Andy Tran had started to write some wonderful articles on using code from Codepens and figured out how to take Codepens and get them to sing and dance and be tamed for Divi. He even went so far as to write a custom pen that you could copy and paste a link from a Codepen into his pen and it would translate it. Then all you had to do was copy and paste his code into the appropriate Divi module. How cool is that!! You can see his pen translator here: Codepen Translator

Needless to say, I was super excited when I found out about this tool, but when I tried it, it did not always seem to work for the pens I wanted. With that said, I am not guaranteeing our method will work for every pen either, but we also wanted another way to do the same thing, and learn some basic mechanics on how things worked as well. But before we get started, let’s talk a little bit about what Codepens are first, then go through an example.

Straight from the folks at Codepen “Codepen is a playground for the front end side of the web. It’s all about inspiration, education, and sharing. Need to build a reduced test case to demonstrate and figure out a bug? Codepen is great for that. Want to show off your latest creation and get feedback from your peers? Codepen is great for that. Want to find examples of a particular design pattern for your project? Codepen is great for that.”

And a playground it is!!! There is so much you can learn from Codepens and add to your Divi (and other) made sites, and enough to choose from to set yourself apart from the same ‘ol same ‘ol and shine like a superstar!!

So now that we know what Codepens are, let’s learn how to use one. We recently released one of our first working pens to the Divi community because someone had posted in one of the Divi Facebook groups. They had asked if anyone knew how to make a timeline for a web site without needing to do an image, and we saw an opportunity to share our new found knowledge. Now the simple way many users like to modify a web site is to use plugins, which is fine, but I think it also takes away from the learning experience sometimes, or the ability to modify the code to suit ones needs. We are not going to use that instance for this tutorial because we want to start with the basics and work our way up to more difficult ones. The more basic Codepens contain HTML and CSS, and the more advanced ones contain Javascript and / or JQuery as well.

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. Let’s get started!!

We have created two sample layouts that can be downloaded from our site, one is for the basic Codepens that uses HTML and CSS Basic Codepen as mentioned above, the other for the advanced Codepens that use HTML, CSS, and javascript and / or JQuery Advanced Codepen. Click on the link to download the basic codepen json file (you can download the advanced one if you wish, but will not be used for this tutorial). 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.

Screenshot 1
Screenshot 2
Screenshot 3

Add a new page, and give it any title you like, we are calling ours Diagonal Layout. Now click on the Load From Library section

screenshot 4

and then add from library and find the layout Basic 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 Diagonal Css Background

We will start with the HTML section first. Below is the code for the HTML 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.

<h1>SWEET</h1>

On your page, click on the hamburger icon (grey section) for the HTML module, click on the text tab, then click in the content box to paste the text and hit the save & exit button. Pretty simple huh, and GREAT job, we are half way there!!

Now for the CSS portion. Click on the same icon as the previous step to copy.

<style type="text/css"> html {
  height: 100%;
}
h1 {text-align:center; margin:100px auto;
font-weight:200;
font-size:70px;}
body {
  font-family: 'Electrolize', sans-serif;
  background:
  linear-gradient(135deg, rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%);
  -webkit-linear-gradient(rgba(135, 60, 255, 1), rgba(135, 60, 255, 0.0) 0%),
 -webkit-linear-gradient(-15deg, rgba(120, 155, 255, 0.9) 45%, rgba(55, 230, 235, 1) 0%);
}
</style>

Again on your page, click on the hamburger button icon (grey section again) for the CSS module. 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. GREAT job!!! You are now done with the code. Now hit the save draft button and then preview the page. Your page should look like the working example at the top of this page.

Side Notes: Now with this particular pen I had some issues you need to be aware of if you decide to do others, so I am going to share that tip with you. For whatever reason certain code is parsed in Divi strangely sometimes. The original CSS code for this Codepen looked like this:

<style type="text/css"> 

html {
  height: 100%;
}
h1 {text-align:center; margin:100px auto;
font-weight:200;
font-size:70px;}
body {
  font-family: 'Electrolize', sans-serif;
  background: 
  -webkit-linear-gradient(rgba(135, 60, 255, 1), rgba(135, 60, 255, 0.0) 0%),
 -webkit-linear-gradient(-45deg, rgba(120, 155, 255, 0.9) 45%, rgba(55, 230, 235, 1) 0%);
}
</style>

Notice the space after the opening style tag and the html is below the open style tag. For some reason with the code like this, Divi would not parse the code correctly, so we had to remove the space, and move the htm tag and the opening bracket up to the style tag line as in the code you copied and pasted in the previous step.

The other issue preventing the code from working was the background of the section. Since this code needed transparency for the diagonal section to work, the simple fix was set the background to transparent on the section (blue hamburger icon) under the general settings.

Screenshot 6

So there you have it, your first painless coding exercise and porting over a Codepen to make some WOW on your web site. We know that this was a long tutorial, and we appreciate your patience and time to go through it. The great news is 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

Thanks again for reading and taking the time to go through our first tutorial. Hopefully you learned a lot and didn’t get too scared of playing around in Divi and learned some new skills. 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.

1 Comment

  1. Michael Breslow

    Glad to help. Will be more than happy to do it again.

    Reply

Submit a Comment

Your email address will not be published.

If you enjoyed this tutorial, be sure to check back soon as we will be doing another code pen, this one a little more advanced and introducing javascript and JQuery. 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. 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!