How to use Minuscula WP Theme for a nice Coffee Shop website

So, Minuscula launched a few months ago. And it was our first baby theme that came to the world. Since then we were really excited connecting with you, our customers, and talking about installing, using and customizing the theme. And then, one day, we came with an idea.

It’s a fact Minuscula can serve a lot of purposes, from a personal or a freelancer website to a very modern and personalized business site. But, how can you get the maximum of the theme options to turn your website into the best looking and performing site?

That’s the intention of these posts. We’ll share with you tips and tricks to customize Minuscula so you’ll get the nicest website for your project. Every new chapter will introduce us to a different design style than can serve many businesses or personal sites.

Today: How to turn Minuscula into a Coffee Shop website? We’ll learn step by step what to do to get this demo looking. Intrigued? Let’s start.

» Design Options

We decided to go with a fresh looking and also a kind of warm homelike style. For these reasons, the background of the whole site is a light wood texture and the main color range goes within the brown colors and a nice pastel green that gets itself in the middle.

» Typography Options

The font we chose for the headings and home slogan is called Leckerli One. It helps creating an informal and warm atmosphere. For the Menu we chose Abel, which provides a fresh and modern look. And finally a nice and classic Helvetica/Arial font (from the Serif family) makes the body legible 100%.

» Homepage Options

The elements we’re using in this demo are:

  • Regular slider:
    We didn’t need a huge slide, so we chose the Regular one, classic and stylish. Because of its size it allows to see more of the background texture, and it helps creating the atmosphere of the site. Another amazing thing about the Regular slider is you can embed into it a Youtube or Vimeo video.
  • Slogan.
  • Services with featured images:
    You may use them to show your main services, or maybe to show 3 steps to get into your business, etc.
  • Portfolio:
    In this case we’ll use the Portfolio platform to create a food menu. Each item will be a meal with its photos, specs and price. In addition, you can assign them to categories like: “Breakfast”, “Cakes” or “Dinner”.
  • Recent news.
» General Options

We uploaded our own logo and chose the structure where the menu and logo are centered within the page (the default option).

» Trick: using the Custom CSS

In the widgetized footer we are showing all kind of contact details: Google Map, Contact Form, Last Tweets (all from the Quadro Custom Widgets). But we didn’t wanted to show them when you navigate to the Contact Page, because we’ll display these elements at the page itself and we didn’t want to be redundant. So what to do?
Just go to “Theme Options” and under the “Design” tab, paste this code into the Custom CSS box:

.page-template-contact-php #inner-footer {
   display: none;
}

Some important tips to keep in mind at this point:

→ Try not to use more than 2-3 fonts in the whole website. Ideally, use one for headings and titles and a second one for texts and paragraphs. It helps to keep your site clean, readable, logic and friendly.
→ Also, try to avoid using really crazy fonts for paragraphs and texts, it just makes it harder to users to read your content and rejects them from being in your website. The serif or sans serif fonts may be great for this job.
→ Use colors with coherence: with your visual identity, with your logo, with your branding. And also with your business category and your audience.
→ Make it simple. When you’re in doubt of what to choose or how to implement something, go with the simpler way to tell what you want.

Here go all the specs:

QISpecs-CoffeeBreak

Which kind of websites can be created using this tutorial?

A coffee shop (off course), restaurants, small hotels, environmental sites, florist shops, catering services, gift shops, a nice and relaxing blog, and I’m sure much more.

Please, comment here your thoughts and ideas, and off course share with all of us your website made with Minuscula.

If you want to influence what the next “How to…” will be, leave your idea here at the comments and tell us which style do you want to turn Minuscula to. Be creative!

Until the next “How to…” post!
Keep sharing.

——————————-
* Thanks to the following Flickr authors: janineomg2, Demion3, Jeff Kubina, Logan Brumm Photography and Design, saxon, pasotraspaso, osamukaneko, Sean Rogers1, UggBoyUggGirl, L.Cheryl Back In Action, visualpanic and Chris Owens for the very nice images used on this demo.

Share this post
Tweet about this on Twitter3Share on Facebook7Share on Google+2Pin on Pinterest0Email this to someone

5 comments

Comments are closed.