Here you'll find the basics you need to know to start customizing.
Hi there! Thank you for purchasing "CusineWave" Restaurant template on Webflow. I'm glad you liked the design. In this page, I'm going to cover the basics and most important things you need to know in order to understand how this template works.
First of all, if you're new to Webflow, I highly recommend starting with Webflow University. There you can find 100% free Webflow courses offered by the company itself. I suggest checking out Webflow 101 Crash Course, in this course you'll learn about all the basics you need to quickly edit this template.
On the other hand, if you're already familiar with Webflow, you can skip right to the end where we talk about the CMS configuration in this template.
Once you read through the entire page, please refer to the Style Guide Page if you wish to edit the general layout (colors, font, text size, etc.)
The colors in this template are controlled via "Swatches". By simply editing these swatches, you can change the color palette to your own theme.
Generally speaking, Webflow recommends using images that are less than 300KB to reduce the size of your website. However, when you use your own assets, my own recommendation is not going above 500KB.. You can use any photo editing program (e.g. Photoshop) to reduce the images size or you can use any online free tool. E.g. Optimizilla.
For Photoshop, there are different ways you can manipulate an image size without sacrificing the quality. Here's a rough guide:
The images used here are for free commercial usage (license). Check out the following two guides on how to handle images in Webflow designer.
CuisineWave uses three Font types: The headings are Bodoni Moda, while all paragraphs and text elements use Source Sans Pro. Finally, special headings use Cinzel. All are well known Google fonts.
If you check out the Project Settings > Fonts. You can add extra Google fonts to your Website, or premium Adobe fonts (if you have any), and even upload your own custom font files.
Note: Only upload fonts that you're going to use in the project. Having excessive files can slow your websites.
Note #2: If you ever need to transfer a website from an account to another, Adobe fonts are not transferable.
CuisineWave uses three symbols. A symbol is a special feature of Webflow where you can create X element to style & edit only once, after that you can use the same element in different pages. Any change to a symbol will reflect in all other copies "instances".
We have a symbol for the footer, white Navigation bar, and the Transparent (clear) Navbar. The following video will show you how to handle symbols.
Follow the Webflow tutorials to understand how links can be redirected to different pages or parts of a page: (remember that editing the links in one symbol will reflect in all its copies)
Please note that there are TWO navigation bars (Clear & White), when you update the links inside one bar, you'll also need to update the links in the other bar as well.
Inside the Contact Page there's a Google Maps element used to redirect customers to your restaurant location. The current image you see on the page is a placeholder, you'll need to connect your Google API to Webflow in order to have a functioning Map element.
Inside the Contact Page there's a Form which can be used to get emails from clients. You can of course connect this form to any third party add on (such as Mailchimp) however, Webflow collects form submissions and you can download them from the Project Settings tab.
To put it simply, CMS is like an Excel Sheet Table with different data . (E.g. Menu is the Excel Sheet table, and each dish with its info are the data). You only need to fill this table out, and the content will be displayed on Webflow in a certain premade layout.
Before we talk about the CMS inside this template, please watch:
And this is a more detailed explanation about editing CMS if you can spare 15 minutes:
There are two CMSs used in CuineWave that are also linked together. The first CMS in this template is "Categories CMS" which is related to the type of dishes your restaurant is serving. For example, this template has a Lunch Menu, Dinner Menu, Drinks Menu, Brunch Menu, Burgers Menu categories inside the CMS. You can either use the same ones I picked or edit & add to them.
Notice the Category dropdown in the CMS settings. Here you will need to edit the CMS itself to add the categories related to your own menu. And the number of items inside the Menu categories should be the same as the categories you created.
The Menu Categories CMS is used inside the Menu page. There are elements named "Link Cards":
Each CMS inside each Card only imports ONE CMS. This is controlled using the filter option in the settings:
The animation of cards is created using a Page Load Animation:
Due to the CMS nature, please note that the animation is created using selected "ELEMENTS". If you have more categories, you'll need to add extra "move" animations inside the "Menu cards float animation"
Inside the Menu Categories Template, there's a page for each category. The page displays the specific menu (dishes) of that category.
Inside this template, we're liking the Menu Items, and using a filter to only select the dishes related that specific category.
The second CMS in this template is "Menu Items CMS". Here you need to insert all your dishes information. Every new dish added needs to be linked via the "Reference Field" with the correct Category it belongs to. For example: Grilled Chicken Burger belongs to the Burger Menu.
Other than Webflow University, you can also check out Webflow discourse where people ask and discuss topics related to Webflow.
CusineWave Template is created on Webflow using the best & simplest practices to make it easier to customize. However, if you face any issues, need help, or got a question? Don't hesitate to email me at Mohammad_Taiseer@outlook.com. Or via Webflow template support tab, I aim to answer all questions within 24hrs.
On the other hand, if you're looking for extra things to be made (custom code, animations, design, etc) to get a more personalized version of CuisineWave, or you need another Webflow website from scratch? Feel free to contact me here: Mehmetdevelopment.com.
