If you’ve just downloaded Divi and have joined the ranks of the thousands of happy Elegant Themes customers (welcome to the family!), you’re probably about to start building your first Divi website. Maybe you’ve started playing around with the settings of the individual modules, or you’ve scoped out the pre-loaded Divi layouts, and are busy forming an idea of your perfect website. Nevertheless, starting out as a new Divi user can be a bit intimidating, especially if you’re new to the builder interface, have little or no experience with CSS or are trying to find inspiration from the sites showcased at Divi Theme Examples.

While you were making your decision to purchase Divi, you more than likely came across a few sample or Demo pages; made with the Divi Builder; on the Elegant Themes website.

These Demo sites are great sources of inspiration as they are a testament to the power of the Divi theme and its ability to build extremely versatile webpages. The Demo sites could very well have been the main attraction factor in swaying your decision to purchase Divi in the first place. If at any point, you’ve found yourself asking, “How exactly did Elegant Themes build these pages?”, well, the Aspen Grove Divi Demo Zone will easily answer all of your questions.

If you’re new to Divi, or are looking for a bit more inspiration for your next web build, check out the Aspen Grove Studios Divi Demo Zone.

BONUS

Scroll down to read an interview with the Divi Demo Zone creators; David Blackmon and Cory Jenkins.

WHAT IS THE DIVI DEMO ZONE?

Launched earlier in 2016 by Aspen Grove Studios, the Divi Demo Zone gives users the ability to explore the back-end make up of each of the demo sites used to showcase Divi on the Elegant Themes website. Having recognized the value that both new and frequent Divi users could attain from gaining a behind-the-scenes view into the process of building a website with the Divi builder, the developers at Aspen Grove Studios recreated the exact demo layouts to pixel-perfect quality and set up a WordPress website that showed the structure of these demo sites.

Sometimes, achieving the perfect aesthetic for your Divi website can be a bit of a challenge. Also, it’s quite easy to spot a Divi website that uses the default Divi page layouts with very little additional work. While using Divi requires no knowledge of code, a bit of work in the CSS department can be of great value, and the Aspen Grove Divi Demo Zone layouts will show you exactly how these pages were set up and whether CSS styling was used to achieve their look and feel.

When you have access to the Divi Demo Zone, you’re able to see the exact structure of the sections, rows, and modules of each Demo page, as well as whether any CSS properties have been applied. Not only will this give you a head-start in helping you better understand the functions and features of the builder’s individual modules, but you’ll also gain an idea of how to play around with different module settings to achieve the exact look and feel for your website. Also, understanding the set-up of various layout combinations is extremely valuable as these insights will help you construct varied designs for your site projects.

WHY SHOULD I USE THE DIVI DEMO ZONE?

Ultimately, Divi allows you to build a website in practically any form imaginable, and accessing the Divi Demo Zone will give you a solid foundation of how this can be achieved. Quite simply put, the Divi Demo Zone will help avoid the trial and error process and help you build websites faster – saving you time that can be used on paying client projects.

Benefits of the Divi Demo Zone:

• Its 100% free. With no sign-up fee or need for your credit card details, you’re able to access this wealth of information for no cost at all. Simply sign up for an account with Aspen Grove Studios and access the Divi Demo Zone.
• For the busy bees and night owls, the Divi Demo Zone is open 24/7 and is accessible around the clock – perfect for when inspiration hits (usually after 12AM).
• Access to the Divi Demo Zone also allows you to download the Demo Zone layouts and use them within your own projects. These library packs can be purchased on a ‘name your price’ donation basis, after which a .JSON file can be directly imported to your Divi site. If you need some help importing the JSON files into your Divi library, have a read through of this blog post.

Watch the video below for a quick How-To overview of the Aspen Grove Studios Divi Demo Zone.

Meet the Divi Demo Zone Creators!

Enjoy the following interview with the developers of the Divi Demo Zone; David Blackmon and Cory Jenkins.

Why did Aspen Grove Studios decide to make the Demo Zone?

The initial idea for what has now become the Divi Demo Zone actually came to us out of the blue one day during a brainstorming session. We immediately became excited about the project and its potential to help people master the Divi Builder.

Our initial thought process got us thinking, How could we help as many people as possible? This lead to us asking, What if we could grant people access to the back-end of the amazing Divi layouts to see exactly how they were built? To achieve this, we decided to use a multi-site platform so that we could continue to add more and more layouts over time.

• First, as the default settings only grant access to one user at a time, we had to figure out a way to let multiple users access the backend of a page.
• The second thing we needed to do was to grant the users the ability to open sections, rows and modules, but not allow them to save any changes so that the designs themselves would not be altered for future users.
• Last but not least, we needed to create an access point from our main site that would accommodate for the user access process. We wanted to make sure that when a user clicked on a specific layout, their request would be auto-logged into the multi-site, and they would be steered directly to the backend of the specific page/layout.

Once the Divi Demo Zone was launched, the rest was history, and thousands of users were able to gain access to the Demo Zone on a regular basis for inspiration and learning purposes.

How long did the Demo Zone take to develop?

From concept to reality to launch, the Divi Demo Zone took around 2 months to create. The actual nuts and bolts development phase lasted roughly around one week, and the majority of time was spent on design, planning, beta testing and marketing. We had to tie the Divi Demo Zone into our main site aspengrovestudios.com and make certain that both the multisite aspengrovestudios.zone and aspengrovestudios.com spoke to each other flawlessly.

Was it difficult to reconstruct the Elegant Themes Divi demo layouts?

Due to our extensive experience with Divi, the Divi Demo Zone layouts were fairly simple – although time-consuming – for our team to reconstruct. To achieve this, we had viewed the source code of the existing layouts that were brilliantly designed by Elegant Themes. Our real challenge was making sure that each of the layouts were constructed in a way that all of the page settings and CSS code would be visible to our members, and that all of the layouts would convert well into a JSON file for portability.

How do you think a new Divi user will benefit from using the Divi Demo Zone?

We firmly believe that the Divi Demo Zone is the absolute best way for a beginner to learn how to use the Divi Builder because of the unique hands-on approach it offers. A new Divi user can find a layout for their website or an effect they would like to implement, and see first-hand exactly how it was constructed within Divi. This knowledge is akin to a pro-developer giving you access to a website they’d developed and letting you peek around.

Does the Divi Demo Zone have benefits for an experienced Divi developer?

Yes. Beyond the technical knowledge that comes with the Divi Demo Zone, there is also the added benefit of inspiration for designers. If a person is stricken with “design block” they can head on over to the Demo Zone for inspiration.

They also can save time by seeing how an effect that they are trying to recreate is implemented first-hand in the actual Divi builder, as opposed to inspecting the code and reverse engineering.

Is there a concern that with so many users having access to the Divi Demo Zone, there will be a lot of the same style of websites appearing?

With all of the child themes and layouts available to the Divi Community, there are bound to be similarities between designs, whether they are subtle or not. It is our hope that people will use the Divi Demo Zone resources and then add their own unique twist to it. The demos in the Divi Demo Zone are a great starting point for projects, and can be easy manipulated to match people’s needs.

What are the challenges facing a new Divi user?

From our experience, the biggest challenge to a new Divi user is a lack of confidence and a sense of feeling overwhelmed. Divi is a very dynamic platform that takes a while to master, but with the help of the Elegant Themes community and the wealth of tutorials and resources available, new users are able to learn faster and more efficiently than ever before. The Divi Demo Zone is just one of the great tools that will help new users gain the confidence they need.

How do you suggest new Divi users begin approaching the interface of the Divi Builder?

First and foremost, new Divi users should pour over the documentation and tutorials provided by Elegant Themes. Documentation can be found on their website and there is a wealth of knowledge on their YouTube Channel and blog as well.

After that, they should set up a testing/development environment where they can play around with Divi, without the fear of messing up a live site. This can be done on a local server or a development domain hidden from search engines. The Divi Builder is very complex and has a lot of power, and we suggest that new users start by recreating the first 15 layouts on the Divi Demo Zone. This will help them become familiar with the Divi Builder and help them understand the difference between the sections, rows and modules. Also, they’ll learn many new tricks in the process.

We have seen first hand that a great approach to learning is to recreate the Demo Zone layouts by moving back and forth between the Divi Demo Zone and your own website. We suggest new Divi users sift through and study the sections, row and module settings of the Demo Zone layouts and apply the settings to your own practice site. By doing this, the new user has to open each element of the page to make sure it is recreated exactly, or it will not render the same on the front end. In a short space of time, a new user will be learning new and creative methods of using the Divi Builder and they’ll be a pro in no time.

Read the following Elegant Themes blog posts detailing how to set up a Staging Site and Local Host for PC and Mac

As the Divi Demo Zone is 100% free, what value does Aspen Grove Studios gain for making such a resource open to the public?

Beyond the satisfaction that we get from giving back to the community, the Divi Demo Zone is a great way for us to drive traffic to our website (crucial for our marketing efforts and revenue). Beyond the Divi Demo Zone, we also offer custom web development, and premium child themes and plugins to Divi users. Also, we get to make loads of great new friends.

Why did Aspen Grove Studios make the Divi Demo Zone builds available as JSON downloads?

Initially, it was our plan to only offer the layouts as part of the Divi Demo Zone’s learning platform, but immediately after we launched the Divi Demo Zone, we began receiving request after request of people wanting the layouts available as Library Packs (JSON files). Due to the high demand, we revamped the Demo Zone several weeks later to include each of the demos as a ‘name your own price’ download. The donations allow us to continue working on this project and to add new layouts on a regular basis.

Do you think a new Divi user will get more value from working through the Demo Zone sites, or downloading and editing the library packs?

As the popular Chinese proverb says, “Give a man a fish and you feed him for a day; teach a man to fish and you feed him for a lifetime”.

We believe that the learning opportunity in the Divi Demo Zone invaluable, and we love receiving feedback from people letting us know how much it has helped them out. At the same time, we also understand that people may be pressed for time and need to jump straight into downloading the provided layout packs for use on a project. Ideally, people would visit the Divi Demo Zone first, learn how the layouts are achieved, and then download the Library Packs.

With the inclusion of the JSON Library Packs, why keep the Divi Demo Zone on a “name your price” donation basis as opposed to implementing a payment for access process?

This goes back to our firm belief in giving back to the Divi Community. We know first hand what it’s like to be in the beginning phases of freelancing with little to no project budget available. We really appreciate the Divi Demo Zone members who are in a position to donate to our projects, but also, we love knowing that we’re able to help out the ones who can’t afford to do so. Sometimes, we even receive nice notes from customers promising to “pay it forward” down the road at some point in time.

What’s next for the Divi Demo Zone?

We will continue to have a strong focus on releasing Divi Layouts to our members, but also hope to expand upon the Divi Demo Zone as a learning platform. Beyond teaching our members how to use the Divi Builder, we also hope to offer courses on business development, collaborated workflow and more. Stay tuned!

What’s your last bit of advice for a new Divi user?

Stick with it, try not to get frustrated and most importantly do not be afraid to ask lots of questions. Beyond all of the valuable tools and tutorials at your disposal, you also have an entire community of fellow Divi users willing to help you out and offer support. Never stop learning and have fun!

We hope that this blog post has encouraged you to explore all of the great layouts and library packs in the Divi Demo Zone!

If you enjoyed this post, please feel free share your comments or questions below. We’d love to hear about your experiences with the Divi Demo Zone.

Thanks for reading!