How to Create Item Variations in Your Divi Cloud

Best Practices for Item Variations

When creating item variations, it’s important to easily know that the item is a variation, what it’s a variation of, and what’s different from the original. This can be done with names, categories, and tags. Divi will automatically create the snapshot for you, so you’ll be able to see the layout visually as both a thumbnail and a larger image in the Layout Details view.

Use names, categories, and tags that make it clear that it’s a variation of another layout. They should be descriptive, so you’ll know what the layout is a variation of and what the variation is. This includes adding the color, or similar design description, to the name. focus on the key differences.

For example, “Minimal Header (Blue)” and “Minimal Header (White)” are descriptive and show they’re a variation of a layout called “Minimal Header”. They also describe what’s different from the original. They’re short, simple, and easy to understand at a glance.

The variations I’m using in this post are minor changes. I won’t change the categories but I will change the tags and use names with descriptions.

Create the Header Layout

We will start with how to add a header layout to the Divi Cloud. You can use a premade layout or create the header from scratch. I’m using the FREE Header & Footer for Divi’s Electrical Services Layout Pack for my examples. I’ll call this header Electrical Services Header. I’ll select Headers for the category and select one of two tags.

Create the Header in the Theme Builder

First, create the header in the Divi Theme Builder. For more information on using the Divi Theme Builder, search for “theme builder” in the Elegant Themes blog. You’ll find lots of posts that step you through various aspects of the theme builder. The process is simple, but I’ve divided it into smaller steps to keep it manageable.

1. First, enable the Visual Builder by navigating to “Divi” > “Theme Builder” in the WordPress dashboard.
2. Build the header in one of three ways. Select “Add Global Header”, add “New Template”, or choose the “Portability” option and create or import your header layout.
3. Click the Edit icon for the header you want to add to the Divi Cloud.

Save the Header to Divi Cloud

Next, edit your header and save the layout to your Divi Cloud.

1. Click the purple “Save to Library” icon at the bottom of the page.
2. Enter the layout’s name, select Save to the Cloud, and choose your categories and tags.
3. Click “Save to Library”.
4. Close the Theme Builder’s editor.
5. Select “Save Changes” in the upper left corner of the Theme Builder.

Create Item Variations

Next, we’ll create two variations of our original header. There are several ways to create item variations for the Divi Cloud. We’ll look at a few different options.

Header Layout Variation One

For our first variation, we’ll continue to work in the Divi Theme Builder. This follows the process of creating the original header layout. We’ll duplicate different pages such as categories, products, services, etc.

Duplicate the Header Template

First, duplicate the header and assign it to a location.

1. Enable the Visual Builder by navigating to “Divi” > “Theme Builder” in the WordPress dashboard.
2. Select the Duplicate icon above the global template.
3. Choose the locations you want to assign this template in the popup and click “Save” at the bottom.

Save the Variation to the Divi Cloud

Next, edit the header and save it to the Divi Cloud.

1. Click the Edit icon for the header you want to add to the Divi Cloud.
2. Click the purple “Save to Library” icon at the bottom of the page.
3. Enter the layout’s name, select Save to the Cloud, and choose your categories and tags. Choose names, categories, and tags that make it clear that it’s a variation of another layout.
4. Click “Save to Library”.
5. Close the Theme Builder’s editor.
6. Select “Save Changes” in the upper left corner of the Theme Builder.

Header Layout Variation Two

For our second variation, we’ll duplicate the header and edit it within Divi Cloud. For this, we’ll exit the Divi Theme Builder and use the Visual Builder on any Divi page or post.

Duplicate the Header Layout

First, you’ll need to load the layout into the Divi Cloud editor.

1. First, enable the Visual Builder by navigating to any page on the front end of your Divi website and clicking “Enable Visual Builder” in your toolbar at the top of the screen.
2. Click the purple plus icon on the Divi toolbar at the bottom of the page to open the Divi Library.
3. Click the tab at the top labeled “Your Saved Layouts”.
4. Next, view your Divi Cloud items. Click the checkbox labeled “My Divi Cloud” under Locations in the left sidebar.
5. Locate the layout you want to duplicate by searching, sorting, or filtering the Divi Cloud items. Search by keywords or favorites, select categories and/or tags to filter them, or sort them based on time, name, or favorites.
6. Right-click on the layout you want to duplicate.
7. Select “Duplicate” in the popup menu.
8. Alternatively, you can right-click on the preview in the Layout Details screen to open the menu items and click “Duplicate” in the popup menu.
9. A modal will open where you can select details. Add a new name in the “Layout Name” field. Select the categories you want for this layout or add new categories. Select or add new tags. Enter the layout’s name, select “Save to the Cloud”, and choose your categories and tags. Choose names, categories, and tags that make it clear that it’s a variation of another layout.
10. Click the green checkmark button when you’re finished. The layout is automatically saved in your Divi Cloud, so you won’t need to save the page.

Edit the Layout Inside the Cloud

Next, make your changes to the Divi layout using the Divi Visual Builder. This works the same as the Visual Builder within any page except for saving to the library, page settings, and portability. The editor is already enabled, so you can just start making your changes.

1. Locate the layout you want to edit by searching, sorting, or filtering the Divi Cloud items. Search by keywords or favorites, select categories and/or tags to filter them, or sort them based on time, name, or favorites.
2. Right-click on the layout you want to edit.
3. Select “Edit With Divi” in the popup menu. The layout will open in a new tab, rather than a page on your website, with the Visual Builder enabled.
4. Alternatively, you can right-click on the preview in the Layout Details screen to open the menu items and click “Edit With Divi” in the popup menu.
5. Simply edit the layout with the Divi Builder as normal. Add or customize sections, rows, columns, modules, code, etc.

Save the Header Variation Changes Inside the Cloud

Finally, save your changes. The edits are automatically saved in the Divi Cloud.

1. Click “Save Cloud Item” in the lower right corner of the layout to save the changes.
2. Wait for the changes to save. The changes are saved in the cloud itself.
3. Close the tab when you’re finished editing. This isn’t a page on your website, so you won’t need to exit the Visual Builder.

Ending Thoughts

That’s our look at how to create item variations in your Divi Cloud. Divi makes it easy to create variations and store them in the cloud. There are several ways to create variations. Regardless of the method you use, be sure to create descriptive names and use categories and tags that will help you understand the variation at a glance. Divi Cloud is a great way to store multiple variations to use on any Divi website.

We want to hear from you. Have you created item variations within Divi Cloud? Let us know about your experience in the comments.