Black Friday Super Sale 2024 is Coming Soon

WIN AN iPAD, LIFETIME MEMBERSHIP
×
Divi global elements-headers

Sep 13, 2024 | Divi Resources

Divi Global Elements to Speed Up Your WordPress Projects

When you start designing a WordPress website, its completion time is always crucial. Everyone expects quick delivery, and it becomes important when designing a website. At the same time, quick delivery doesn’t mean a compromise with the website design as it is responsible for 75% of your brand’s credibility. This problem was sensed by Divi and a robust solution in the form of ‘Global Elements’ was provided in Divi 2.4. This solution was completely based on the principle of reusability. Divi Global Elements offers powerful options for quickly designing a professional website using the reusability concept. Divi calls those elements “Divi Global Library items”. These Global Library items can be reused unlimited times across your website when required. These let you create a website quickly with a consistent design and save time for the next design projects.

Why Should You Use Divi’s Global Elements

Divi Global elements work as reusable design components such as sections, rows, and modules that are created once and applied across all the pages of your website. Let’s take a look at some of its benefits.

why use Divi global elements

Time-Saving: This is the topmost benefit of Divi Global Elements. The regular elements are page-specific and need to be customized individually. On the other hand, if a global element is modified, the changes would be reflected on all the pages where it is used.

Page Consistency: Divi Global Elements helps you maintain a uniform design across your website. Global elements such as buttons, headers, or testimonials contribute excellently to maintaining a uniform appearance of your WordPress website.

Simplified Project management:  The global elements in Divi reduce the need to manage individual elements and let you control a Divi element from a single point. This approach makes design management easy while working with a large team. 

Where Can You Use the Divi’s Global Elements

Divi’s Global Elements can be used in various use cases to streamline design and content management on your website. Let’s see where it can prove to be beneficial.

Global headers and Footers

The headers and footers should be uniform throughout the website as they accommodate the branding, navigation menu, and important links. With Divi’s Global Element feature, you can design them once and modify them at any time to get the updates reflected across the entire website. 

Call to Action(CTA) Sections 

A global CTA section can help drive more conversions by attracting potential clients on multiple pages of your website. This ensures a consistent messaging style on the CTA to focus on specific sales goals. You can update the offer on the CTA button and changes will be applied to it globally. 

Pricing Tables

Pricing tables are showcased on various pages of the website offering different products or tiers of services. Make pricing a global element and if there are any requirements to revise the features, prices, and offerings, a single update can modify it on every page. This prevents old pricing from being displayed on multiple web pages.

Testimonials

Following a consistent design for the testimonial section across the entire website can help build credibility and trust. Just create an appealing layout for the testimonial section and apply it globally to all the pages of your website. If there is any need to change it in the future, you can customize it in one place and changes will be reflected everywhere.

After a clear understanding of Divi’s Global Elements let’s see how we can implement them on our website.  

Easy Guide to Create and Save Global Elements in Divi

We will use this quick demonstration guide to learn how to save global elements in the Divi library and reuse them when needed.

1. Save a Divi Element as a Global Item in the Divi Library

Suppose you have a Divi section and want to use it globally on multiple pages of the website, it is possible. 

Edit the page, post, or individual section in Divi Builder. Click on the Save Section to Library icon

Save section as global element

Give a name to the global section. Click the checkboxes for Save Individual Items. Enable Save as Global and click Save To Library.

Assign Divi global section

After saving it you will see that the options tab for that Divi section and all the rows and modules inside it turned green. This indicates that the section has turned into a global section and has been saved to the Divi Library. Now it can be reused anywhere on the website. 

Divi global section assigned

2. Import Global Layout using Divi Builder

Now edit the page in Divi Builder where you want to place that global section. Click the plus icon and select Add From Library.

Import Divi global layout

Search the global section with its name. Click to select.

Search Divi global element in library

If you want any further changes, use the Edit With Divi option. Otherwise, select Use This Section to import it on the current page.

Use Divi global element in library

See the global section is imported to this page and represented using a green color. 

Divi Global element indicated with green

3. Customize the Global Section in Divi Library

We already told you that all the variations of the global element can be updated from a single place. That place is Divi Library. Let’s see how you can do that.

Go to the Divi Library. Find the global section you saved in the Divi Library. It is highlighted using a Globe icon. Click Edit.

customize Divi global layouts in library

Make changes to that global section and save it.

Now open any page of your website where you’ve used that global section and notice the changes you made. No need to make changes to the individual sections on every page. Just modify it in the Divi library and it gets changed everywhere. This concept of reusability makes the website design process quick and website management easy. 

Similarly, you can create Global Elements for headers, testimonials, and CTAs and resume them across the entire website. Explore it and see how many design possibilities can be achieved using Divi’s Global Elements.

What if there is a need to customize a specific part of a global element without disturbing the implemented global standards across the entire website? The answer is Divi’s Unsync feature.

Divi’s Selective Sync Feature 

When you use Global Elements Divi’s sync feature comes into action and any changes made to the Global Elements will be reflected across the website. Selective Sync is the solution if you want to customize a specific part of the global element and don’t want to get it synced as a global standard.

Suppose you want a different title for a CTA button on various pages but want to keep the rest of the settings(such as Button, Body, etc.) global for the entire website. 

See now it is in synced state.

Divi selective sync feature

Edit the page and unsync the Title. Now every part of this CTA module will act as global except the Button Title. That’s why it will never sync and you can use a different title for this CTA button on every page page with the rest of the settings as it is. 

Divi selective sync feature

That’s a great feature and adds convenience to the design process while implementing Global elements on the website. This feature can also be used to create page-specific headers to display promotions and offers. 

Note: The Sync and Unsync feature will work on the independent global modules. If you create a global section and are trying to use selective sync functionality on its contained modules, make sure they are not defined as global. 

Final Takeaway

Divi’s Global Elements provides you the convenience of streamlining the web design process, saving time, and ensuring consistency. Reusable headers, footers, and other components help to easily manage the website design from one central point. They also allow instant updates to be reflected on multiple web pages simultaneously. Divi’s selective sync features also let you perform page-specific customizations without affecting the global standards of that component. These features can be collectively used to maintain consistent branding in navigation, reuse testimonial sections, and keep standard pricing tables across the website. Implement them in your WordPress design process to make it quick and seamless. 

Posted By:
Jagmohan
A curious learner who is ready to break down and simplify things to make them easily understandable to the end user. His main motive is to deliver easy-to-grab solutions in a user-friendly manner.

0 Comments

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

How to Check Fonts Used on a Website (an Easy Guide)

How to Check Fonts Used on a Website (an Easy Guide)

A website should only use a maximum of three fonts for its content. Therefore, you ought to be careful about your font choice for readability. With a wide variety of fonts, you might get confused about the best to use. Luckily, there are some reliable online tools you...

Black Friday 2024 WordPress Themes and Plugins Deals

Black Friday 2024 WordPress Themes and Plugins Deals

40% sitewide discount. Freebies and much more.40% sitewide discount. Freebies and much more.Up to 73% off.Get 50% off on all new licenses.Enjoy a 50% discount for your first year on any purchase.30% off WordPress plugins and services.Up to 40% off.Up to 40% off.Up to...

Divi Extended Black Friday Sale
Divi WooCommerce Extended