The Divi ThemeGuide For Beginners
Get a detailed introduction to the Divi Theme, where to purchase it, how to create your first Divi website, as well as an overview of Divi child themes, layout packs and plugins.
As the leading resource for the Divi community, WP Zone is committed to bringing you the best products, content, tutorials and news to help your Divi business thrive.
In the following guide, we discuss the entire journey of building a website with Divi. We’ll take you through every single step, from start to finish, so that you know exactly what goes into building a beautiful, functional, objective-oriented website with the Divi theme.
Is the Divi Theme Right for Me?
If you’ve found yourself wanting to make a website, either for fun, for your business, or for others as a web designer, you’ve come to the right place. Divi is the only tool you’ll ever need to build an incredible website to your specifications.
If you’re already sold on Divi, Click here to see how to signup and get 10% OFF, PLUS, a FREE Child Theme from WP Zone!
What is Divi?
Back in the day, building a website was a huge task. Everything relied on code, development took ages and the price point was very, very high. Nowadays, thanks to incredible open-source platforms such as WordPress, websites are easier to build than ever before. Powering over 29% of the internet, WordPress has become the preferred web development platform for a range of businesses, from solo freelancers and bloggers, to small startups and even large-scale corporations.
There are plenty of ways to make a WordPress website. A popular option is to purchase a theme from a vendor or marketplace, install it and customize it. Sounds easy enough, but it can get a bit tricky. Often, these themes don’t allow for many deviations outside of their set framework, and changing these structures requires quite a bit of code knowledge. Instead of battling with individual themes and paying for their single-use licenses over and over again, we recommend you opt for a more robust website building solution, one can meet your needs and exceed your expectations…
Divi is an all-inclusive website design framework that promises incredible value for its price. Available as either a stand-alone plugin or as a fully-integrated theme, Divi allows its users to build each individual web page to their exact design requirement using an extensive collection of modules. From sliders to blurbs, contact forms, accordions, toggles and more, Divi’s myriad of trendy, highly-customizable modules practically eliminates the need for unnecessary, additional plugins and custom code interventions, both of which would come at a price.
What Makes Divi Different
Even though there are a number of other drag and drop visual builders that can be used for WordPress, there’s nothing quite like Divi.
As well as being incredibly easy to use, fun to use and cost-effective, Divi, unlike its competitors, comes with a thriving community that’s rare to come by. From lending a helping hand in a Facebook post to offering advice and counsel, the Divi community is rife with helpful, insightful and talented individuals.
Beyond the community, the Facebook groups and Divi Nation, Divi offers its users the opportunity to explore completely new career avenues.
More than just a tool or piece of software, Divi opens incredible doors for its users to try their hands out at developing products. Should the desire arise, Divi users are given the chance to transcend from service providers to product developers relatively effortlessly. As Divi’s framework can be extended into an array of subset products, such as child themes, plugins and layout packs, Divi users are able to not only grow their brands in new and exciting ways but also make profits, not just income.
Who Should Use Divi?
Divi is extremely easy to use. As it requires no knowledge of code to operate, it is the perfect website building solution for beginners. At the same time, the Divi framework can be extended into many different areas, and as a result, is also a great platform for seasoned developers to explore.
If you fall into the first category, you may find yourself wanting to build a website but:
- You don’t know a thing about code and have absolutely no inclination to start learning a language,
- You don’t have a lot of time to spend researching different web build options and selecting between a million themes, plugins and tools,
- You don’t want to break the bank by spending too much money on a developer…
If this sounds like the situation you’re currently in, then Divi is for you. With Divi you’ll be able to build your dream website quickly, easily and for a relatively low cost.
Next, we’ll explain the exact steps you need to take to get from bright eyed and bushy tailed to ready to launch. Carry on reading to find out what you should do to build your first website with Divi.
Get an Elegant Themes Account to access Divi
While other WordPress agencies would sell each item on an individual basis, Elegant Themes offers its customers a far more cost-effective membership package that includes access all of these great products.
To summarise, purchasing a membership with Elegant Themes will not only give you the ability to build websites with Divi, but it’ll also grant you access to use tried, tested and trusted social and email marketing tools too.
Whether you’re building a website for your own business or are building sites for clients, with an Elegant Themes membership under your belt, you’ll be able to create more than just a website, but a fully-fledged marketing solution.
If you’re ready to join thousands of happy web designers and business owners, all you have to do is join Elegant Themes by purchasing a membership plan and you’ll be on your way to building your first Divi website!
For either a once-off lifetime membership payment of $249 or recurring annual payments of $89 per year, customers will get access to all of the themes and plugins in the Elegant Themes portfolio.
Sweetening this deal even further, these tools can be used countless times to create unlimited websites for no additional charge.
Follow WP Zone
To welcome you to the Divi family, we’re giving away a special gift just for you!
If you decide to purchase your Elegant Themes membership through our link, you’ll also get a free Divi child theme from us to help you along in your first Divi project!
We’ll explain child themes a little bit later, but for now, all you need to know about them is that they’re awesome assets to have in your back pocket.
Sign up for your Elegant Themes account now and let’s start building our first Divi website!
Get Your First Divi Based Website
Yay! If you’re reading this, then you’ve joined the Elegant Themes family (welcome again!) and you’re all set and ready to start building your first Divi site. If you haven’t signed up, remember to use our special link for a whopping 0% discount and a free Divi child theme.
Before you begin building your Divi website, there are a few things to consider.
If you’re new to the world of web development, you’re probably unfamiliar with the concept of hosting.
A website needs a space to exist, a property of sorts. This ‘place to live’ or ‘hosting’ is done on the server. Server space is purchased through a reputable hosting company. A hosting company will store all of the files and the database/s relating to your WordPress website on their servers.
The hosting company will make sure that there will be a secure connection between your website on their servers and the browser windows of the people that choose to visit your site. If you haven’t already purchased web hosting for your Divi website, we highly recommend Divi Space Hosting.
Hosting comes in many different shapes and forms. From shared hosting to VPS hosting, dedicated hosting and more, you can choose from an array of options that best suit your website’s needs.
As a general rule of thumb, if you’re building a relatively small website of about 5–10 pages, and you don’t have high scores of web traffic just yet, your needs will be catered to with a shared server.
That being said, shared hosting does have its drawbacks. As your website will sit with multiple others on a single server, they’ll all draw resources together. If one site has a spike in traffic or experiences a surge in resources, all sites on the shared server will be affected.
Our top recommendation for hosting is a managed hosting solution. With managed WordPress hosting, servers are designed and constructed specifically for WordPress websites. Managed hosting solutions are more expensive than shared hosting, but they come with an array of top-class features that’ll help the website in terms of protection and performance. These include:
- Daily automatic backups of your site to protect your content
- Enhanced security measures to make sure your website is protected from hackers and attacks
- One-click installers to get WordPress up and running, no need to use FTP or complicated installation processes
- Added performance measures to make sure your site runs at rapid speed
- And much, much more!
Divi Space Hosting takes managed WordPress hosting and kicks it up a notch! Not only are the servers designed for WordPress websites, but they cater specifically to Divi sites too. Divi Space Hosting servers are configured to meet the exact server requirements for Divi sites, as stipulated by Elegant Themes. If you’re building a Divi website, there is no better hosting for your website than Divi Space Hosting.
Head over to the Divi Space Hosting website and purchase a hosting package today!
Set Up (Install and Activate)
Now that your website has a piece of internet real estate, it’s time to lay down the foundations and start building.
If you decide to host your website with Divi Space Hosting, make use of their one-click installation process and you’ll save yourself a huge chunk of work!
Once your site is all ready to go with WordPress it’s time to install the Divi theme files. Head to the Elegant Themes website and login to your account. Then, navigate to Downloads and download the latest version of the theme. Your download should start automatically, and once complete, you’ll find a file named Divi.zip on your computer.
Next up is loading the Divi theme to your WordPress website. To do this, log into your WordPress website, navigate to Appearance > Themes and click the Add New button at the top. Click Upload and select the .zip file downloaded from the Elegant Themes site. Hit Install and wait for the Divi theme files to reflect.
Once Divi has installed, click Activate and, voilà, your WordPress website is officially running Divi!
With Divi rip-roaring and ready to go, it’s time to start building out your dream website.
Before you dive in, we recommend that you:
- Create a navigation menu
- Set up a sidebar for your blog
- Add your own logo to your Divi website
- Select the permalink structure for your website
Now for the fun part! Once you’re ready to add your first page, post or project, you’ll experience the full power of the Divi Builder in action!
At this point, you’ve got two choices: you can either use the old back-end builder, or you can use the incredible front-end builder.
For first time users, we recommend playing around with the front end builder as it’ll give you a great idea as to how the sections, rows and modules all fit together. For a tour of the front end builder, simply wait for the pop up to arise, click Start Tour and enjoy learning the ins and outs of creating a page layout with Divi.
Once you’re ready, we recommend experimenting with the elements to see how they fit together. We also recommend that you read some of the amazing, comprehensive guides from the Elegant Themes documentation, including:
- Getting Started With The Divi Builder, here you’ll learn the differences between sections, rows and modules, how to add each respective elements to a page and how to begin working with layouts,
- Divi Modules, here you’ll find a thorough breakdown of each module in the Divi Builder, including a detailed tutorial explaining how to add, edit and customize each individual module,
- Using The Divi Theme Options, here you’ll discover the plethora of customization options that you can make for your site,
- The Divi Library, here you’ll find an in-depth explanation of the Divi Library, JSON layout packs and Divi’s genius portability system.
If you’re not a fan of reading through documentation notes, opt instead for watching a quick video while you’re using the Divi Builder. One of the more recent features added to the Divi theme is the Divi Help System which includes detailed instructional videos that’ll explain each aspect of the theme right from within the front-end builder.
These few tutorials just scrape the surface. There are plenty more in the Elegant Themes documentation, and we highly recommend spending a bit of time browsing through these guides and testing out a few tricks while you play around with the Divi Builder.
Even the most well trained and highly skilled designers find themselves staring at a blank page and/or screen from time to time. To help you beat the blank screen, we’ve put together a list of some awesome Divi inspiration sources for you to use as reference.
We suggest keeping a living library of web design inspiration, references and resources close by for moments when the creative spark is far out of reach. Pinterest or Tumblr are popular options for recording inspiration sources, or, alternately, Trello may be a great option too.
These posts are met with incredible engagement, seeing enthusiastic Divi designers sharing works in progress. As well as getting inspiration from the incredibly talented designers, you’ll also enjoy learning new things, networking and making Divi friends around the globe!
If you’re interested in seeing some of our work, click on the respective links below to view some of our latest client projects:
- RV Family Travel Atlas
- The Bro Basket
- Pur Solar & Electrical
- Fashion Institute of Technology, State University of New York
Finally, we’ve rounded up a few awesome blog posts that offer some great examples of Divi sites.
Divi Design Showcase, created on a monthly basis by the Elegant Themes team
Divi Child Themes and Layout Packs
If you’re not too keen to build your own Divi site from scratch, you could make use of either a Divi child theme or a layout pack. If you’re brand new to Divi you’ve probably never heard the terms ‘child theme’ or ‘layout pack’ before. Technically speaking, child themes come in two forms: premium child themes and blank child themes.
To understand what a child theme is, what it’s relationship is to the parent theme (Divi), or why it is highly recommended to use a child theme while designing your Divi website, read this thorough guide that explains everything you need to know about using a child theme with Divi.
Premium Divi child themes
Premium child themes are essentially fully designed Divi sites that can be installed on top of the Divi theme framework to function exactly like a completed website. Premium child themes come with all of the bells and whistles already taken care of (such as already set up navigation menus, full pages all already built out, blog modules and portfolio pieces and much more), all set up and ready to go.
The joy of using a premium child theme for Divi is that all of the heavy lifting is already taken care of. From typography to layout considerations, color schemes and more, each aesthetic element has already been designed for you. Should you choose to purchase a premium Divi child theme, all you’d need to do is install it as you would the Divi theme files, enter your own original content (text and imagery) and in virtually no time, your website will be done! Using a premium Divi child theme will save you hours of time!
Blank Child Themes
Blank child themes are essentially a series of files that, when installed and activated, will pull from the functionality the parent theme’s files (Divi) and, in a sense piggyback off of them. A completely separate entity to the parent theme, the blank child theme will merely adopt the same functionality as the parent theme to allow the designer to make custom changes without worrying about breaking code or having updates overwrite any alterations.
To create a blank child theme for your Divi website, we recommend using the Divi Space Child Theme Builder. All you have to do is enter the details relating to your web project and you’ll receive a blank child theme in the mail.
For more information about the difference between premium Divi child themes and blank child themes, read this post.
Divi Layout Packs
Divi Layout Packs are fully designed individual page layouts that can be added to a single page, post or project at the click of a button. With the sections, rows and modules all pre-styled, these layouts act as templates that users can simply enter their own content to.
Layouts can be imported to your Divi site using the Divi Library’s portability system. Conversely, if you create a Divi layout that you love and want to use again, you can simply export it and re-import it into another build. One of the most amazing features of the layout packs is that images are automatically encoded, and as a result, will sync directly to the WordPress Media Library.
>Whether you’ve opted to use a premium Divi child theme or a premade Divi layout pack, or you’ve decided to build your website from scratch, you may find yourself wanting to add or change a certain aspect of your website. For this, plugins will help you supercharge the look, feel and function of a Divi website.
>Plugins, in general, are incredibly nifty tools that can be installed on a WordPress website to give the site an extra layer of functionality. There are millions of plugins available or WordPress, each of which can perform an array of different tasks.
>In the Divi sector of WordPress, there are a number of Divi-specific plugins that have been developed for exclusive use with the Divi theme. Even though Divi is an incredibly powerful, highly customizable theme framework, there are certain areas wherein which its form and function can be improved.
>Thanks to the hard work of a handful of Divi development agencies spread across the world, Divi plugins are readily available for purchase, at a relatively low price for the value they create. Some of our leading Divi plugins include:
Loading speed is crucial for any website. Like any theme, Divi needs as much speed as possible. Standard caching plugins help, but they’re not designed for Divi. Divi Rocket was designed specifically to speed up Divi in ways no other caching plugin can.
Divi Rocket regenerates cache only for the modules that change, leaving cache for unchanged modules in place. Browsers load a few sections at a time, reducing the time until your website is usable.
Easily optimize your database for Divi and perform cleanup tasks from a single screen. Add browser caching, server-side caching, lazy loading of Divi sections, compression, and more. Divi Rocket knows Divi.
Read more about Divi Rocket here.
Known as the ‘swiss army knife’ of Divi plugins, Divi Switch is, hands down, the single most important plugin to have in your development tool kit. Divi Switch lets users bypass laborious and time-consuming code work by performing a number of enhancements, either aesthetically and functionality. Extremely multifunctional, Divi Switch has over 50 ‘switches’ that can be turned on or off in hundreds of different combinations, resulting in powerful visual and form changes for your Divi website.
Read more about Divi Switch here.
Page Builder Everywhere
There are some places that the Divi Builder just doesn’t reach. To solve this, Page Builder Everywhere allows you to use the builder outside it standard scope, in places such as headers, footers, sidebars, 404 error pages and more.
Read more about Page Builder Everywhere here.
WP and Divi Icons Pro
Available as both a free and premium plugin, the WP and Divi Icons (formerly the Divi Icon Expansion Pack) and the WP and Divi Icons PRO plugins add over 2500 icons ( Multicolor icons, nearly 1,300 Font Awesome Icons and over 930 Material Design icons).
The only icon plugin needed in a web development toolkit, the WP and Divi Icons plugin lets WordPress users add over 2500 icons to create attractive web designs.
Read more about WP and Divi Icons Pro here.
Divi Footer Editor
Offering an assortment of additional web elements such as navigation options, quick reference links, newsletter signups, contact details and more, the footer is one of the most important sections on a website. With the Divi Footer Editor you can create a captivating footer that reflects site-wide using the WYSIWYG editor found in the WordPress page or post editor.
Read more about the Divi Footer Editor here.
Testimonials are incredibly important elements to add to your website. They leverage the power of social proof and recommendations to build trust for potential customers. Testify will help you create an attractive and engaging testimonial section for your WordPress website in just a few clicks.
Read more about Testify here.
Once you’ve played around with Divi for a while and you’ve become comfortable with the framework, you’ll probably find yourself wanting to explore more interesting and exciting Divi web design avenues.
When you’re ready to advance in your Divi journey, we recommend that you start exploring CSS.
CSS is the syntax used to create stylistic changes to a website. From changing fonts to colors, adding animations and more, knowledge of CSS is a powerful skill that’ll seriously skyrocket your web design skills. As well as being extremely beneficial, CSS is also really fun to learn!
When you’re ready to start discovering the power of CSS, check out these great resources:
Finally, as the backbone of WordPress itself, learning even the basics of PHP will put you in a great position for your web design business. With such niche, technical knowledge, you’ll be able to create rock solid sites and charge very attractive rates. Beyond using PHP in web builds, you may even find yourself entertaining the thought of developing your own Divi plugins.
Our top-rated support team is world-class, and are ready to help you with any questions relating to one of our WordPress, Divi or Extra products.
One of the most amazing things about using Divi, is the fact that you’ll automatically become part of a thriving global community.
In this community you’ll find more than just people that make websites with Divi… You’ll find makers and creators, helpers and collaborators. You’ll find people who’ll help you if you get stuck, people who’ll guide you to always find perfection in your work, people who may turn into life long connections with friendships that go beyond two screens across the world.
To start making connections with Divi users all around the world, join these Facebook groups now:
- Divi and WordPress – Hosting and Domain Support Group
- Divi Theme | Extra Theme | Help & Share
- Divi Web Designers
- Divi Theme Examples
- Elegant Themes User Community
Finally, join in on our conversation and follow Divi Space on social media:
Sign up for our newsletter