Hey Divi Nation, thanks for joining us in a very special installment of our ongoing Divi design initiative. Today we’re sharing the first theme builder pack that’ll help you set up a website from A to Z. This theme builder pack is part of our big Divi 4.0 celebration. We want to give back to you, the Divi community, by providing you with 6 awesome theme builder packs that you can use right away.
So, let’s take a quick look at the first theme builder pack and how to use it!
Introducing The Divi Theme Builder
The Divi Theme Builder is a fully-featured website templating system that allows you to use the Divi Builder to structure your website and edit any part of the Divi Theme including headers, footers, post templates, category templates and more. Each Theme Builder template consists of a custom Header, Footer and Body layout. These three areas can be built and customized using the Divi Builder and its full set of modules along with Dynamic Content.
Global Header Template
Global Footer Template
Post Template
Product Page Template
404 Page Template
Category Page Template
Key Features
We’re sure you’re going to love the first theme builder pack, built with Divi’s new Theme Builder. The theme builder pack comes with multiple templates that automate the way you add products, build posts and create new categories. The design style that was handled for this theme builder pack is both minimal and abstract. It fits many website styles and allows you to bring the best out of your next Divi project!
Live Demos
Click the links below to see a live demo for each of the layouts included in the pack.
- Theme Builder Pack 1 Post Template (live demo)
- Theme Builder Pack 1 Product Page Template (live demo)
- Theme Builder Pack 1 404 Template (live demo)
- Theme Builder Pack 1 Category Page Template (live demo)
Download The Theme Builder Pack
To use the first theme builder pack on your own Divi website, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our newsletter by using the form below. As a new subscriber you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.
How To Import The Theme Builder Pack
Subscribe To Our Youtube Channel
Once you have downloaded the theme builder pack, locate the divi-theme-builder-pack-1.zip file in your downloads folder on your computer. Double click the folder to unzip it and then navigate inside the divi-theme-builder-pack-1 folder. Inside this folder, you will find one file that contains all the different templates and an individual file for each separate template as well.
To upload the Theme Builder Pack to your website, go to your WordPress Dashboard > Divi > Theme Builder. You can select the individual layout you desire or choose the ‘all’ file to important everything at once.
- theme-builder-pack-1-all.json
- theme-builder-pack-1-default-website-template.json
- theme-builder-pack-1-product-page-template.json
- theme-builder-pack-1-post-template.json
- theme-builder-pack-1-category-page-template.json
- theme-builder-pack-1-404-page-template.json
Important: when you import the files without unchecking the boxes, the templates will automatically affect your entire website. Make sure you double-check these options before uploading a file.
No Licensing Restrictions
The photos included with these templates have no licensing restrictions. This means you can use them in all of your commercial projects without having to worry about paying licensing fees or attributing the photographer. Use them in your commercial websites, sell them within your Divi child themes, include them in your own Divi layout packs or just use them on your blog. We know how challenging it can be to find good photos and how confusing and scary the licensing that governs those photos can be. We want to fix that problem for our users.
Download the Full Res Image Assets
The Second Theme Builder Pack is Coming Your Way Tomorrow!
We hope you enjoy this theme builder pack. We look forward to hearing your opinions in the comment section below. Make sure you check back tomorrow for another beautiful theme builder pack!
Win A Free iPad Pro!
When we announced the countdown to Divi 4.0, we gave away a free MacBook Pro. Now that Divi 4.0 has arrived we thought to ourselves…why not give away an iPad Pro too? ?To enter the giveaway, simply complete as many of the raffle options below that you can. The more entries you submit, the better chance you have to win.
well, in this ‘demo” lay out, the introduction on the home page is not that great as the box of the picture (Kenny Sing) os first rectangle / then flashes to a circle – where it should be a circle in the first place. Space for improvement 😉
Anyway; I’m anxious to see the new builder & opportunities with it….
An excellent development in Divi, I have been tending to stay with the default post header because it is easier even though it is not always what I would want especially for mobile optimised web sites.
Divi 4 has now changed that Divi just gets better and better.
Divi is the best theme I have got. I tried almost 10 different themes for my website but after Divi, I don’t give any other try.
This is so great!
One thing that sprung to mind: When importing more than one theme builder packs, the unassigned templates cannot be renamed and there’s no preview, so if I want to change to another template, I have to assign each one and reload the page to see results.
Am I missing something?
Hi Nick,
Thank you again from Spain for Divi 4.0.
It should be nice if we should have a video where you show us how to download the different packs (and from where) and how and where to upload it. I think we are a lot of people here with same problem.
I got 404 page, with some links. It should be nice to have a short and complet tutorial about this theme and don’t disturb the support with this.
Thank you for your confirmation.
Best regards.
Hi Michel, all of the information you’re requesting can be found in the post/video above.
Congratulations DIVI Team!!
For such a wonderful and hard work of making and updating DIVI 4.0.
I have a couple of small but important questions. Why not we have the option to add more social media icons at bottom and in the header of the DIVI theme like LinkedIn and others. Why we still have the google+ icon to be enabled in the backend and front end. Why not it gets replaced by LinkedIn.
I’m looking forward to working with Divi 4.0.
Absolutely brilliant. You guys are amazing.
Woww! Nice work. Thanks elegantthemes.
well, in this ‘demo” lay out, the introduction on the home page is not that great as the box of the picture (Kenny Sing) os first rectangle / then flashes to a circle – where it should be a circle in the first place. Space for improvement 😉
Anyway; I’m anxious to see the new builder & opportunities with it.
2:40 in the video – Gutenberg for blog posts and products in Woo? This needs further explanation, how are you mixing Gutenberg and Divi and achieving results? And why use Gutenberg as the default post editor? (I like the idea though, it seems easier for my clients rather than me trying [and failing] to teach them Divi just to write a few blog posts.
Awesome! Thank DIVI and Nick!
Regards
Hello,
I couldn’t import any template. It shows me, “An unknown error has occurred. Please try again later.” when I want to build the theme from scratch.
I’m using it on the localhost. Does it matter?
Hi Nick,
A bit disappointed that when I create a template for a post type I don’t see the custom fields I created? I contacted support and was told that custom fields will only appear relative to their post type, page, post, product etc. This decision was made based on the idea that users might have too many custom fields, more than the theme template system could cater for. I do see though that Woo product fields get a look in? Surely when you design a template it should be able to discover all custom fields. Not catering for this has possibly defeated part of the convenience of the dynamic content feature.
I have had to resort to a number of workarounds, working to a degree blind. Create the layout on the post where you can apply the custom field values through dynamic content. Export to library and then apply to template. This works but is not ideal. Alternatively start with the template with a regular page open where you can get the Toolset generated shortcodes and conditional logic, repeating fields etc and then copy paste to the new template.
Glad to see you mention that static and sticky options are being implemented. There are a number of other issues where headers are limited. As mentioned, there’s no responsive options to change the layout, left, cantered, inline. The only solution is to make two version, one for desktop another for tablet/mobile. Not sure though If that would pass html validation? Also if you try to fashion a top menu there are issues with the mobile version. Two hamburgers, no combination of both menus into one and I found that then the lower menu wouldn’t open. The cart. Icon doesn’t have item count either.
@Stephen – This is too much constructive feedback for them it seems. They prefer to answer simple questions (sometimes only partially answer, and almost never reply more than once to any comment).
+1
Fresh DIVI install, no child theme, nothing inside and I have problems with the import of the (unpacked!) json files delivered by you (my own are ok!) – none of them is running.
My red error message in the builder trying to import the json file:
–> This file should not be imported in this context.
In the logs I can find this
–> Got error PHP message: PHP Warning: Invalid argument supplied for foreach() in
/wp-content/themes/Divi/core/components/Portability.php on line 1129
What can I do? I can see I am not the only one …
That means you are trying to import these files into the wrong place. They need to be imported into the Theme Builder and not onto a page or into the Divi Library. Check out the instructions above 🙂
Anybody have a link to “Theme builder pack #2” I received an Email from nick promoting the free pack #2 but all the “download the pack for free” links go to a 404 page.
It should work now, sorry about that. The mailer was scheduled early by mistake.
it doesn’t work for me either and I’ve imported the unzipped .json file in the Portability option. :/
Be sure to contact our support if you need help. You need to make sure that these json file are being imported into the Theme Builder and not on a page.
Thank you so much!
Finally an option to put the author box at the top, great job!
Version 4.0.2 do not fixes the problem. Still can’t import the theme builder.
Same problem here
Am I the only one sat here waiting for the next theme to drop?
Still a bit disappointed about the menu builder. Thought it would have had a lot of features maybe it’s my design skills that lacks have to wait and see but even these layouts menus looks dull. Will stick to my menu plugins until now.
I am unable to upload the pack and get error message with red cross on local machine installation.
For me too it doesn’t work. Just a red cross, no error message.
Me too!
Wow! Awesome, Working smoothly. Thanks Elegant themes team…
I love it! Thank you for your dedication and hard work to keep Divi #1!
AWESOME NICK… THX SO MUCH!
Two things:
1. The custom Global Header or Global Footer have the HTML and tags eliminated. This leads me to ask how this replacing of the standard header and footer by hiding them and replacing them with these sections is impacting SEO? I never thought about this, but it was brought up in the FB group, so now I am wondering how this has been thought through?
2. The main navigation bar cannot be fixed (made sticky) out of the box, compared to its standard Divi main navigation bar – neither does it have the same customization options, as far as shrinking and different opacity etc is concerned. Why is that so?
Static and sticky elements will be followup features, but they aren’t related to the Theme Builder itself, they will be available for all modules in the builder.
And the answer to the SEO question he asked?
Another great (and *free*) asset from Divi! We tried Divi with version 1 and have since created all of our sites with Divi. I can’t wait to get the time to try out Divi 4.0!?
Could you please make one for churches. I have built from church template last year and I believe it is time to upgrade the theme. I am sure thousands of churches are waiting for this! Please, Please, Please!!!
The import does not seem to work for me. It is incomplete when it imports and I get no footers at all
If you are importing an individual layout, you will get an option to use your current global header/footer or import the static ones from the file.
The social icons are a little off when you view it on demo and live site. It doesn’t appear directly beside the logo as it shows on the photo.
Any ideas how to fix that?
I don’t see the “or choose the ‘all’ file to important everything at once” option. Where should I be looking?
I’m only able to select one file at a time.
Thank you,
Travis
The quantity value on the product page doesn’t show up. I can click the up/down arrows, but just wanted to let you know that the field value isn’t visible.
Hi, I tried importing, I am unable to import the json file. It is not showing any error code but it is not getting uploaded. I am working on local machine.
Same issue here, using Desktop Server local install, I get an orange X without any error message. It works on live sites though… I hope someone can explain why.
Nice. Looking forward to what this new DIVI can do.
Does not work for me. There is no automtic apply – And this automatic is not a good thing anyway.
I am missing some logic for the usability, many things are not intuitive anymore…
I Have problems to import de pack.
Any JSON files doesn´t work.
Please help.
Thanks.
Be sure to read the instructions above and make sure you are importing the unzipped .json files into the Theme Builder using its portability system.
Yes I did as it should have. but not able to.
This is the best thing since sliced–no, since Divi!
Thank you guys for constantly improving Divi for all of us.
Chris
Awesome!
I’m waiting for This footer layout https://www.elegantthemes.com/examples/introducing-divi-4-0-and-the-divi-theme-builder-2/#footer ??
Awesome! Looking forward to trying it out!
awesome, thanks!
please do not forget to pay attention to the tablet and mobile versions of the global headers you create, they are not totally responsive 🙁
looks really good – just i have a question: how can one set the fixed navigation bar to 4.0
Section Settings > Advanced Settings > Custom CSS and in the Main Element section add:
position: fixed;
width: 100%;
top: 0;
Also change Z Index in the Visibility settings to 999 or something high. That should do it.
Thanks James – that works 🙂
I have seen this in the video of the documentation page, however I would say it is weird that this functionality has not been implemented as Divi options similar to the standard Divi main navigation menu, which has even more customization options including the shrinking, which is necessary when you scroll down to save on above the fold screen space.
There are a few other things that are missing. The cart icon doesn’t include the item count? And, if you add a top menu you end up with a double hamburger and they don’t open properly and both menus don’t get combined like the default setup.
@Stephen – I have spent the last three days just reading comments on all channels and it seems this whole Divi theme builder development that took almost 18 months, has so many unfinished construction sites…it is unbelievable. I really question the superficial enthusiasm by many unsuspecting users.
When will the layout that’s similar to the ET site be released?
Should we use the “Category Page Template” for a guide for styling the “Search Results” page?
Sure, you can just copy the template and assign it to Search Results or any other Archive page 🙂
Why is this a download and not something we can just select though the backend of DIVI??
My question exactly!
+1
+1
Anxiously Waiting for others…..?
LOVE IT. Can’t wait to try this out! 😀