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


If you are designing a big website, it can be very time consuming having to add the same element on every page and then having to edit every one individually when you want to make a change to it. To get around this, Divi uses ‘global items’.

When you make a module or section a global item, it is stored as a special type of item within the Divi Library. Global items make it possible for you to edit something once and have it update all instances of it across your website at once. This not only saves time, but it also ensures consistency throughout your website.

In today’s post, we’re going to look at five examples of how you can use global items on your website.

5 Useful Divi Global Modules & How to Build Them

Subscribe To Our Youtube Channel

1. Full Width Page Title

Screen Shot 2016-07-21 at 19.13.11

Screen Shot 2016-07-21 at 19.14.40

To add a page title to your website, edit any page and add a new full width section. Then add a full width page title module.

In this example, we’ve made the background orange, the title text white and added padding on the top to add some breathing space below the navigation. Once you’ve customized your page title, click Save & Exit.

Next, go into the full width section and click Save & Add To Library. Give the section a title and check ‘Make this a global item’, then click Save & Add To Library.

Now you can add the page titles on every page and if you decide you want to change the background color, for example, you can go into any page, change the background color and it will update it on every page that you’ve added the global section.

2. Footer

Screen Shot 2016-07-21 at 19.13.50

Although there is a built-in footer, you may not want it on every page, so by creating a global item you can put it on specific pages and edit it if need be.

To do this, edit any page and add a standard section. You can then add in whichever modules you want in your footer and, when you’re done, click Save & Exit.

Then open the section settings and click Save & Add To Library. Give the section a title and check ‘Make this a global item’, then click Save & Add To Library.

Now you can add this to whichever pages require a footer. If you need to edit the footer – or even add an extra module to it – you can do it just once and it will update automatically across the website.

3. Ad

Screen Shot 2016-07-21 at 19.13.29

Say you’ve started selling advertising space on your website, but you only want it on certain pages, you can do this by making it a global item. Again, edit any page and add a standard section. Inside the section, add an image and upload your advert. Once you’re happy with it, click Save & Exit.

Now go into the section settings and click Save & Add To Library. Give the section a title and check ‘Make this a global item’, then click Save & Add To Library. Now you can add the ad to your chosen pages and you only have to edit it once to update it.

4. Call to Action

Screen Shot 2016-07-21 at 19.14.22

This could be useful if you have a special offer that you want to advertise on a few pages. To create the call to action, edit any page and add a standard section. You can either use the ‘call to action’ module or add a text module and then a button module.

After you’ve added in your text, linked up the button and saved them, open the section settings and click Save & Add To Library. Give the section a title and check ‘Make this a global item’, then click click Save & Add To Library.

If you later decide to alter the offer, you need only change it once and it will update the offer across the website.

5. Testimonial

Screen Shot 2016-07-21 at 19.13.39

If you have a testimonial that you wish to display on certain pages – the homepage and about us page, for instance – you can add it and update it easily by making it a global item.

To do this, edit any page and add a standard section. In that section, add a testimonial module and enter the details of the person and what they said and then click Save & Exit.

Then go into the full width section and click Save & Add To Library. Give the section a title and check ‘Make this a global item’, then click Save & Add To Library.

Now you can change or update the testimonial and it will automatically update it on ever page that it’s on in your website.

Wrapping Up

So there you have it, a clever way to speed up the process of designing a website and keeping it consistent as you develop and update it over time. This works on any section or module and they are all stored in the library, so if you do need to view, edit or delete them, just go to Divi > Divi Library and you can see the whole list of modules and sections that you’ve saved to the library.

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 55

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 5 Useful Divi Global Modules & How to Build Them appeared first on Elegant Themes Blog.

View @ ElegantThemes

Leave a Reply