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 Diner Layout Pack

Coffee-House-Layout-for-Divi-Preview

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.


Download The Layout Pack

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.
.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #2dbacc !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #2d3540 !important; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:before { border-top-color: #2d3540 !important; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:before { border-top-color: transparent !important; border-left-color: #2d3540 !important; }
@media only screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:before { border-top-color: #2d3540 !important; border-left-color: transparent !important; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #2c343f !important } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #ffffff !important; } .et_bloom .et_bloom_optin_1 h2, .et_bloom .et_bloom_optin_1 h2 span, .et_bloom .et_bloom_optin_1 h2 strong { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 p, .et_bloom .et_bloom_optin_1 p span, .et_bloom .et_bloom_optin_1 p strong, .et_bloom .et_bloom_optin_1 form input, .et_bloom .et_bloom_optin_1 form button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !important;}

Download For Free

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.


You have Successfully Subscribed!

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 Diner Layout Pack

To make the layout to 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, you can find it here: https://www.elegantthemes.com/blog/divi-resources/free-divi-header-extension-provides-20-new-hamburger-menu-stylesnavigation.

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-demo-link {text-align: center; font-size: 16px; border-radius: 4px; padding: 15px; color: #fff; display: block; margin: 10px 0 10px; background-color: #454545;font-weight: bold;}.divi-download-link{text-align: center; font-size: 18px; border-radius: 4px; padding: 20px; color: #fff; display: block; margin: 10px 0 10px; background-color: #7e3bd0; transition: background .5s; text-decoration: none; font-weight: bold;}.divi-download-link:hover{background-color: #C04BDE;}hr{border-style: solid; margin: 0 0 40px 0; border: 1px solid #EAEBEB;}

The post Coffee House: A Free Divi Layout Pack for Coffee Shops and Cafes appeared first on Elegant Themes Blog.



Source link

error: Content is protected !!