Start designing a website with simple steps, without investing too much effort. Webflow makes it easy to create a visually appealing design – even if you don't know how to code. I'll walk you through the steps necessary to create a website and get it done in just 3 hours or even less.
Join the community
With Webflow's free Starter plan, you get a lot. Choose one of the free templates, and customize it with a wide selection of cool fonts, dynamic interactions, and a simple yet powerful content management system at your fingertips.
Webflow also offers Customer Invoicing, so you can automatically charge customers for hosting and maintenance. Whether you are a freelancer or working for a business.
With Webflow, you will certainly have tools to make website design faster, easier and more enjoyable.
Go ahead and sign up for a free account so I can teach you how to design a website using the Webflow interface. You will be surprised how easy it is.
Content
You need to know what content will be on each page and the order in which it should be arranged. This will make your website design more efficient and there will be less refactoring in the process.
If your essay is incomplete, at least determine the main idea of each section (and have a few sentences describing those main ideas).
Most importantly, make sure you know how many articles you need, how many photos, etc., it's never too late to prepare. Otherwise, you will spend a lot of time editing it.
Do SEO for Webflow Content
Search engine optimization for your content should be an important part of the preparation process. If your website is at zero, this is the perfect opportunity to do SEO.
You'll have a brand new one soon, a shiny website with optimized words and phrases to show up at the top of search results when users need it.
You can choose to pay to optimize your content. SEO experts can come up with a list of keywords and phrases to include in your article. These services will cost you a lot of money.
Anyway, you should choose reputable, expensive but quality services. The worst is when the keywords they return are not really suitable for the website and its audience. Plug it in, but it doesn't work.
Instead, if you understand your blog readers and have the ability to research, you can optimize your content for SEO yourself.
Advice for you: Put yourself in the shoes of the reader to write. Don't use sledge-hammer style if you think no one understands them. Doing so, not only helps in SEO but also makes your article relevant and useful to readers.
It's not always good to focus on keywords. Don't be too mechanical. "What comes from the heart will reach the heart".
How To Research A Keyword
What are the words and phrases people use to look up topics relevant to your site? What questions would they type into search engines What question will help them find the answer is your website?
Looking at a competitor's or related site can be a good way to start familiarizing yourself with the keywords of a topic or interest you plan to write about.
Just keep in mind: that a person's words will be characterized by their lifestyle, outlook, and experiences.
Example: Surfers talk about surfing in different ways than the average person. And if you don't take the time to understand how they talk about something, your audience will soon see it too.
These keywords will help you write more effective titles, descriptions, H1 and H2 tags. That way Google will know what your site is about. The clearer the information, the higher your ranking.
Optimizing SEO from the beginning not only makes your content better but also helps shape the style of the blog. If you wait until later to invest in SEO, you have to accept the fact that: you may have to change the direction, layout, etc., things that should have been prepared from the beginning.
Should Start From White Page Or Exist Templates?
If you need a bit of a start, you should try the built-in templates. They will give you a basic template to build your website. Don't worry if you feel unsatisfied. Webflow also makes it easy to customize every element as you design.
Templates are also a great tool to learn how web designs work. You will see the structure of a web page, and see how each of its components fit together and work together. Thereby, you will gain a deeper understanding not only of your website but also of web design methodology in general.
You can customize the designs to fit your needs. Not just blogging, opening an online store, but sometimes a 2 in 1, whatever you want.
Choose A Template
For this project, I will be working with you to design a website for a restaurant. Webflow offers a wide range of free templates, plus loads of premium templates.
Once you're signed in to your account, go to the dashboard and click Create New Website. Set a filter to show free templates, then choose the right template (Versus). Then click the blue Create Website button at the top right of the page.
Getting Started With The Webflow Interface
Before diving into the design, let's familiarize ourselves with a few key features of the Webflow interface.
Go ahead and click the icon at the top left of the screen to open the Add panel. It contains all the building blocks of your website, from the content to the editable title here. Now scroll down to see what's available.
The Add panel contains all the basic content and structural elements that you can use to build your website. While we're learning about the interface, let's go ahead and see how the current page is organized. Move your cursor to the top right of the screen and open the Navigator tab. We will see the other tabs later. It's important to understand how Webflow structures first of all.
Navigator In Webflow
When you open the Navigator, you'll see all the different elements including the web page and how they're organized.
The Navigator tells you how your website is structured, and you can even place the elements exactly by dragging and dropping them here.
At the top is the Body section, a default element of all Webflow pages. It's handy to add styles that appear on your site, such as default fonts. Below that, you'll see two structural elements — Hero and Section — then Footer.
The green cube next to the main Footer element is an Icon – a design element you can add to your website with a single click. Every instance of that Icon is linked, so any changes you make to one version will automatically update any other versions. Super convenient.
Add Content To Template
I know you have all sorts of great content ready to go live, so let's start with the first thing visitors will see: the hero section.
Get rid of the existing hero image and start with your own. Because any great story starts with a hero, right?
Click on the hero section (direct click or select in Navigator) to select it. You should see a blue border around it. You'll also see at the bottom left of the screen a guide showing you where you are on the page.
Go ahead and click on the Paintbrush icon in the top right to open the Style tab. This is where you control the layout and appearance of the objects in your design. Let's go ahead and swap that background image with something a little more appealing for our restaurant website.
Scroll down to the Background section and double-click in the Image & Gradient section. You can then upload an image from your computer or select an image from the Content Manager (tab on the far right). Currently, Content Manager is full of template designer photos. I will upload my pictures.
In this case, we're going to upload a pizza image. Make sure that HiDPI is checked if you are using high-resolution photos to make sure they display correctly. You can add a new background image from your desktop or Webflow's Content Manager Once the image uploads, you'll see it appear in your design. Currently, the image is too large. And that gradient doesn't seem right to the pizza image.
Go ahead and fix this. To adjust the image, change the width to Cover in the Size section.
We still want to keep a little gradient because without it the image will be too bright and out of focus. Let's go ahead and change the stops of our gradient by dragging the handles on the spectrum at the bottom of the gradient view.
You can adjust the gradient level by dragging the controls
Webflow Content Update
We need to start adding our own text. Let's start with H1.
Click on H1 "We build beautiful web and mobile apps." You can enter content directly into it. I rewrote it as "From farm to table to you."
For SEO purposes and to introduce our restaurant a little more, let's add another piece of text below the H1. To do that, just add a new div (paragraph) block below the main header to house our copy.
Pro Tips For Placing Elements
While you are placing the elements you should open the Navigator dialog to make sure that you are placing the div block where you want it to be.
Now open the Add panel again. Then grab the div block and drag it across between your H1 and button. You should see a blue line appear between these elements. You will also see in the Navigator that your new div block is between the main title and the button.
Now we can select this new div block. Double-click it and type text directly into it (or copy and paste if you've already typed the text somewhere).
Styling
We will create a style for this selected text.
First, you just have to click on it. Now go to the Style tab and click on the mark to add a new one. Give it a name and then increase the font size from 14px to 19px.
But when I increase the font size, I don't understand why everything sticks together. So the next thing to do is Open up the advanced typography options and allow our letters to breathe a bit more by increasing the line height to 23 pixels. Adjust the line height to make the copy look more professional.
Compatible Interface
Webflow allows you to preview your design to see how it will look on a variety of devices. At the top, you'll see options to preview your site in different viewing modes: Desktop, Tablet, Mobile (landscape and portrait)
If you see something unusual, you can make timely adjustments for that element. Let's say we want to make H1 bigger for tablets. We'll preview it in tablet mode and adjust the layer (or add a device-specific composite layer). Webflow allows us to adapt the design on any of the devices listed above.
Add Call To Button Action
We don't need that Get Quote button, so replace it with a Visit Us call to action, with the restaurant's address and phone number below. .
Drag the Header from the elements and turn it into H2. Also, drag another piece of text. We're going to create a class called "Specific Location" with a slightly smaller font to add variety to the typography. Since this is a brick-and-mortar business, it is important to put this important information in a central place so that it can be seen by anyone who visits the website.
Call to action is added just below the hero section in the same header wrapper.
Drag a new div block below the newly created Call to action to record the restaurant's location details.
Create Dynamic Content With CMS Webflow
Before we do anything with the CMS, we will make one modification to the top navigation bar.
We need to change the word "PORTFOLIO" to something related to the CMS items we will be creating. Replace with the word "SIGNATURE DISHES", for example.
Click above the link until you see Nav Link in the Navigator. You can then type directly in the dialog box to change the link text. Since the button is in the Nav Symbol, this change will appear anywhere else the Symbol is used.
Accessing the Icons section will be a bit complicated, but the effort is worth it! We also need to remove the Lastest Work section to Featured Dishes (do the same as above).
Create New CMS Items
One of the most powerful features of Webflow is the intuitive CMS. It allows you to create a custom structure for your dynamic content, as well as a layout that will be applied to every item, whether it's a blog post, portfolio project, or featured dish.
Now we need to change these portfolio projects to restaurant specials.
First, let's create a new category for all the foods we want to introduce. You can use categories to better organize your content for both your collaborators and your website visitors.
Go to the Collections section, then add categories for all of these dishes. I'm adding appetizers, desserts, and breakfast categories. For your own design, find out which classification works best.
Here, I have created broader categories so that all related dishes can be easily found. If I were a little more specific, I could have created categories for burgers, pizza, and cakes, but to keep it simple…
The template's Categories collection works well for dividing categories. dish. We won't be making any changes to the post template for this tutorial.
But if you want, you can make changes in Settings (Collection). Just click the gear icon next to Projects to open this panel. You can then structure these posts in a way that works for you.
Go to Project and click New in the upper right corner of the panel. Then add the dish name, in this case pasta, upload an image and select the appropriate category.
End
Since this is a basic website, there are not many different pages to update. To make changes to these other pages, simply go to Pages in the left toolbar. Select the page, then update the content and images for each page.
On the About page, I changed the text and added another background image, making sure to set it as the Cover so it fits the space. This template also has a gradient on this image. Since it looks fine, we'll leave it as it is.
In addition, the Contact page also needs to be changed with a new Call to action, encouraging people to ask about our food services.
The only thing left is to remove the Versus icon at the top right and replace it with one of our own. Once we've reviewed everything and are satisfied with it, we'll publish the site.
Finally, just choose a hosting plan, connect it to a custom domain name and get ready to wow the world. And if you're building this site for a client, you'll want to set up Customer Billing to pass the hosting payments to your client.
Conclusion
Through the above project, you probably already know how to convert it into a restaurant portfolio template for free. Don't be afraid to use other templates and edit it to your liking.
With each project, you will grow and become a better version of yourself. Webflow gives you just the tools and intuitive interface you need so you can focus on what's important: your creativity.
See You in the next post^^
