Coffee House: A Free Divi Layout Pack for Coffee Shops and Cafes

Posted on February 16, 2017 by in Divi Resources | 55 comments

Coffee House: A Free Divi Layout Pack for Coffee Shops and Cafes

Today, I am excited to share a layout I’ve created for Divi called Coffee House. Coffee House is, as the name would suggest, ideal for cafes, coffee shops, and the like. I’ve made it as versatile as possible so if you like the aesthetic I’m sure you can find many uses for the layout as a whole or its individual sections. Enjoy!

Downloading, Installing & Setting Up the Coffee House Layout Pack

To use the Free Coffee House Layout 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 Divi Daily email list by using the form below. As a new subscriber you will receive even more Divi goodness.

If you’re already on the list, simply enter your email address below and click download. You will not be resubscribed.

Next, locate the file Coffee-house-divi-layout-by-olga-summerhayes.zip in your downloads folder and unzip it. Then, navigate with 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 Coffee-House-Layout-for-Divi.json file. Then click the blue “Import Divi Builder Layout” button and wait for the import to complete.

Once the import is finished, you will have the ability to load your new Coffee House Layout on any builder powered page by going to Load From Library > Add From Library.

Setting Up the Coffee House Layout Pack

To make the layout look like the demo, you will need to take care of a few things:
Navigation:

For this demo I used the Divi Header Extention plugin by Elegant Themes. Upload the extension to your website by following the steps from the blog post above.
After installing Divi Header Extension you will find a new menu item in your WP navigation called Divi 100.

Open Divi 100 and select the following:

Select Type: 1
Select Style: 5
(You can choose other style if you prefer).
Select Default Colour: #ffffff
Select Active Colour: #d7bc99
Click “Save Changes”.

Go to Divi > Theme Customizer > Header and Navigation > Header Format
For Header Style choose “Fullscreen”.

Go to Divi > Theme Customizer > Header and Navigation > Slide In & Fullscreen Header Settings. Check the following options:

Make sure that “Show top bar” is not selected.

Menu Text size: 32
Letter Spacing: 1
Font: PT Sans
Font Style: select “B” for bold and “TT” for Upper Case
Background Colour: rgba(45,46,65,0.93)
Menu Link Colour: #ffffff
Active Link Colour: #d7bc99
Click “Save and Publish”.

Customizer Navigation Settings for Coffee House layout

To make sure that the logo doesn’t shrink after scrolling:

Go to Divi > Theme Customizer > Header and Navigation > Primary Menu Bar.

Select “Make Full Width”
Menu Height: 66
Adjust the logo size to suit your logo.

Customize Primary Menu settings Coffee House layout

Switch to Divi > Theme Customizer > Header and Navigation > Fixed Navigation Settings. Make sure that Fixed Menu Height is the same as Primary Menu Height.

Fixed Menu Height: 66

“Floating” buttons:

For this layout I styled the buttons to look like they are floating and created the illusion of the buttons getting pushed in on the hover. This is done by adding box shadow effect and changing the values for box shadow on the hover.

To get the hovering/pressing effect you need to add the css code below.

Open Divi > Theme Options > scroll to Custom CSS > add the code below:

a.et_pb_button, a.et_pb_promo_button.et_pb_button, .et_pb_contact_submit.et_pb_button {
box-shadow: 0 8px 20px 1px rgba(0,0,0,0.3);
 }
a.et_pb_promo_button.et_pb_button:hover, a.et_pb_button:hover, .et_pb_contact_submit.et_pb_button:hover {
box-shadow: 0 1px 1px 1px rgba(0,0,0,0.1)
}

Click “Save Changes”. Now check your page, all your buttons should “float”.

Centering “Submit” button for Contact Form

The last thing to add is css code to centre the “Submit” button for the Contact Form.
Open Divi > Theme Options > Custom CSS > add the code below:

.et_contact_bottom_container {
float: none;
text-align: center;
padding-top: 10px;
padding-bottom: 20px;
}

Click “Save Changes”. This is it.

The Free Coffee House Divi Layout Pack

The Coffee House layout can be used to create a simple website for a local coffee place. As with most layouts, you can duplicate and re-purpose the sections and modules to expand your site into a multiple page website.

This layout has a few sections that will be useful for Coffee House customers: The Section “What we brew” lists the coffee available and it could be expanded or turned into the “menu” section. Section “The Origin of our beans” tells a story of the coffee sold and where it comes from. This section can be expanded into other pages, where you can have more details about the coffee or information about the business itself. Other important sections are: “Testimonials”, “Contact” and the “Map” to help new customers locate the business.

Coffee-House-Layout-for-Divi-

Wrapping Up

Thanks for stopping by the Elegant Themes blog. I hope you enjoy this free resource. If you have any questions about getting it up and running just let me know in the comments below. Also, if you have any requests for future Divi Layouts you can leave those in the comments too!

Also, be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

55 Comments

  1. Amazing guys! Thanks

  2. OMG Olga great job!

  3. Awesome!! Thank you so much! 🙂

  4. I see only the Export Divi Builder layout button …
    Do I have to delete my already built pages?

    “When the portability modal pops up, go to the import tab. Click the “choose file” button and select the Coffee-House-Layout-for-Divi.json file. Then click the blue “Import Divi Builder Layout” button and wait for the import to complete.”

    • Olga Summerhayes

      Hi, Gunter. You don’t need to delete any pages that you built. To load the layout to your site, in your WP dashboard go to Divi > Divi Library. You will see the Import/Export button at the top.

      • Thx Olga, looks great!

        • Olga, I’m searching for a simple order form.
          So a customer can order f.e. 2 cappuccinos and 3 macchiatos …
          Maybe you know a good plugin?

          • Photoshop 😉

  5. Free Divi header link are broken

  6. Beautiful layout, Olga. Thank you! =)

  7. Hello Olga, great theme! Thanks. I downloaded your small business theme and I would like to use it, but I don’t know how to install it. Would you be so kind to help me with it? Thanks! Mike

  8. Olga ROCKS!! Thank you!

  9. The link for [the Divi Header Extention plugin by Elegant Themes ] 404s

  10. On the demo, the menu does not auto close after clicking the link. Is the supposed functionality?

    • Olga Summerhayes

      Hi, Richard. Yes, this is how this navigation works on the one-page layout. If you will use this navigation on a multi-page website, it will auto close after changing the page.

  11. Thanks Olga 🙂 This layout looks awesome!

  12. Yay Olga! Looks great! 🙂

  13. Hey great! Thank you very much for amazing layout

  14. Nice design, Tq!

  15. Hello good morning, my names is Alfonso, from Spain, I am a subscriber to Elegant Themes, by the way I acquired the template Divi. I follow your blog, which helps me a lot. I ask for your help for my project, it is a salon of beauty, hairdresser, esthetics and sale of cosmetic products, I would like to put to Free Divi Layout Pack for haidresser and some examples. Thank you

    • Nathan B. Weller

      Thanks for the request! That would be a good miniseries to produce (the salon/hairdresser idea). Those businesses usually use a scheduling/booking system to help keep their various stylists booked up with new and repeating clients–so that would likely be part of the series too.

  16. Wow! you guys are amazing!! So much love Olga <3

  17. Thanks for your inspiration in this nice layout ! Is it possible to get the normal header menu in mobile mode? And how do I do that?

  18. make a template of shop of jewelry from natural stones please to DIVI

  19. So beautiful, thanks.

  20. I am in awe of your generosity in producing this for a giveaway. I’d love to use it but I dont have a coffee shop. I assume it’s tweak-able for any kind of use…or am I wrong?

    • You can definitely use it for whatever kind of site you want! I used the “diner” one for a dance studio website and it looks perfect!

  21. Very nice layout !

  22. Very nice work, thanks.
    I followed the instructions, but unfortunately the floating menu Bar is missing the ” OUR Coffee, OUR Story, Contact”
    How I Can link the (CSS ID) to the Menu,

  23. Great job! I love the responsive layout hidding some elements when they are not so important

    Thank you

  24. Appealing layout!
    Big thanks,

  25. Hi Olga, Thank you so much for this layout and greetings from Sydney! I’ve spent some time with the “What we brew” Section and am wondering if you could briefly explain how you have achieved the shadow text on the blurb headings? I cannot see any functionality for a shadow effect and nor do I see any CSS code for that effect. When I change the heading text, the shadow text remains as per your layout text. It’s a mystery to me. I would greatly appreciate your feedback. Many Thx Lee

    • “Hi Olga, Thank you so much for this layout and greetings from Sydney! I’ve spent some time with the “What we brew” Section and am wondering if you could briefly explain how you have achieved the shadow text on the blurb headings? I cannot see any functionality for a shadow effect and nor do I see any CSS code for that effect. When I change the heading text, the shadow text remains as per your layout text. It’s a mystery to me. I would greatly appreciate your feedback. Many Thx Lee”
      Interesting in finding out this as well.
      I chaned that text, but the shadow will remain as you set it

  26. Layout still great … question Olga.
    I want to change the espresso-5.png file? Which programm did you use?
    Thanks

  27. I was told by our server guy to stop using divi, and remove all sites from our server that use it and never to use it again, said it is full of holes that attackers are getting in??!!

    • Nathan B. Weller

      That is simply not true. I can’t speak for your server guy or the setup he’s using but Divi is not “full of holes” that attackers can “get in” through. Divi is a secure theme that’s third party audited by Sucuri.

  28. Love the look of this theme. Having 1 issue though: my logo is in like a white navigation bar above the top image. This also causes the hamburger menu icon in the top right to be ‘invisible’ because it is white on white. Your theme has the logo literally on the image – did I miss something? I tried to use the visual builder to drag the top image up over the logo, however it just causes the image to disappear behind the white ‘nav’ bar. Any ideas?

    • Nevermind – playing with the transparency of the primary header solved the problem!

  29. …just letting you know

    background: -webkit-linear-gradient(50deg, #B28342, #E8D7BE);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    Your candied custom css gradient effect for each of the blurb titles doesn’t doesn’t render in safari browsers and hence is invisible on iPads and iPhones

    Thanks

  30. Hi, this is really cool, thanks! The example headline, “Come and enjoy a perfect cup of COFFEE”, does not show up on my site, can you tell me why that might be? Thanks!

    • Oh, I just found it, it’s the custom css in the text module.

      background: -webkit-linear-gradient(50deg, #B28342, #E8D7BE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;

      Doesn’t work in my browser, apparently.

  31. Hello. This is a great lay-out, but……the font Dancing Script does not appear on ipad with the gradient css. I removerd the css code for gradient color and then the text appears in my ipad. Just a tip.

  32. It made my site “Error 500” I even need to delete it manualy just to fix my site.

  33. Bloody good layout, Olga. Accept my warmest congratulations. Thank you for your inspiration.

  34. Absolutely beautiful design. The colours and the button design really make this have such a high-class feel.

    Thanks

  35. Very nice layout Olga, thanks!
    If I go to Appearance -> Editor -> footer.php and tweak footer.php will I lose that tweak on the next Divi update?

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