Welcome to Day 89 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!
In today’s post I am excited to share with you a brand new Divi layout pack I created. Inspired by the Divi 100 posts, I thought I would show what can be done in just one day using the awesome (and free) Elegant Themes Wireframe Kits Vol. 01 and Vol. 02. I also took advantage of some of their other free layouts such as the Footer Layouts, Section Layouts and Contact Layouts.
Last week I decided to upload all their layout kits into one WordPress installation for my own personal reference. By building new pages within this installation containing all the other layout packs, it made it very easy for me to copy and paste sections, rows and modules from an existing layout into my new page simply using the Divi right-click copy and paste feature.
Before I knew it I had two new layout packs all my own. The first one is for churches and ministries (which I released on my own website) and the second is the fitness layout pack that I’m sharing with you today.
Check it out!
- 1 Downloading & Using Sarah Jade, the Crossfit Inspired Layout Pack by Geno Quiroz
- 2 Subscribe To Download For Free
- 3 Download For Free
- 4 You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
- 5 Sarah Jade, the Crossfit Inspired Fitness Layout Pack by Geno Quiroz
- 6 Tomorrow: 5 Stunning Examples of the Post Title Module & How to Achieve Them
- 7 Divi 100 Day 89
- 8 The Countdown To Divi 3.0
Downloading & Using Sarah Jade, the Crossfit Inspired Layout Pack by Geno Quiroz
To use the new Divi Fitness Layout Pack on your own Divi website you will first need to download it using the button below. Next, locate the file Fitness Layout Kit #1 – by Geno Quiroz.zip in your downloads folder and unzip it. Then, navigate in your WordPress admin to Divi > Divi Library and click the “Import & Export” button at the top of the page.
When the portability modal pops up go to the import tab. Click the “choose file” button and select the All.json file or any of the individual files you want. Then click the blue “Import Divi Builder Layout” button and wait for the import to complete.
Once the import has finished you will now have the ability to load your new Divi Fitness Layout Pack on any builder powered page by going to Load From Library > Add From Library.
Subscribe To Download For Free
Sarah Jade, the Crossfit Inspired Fitness Layout Pack by Geno Quiroz
This Fitness Layout Pack is designed for health coaches, personal trainers, crossfit coaches, lifestyle coaches and gyms. But as with most layout packs and child themes, it can be repurposed for just about anything.
This layout pack includes 4 custom pages to help you get a head start on your next project.
- Home
- About
- Services
- Contact
Home Page
About Page
Services Page
Contact Page
If you’d like to view a demo of this layout pack in action, you can do so here.
Tomorrow: 5 Stunning Examples of the Post Title Module & How to Achieve Them
In tomorrow’s blog post contributor Josh Hall is going to share five different ways that you can style the post title module. These various styles are especially useful for anyone regularly blogging with the Divi Builder because you can save a style and re-use it over and over again on each new post–substituting in new content, of course. See you there!
Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!
Divi 100 Day 89
The Countdown To Divi 3.0
This post is part of our Divi 100 marathon. Follow along as we post free Divi resources for 100 days in a row! This 100-day countdown will end with the game-changing release of Divi 3.0, including our brand new visual editor built from the ground up using React. Divi 3.0 will change the way you build websites with the Divi Builder forever!
Let the countdown begin.
Thank you very much for inspiration.
I’ve just come across this and it is awesome to have pre-built layouts like this. I’m using it and it works perfectly. One quick question. On the homepage where can I find the image behind about Sarah to swap that out?
Thank you Jeff. It is in the rows advanced settings. It is set as a column background.
Geno,
This was a great addition. I am now building a site for my friend using your layout. For some reason I am having a problem with the services page. http://nextleveltraining716.com/index.php/services/
On the computer the “group training section” looks and operates great however when i go on a mobile phone and look at that same page the lorem ipsum is there and not the text that is inputted and visible on desktop?
Hi Max. For that section I have a desktop version and a mobile version. So that on the mobile version they stack in the same order as the other ones. That is the problem I think you are having. I suggest creating a new page temporarily and adding the original template for that page. Then copy the two sections over to your existing page. Then copy over the text.
Great stuff, Geno.
Good to hear you’re on the team on a regular basis now. I really appreciate the steady flow of awesomnity you’ve been providing us with for quite some time now. Being the code legasthenic that I am, Divi has been a game changer for me, and you have contributed incredibly much to that experience.
Thanks Andreas. I appreciate the kind words 🙂
Beautiful and professional layout, solve my design ideas. Will apply it to my clients website.
Thanks a million Geno.
I’m a total newbie – just doing my own site here. Just wondering – can I change the colours?
It’s looks amazing BTW…
Hi Brona,
All the colors are set within the module advanced design settings. If you are not very familiar with the advanced settings, you can check out this video here.
https://www.elegantthemes.com/gallery/divi/documentation/advanced-design-settings/
In reference to the Divi Library being large… When I downloaded the Divi theme it came preloaded with layouts (very similiar to what the library has). So, while I enjoyed searching the Divi library for different options, I didn’t need or use any of them.
For this particular fitness layout option, can you recommend a good layout for varying meal plans and fitness exercise plans? Is one of the layouts a good option? I built a fitness site for a client with another theme (not Divi) and that was the biggest challenge in trying to wrap the site up…. The massive amount of content. Narrowing down the text was a real challenge in this particular theme.
I think the FAQ Layout pack would be perfect for this. Check out could be used for such a page. Check out FAQ Layout 01on this page. Just add a new page to the Sarah Jade layout pack and then add in this FAQ section and modify the fonts and colors to match.
https://www.elegantthemes.com/blog/divi-resources/free-divi-faq-layout-pack
Thank you, thank you, THANK YOU! Just one of the million reasons why I love you guys. Can’t wait for 3.0! Oh…and great work Geno. You’re the man!
I love these layouts but I have to say
…they make me feel just a little guilty for being out of shape 🙂
Great work Geno!
The buttons seems to be unresponsive, they don’t display on phones
Thank you, I’ll be looking at these to learn more about how you create the so good looking.
Just made a nice site set up in less then a day by tossing around some of the sections… Great! Now the client has a hard time keeping up delivering the content (-:
Thank you VERY much for the layout pack. It looks amazing!
Great layouts Geno. Thanks for making them.
This is awesome. I am a complete newbie to creating my own site. If someone could give me a few tips that would rock. There is a section on the home page with a picture of Sarah with her arms crossed on a black background and on the other side some text. I love this section but I cant for the life of me find how to remove the picture and insert my own, Any of you amazing Divi people have any suggestions. Thank you for all the help so far.
Hi Lori,
The image of Sarah is in the column background. Open up the row settings and click on the advanced tab. And just scroll down a bit until you see the background image being used in column one 🙂
Geno, I just have “One Word” Brilliant!!!
Thanks Geno Q. Awesome layouts!
I have error, this rescource cannot be displayed:
http://montereydev.com/tests/layouts/wp/wp-content/uploads/2016/07/static_map-02.jpg
How can I delete it?
There is no file by that name in the layout pack. Did you use the Divi Library Import Function to import the json file?
Really nice! Thank you for this! I would love to see charity-related templates based on Divi. Kind regards
Great work! I like it so much! The how to material will be nice!
Another awesome addition to our library Geno. You never cease to amaze the ET community. Thanks for your contribution man.
Thank you Geno , For for it awesome layout pack
Great work, Geno!!
Absolutely Magnifico!
geno. thank you so much. appreciate the layouts you share with us.
wondering. is there a place to view all the divi layouts/packs offered? i’m not sure how to remember all of these good offerings without seeing them in one location and then choosing the appropriate ones to download.
thank you for your good reply to this query.
Thanks Sue. We keep a list of all the layout kits and extensions here http://quiroz.co/divi-tutorials/divi-resources/
This is also a great resource http://elegantdivilayouts.com/
Geno. Thank you so much. These links are a great help.
Splendiferous! Thank you Geno.
Great work Geno!
Looks great and functionality is tops (but the links in the footer aren’t linked)
Inspiring and motivating. Weekend will be spent looking into each section to help me see how the sections were designed.
Awesome Geno, Thanks for this great layout pack mate
Thank you Geno,
as always with your work: beautiful and above all inspiring!
Very appreciated!
Wow! You’re the man, Geno! Skilled, talented, helpful, etc. We haven’t met, but I read, follow and learn from everything you post here and in ET groups. Much appreciated, sir. 🙂
¡¡¡ WOW !!!
Thank you so much for this awesome template.
It perfectly fits in one of our recent projects.
Saves us a lot of time!
MORE OF THIS, PLEASE!!
Thank you for this great design!
fantastic design. What I really would like is that the process to create such a design is revealed, isn’t that possible?
I agree. Perhaps the process is simple once one understands it. It even may be intuitive, to some. But I need a few specific steps. Anyone?
Which steps?
I think there is going to be a post coming out soon where Mario shares his process for using these wireframe kits. I am looking forward to it.
Thank you Geno for your very generous share! Demo site if beautiful. Great example layouts.
Very nice! Thank you.
Thanks Geno. Much appreciated.
Loving this. Just wished it included a blog layout since that is required for a CrossFit site.
You can expect to see some blog layouts that you could incorporate into this kit coming soon. We are just scratching the surface 😀
Great job Geno and congrats my friend! This is a beautiful layout pack.
Very nice! Thank you Geno.
Fantastic job, Geno! I’m not much of a cross-fitter (too much sweating involved), but this layout is MAGNIFIQUE!
Geno – Great work! Thanks for sharing! I would be interested to see a link to your new layout pack for churches and ministries as well.
Here is a link to the free Divi Layout Kit for Churches/Ministries http://quiroz.co/church-layout-kit-divi-1/
Thanks to all Elegant Themes guys and of course thanks to Geno for this beautiful layout package. We will use it as soon as possible.
Thank you Geno, as Yoga/Pilates Teacher i found these very inspiring 🙂
Beautiful layout! I noticed issues with it on Safari (5.1.7) though: oversized logo, Sarah Jade block missing content on homepage, weight challenge form missing, About page text missing.
Ooo…I must clarify. It’s only an issue on Safari Windows. Perhaps that’s not a big enough deal to worry about :-).
Not surprised. Apple has ceased development of Safari for Windows, so the more time that goes by, the less it works. It’s a shame, because I liked using it at work where we’re Windows based.
Thanks Geno! You’re layout packs are impressive!
Awesome layouts !
Thanks for sharing…
(Thanks for all your Divi tutos/tips too Geno~ 🙂
Thanks Geno for sharing
Well thought out layouts!! Thank you!
One of the hardest things is making a site with few pages not seem ‘content then’, and this pack gives each page a full look.
Great job1
Thank you Geno!! Your work is always flawless and inspires new ideas.
Is a nice layout, and the good this is, cab e customize.
Is a nice layout, and the good this is, cab e customize.
Thanks, Gene. This brings up a question that I’ve been thinking about as the series goes on (I’m not a developer, but someone using Divi for my own websites). My question (addressed either to you or the Divi staff) is as follows:
It is wonderful that all of these downloads are offered. But, it seems to me that if I upload all of them to a WordPress installation, the resulting Divi Library is going to be enormous — perhaps so large and unwieldy that it is going to be very difficult to use (finding needles in a haystack?).
If that is the case, what is a good strategy for being able to identify and select the layouts that are most applicable and useful for my websites?
I have them all on one site and it’s not too bad at all really. As more and more layouts come out you may need to split it up into a few websites. But its great when you see a section you want to use on the front end, you just open up the page on the backend and find the section you want to use, right-click, copy then go into the page you are working on and paste it in there. Then when you are done with your pages, just save and export those new pages only into a new website..
Thanks, Geno (and Johannes and Barbara). Those are helpful tips!
I had been thinking the same thing. I like the idea of downloading them into one ‘test’ site to play with and identify what you need. Eventually I suppose you will identify those that you like and use the most. But I would like to hear about some good practices to keep from ‘cluttering’ live site libraries.
A good strategy is to install all what you can find in one big test installation, and then make a list of functions, items and design which you require for your work, and then filter out all not needed items off the library. A lot of them are 2x or even 3x there, but separated on different templates (layouts vs. sections vs. modules), you can simplify them a lot, sure it needs some hours and a pizza 🙂
Or move to a new server with optimized linux, nginx, optimized mysql-conf, enough ram and a good handled ram-caching.
Many congratulations Geno.
This is one high quality layout pack.
Great colour combinations, perfect proportions and awesome attention to detail.
Great layouts as always! Really awesome, Geno! Thanks for share.
Geno is a beast. Love this. Thanks so much.
Looks great!
Thanks Geno 🙂
Awesome! Thanks for sharing, Geno!
Thank you Geno for this nice Layouts! I love them.
That I love DIVI
This is cool and classic. Thank you Geno for your inspiration.
Cheers!
Thank you. You are very generous. Geno get premium quality.
Thanks Subhan
Stunning! Will use bits and pieces on my site. Thx.
I hope you find it easy to use 🙂
Awesome thank you for giving out free. I’m definitely using this for my new design tonight!
Cool. Thanks Jennifer
Looks Cool!
Thanks Munir
YES.. Something that does not include include a computer or cellphone for once. Love to see some variety.
Que? It’s layouts. You can change the images you know 😉
Richard says it’s great to see a layout that is not packed with the omnipresent we-are-a-creative-agency-and-we-take-photos-of-our-desks-from-above photos. And he’s got a point there.
Geno, your work is really awesome. Unselfish people like you is what makes Divi so great, and what I love most about Divi. Thanks for the layout pack, it is most appreciated.
I’m going to have to second this. Couldn’t agree more, James. Thank you Geno
Thanks James. Hope you find it useful on one of your projects 🙂
Awesome, i just love this pack Mr. Geno Quiroz
Pack installed and viewed
This really made my day.
thx Geno.
Awesome. Glad you love it Lasse