Well I am excited to share with you my very first Divi layout kit. Inspired by the Divi 100 posts, I thought I would show what can be done in just one day using their wireframe kits.
I have decided to design my first free layout pack for churches. This kit includes 4 page layouts. Home page, About page, Ministries page and a Contact page. Sure there are many more pages that could have been included but this will be a great starting point for any church or ministry website. It can also be re-purposed for just about any type of website.
Check out the live demo page here.
Installing and Using the Free Divi Layout Kit
1 To use the Free Divi Church Layout Kit on your own Divi website you will first need to download it using the button below.
2 Next, locate the file “Church Layout Kit #1 – by Geno Quiroz.zip” in your downloads folder and unzip it.
3 Then, navigate in your WordPress admin to Divi > Divi Library and click the “Import & Export” button at the top of the page.
4 When the portability modal pops up go to the import tab. Click the “choose file” button and select the “Church Layout Kit #1 ALL PAGES.json” file or any one of the individual page layouts. Then click the blue “Import Divi Builder Layout” button and wait for the import to complete. NOTE: The “ALL” file is very large (54MB) so if your server times out when importing, then you can import each page layout individually.
5 Once the import has finished you will now have the ability to load your new Divi Church Page Layouts on any builder powered page by going to Load From Library > Add From Library.
All photos courtesy of the authors on Pexels.com & Unsplash.com via thier respective licenses. Layout Packs are released under the GPL, which means you can use them for free for both personal and commercial projects!
Home Page
About Page
Contact Page
Ministries Page
Have fun!
Well that’s all for now. I hope you find this article useful.
te pasaste!!! Gracias!!!
Thanks Geno! I can’t wait to use this layout!
Thank you so much Geno! This is perfect for an upcoming project. I appreciate all you do for the Divi community!
Thanks Kathy 🙂
Bro, you have totally outdone yourself! This has also come at the perfect time for my church who is also a client! Do You think you’ll develop this into a full-blown theme in the future?
Hi Kenny. Yes i was thinking about it 🙂
Wow, Geno! This is beautiful! Very, very, very well done!
Thanks Ashley. There is another one coming soon 🙂
This is really great Geno! Love the superb layout, colour setting and yes, in the name of Jesus Christ! God bless!!
Amen brother. God Bless!!!!
Thank you, Geno, this is most generous of you. I happen to have a church site that I run, and quite a few pages could do with a bit of an update! Cheers!!
Awesome. Glad you like it 🙂
Hi Geno firstly thank you and god bless you mate.
I have run into an issue and this maybe just a simple fix for you mate but for me it’s like trying to climb a mountain.. I have downloaded and used your layout for a church site that I happen to get and you happen to put out a free layout, how about that for luck, but the issue i am having is the section under the MISSIONAL the margins are, all over the pace on FF and IE
I saw a post on using vh and tried that out also tried using a higher % than what was in the initial layout for top margin but it then works for FF and not for IE or vise versa I am lost how to make it look the same as on Chrome Geno
Geno, thanks. You are so generous with your time and talents.
This is my spin on it, I didn’t change much. Its also just a demo…
http://cashhouses.pinpoint-mktg.net/
Thanks Geno!
Hi Geno – great layout as normal, but, I’ve run into a problem when trying to import the ‘about’ layout, it’s saying that the file is too big (showing up as 43.7mb on my macbook) I’m trying it out on a local install using mamp at the mo and wondered if it was meant to be that big a file? many thanks.
Sorry you are having trouble with that page. It is the largest of the pages because of the profile pictures. I don’t have experience with mamp, but there might be some settings that can be adjusted to upload the file.
Hi Geno! So do we set up a child theme FIRST and then install the Layout?
I used the “Orbisius Child Theme Creator”. Please forgive my ignorance. Do we install the Layout in the master theme or child theme?
Hi Vance. You are going int he right direction. You can use Orbisius to create the child theme. Then go ahead and install Divi. Once that is done you can go to the Divi Library and select Import on the top of the page. Then just find the json file included in the zipped folder and import the one that says “all”. If it times out, then you may have to install each page template one by one.
Hi Geno, this looks great! But when I clicked on the orange Download button, I was taken to a “No Results Found” error page. How can I download this?
Sorry Kevin. I was just in the process of uploading a new version. The only changes are that I optimized the images reducing the JSON files from 120mb to 30mb. Hopefully, it makes it easier/faster to upload. It should be working now.
Got it, Geno… thank you!
Thank you for sharing. I have a quick question. How can I get the same overlay color on my images as you have in yours? Thank you in advance. God bless
Hi D. The images were modified in Fireworks prior to using them on this project.
Hi Geno,
Thanks again for sharing this. I wanted to know why the young adults section not show properly like the children’s ministry on mobile? I see that it is disabled on mobile but will this be fixed anytime soon? Thanks again for your service. God bless
Hi D, That section is disabled on mobile and the section below it, which is supposed to be used to replace this section for mobile, is disabled for desktop and enabled in mobile. This is so that the image is above the description on mobile. You can enable the section by opening the settings and unticking the disable options. Although I recommend using the second section for a better mobile experience.
Hello Geno,
Thank you so much for providing these layouts! I originally install the layouts on a demo site and tonight I installed the Home layout in another site. Everything seemed to go well but then I noticed that the Parallax effect is not working in the Children’s Ministry and Women’s Ministry sections – it is as if it was switched off (but it’s not). Can you point me in a direction to try and solve this issue? Thank you in advance for your help.
Hi Frank. The first thing that comes to mind is that there may be a plugin or something causing the parallax not to work. Try disabling all your plugins and make sure you are running on the most recent version of Divi and WordPress.
Howdy awesome work, just a quick question, not only here but for all Divi sections that have a background image, they are not truly responsive, is there a way to make them so that you still see the full image on mobile not just some of it?
The only way to do that is to use the image module instead of a background image. IF you need to add text or another module over the image, then you can create a section/row below and apply a negative top margin until its is sitting over the image right where you want it.
Geno,
Great demo!! Although, three hours trying to upload the About section into Divi Library. Is there an option I’m missing or are the images causing the issue? Home | Contact | Ministries loaded super fast. Do you offer an option without the images and maybe just have IMG Coming as a placeholder img? This is my first time uploading layout for I’m just now into my third week of mastering WP and DIVI. I love this layout!! I just want to utilize it. I appreciate your talent and for offering this layout option for people to learn and use.
Ciao
Gerald
I am sorry you are having problems with the upload for that page. It is probably because the images. It is a pretty big file.
Dear Geno,
I like to use your lovely layout for a project of my local church, but I am not able to import the “ABOUT” json file.
It keeps on hanging on 1%. I tried several times and left it overnight. The other json’s are fine.
I noted that this file is about 43MB, could that be the reason? And how should I go about to solve this please?
Thank you and best regards,
Frans
Hi Frans. Looks like you are trying to install an older version. Please download the optimized version from this page.
Geno – this is a wonderful layout and I want to use it to help a congregation in our community but I have managed to mess up your beautiful layout. Could you please tell me what I did wrong to make the pastor’s photo partially hidden? http://eeb.0aa.myftpupload.com
It looks fine on my end.
Be blessed geno, great work
Used your layout as a starting point for adrianrealiteracy.org. Great learning experience. Thanks, Geno!
Nice work. Looks great.
Geno… I am so inspired by your work. I am grateful for all that you share…
Thanks Rev. Brian.
Big work dude…May God blesses you.I was looking for a layout to create a website for my church and I think I got it.Am a newbie in the field.How am I supposed to install it…Thanks
Thanks Guy. The instructions are in the post.
Hi Geno. Love the Church Layout Demo. But I’m unable to download your layout pack. Download shows Failed-Network Error. Any ideas on what to do. Would love to use this layout for our church website.
Thanks.
It is working on my end. It may be the internet connection.
No worries. I was able to download it. Thank you fr the wonderful theme. God bless.
God bless you as well Smitha ?
Thank you brother! Be blessed!
Bless you as well bro.