Welcome to Day 88 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!


Hello Divi Nation! Thanks for joining us for another episode of our Divi podcast and youtube show. This time around we’ll be sharing a handy tip on how to make any Divi page element “sticky”. If you’re not familiar with that term, it means fixing the item in place so that it stays in front of your site visitors as they scroll down the page. This is a great way to call attention to your desired call to action on any given page.

Let’s get into it!

How to Make Any Divi Page Element Sticky

In this episode of Divi Nation I’m going to show you step-by-step how to make any Divi page element sticky. This trick is easy to achieve but the steps are precise, so be sure to follow along closely and take note of the comments within the file directory strings and the code snippet below. If you have any questions, just put them in the comments section and we’ll do our best to help you out.

Subscribe To Our Youtube Channel

All Subscription Options:

Summary: How to Make Any Divi Page Element Sticky

For this tutorial we are going to be using a free Javascript plugin made specifically for creating sticky elements. To get it, go to http://stickyjs.com/ and download the plugin by clicking the orange “download plugin” button.

stickyjs-website

Unzip the the plugin file and open the folder. Locate the “jquery.sticky.js” file and move it to the following WordPress directory:

wp-content > themes > ACTIVE THEME FOLDER > js

So if they are using Divi without a child theme it should look like this:

wp-content > themes > Divi > js > jquery.sticky.js

If you are using a child theme it should look like this:

wp-content > themes > DIVI CHILD THEME FOLDER > js > jquery.sticky.js

If you do not have a “js” folder in your child theme already you don’t have to create one but it makes sense to. If you opt not to create a new folder called “js” then simply add the new file to the child theme folder and adjust the src link in the step below to accurately reflect your file string.

Note: Your WordPress files can be accessed using an FTP client and then logging into the server using your username and password. Alternatively you can use the cPanel provided by most web hosting companies to access your files.

divi-theme-options

Next, copy and paste the following code snippet under Divi > Theme Options > Integration > Add code to the of your blog

    jQuery(document).ready(function(){ jQuery("#sticker").sticky({topSpacing:200});
   });

Aside from getting the src link correct, the other important line of code in the snippet above is this one.

jQuery("#sticker").sticky({topSpacing:0});

What this line of code means is that any element you give the css class “sticky” to or the css id “sticker” to will become a sticky element. I recommend you use the “sticker” css id so that the same snippet can be used for many elements with custom css styles for each.

If you want more than one element to be sticky all you need to do is add another line directly below the original with a different css id.

jQuery("#sticker2").sticky({topSpacing:0});

With a few sticky elements added it will look like this.

    jQuery(document).ready(function(){     jQuery("#sticker").sticky({topSpacing:200});
jQuery("#sticker2").sticky({topSpacing:150});
jQuery("#sticker3").sticky({topSpacing:100});
   });

You can also change the “topSpacing” value to be whatever you want. For instance, I found that “150” was ideal for my sidebar module. You can play with it to get the value that works best for you.

css-class-id

Next, assign the “sticker” css id (or “sticker2”, “sticker3”, etc.) to whatever module(s) or page element(s) you want to be sticky. And of course you are free to change “sticker”, “sticker2”, and “sticker3” to whatever words you want your css id’s to be. Such as “#left-sidebar” or “#right-sidebar” or “#sticky-optin” etc. Just so long as it’s the same in the snippet and your module/page element.

preview

When you’re finished, click the “Save and Exit” button in the module or section settings and then preview the page.

Next Week On The Divi Nation Podcast: Josh Ronk Round 2!

Last Friday we had intended to interview our developer Josh Ronk, who has been leading the Divi 3.0 project. Instead, he needed more time to get the Divi 3.0 beta out to all of our beta testers–which, of course, took precedence. Next week we will try again and hopefully give you all some more information on what it takes to take something like Divi 3.0 from concept to completion.

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 88

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(https://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; text-decoration: none;}hr{border-style: solid; margin: 0 0 40px 0; border: 1px solid #EAEBEB;}

The post How to Make Any Divi Page Element Sticky–Divi Nation Short appeared first on Elegant Themes Blog.

View @ ElegantThemes

Leave a Reply