{"id":814152,"date":"2022-07-03T16:00:00","date_gmt":"2022-07-03T16:00:00","guid":{"rendered":"https:\/\/www.lafactory.com\/blog\/how-to-create-item-variations-in-your-divi-cloud\/"},"modified":"2022-07-26T00:55:00","modified_gmt":"2022-07-26T00:55:00","slug":"how-to-create-item-variations-in-your-divi-cloud","status":"publish","type":"post","link":"https:\/\/www.lafactory.com\/blog\/en\/how-to-create-item-variations-in-your-divi-cloud\/","title":{"rendered":"How to Create Item Variations in Your Divi Cloud"},"content":{"rendered":"
One of the advantages of Divi Cloud is the ability to have multiple variations of the same layout at your fingertips. Easily create multiple versions of a layout with different colors, photos, typography, and more. Creating item variations is simple with Divi Cloud. In this post, we\u2019ll see how to create item variations in your Divi cloud. We\u2019ll also explore several ways to create the variations of a header and discuss the best practices for creating item variations.<\/p>\n

Best Practices for Item Variations<\/h2>\n

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

Use names, categories, and tags that make it clear that it\u2019s a variation of another layout. They should be descriptive, so you\u2019ll 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.<\/p>\n

For example, \u201cMinimal Header (Blue)\u201d and \u201cMinimal Header (White)\u201d are descriptive and show they\u2019re a variation of a layout called \u201cMinimal Header\u201d. They also describe what\u2019s different from the original. They\u2019re short, simple, and easy to understand at a glance.<\/p>\n

The variations I\u2019m using in this post are minor changes. I won\u2019t change the categories but I will change the tags and use names with descriptions.<\/p>\n

Create the Header Layout<\/h2>\n

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\u2019m using the FREE Header & Footer for Divi\u2019s Electrical Services Layout Pack for my examples. I\u2019ll call this header Electrical Services Header. I\u2019ll select Headers for the category and select one of two tags.<\/p>\n

Create the Header in the Theme Builder<\/h3>\n

First, create the header in the Divi Theme Builder. For more information on using the Divi Theme Builder, search for \u201ctheme builder\u201d in the Elegant Themes blog. You\u2019ll find lots of posts that step you through various aspects of the theme builder. The process is simple, but I\u2019ve divided it into smaller steps to keep it manageable.<\/p>\n

    \n
  1. First, enable the Visual Builder by navigating to \u201cDivi\u201d > \u201cTheme Builder\u201d in the WordPress dashboard.<\/li>\n
  2. Build the header in one of three ways. Select \u201cAdd Global Header\u201d, add \u201cNew Template\u201d, or choose the \u201cPortability\u201d option and create or import your header layout.<\/li>\n
  3. Click the Edit icon for the header you want to add to the Divi Cloud.<\/li>\n<\/ol>\n

    Save the Header to Divi Cloud<\/h3>\n

    Next, edit your header and save the layout to your Divi Cloud.<\/p>\n

      \n
    1. Click the purple \u201cSave to Library\u201d icon at the bottom of the page.<\/li>\n
    2. Enter the layout\u2019s name, select Save to the Cloud, and choose your categories and tags.<\/li>\n
    3. Click \u201cSave to Library\u201d.<\/li>\n
    4. Close the Theme Builder\u2019s editor.<\/li>\n
    5. Select \u201cSave Changes\u201d in the upper left corner of the Theme Builder.<\/li>\n<\/ol>\n

      Create Item Variations<\/h2>\n

      Next, we\u2019ll create two variations of our original header. There are several ways to create item variations for the Divi Cloud. We\u2019ll look at a few different options.<\/p>\n

      Header Layout Variation One<\/h3>\n

      For our first variation, we\u2019ll continue to work in the Divi Theme Builder. This follows the process of creating the original header layout. We\u2019ll duplicate different pages such as categories, products, services, etc.<\/p>\n

      Duplicate the Header Template<\/h4>\n

      First, duplicate the header and assign it to a location.<\/p>\n

        \n
      1. Enable the Visual Builder by navigating to \u201cDivi\u201d > \u201cTheme Builder\u201d in the WordPress dashboard.<\/li>\n
      2. Select the Duplicate icon above the global template.<\/li>\n
      3. Choose the locations you want to assign this template in the popup and click \u201cSave\u201d at the bottom.<\/li>\n<\/ol>\n

        Save the Variation to the Divi Cloud<\/h4>\n

        Next, edit the header and save it to the Divi Cloud.<\/p>\n

          \n
        1. Click the Edit icon for the header you want to add to the Divi Cloud.<\/li>\n
        2. Click the purple \u201cSave to Library\u201d icon at the bottom of the page.<\/li>\n
        3. Enter the layout\u2019s name, select Save to the Cloud, and choose your categories and tags. Choose names, categories, and tags that make it clear that it\u2019s a variation of another layout.<\/li>\n
        4. Click \u201cSave to Library\u201d.<\/li>\n
        5. Close the Theme Builder\u2019s editor.<\/li>\n
        6. Select \u201cSave Changes\u201d in the upper left corner of the Theme Builder.<\/li>\n<\/ol>\n

          Header Layout Variation Two<\/h3>\n

          For our second variation, we\u2019ll duplicate the header and edit it within Divi Cloud. For this, we\u2019ll exit the Divi Theme Builder and use the Visual Builder on any Divi page or post.<\/p>\n

          Duplicate the Header Layout<\/h4>\n

          First, you\u2019ll need to load the layout into the Divi Cloud editor.<\/p>\n

            \n
          1. First, enable the Visual Builder by navigating to any page on the front end of your Divi website and clicking \u201cEnable Visual Builder\u201d in your toolbar at the top of the screen.<\/li>\n
          2. Click the purple plus icon on the Divi toolbar at the bottom of the page to open the Divi Library.<\/li>\n
          3. Click the tab at the top labeled \u201cYour Saved Layouts\u201d.<\/li>\n
          4. Next, view your Divi Cloud items. Click the checkbox labeled \u201cMy Divi Cloud\u201d under Locations in the left sidebar.<\/li>\n
          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.<\/li>\n
          6. Right-click on the layout you want to duplicate.<\/li>\n
          7. Select \u201cDuplicate\u201d in the popup menu.<\/li>\n
          8. Alternatively, you can right-click on the preview in the Layout Details screen to open the menu items and click \u201cDuplicate\u201d in the popup menu.<\/li>\n
          9. A modal will open where you can select details. Add a new name in the \u201cLayout Name\u201d field. Select the categories you want for this layout or add new categories. Select or add new tags. Enter the layout\u2019s name, select \u201cSave to the Cloud\u201d, and choose your categories and tags. Choose names, categories, and tags that make it clear that it\u2019s a variation of another layout.<\/li>\n
          10. Click the green checkmark button when you\u2019re finished. The layout is automatically saved in your Divi Cloud, so you won\u2019t need to save the page.<\/li>\n<\/ol>\n

            Edit the Layout Inside the Cloud<\/h4>\n

            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.<\/p>\n

              \n
            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.<\/li>\n
            2. Right-click on the layout you want to edit.<\/li>\n
            3. Select \u201cEdit With Divi\u201d in the popup menu. The layout will open in a new tab, rather than a page on your website, with the Visual Builder enabled.<\/li>\n
            4. Alternatively, you can right-click on the preview in the Layout Details screen to open the menu items and click \u201cEdit With Divi\u201d in the popup menu.<\/li>\n
            5. Simply edit the layout with the Divi Builder as normal. Add or customize sections, rows, columns, modules, code, etc.<\/li>\n<\/ol>\n

              Save the Header Variation Changes Inside the Cloud<\/h4>\n

              Finally, save your changes. The edits are automatically saved in the Divi Cloud.<\/p>\n

                \n
              1. Click \u201cSave Cloud Item\u201d in the lower right corner of the layout to save the changes.<\/li>\n
              2. Wait for the changes to save. The changes are saved in the cloud itself.<\/li>\n
              3. Close the tab when you\u2019re finished editing. This isn\u2019t a page on your website, so you won\u2019t need to exit the Visual Builder.<\/li>\n<\/ol>\n

                Ending Thoughts<\/h2>\n

                That\u2019s 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.<\/p>\n

                We want to hear from you. Have you created item variations within Divi Cloud? Let us know about your experience in the comments. <\/strong><\/p>\n

                <\/span>
                \n<\/article>\n

                https:\/\/www.elegantthemes.com\/blog\/divi-resources\/how-to-create-item-variations-in-your-divi-cloud<\/p>\n","protected":false},"excerpt":{"rendered":"

                One of the advantages of Divi Cloud is the ability to have multiple variations of the same layout at your fingertips. Easily create multiple versions of a layout with different colors, photos, typography, and more. Creating item variations is simple with Divi Cloud. In this post, we\u2019ll see how to create item variations in your […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[1522],"tags":[],"class_list":["post-814152","post","type-post","status-publish","format-standard","hentry","category-divi-en"],"_links":{"self":[{"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/posts\/814152","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/comments?post=814152"}],"version-history":[{"count":0,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/posts\/814152\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/media?parent=814152"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/categories?post=814152"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/tags?post=814152"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}