Modern web design
Download a Free Divi Layout Pack with Header and Footer
⭐ ⭐ ⭐ ⭐ ⭐
The Divi Crib is a stunning Divi layout pack for an architect firm (but it works perfect for any type of small business). The design is clean and minimalistic. 100% responsive and mobile-friendly. You need the Divi theme to import this free layout. Feel free to rate this layout by clicking the stars above.
Page layouts
✓ Page layouts
✓ Homepage
✓ About us
✓ News feed / blog
✓ Contact Us
Theme Builder Layouts
✓ Sticky Header & global footer
✓ Post template
✓ Categories & search template
✓ 404 error page
Download the layout
- Enter your e-mail address below to subscribe to our newsletter. (You will never receive duplicate newsletters.)
- Click the link in the confirmation email and download the zip files.
- Extract the zip file on your hard drive.
- Import the Theme Builder layouts file into the Header area in Divi > Theme Builder and import the page layouts to the Divi Library or directly to your Divi pages.
- Adjust the design and use freely. The CSS code in the global header is placed in a Divi Code Module in the header layout.The easiest way to find it is by using the Wireframes mode in the Divi Builder.
Do you want to learn how to create this layout by yourself? Explore our free WordPress & Divi Tutorial where we create this design from scratch.
Layout preview
Click the images to open in a lightbox. You can also browse the live demo page.
Homepage
About us
News feed / blog page
Contact us
Post template
Category template
Search results template
404 error template
beautiful layout, thank you for this! one problem; the mobile menu is great but when i tap the hamburger menu i get the same symbol as before. how do i get the close icon that you have on the crib website?
Thanks xAnny! Just add the CSS snippet below to your custom CSS to change the collapse icon in the mobile menu:
/* X icon in expanded mobile menu */.mobile_nav.opened .mobile_menu_bar:before {
content: '\4d';
}
Let me know how it goes!
Thanks! But I get this message when I import the layout: This file should not be imported in this context
What am I doing wrong??
Hi Den! You are probably trying to import a Theme Builder layout to the Divi Library or to a page, or the other way around.
Make sure that you only import pages to pages and Theme Builder templates to the Theme Builder. Follow this video chapter step by step and it’ll work: https://youtu.be/8LCnT-xrr6M?t=21584
Great layout and very useful. Easy to work with 👉
Thanks Christian! 👉
Good day. EXCELLENT VIDEO!
I attempted to add your .json file my Divi Theme builder and all it would show is a red “x” and nothing would uploaded? Is there something I am doing wrong?
I am using a a “staging” version of my website so that I can work on it to get it ready to go live.
Victor Duse on 2021-09-18 at 13:59
Thanks Mike! 👉
I just tested an import on a fresh Divi 4.10.7 installation and it worked. Make sure that you import the Theme Builder templates by clicking the Portability icon (two arrows) in the the top right corner in the Theme Builder dashboard. The page templates can only be imported directly on pages. Check out the steps in this video: https://victorduse.comhttps://victorduse.com/free-divi-course/import-export-json-layouts-in-divi/
If you already done that, here are few things that can fix errors when importing layouts:
* Make sure that you have sufficient memory allocation and timeout settings in Divi > Support Center
* Update to the latest version of Divi
* Deactivate all plugins before import (or at least caching and optimization plugins)
* Try with another web browser
You could also activate the WP debug log to see what causes the error and check with ET support if you get stuck.
Let me know how it goes!
Where is the Icon Scroll Animation mentioned?
… found it here, thank you: https://victorduse.com/blog/create-scroll-down-icons-with-looping-animations/
Great, that’s the one. I forgot to change the link in the preview image. I’ve updated it now. The curse of copying and pasting content to save time. 🙂
Hi, there is aproblem on news page, the top header social menu don,t see when ı add it my web site.
Ican2t solve it, please help me.
Page like this : https://techia.com.tr/site/__trashed-5/
Hi AOT! The problem is that the top bar has a white background. Edit the first section in the header and add a dark background color (for example #1c1c1c) and you’ll see the icons and the button. If you can’t find it, you could add this CSS in Divi » Theme Customizer » Additional CSS:
.et_pb_section_0_tb_header {
background-color: #1c1c1c;
}
One more thing: If it only looks strange on the blog page, try to clear the Divi cache in Divi » Theme Options » Builder » Advanced. You could also try to deactivate Dynamic CSS and Critical CSS in Divi » Theme Options » Performance
Hello. Been tooling around with this site. Really looks nice! Is there a way to keep the logo in the header on the scroll? It disappears when scrolling (which is cool) but I think I’d like to keep it in the section on the scroll down. Thanks.
Thanks Tommy! Sure, you need to remove the 0px image size in the sticky state. Check out this chapter and remove the settings that you don’t want to keep: https://youtu.be/8LCnT-xrr6M?t=6004
Hi Victor, congratulations. Are the images in the layout free and NOT copyrighted? Thank you
Hi Davide! Yes, you are free to use the images however you like. The icons are from Elegant Themes and most of the photos are from Unsplash and Pexels. They all use the “do whatever you like”-license. 🙂
Thanks always very kind. But listen, nonsense but I don’t know how you did it .. How did you not write anything in the contact form, under the title of “privacy”? if you leave it blank, it writes to me: “new field”
Just add a blank space in the title field and it will be blank.
nooooo. 🙂 Thank you
Hi, thanks for this layout! How would I change the shape of the hero images so that they’re a regular rectangle (just go straight across on the bottom rather than the masked shape)?
Sure, just go to the sections Design settings and expand the Dividers tab. From there, go to Bottom and set the Divider style to “None”.
Here’s a complete video of me creating the layout. You can backtrack all the settings there (timestamps in the description): https://youtu.be/8LCnT-xrr6M
I really enjoy all your youtube video tutorials I learn a lot with you
Thanks Adil, I’m really glad to hear that. More good stuff is coming soon. 🙂
Thank You! for the theme it works great.
I’m glad you liked it, Vivek! 🙂
Hello, thanks for the great free layout 🙂 I was just wondering how you change the top menu to a different colour when it minimises on scroll. Currently it’s black and I’d lie to change it to blue.
Hi Jodie! Go to the section, row and/or the module settings and head over to the Background tab. Now click the tiny mouse arrow icon to edit the background color in sticky mode. In my free Divi course on YouTube you can see how I create the entire layout step by step.
Hi Victor,
I’ve been watching your videos for a few days and building practice pages with you. I already have a website that has been published/is live. What do I need to do so I don’t lose everything I already have? BTW, My Sight is a cruise travel blog. I Have a home page and 50+ blog posts.
Hi Kristina! I’m glad you liked the videos. 🙂 I recommend that you clone your website, using a plugin like Duplicator or All in one migration, to a dev environmenr (subdomain or local host). Then try to import the Theme Builder templates etc that you want to use and modify them. When you’re happy with the result, you can clone it to your live site.
Hi Victor, I’m having an issue with the mobile menu. I added a submenu to two menu items as a drop down on desktop, but on mobile they are all visible by default (no dropdown). So, there are a lot of items and I’m not able to scroll down to the bottom of the menu.
Hi Holly! To make the Divi mobile menu scrollable, you can add this custom CSS in the Theme Customizer » Additional CSS:
.et_mobile_menu {overflow: scroll !important;
max-height: 80vh;
}
To add collapsing nested menus in Divi you could either use custom code or a plugin like Divi Toolbox or Divi Responsive Helper.
Hi guys-developers!
Victor Duse, thanks for the excellent work and results in the “DIVI CRIB” topic!
Question
Tell me how to bind the “homepage” page template to the main page of the site (root domain)?
I explain.
When loading the site, it is loaded from the layout of the main page https://rosfg.ru/homepage/ and necessary: https://rosfg.ru/
Thank you in advance!
Hi Oleg! Here’s a tutorial on how to assign a homepage in WordPress: https://youtu.be/zUJL4GDf8hE?si=FTHho1ZSHenwvhuV
Hej Victor
Tack för videokursen. Utmärkt material
Tack Eduardo, kul att du gillade den! 🙂
Hej Victor
Many thanks for the fabulous tutorial, Victor. I really learned a lot!
I’ve downloaded your theme (because AWESOME) – do I just follow your tutorial for the global header/footer? I don’t want to wreck it (like my first four tries).
thanks again,
I’m glad you liked it Sue! Here’s a tutorial on how to import all the layouts and templates, including the header and footer: https://youtube.com/watch?v=_J_VIrjjE_E
Let me know if you get stuck.
Hi I just signed up, I am a newbe building a website, I chose Divi Theme. I do not understand how to incorporate your json file. Sorry
Welcome! 🙂 I think this video will clear things upp regarding the json imports.
I don’t see where to download your laout but thank you for this tutorial. I’m using Divi for over a year but never used posts on any Wordpess site. This is really helpful and I regret I have everhing I need, hence can’t support your work by purchasing via your affiliate links. I’ll sure come back to follow up on your Divi 5 postings.
Hi Ren! The download links should be available on the confirmation page that appears after confirming the newsletter signup. But I just sent you an email with the links. I’m planning a full Divi 5 course as well as some more detailed short tutorials but I will probably wait for the late beta version or the full stable release.