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
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.
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.
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.
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.
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.
Here is the final result:
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.
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.
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.
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’.
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.
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.