Familiarizing yourself with the Webflow interface
So now we have our template up and ready to go.
Before we dive in to design, let’s just familiarize ourselves with a couple main features of the Webflow interface.
Go ahead and click the + symbol at the top left of the screen to open the Add panel. It holds all of the building blocks of your site, from structural elements like sections to content elements like headings. Feel free to scroll down to check out all the elements you have to work with.
While we’re getting to know 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’ll check out all the other tabs later, but it’s important to understand how Webflow structures things first.
When we open the Navigator, we see all the different elements that comprise the website and how they’re organized.
At the top is the Body, a default element of all Webflow sites. It’s super-handy for adding styles that will appear across your site, like the default font. Below that, you’ll see two structural elements — Hero and Section — then the Footer.
That green cube next to the Footer element means that it’s a Symbol — a design element you can add to your site with just a click. Every instance of that Symbol is linked, so any changes you make to one instance will automatically update every other instance. Super handy.
Adding content to the template
So we know you have all sorts of awesome content ready to go, so let’s get started with the first thing visitors will see: the hero section.
Let’s go ahead and get rid of the hero image and start with our own. Because any great story begins with a hero, right?
Click the hero section (either on the canvas, or in the Navigator) to select it. You’ll see a blue border around it. You’ll also see on the bottom left hand side of the screen a guide showing you where you are on the page. Go ahead and click the Paintbrush icon in the top right to open the Style tab, which is where you control the layout and appearance of objects in your design.
Let’s go ahead and swap out that background image with something a bit more appetizing for our restaurant site.
Scroll down to the Background section and double-click on fe4a5cbf.jpg in the Image & Gradient section. You can then upload an image from your computer, or pick one from the Asset Manager (the tab on the far right). At the moment, the Asset Manager is full of the template designer’s photos, so let’s upload one of our own.
In this case, we’re going to upload an image of pizza. Make sure HiDPI is checked if you’re using high-resolution photos to ensure they display correctly.
Once the image uploads, you’ll see it appear in your design. Right now the image is way too big. And that gradient isn’t going to work with the pizza image. Let’s go ahead and fix this.
To adjust the image, change the width to Cover in the Size section.
We still want to keep a slight gradient, because without it, our image is a bit too bright and distracting. Let’s go ahead and change the stops of our gradient by dragging the handles on the spectrum at the bottom of the gradient interface.
Okay, things are shaping up!
Updating the text content
Okay, now we need to start adding our own copy. Let’s start with the H1.
Go ahead and click on the H1 “We build beautiful web and mobile apps.” We can then type directly into the box. I went for, “From farm to table to you.”
For SEO purposes, and to give a bit more of an introduction of our restaurant, let’s add another section of text below our H1. To do that, just add a new div block below the main heading to contain our copy. (While you might be tempted to just pull in a paragraph element, placing your content in a structural element gives you more control.)
Pro tip for placing elements
While you’re placing elements, it’s a good idea to have your Navigator open to make sure you’re placing the div block where you want it.
Now open up the Add panel again. Then grab the div block and drag it over between your H1 and your button. You’ll see a blue line appear between these elements. You’ll also see in your Navigator that your new div block is between the main heading and button.
We can now select this new div block. Double click it and either type your copy directly into it, or copy and paste it from your text editor.
We now have our new text in place, but it’s a bit too small, so let’s create a new class so we can style it.
Creating new styles
We’re going to create a style for this selected text, so go ahead and click on it.
Now go over to Style tab and click the + sign to add a new one. We’re going to go ahead and name this new style Hero Content.
We’re now going to bump up the font size from 14px to 19px. When we increase this font size our lettering looks crowded. Open the advanced typography options and lets give our letters a bit more breathing room by increasing the line height to 23 pixels.
That’s much better.
Responsive design made easy
Webflow lets you preview your design to see how it will look across a variety of devices. At the top of your screen, you’ll see options to preview your site in four different views: desktop, tablet, mobile landscape, and mobile portrait.
If something looks off in any of these previews, you can adjust the styling for that element that on that viewport and smaller screens. (So be sure to fix any issues at the largest viewport size they appear — it may just fix the problem across all sizes.)
Let’s say we want to make our H1 bigger for tablets. We would preview it in tablet mode and adjust the class (or add a device-specific combo class). Webflow gives us the power to tailor our design for whatever device it’s going to be viewed on.
Adding our own call to action
We don’t need that Get Quote button, so let’s replace it with a call to action of Visit Us, with the restaurant’s address and phone number below it.
Drag in a Header from the elements and make it an H2. Also, let’s pull over another section of text. We’ll make a new class for it, called “Location details,” making the font just a bit smaller to add some variety to the typography. Since this is a brick-and-mortar business, it’s important to get this very important information front and center for anyone visiting the website.
Now let's dive into the CMS portion of the design!
Creating dynamic content is simple with our content management system (CMS)
Before we do anything with the CMS, we’re going to make a modification to the nav bar on the top.
We need to change the word “PORTFOLIO” to something related to the CMS entries we’re going to create. Let’s change PORTFOLIO to SIGNATURE DISHES in the Nav Links in the header.
Go ahead and click above the link until you see the Nav Link in the Navigator. You can then type directly into the box to change the link text. Since this button is in the Nav Symbol, this update will appear anywhere else the Symbol is used.
We also need to get rid of Latest Work. Let’s change this to Featured Dishes by double clicking on the section, then typing directly into the box.
Making new CMS entries
One of Webflow’s most powerful features is its visual 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, a portfolio project, or a signature dish. There’s a number of templates to get you started with whatever you need to create.
We now need to change these portfolio entries into dishes we want to be highlighted.
First, let’s go ahead and create new categories for all of the food we want to feature. You can use categories to better organize your content for both your collaborators and site visitors.
Go ahead and navigate over to Collections, click on it, then add the categories for all of these dishes. I’m adding the categories of entrees, desserts, and breakfast. For your own design, figure out what type of categorization will make the most sense.
Here I created broader categories so that all of the related dishes could easily be found. If I went a bit more specific, I could have created categories for burgers, pizzas, and cakes, but for the sake of simplicity, I went general.
We’re not going to make any changes to the post template for this tutorial. But if you’d like to, you can make changes in the Collection’s Settings. Just click the gear icon next to Projects to open up this panel. You can then structure these posts in a way that works for you.
Go into Projects and click + New in the upper right hand corner of the panel. Then add the name of the dish, in this case spaghetti, upload an image, and pick the relevant category.
You can then repeat these process for each entry, adding a different dish for each post. Just don’t forget to delete all of the CMS entries that were included in the original Versus portfolio template!
Note: to keep things quick-and-dirty for the tutorial, we stuck with the template's Projects Collection for our dishes. Ideally, you'd create a new Collection and update the bindings on the site's homepage to use the new Collection. (Unless your chef is so experimental they refer to their dishes as "projects.")
Since this is a basic website, there aren’t a lot of different pages to update. To make changes to these other pages, just go to Pages in the left toolbar. Select the page, then update the content and images for each page as we showed you earlier.
On the About page, I changed the text and added a different background image, making sure to set it as Cover so it properly fits the space. This template also has a gradient over this image. Since it looks okay, we’ll leave it as is.
We’ll also change the Contact page with a new call to action, encouraging people to inquire about our catering services.
The only thing left would be to get rid of the Versus logo on the top right of our page and replace it with one of our very own. Once we’ve looked over everything and are happy with it, we could go ahead and publish the website.
Finally, we just need to pick a hosting plan, hook it up to our custom domain, and get ready to wow the world. And if you’re building this site for a client, you’ll want to set up Client Billing to pass the hosting payments off to your client.
Becoming a better web designer, one project at a time
We’ve taken you through how to transform a free portfolio template into one for a restaurant. Don’t be afraid to take a template and to tweak it to your liking. We make it easy for you to experiment and to try different things within your designs.
With each project, you will improve. We just give you the tools and intuitive interface you need so you can focus what’s on important: your creativity.