This tutorial will walk you through creating a landing page with free layouts from Elegant Themes. How to upload them to your library and then access them in the Divi Visual Builder for WordPress.
Link to the free layouts at elegantthemes.com: https://www.elegantthemes.com/blog/resources/free-divi-landing-page-layout-kit
Take A Test Drive
Sign up for a 15 day free trial to our powerful WordPress Hosting Platform. Take advantage of everything we have to offer for free. No credit card required!
Text Version Of This Divi Tutorial
Hey, this is Jimi Blevins.
I was looking around the internet for some landing page ideas and found three landing pages that Elegant Themes has for the Divi Builder.
I went ahead and downloaded the files, it’s a pretty great package that I wanted to show you guys.
Click the following link to download the “Divi Landing Page Layout Kit.”
I want to show you the page so you guys can grab these if you want to use them on your website.
So I will just walk you through how to get them to your web page and ready to go.
We are going to come into our WordPress “Dashboard,” we’re going to come down here to “Divi,” and we’re going to go to our “Divi library.”
This is where we’re going to import the files.
When I downloaded it, I got a zip file, and that had some information about the licensing and it also had a JSON file included. That’s what we want, that’s what we need to upload. (JSON)
So, I click on “Import & Export” located at the top of the screen and then the “Portability” window comes up.
Then I want to click on “Import.” Select “Choose File,” and it’s already going to drop me into the Divi “Landing Page Kit.”
The Divi “Landing Page Kit” was a zip file I got, and here’s the file we want, this “LandingPageKit.JSON.”
We’ll open that, and then I’m going to click here on “Import Divi Builder Layouts.” (This process can take up to a couple minutes. I threw on some good old music and grabbed a cup of coffee in the meantime.) :):):)
Okay, so it looks like our import came in just fine, didn’t take too long.
Now we’re here in our “Layouts” page, and you can see that it’s imported all these different elements for the page. (I’m personally really excited about this “Testimonial Slider,” I hope this is a new module or an add-on they’re going to do for the “Testimonials” module because it’s pretty cool!)
Alright, that’s all we need to do there, it’s already imported and all the images and the JSON files are ready to go.
Now, we come to “Pages.” I’m just going to “Add New” page. This is where we’ll start working on the layout for this landing page.
So, I click here on “Use The Divi Builder.”
Then I’m going to click here on “Load From Library.”
Then “Add From Library.”
You’ll see this “Landing Page Kit,” is the only one I’ve got in there.I’m going to click on “Load,” and that’s going to bring in all those modules that you saw in the layout page.
You can see I’ve got some that are “Disabled. “I’ve got “Header #1, Header #2, Header #3,” so I can pick and choose.
The best way to see what all these layouts look like is to just click on the “Use Visual Builder,” jump into there and that’s going to show everything is already laid out.
We just pick the header and the content that we want and our landing page is ready to go. This will actually also show you the other headers and things that are disabled.
You can scroll through here, pick the one that you like best, remove the ones that you don’t, change out the images in the text, and you’ll have a landing page up in no time.
Once again, my name is Jimi Blevins and thank you so much for watching.