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

Last Updated on September 16, 2022 by 55 Comments

Coffee House: A Free Divi Layout Pack for Coffee Shops and Cafes
Blog / Divi Resources / Coffee House: A Free Divi Layout Pack for Coffee Shops and Cafes
Play Button

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

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! 👇

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow 👇

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How 👇

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

Get a Free Augmented Reality Layout Pack for Divi

Get a Free Augmented Reality Layout Pack for Divi

Posted on March 25, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Augmented Reality Layout Pack that’ll help you get your next Augmented...

View Full Post
Download a Free Webinar Theme Builder Pack for Divi

Download a Free Webinar Theme Builder Pack for Divi

Posted on March 22, 2024 in Divi Resources

It’s time for another freebie! This time, we’re giving you a free Theme Builder Pack for Divi. Combining these with our beloved Divi Layout Packs is a great way to build the Divi website of your dreams with ease. This week, the design team has created a beautiful Webinar Theme Builder...

View Full Post
Get a Free Modeling Agency Layout Pack for Divi

Get a Free Modeling Agency Layout Pack for Divi

Updated on March 21, 2024 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Modeling Agency Layout Pack that’ll help you get your next Modeling...

View Full Post

55 Comments

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

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

    Thanks

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

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

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

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

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

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

  9. 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??!!

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

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

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

  12. Appealing layout!
    Big thanks,

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

    Thank you

  14. 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,

  15. Very nice layout !

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

  17. So beautiful, thanks.

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

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

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

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

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

  22. Nice design, Tq!

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

  24. Yay Olga! Looks great! 🙂

  25. Thanks Olga 🙂 This layout looks awesome!

    • Thank you, Chathura.

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

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

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

    • Should be fixed now.

  28. Olga ROCKS!! Thank you!

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

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

    • Thank you, Lilly.

  31. Free Divi header link are broken

  32. 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.”

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

  33. Awesome!! Thank you so much! 🙂

    • Thank you, Ana.

  34. OMG Olga great job!

    • Thank you, David. That means a lot.

  35. Amazing guys! Thanks

  36. <3 it Olga!

    • Thank you, Shannon.

    • Thank you, Mario. Yes, that’s the one.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today