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.

All photos courtesy of the generous authors on Unsplash.com via the Unsplash License. Layout Packs are released under the GPL, which means you can use them for free for both personal and commercial projects! By using ElegantThemes.com and our products you agree to our Terms of Service.

Download For Free

Join the Divi Newlsetter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

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.

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.

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.

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!

By Olga Summerhayes

Olga Summerhayes is a web designer and owner of Infinite Imagination Web Design, based in Australia. She is passionate about working with small businesses and helping them with their online presence. When she is not in front of computer she spends time with her family. English is her second language.

55 Comments

Mario Moreno
February 16, 2017

The link to the Divi Header extension is incorrect. I believe this is the correct link:

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

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.

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

Sergiu
February 24, 2017

“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

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.

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?