Make a Barista Landing Page in Less than 10 Minutes

Hi, I am Jeppe from Oxyelements. In this tutorial, I will show you how to make a website in less than 10 minutes. Today we are going to design a landing page for a coffee shop.

If you would rather watch a video of how I did it, find the video at the bottom of the post.

Protip: This post assumes you have a subscription with oxyelements as you will need it to follow the steps. Register Now and follow the guide.

Step 1: Start by adding a header element

Hover image to play animation

Start by going to the ‘Add’ panel and library. Click the ‘design sets’ and find Oxyelements. Then, let's start with finding a header. Pick the one you like, I'll choose one from the library.

To change the logo, click on it in the header section or find it in the structure panel. Then go to ‘browse’ under ‘Image URL’.

Now you can upload your logo or simply pick it from your media library. I have already uploaded some pictures here. I'll use the coffee shop logo.

Hover image to play animation

To change the styling of the logo, click on ‘Advanced’. Here you can make changes to the size and spacing, colors, effects etc. I'll adjust the ‘Max-height’ slightly so it appears bigger.

Hover image to play animation

To make this appearance of the header match our coffee shop topic, I’ll change the color of the button on the right.

Left-click on the ‘Get started' button and choose ‘Advanced’ options. Then click the ‘Background’ tab and now you can choose your desired color to match your brand.

Protip: Remember to add this color to ‘Global Colors’ so you can easily use it throughout the whole website.

For this use case, I will pick the brown color and just name it ‘Brown’ in the Global Colors.

Hover image to play animation

Next up, you can see here in the structure panel (click “Structure” in the top right) that we have our header.

Step 2: Adding a hero section

Now we need a Hero section. Go down to the ‘Heroes’, find the one that you think fits best. After you have chosen your hero, go to the ‘Advanced’ tab and click the ‘section’. Here we can add the background image we want. I have one here in the media library so I’ll select that one.

Hover image to play animation

Step 3: Changing text to fit your brand

Then let's change the text so it fits a coffee shop - we can call it the ‘Coffee Shop’.
Below this headline, you can make a small subheader, also let's label the button ‘Book a table’.

Step 4: Making a parallax-ish background

I like the image to be fixed when scrolling.

To do this, go to the ‘Advanced’ tab, ‘Background’ and tap the ‘fixed’ button, then the image will stay fixed on the landing page while scrolling.

Hover image to play animation

Here is the final result:

Hover image to play animation

Step 5: Showcase products with Content Sections

Let's choose some content to put under the hero section.

I have selected this content element because it allows us to have two products on the page.

Hover image to play animation

Change the background images that fit your products. In this case, we’ll have Breakfast’ and ‘Coffee’ products.

To change Name’ of the product just click on the element and type in the name of your products.

I’ll put a picture of a cup of coffee in the first product box and type in ‘coffee’.

Now you can see that you can hover over the product boxes and we can make them clickable to where we want.

Step 6: Make an introduction to your company

Under the hero section, it would be nice to talk a bit about the company, how it started, what we offer and tell a bit about the business.

Hover image to play animation

I found a very cool image that also gives some spacing or a break to the page.

To add an image to your page, go to ‘Search components’ in the top-left of your screen and type ‘image’.

Now click the button below.

We can make it a bit smaller, so we'll change the width of the image to about 40%.

I will also use centered alignment for the image so it looks better.

Step 7: Make the page interesting with supporting content

To add more content sections to your landing page, just go to the Oxyelements again and find some content elements that you find interesting.

I like the image and text elements because you can do a lot of things with them. Here, I just want to change the image to a coffee image and we can change the text to our preferences.

Hover image to play animation

As you can see, the button is the same color as we chose in the beginning.

Let's choose another content element. We can pick the one with the image on the left, text on the right.

Now, it starts to look like something. Simply, pick the ‘coffee’ image for this element, and for the text part we can type in ‘Enjoy the taste’.

Hover image to play animation

Step 8: Drive the conversion with a Call to Action section

I’ll add another Call to Action (CTA) element to the bottom of the page because it's actually good to have that button at the bottom of your site.

Hover image to play animation

If a user scrolls all the way down, it's probably because he/she is interested in what you offer and perhaps, he/she wants to book a table.

I just need to change some of the text on this CTA element and that’s it.

Step 9: Footer

From Oxyelements design sets find footer tab. Pick a footer element you like and just adjust text and colors to your preferences.

We have put a lot of effort into making our elements responsive, so they fit all devices.

Simply choose whatever element you want and it will still fit the screen size of every phone and every tablet that you have.

Oxyelements makes it much easier to make a website and the building process is a lot faster.

As you already noticed, you can modify our elements with ease to make them fit better to your brand and preferences.

That’s it, complete landing page for a coffee shop built in less than 10 minutes. Let’s take a look at it from the front end.

Watch the video and see every step

twitterfacebooklinkedin