Free Crossfit Inspired Layout Pack by Geno Quiroz Created with the Divi Wireframe UI Kit

Posted on August 27, 2016 by in Divi Resources | 96 comments

Free Crossfit Inspired Layout Pack by Geno Quiroz Created with the Divi Wireframe UI Kit

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!

Downloading & Using Sarah Jade, the Crossfit Inspired Layout Pack by Geno Quiroz

Divi-Crossfit-Fitness-Layout-Pack-Download-Use

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
Divi-Crossfit-Fitness-Layout-Pack-Home

Home Page

Divi-Crossfit-Fitness-Layout-Pack-About

About Page

Divi-Crossfit-Fitness-Layout-Pack-Services

Services Page

Divi-Crossfit-Fitness-Layout-Pack-Contact

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-2-6-logo

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.

Learn More About Divi 3.0


96 Comments

  1. 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

  2. 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.

    • Thanks James. Hope you find it useful on one of your projects 🙂

    • I’m going to have to second this. Couldn’t agree more, James. Thank you Geno

  3. 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.

  4. Looks Cool!

  5. Awesome thank you for giving out free. I’m definitely using this for my new design tonight!

  6. Stunning! Will use bits and pieces on my site. Thx.

    • I hope you find it easy to use 🙂

  7. Thank you. You are very generous. Geno get premium quality.

  8. This is cool and classic. Thank you Geno for your inspiration.

    Cheers!

  9. Thank you Geno for this nice Layouts! I love them.

  10. Awesome! Thanks for sharing, Geno!

  11. Looks great!
    Thanks Geno 🙂

  12. Geno is a beast. Love this. Thanks so much.

  13. Great layouts as always! Really awesome, Geno! Thanks for share.

  14. Many congratulations Geno.
    This is one high quality layout pack.

    Great colour combinations, perfect proportions and awesome attention to detail.

  15. 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?

    • 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.

    • 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.

    • 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!

  16. Is a nice layout, and the good this is, cab e customize.

  17. Is a nice layout, and the good this is, cab e customize.

  18. Thank you Geno!! Your work is always flawless and inspires new ideas.

  19. 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

  20. Awesome layouts !
    Thanks for sharing…
    (Thanks for all your Divi tutos/tips too Geno~ 🙂

  21. Randy A. Brown

    Thanks Geno! You’re layout packs are impressive!

  22. 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.

  23. Thank you Geno, as Yoga/Pilates Teacher i found these very inspiring 🙂

  24. 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.

  25. 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.

  26. Fantastic job, Geno! I’m not much of a cross-fitter (too much sweating involved), but this layout is MAGNIFIQUE!

  27. Very nice! Thank you Geno.

  28. Great job Geno and congrats my friend! This is a beautiful layout pack.

  29. 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 😀

  30. Very nice! Thank you.

  31. Thank you Geno for your very generous share! Demo site if beautiful. Great example layouts.

  32. fantastic design. What I really would like is that the process to create such a design is revealed, isn’t that possible?

    • 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.

    • 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?

  33. Thank you for this great design!

  34. ¡¡¡ 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!!

  35. 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. 🙂

  36. Thank you Geno,
    as always with your work: beautiful and above all inspiring!
    Very appreciated!

  37. Awesome Geno, Thanks for this great layout pack mate

  38. 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.

  39. Splendiferous! Thank you Geno.

  40. 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.

  41. Josh Hall

    Great work, Geno!!

  42. Thank you Geno , For for it awesome layout pack

  43. Another awesome addition to our library Geno. You never cease to amaze the ET community. Thanks for your contribution man.

  44. Great work! I like it so much! The how to material will be nice!

  45. Really nice! Thank you for this! I would love to see charity-related templates based on Divi. Kind regards

    • There is no file by that name in the layout pack. Did you use the Divi Library Import Function to import the json file?

  46. Thanks Geno Q. Awesome layouts!

  47. Geno, I just have “One Word” Brilliant!!!

  48. 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 🙂

  49. Great layouts Geno. Thanks for making them.

  50. Thank you VERY much for the layout pack. It looks amazing!

  51. 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 (-:

  52. Thank you, I’ll be looking at these to learn more about how you create the so good looking.

  53. The buttons seems to be unresponsive, they don’t display on phones

  54. 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!

  55. 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!

  56. 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.

  57. I’m a total newbie – just doing my own site here. Just wondering – can I change the colours?

    It’s looks amazing BTW…

  58. Beautiful and professional layout, solve my design ideas. Will apply it to my clients website.
    Thanks a million Geno.

  59. 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 🙂

  60. 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.

  61. 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.

  62. Thank you very much for inspiration.

401,632 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest