Coffee House Demo

Layout for Coffee Shops and Cafes

Recently I had to chance to check out the free Divi Layout Pack for Coffee Shops and Cafes from Elegant Themes.  Being relatively new to the Divi Page Builder plugin, I followed the instructions verbatim  on their post announcement.  Once I created a new demo site, I installed the Divi Page Builder plugin which included the Divi theme as well.

To get the layout pack loaded up on my new demo site, I first had to subscribe to Elegant Themes Divi Daily email which meant I had become a subscriber of more Divi goodness.  Not a problem.  Once signed up, I was given instant access to the layout file and downloaded it to my laptop.

To install the new layout I went to my WordPress administrative dashboard and followed the path: Divi > Divi Library and clicked the Import & Export tab at the top of the page.  I then browsed to the .json file I downloaded and imported it.  Once the import was complete I had access to the coffee house layout in my layouts library.

After loading up the new layout to the Divi Library I created a new page that would serve as my static homepage.  I gave the page a title and clicked the purple Use The Divi Builder button which revealed the Load From Library option.  That allowed me to select the Coffee House Layout which I had previously loaded.  While not exactly like the demo, it was definitely taking shape.

Divi Coffee House Layout – Part 1

In this first video I walk you through the installation of the coffee house layout, the creation of a homepage and applying the layout to it as a draft.  Below are the steps that accompany the video.

  • Visit the post and sign up to receive the the Divi Daily email.  If you already have, just enter your email address and download the layout pack.
  • Once downloaded, unzip the file to reveal the .json file that you will upload.
  • Log into your WordPress dashboard and make sure you have Divi installed.
  • Go to Divi > Divi Library and click the Import & Export tab.
  • A mini-window titled Portability will pop up.  Select the Import tab and then click the button titled Choose File to browse to the .json file you unzipped in step 2 and click the blue button titled Import Divi Builder Layouts.
  • Once the layout completely loads you will be redirected to your Layouts area where you should now see the Coffee House Layout.
  • Go to Pages > Add New and name it Home (or whatever you prefer) and assign this as your static homepage by going to Settings > Reading.
  • Click the blue Use Visual Builder button.
  • Click the purple Load From Library option.
  • Click the Add From Library tab on the Load Layout window.
  • Click the blue Load button on the Coffee House Layout.
  • And finally click the Save Draft button.

Divi Coffee House Layout – Part 2

In my second video I take you from the installation of the hamburger styles extension through the some header customizations that will get us closer to the demo site.

  • Download and install Elegant Themes Divi Hamburger Styles Extension and into your plugins directory.  Activate it.
  • Navigate to Divi 100 and select the following:
    • Select Type: 1
    • Select Style: 5
    • Select Default Color: #ffffff
    • Select Active Color: #d7bc99
    • Click Save Changes
  • Go to Divi > Theme Customizer > Header and Navigation > Header Format.  For Header Style select 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
    • Top Bar Text Size: 18
    • Letter Spacing: 1
    • Font: PT Sans
    • Font Style: Select B for bold and TT for Upper Case
    • Background Color: rbga (45,46,65,0.93)
    • Menu Link Color: #ffffff
    • Active Link Color: #d7bc00
    • Click Save and Publish

Divi Coffee House Layout – Part 3

In part 3 we look at configuring the logo action so it doesn't shrink when scrolling.  We also need to make the buttons pop with the illusion of floating and finally we need to center the Submit button for the contact form.

Logo Settings

Go to Divi > Theme Customizer > Header and Navigation > Primary Menu Bar and make sure that the logo will not shrink after scrolling.

  • Select Make Full Width
  • Menu Height: 66

Style The Buttons

Go to Divi > Theme Options > scroll to Custom CSS > add the code below.

Center the Submit Button

Go to Divi > Theme Options > Custom CSS > add the code below.

Once I had the CSS code in place, I just clicked the green Save Changes button on the bottom.

Divi Coffee House Layout – Part 4

At the conclusion of the post I found I had to perform a couple small tweaks to make my demo site look like the demo site from Elegant Themes.  Mostly the challenges I ran into were located in the header & navigation area and the logo itself.

Primary Menu Bar Transparency

The first issue I tussled with was transparency.  I could not figure out how to remove the white background from the navigation bar at the top.  Finally I found my way around the issue.

  • Go to Divi > Theme Customizer > Header & Navigation > Primary Menu Bar.
  • Draw down the transparency setting of the background color to 100%.

Fixed Navigation Bar Option

By default, the fixed navigation bar option is not enabled in a Divi Page Builder plugin installation.  At least, it wasn't on mine.  This is important and I finally figured out that I had to do the following:

  • Go to Divi > Theme Customizer > Header & Navigation > Primary Menu Bar
  • Set the background color to a color of #ffffff and a transparency of 100%.

Missing Logo

Lastly, I wanted to use the same logo as in the demo.  The .json file didn't seem to include that graphic so I saved a local copy, loaded it to my demo and linked it.

Conclusion

This was my first foray in working with Divi but after spending quite a bit of time on this layout, I've grown to really enjoy it.  The designer, Olga Summerhayes, did a really fantastic job.  Finally, I think this layout can more than stand on its own as is and look forward to working with the Elegant themes Divi layouts more.

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Leave a Reply

%d bloggers like this: