How to import JSON files in Divi | Learn with the WPress Doctor ??
?????? Start here ??????
? Subscribe for more WordPress related video’s just like this: https://wpressdoctor.com/sub/
? Get world’s best WordPress theme ➜ https://wpressdoctor.com/nr1theme/
? World’s best hosting ➜ https://wpressdoctor.com/nr1webhosting/
Importing those awesome JSON layouts from Elegant Themes into Divi seems so simple! However, if you don’t know where you can upload them, it can be a big frustration! In this video I will show you where you can upload those JSON files. I want you to succeed with your website, so lets get started.
⏱️Timestamps⏱️
0:00 How to import JSON files in Divi – Intro
0:52 Import a header
2:49 Import another header
4:16 Import a module / section
5:43 Import another module / section
6:49 Import a Animated Page Transition
7:50 A word from the Doctor – Outtro
8:42 Self-development quote #7
✅For tips and tricks on getting the most out of WordPress, don’t forget to subscribe: https://wpressdoctor.com/sub
How to import JSON files in Divi
?Transscript?
So you are ready to go with your new JSON file you’ve downloaded? This awesome design, and you’re ready to upload it… but where do I upload it? And when I press this button, it only says: “This filetype is not being supported”? Why is this happening? Well do not worry! The WordPress doctor is here, and I’m gonna help you out in this little video, “Where to upload the right kind of files to your Divi website”. I’m here to help.
Hi, I am the WordPress Doctor. I’ve been creating WordPress websites since 2004. I have my own national hosting company, and my web development agency, and I’ve been building with Divi since the birth of Divi. So I know exactly where you have to put those JSON files. So come with me and I’ll show you how to upload these files.
So the first JSON files we are going to import are those of the header. And I mean like this beautiful header they have created at Elegant Themes. Or for example this beautiful fixed header. First of all, we need to download those JSON files. So you go down there you enter your email address. Press on the button ‘download’. And press the blue button ‘download the files’. So now you go to your website and log in to your WordPress dashboard. And from here we go to ‘Divi’ -> ‘Theme Builder’. Now we are going to import the headers. We need to import them in the Divi Theme Builder. So we press this little button here on the right corner ‘Portability’. And we import them. Now remember, these options are very important if you select these options, your default website template will be overwritten. So remember what you choose is very important, you will lose all your own default website templates. Select your file and you press ‘Import Divi Builder Template’. And here we go, our global header has been imported. We press ‘Save Changes’. And now we refresh our website to see what has changed. Look it’s there! Isn’t it beautiful? So that works like a charm. It actually fits quite nice with the blue and this blue, so that’s okay.
Just a quick little tip. So when you change these logos for your own logo, you will see that there is something strange happening. The colors are not the same. It has nothing to do with your image or your logo, it has to do with a filter they’ve installed on the image. So you go to ‘design’ you go to ‘filter’ and here you’ll see the bad boy. Just press this little button, and here’s your logo the same color as the other. Just a little heads-up, so you won’t be frustrated or asking questions why it didn’t work. So here you go!
Now to import the other one. So now we have already added this global header -that we just did- but what happens when I import the other one? Select our file. And we import the file. Here we go. They did not only add a global header, but you
also had received a global body. So let’s see what happens now when I save these changes, and go to the front end of my website. Ah look, here it is. So they’ve placed this header inside, that we now have this fixed red header. I think it’s hideous but ok, we’ll just go with it. And you see here that we are having some extra space here that doesn’t belong here. So where does this space come from? Well that’s pretty easy, they have just added it to the global body. So at the global body they have added some extra spacing to this section. So we just pull out this section, and we see that there is some spacing here, 150 pixels, so let’s change that back to 100 pixels. Save it, save your template, go to the website, refresh, and see what happens. Allright that’s way better. So you can just change these settings however you like it. And that’s the way how you import those header files from Elegant Themes.
So the second thing we’re going to import in the JSON files are the modules, or sections. So I want to have this awesome animation in my page. We go to the Divi website and we download the JSON file pack. Press the ‘download’ button. And
then we press ‘download the files’. Unzip the files to your computer. Then go to your website dashboard. And go to pages. And you edit your page you would like to change and add this element to. So now when we want to add this module to our website, we just drag and drop this little JSON file to the website, and then this screen pops up, that we want to import this file. We press ‘import Divi builder layout’ and it start importing the JSON file. Where has it been added? It has been added on the lower part of our website, it is right there. And as you can see, they’ve added a lot of white space on top and below, so we just edit this section. We go to ‘design’, we go to ‘spacing’ and here you can just delete this one, or change it the way you would like it to go. And that’s it! That’s the way how you add these elements to your Divi page builder by using the JSON files from the Elegant Themes website.
So I also want to add this very nice feature as you can see. So we’ll be adding this also. We’re going to download it for free. We press this little ‘download’ button and here the file will be downloaded to our computer. We press ‘download the files’ and the files will be downloaded. Unzip the files to you PC. And once again, you go to the page where you actually want to add this module. And you drag and drop this module into your page. And here we go, it says “Do you want to
import it?” Yes import it to the website! And when it has been imported, where will it be placed? Exactly, at the far bottom of our page here. So what a beautiful page elements, and oh, here we go, it looks awesome! And you just reload your page on the front-end in a incognito screen and you just scroll down to see if it works. Here is one, here is two. So yes, it actually works like a charm. Isn’t this awesome?
Now the third file I want to show you how to import, is the animated page transitions with Divi Theme builder. So I want to have this ‘Animated Page Transition #1’ into my website, so let’s go to the WordPress dashboard. And we’re going to add this Divi animated page transition right here. We press this button in the top right corner. We press ‘import’ and we drag and drop our file to there. And we press ‘overwrite’ and ‘import’. So there we have a custom body added to our website. We press the ‘Save Changes’. And now we see on the front-end if something has changed. And the first thing we notice after refreshing our website, that something is going on right here. We have a transition for the pages. Isn’t it great? Lt’s check out the about page, and whoops here we go! So now you know how to add those JSON files and where to add them.
And that’s the way you upload those JSON files in your Divi website. Congratulations, now you know! So if this tutorial has been helpful for you, hit that like button underneath this video to let me know that it helped you out. If you have questions, please put them down in the comments, so I can answer your question. And I’ll be glad to answer all of the questions being asked in the comments. Also if you want to know more about WordPress related videos, tips, tricks, how to optimize your Divi speed or how to change everything in WordPress, how to optimize things… just hit that subscribe button and you will be notified when I upload a new video. I wish you a awesome day, and stick around to get another life-changing quote.
Because life is more than just adding JSON files to your WordPress website, here is the quote of today. The quote is by Robert H. Schuller and he said: “You can often measure a person, by the size of his dream”. Think about this one. You have to get a big dream. If you don’t have a dream, you will never succeed at anything, because everything is okay. What I want to say about this: dream big. Write them down, make some goals, but please: dream big. The sky is the limit. Have a awesome day, and good luck!
