UPDATE (June 29th 2021): As of version 6.0 of Local by Flywheel they have made the PRO features FREE to anybody using the software, we think that is pretty awesome! More on that here.
One of the best tools you can use to be more efficient as a Divi designer is to set up a local development environment for projects you are starting on or ones that you are already working on. In this post we are going to talk a little about what a local WordPress development environment is, why you might want to set one up, then show you how to set one up using one of our favorite tools.
What is a Local Development Environment?
It basically means that instead of building your sites live on the internet, you build them locally on your machine. This is done by setting up a server environment similar to that which you would find on most web hosting services. This is amazing for your workflow because when you’re building a Divi site in your local development environment it looks and acts exactly the same as it would if you were building online because all the files and databases are stored locally.
Why setup a Local Development Environment for your Divi projects?
It cuts down on development time
The ability to rapidly deploy a WordPress install with Divi already activated and configured to your preferences makes the entire process very zippy.
Gives you the ability to work offline
Don’t be bound by the tethers of the internet 24/7. Since your computer is your website’s host, you can work when and where you want.
Does not impact production sites
You can test changes and updates to your production sites offline before making them live. This ensures a greater customer experience and avoids headaches with things like plugin conflicts.
Gives you a playground to test new plugins or skills you're learning
When you’re learning Divi or WordPress, it is great to have a place you can practice that does not require you to register a domain or pay for hosting. It is also a great spot to check out new plugins before rolling them out to production sites.
PRO-TIP: To find some fantastic tutorials, snippets, and guides, check out the Divi Engine Blog for some great resources!
Ok, so how do I setup a Local Development Environment for Divi?
The 2 most commons ways to set up a local development environment are:
Local Server Stack
A local server stack, such as LAMP (Linux Apache MySQL/MariaDB PHP) or WAMP (Windows Apache MySQL/MariaDB PHP) is a server (much like the server that runs on your webserver), which you will configure on your local machine. You can get pre-packaged stacks like MAMP for Mac users, or XAMPP for both Mac and Windows users, that will take the headache out of getting everything configured.
Virtualized Environment
Setting up a Virtualized Development Environment
To follow along, we first need to download a few things.
Downloading & Installing Local by Flywheel
Head over to the Local by Flywheel site and download it for your platform.
Once you have it downloaded, continue to install it.
Downloading & the Divi Theme
Head over to the Elegant Themes site and log into your account.
https://www.elegantthemes.com/
Once logged in, look for “Divi” in the Downloads tab. Click the “download” button to get the zip file. Be sure to save this somewhere you can easily find it a little later.
Getting started with Local
Step 1
When you run Local for the first time it will ask you to Create a New Site, so let’s click that button.
Step 2
This will launch the setup wizard for our new WordPress site. It asks you to enter a name for our new site, so be sure to use something descriptive. We used “Local Tutorial”. Click Continue.
Step 3
In the next step, we get the option to select either the “Preferred” or “Custom” setup. We recommend going with preferred for now. Click Continue.
Step 4
Here on the last step, we set the actual WordPress settings, so enter your desired username, password, and email. These are the same settings you will use to log into the dashboard of your new local WordPress install. Click the Add Site button.
Local features you will want to use
Cloning Divi Sites
Step 1
Right-click on the site you want to clone in the Local Dashboard.
Step 2
Click Clone.
Step 3
Simply name the clone, and you are done, my friend! How amazing and easy is that?
Ok, let’s say you build a ton of Pizza sites and it takes you a few hours to configure and setup all the plugins. Creating a template site and just cloning it for future projects would save you all that time! This feature is a real game-changer for your workflow.
Live Previews
Step 1
Select the site that you want to share in the Local Dashboard.
Step 2
Click on Enable next to Live Link at the bottom of the screen.
Step 3
After a few seconds, it will indicate that the site is now live. Now you can simply hit that copy button and share it with your client. So simple!
Conclusion
We hope this introduction into the world of local development environments was helpful to your and your workflow when working on Divi projects. It can really impact the speed and efficiency of you and your team, which means you can handle higher workloads, which means you can run a more successful web design business.
Please consider checking out Flywheel and the professional hosting services they offer using our affiliate link by clicking the button below.
The sites I build in Flywheel using the Divi theme look fine when I’m in the visual builder but as soon as I turn it off to preview my work it doesn’t show up. I’ve tried clearing the cache, etc. but nothing seems to work. I’ve been using Flywheel for years with no issues with Elementor, building sites from scratch or other WP themes.
Can you try disabling static css file generation in Divi > Theme Options > Custom CSS?
Same issue here. I did what you suggested, but it did not worked. Anything else?
The only solution is to delete everything in /wp-content/et-cache/ and refresh page. Then the changes will be reflected. I have been looking for the automatic clearing of cache as well