Hi there! Thank you for purchasing "masters" architecture & interior design template on Webflow. I'm glad you liked the design. This template was specifically designed for professional companies that are looking for a new look to present their company brand.
In this page, I'm going to cover how this template is structured as well as some Webflow basics and the 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. I use 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.
Masters uses only one font family: Nunito which belongs to Google fonts collection.
If you check out the Project Settings > Fonts. You can add more Google fonts to your Website, or add 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.
Masters uses four 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, the Navigation bar, the downloadable section, and copyright banner at the bottom of the page. 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)
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. A restaurant 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:
The first CMS in this template is "Downloadables CMS" this is a small CMS collection that only requires you to upload the pdf files for most common documents architecture companies have(such as the company brochure or synopsis), these documents will be reflected into the downloadable section of each page, which is also a symbol.
The Downloadables CMS consists of three fields:
Simply, upload the Pdf file to this CMS and it will be show up in the downlodable section. Remember that “Downloadable Section” is a symbol.You only need to update it once.
There’s no field for an alt text here because the logo image is set as decorative.
The second CMS in this template is "Teams". Here you will need to fill out the data fields for each team member. This CMS is connected to two parts in the template. The People page & the pages for each team member.
Let's look how the teams Member is configured:
Inside the members settings, we have the "Key Projects" Field. This links the Members CMS to the Project CMS. Usually, every member will have some key projects they worked on. This field is a drop down menu that you can select multiple projects to be displayed on each member page. In case the member doesn't have key projects, the CMS will display a customized message as follow:
CMSs that contain image field has also an ALT text field associated for that image. The alt text is a descriptive text to explain what the image is about. It's mainly used in case the image didn't load on someone screen or for screen readers and engine optimization.
Inside the Members Pages, the CMS has a sort order based on the "order" field in the CMS settings:
The projects CMS is similar to the team CMS. It can be found in the Homepage under the latest projects section.
Notice there are 3 images fields (and 3 ALT texts field for each image) named as "Slider Image". Each project template contains a Slider with an image. As follow:
The CMS inside the homepage settings are set to display only 5 projects and are ordered from newest to oldest.
Inside the Projects page the projects are inserted inside a tab element. Check out the following video from Webflow about the tab element:
Unfortunately, the tabs inside the tab element needs to be manually changed to the same Project Categories that you're going to insert inside the CMS. And connect each CMS for each tab to the same project category.
The news & publications CMS is dedicated for short blogs or quick news about the companies recent achievements (e.g. another successful project or wining an award). Quite similar to the projects CMS, the news & publications CMS is also found in the Homepage with settings set to display 5 articles & order them from newest to oldest.
Other than Webflow University, you can also check out Webflow discourse where people ask and discuss topics related to Webflow.
masters 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 masters, you need another Webflow website from scratch, or you just want to say hi? Feel free to email me here: Mehmetdevelopment.com.
