READ ME FIRST

Hi there! Thank you for purchasing "Arch-hub" Architectural 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.)

Layout - Static

1.Template Colors

The colors in this template are controlled via "Swatches". By simply editing these swatches, you can change the color palette to your own theme.

2.Template Images

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:

1. Use File > Export > Export As... (or Save for Web, Legacy).
2. If the photo has an transparency use PNG format, other than that it's safe to use JPEG.
3. For PNG, and 8-bit to reduce file size further. Check the resulting file size.
4. For JPEG, and adjust the Quality slider until you get the file size you need (Note: you usually never want to go below 50% quality).
5. Evaluate what gave you the best quality vs. file size for your image.

The images used here are for free commercial usage (license). Check out the following two guides on how to handle images in Webflow designer.

3.Template Font

Arch-hub uses one Font type for all its text: Work Sans, which is a well known Google font.

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.

4.Template Symbols

Arch-hub 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, the Navigation bar, and the mini contact form. The following video will show you how to handle symbols.

5.Template Text Links & Link Blocks

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)

6.Template Forms

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.

‍

Layout - CMS

1.What is Content Management System - CMS?

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:

2.Teams CMS

The teams CMS is used inside: Homepage (slider) + Meet the Team page.

Before we can deconstruct how the CMS is configured in both pages, let’s look at the CMS itself. The Teams CMS contains 9 fields in total, please note that you can delete or add or edit any of the fields to your own requirements, and you’re not required to fill every single field except the Name.

In this tutorial I will assume we have the following requirements:

• Member Name
• Member Position
• Member Image
• Alt Text for the member image: descriptive text for SEO
• Email account: Must be accurate email format “@something.com”
• LinkedIn account link
• Twitter account link
• Facebook account link
• Order: This is an integer value which is used to determine which team member first appears in the slider & the team page.

‍

Part 1) Homepage Slider:

Once you fill out the required fields for each member, you need to update the Slider in the Homepage. Let’s look at the slider in the navigator. The # of slides needs to be the same # of your team members. Simply copy and paste the slides or delete them until you get the required amount.

Notice each slider contains a CMS collection. All of these CMSs are linked to the Teams CMS. Based on the order number, the collection will display the member IMAGE + NAME + POSTION inside the slide. All slides are links that take your potential clients to the team’s page.

To edit the order in the slider, click the CMS collection you want to edit and go to the settings, then change the filter value: set the order number to the correct value.

Part 2) The Team Page:

The CMS inside the page updates by itself. But it’s good to know two important CMS features used here for better control over your content: Sort Order & Conditional Visibility.

• The sort order: If you click on the CMS settings, you’ll notice that the CMS is controlled by a Sort order, where elements with the lowest order number appear at the top.

• Conditional Visibility: before we discuss conditional visibility, please check out this Webflow short tutorial about it.

We have in the CMS 4 links: 3 socials + Email, but notice these elements don't show for all members! That’s because if the member doesn’t have a certain social link (for example someone doesn’t have a Facebook) the CMS will remove the Facebook icon from their field. In such way, we won’t have empty links for some members.

‍

3.Projects CMS

The project CMS is used inside: Homepage + Projects Page + Individual project templates.

The projects CMS consists of the following fields:

• Project Name
• Project Type
• Project Description
• Project First row images: (2 images)
• Project Second row images: (3 images)
• Project Third row images: (2 images)
• Client Name
• Client Avatar: If there’s one (I’ve provided a default avatar)
• Client Testimonial
• Alt Text For client Image
• Project Main Image
• Alt Text for the Project Main Image

Note: Images that are used as Backgrounds usually don't require ALT TEXT, but nonetheless, it's a good practice is to include them in Webflow CMS. The web is always changing (and pretty fast), you don't know what new features will be available tomorrow. Just look at Webflow for example :) 

Part 1) Homepage:

Inside the homepage you’ll see a row grid with three projects. This CMS connects to the Projects CMS and has a sort order applied that will display the newest to oldest projects.

Notice in the CMS settings we have set the maximum number of displayed projects in this section to 3.

Each project is a link that will take the client to that project specific template. But before we head to the templates, let’s look at the Projects main page “our work”.

Part 2) Our Work:

Here we have something similar to Pinterest board. There’s a wrapper as seen in the image that contains 3 CMS collections. All three connects to the Projects CMS. This is made so that we care create this custom beautiful layout in Webflow.

Each CMS row has also a number set on it, the first two rows only display 2 projects while the third row displays three projects.

Now when we click on any project, we will be transported to that specific project Template. All projects have the same layout, but their content will differ of course.

Part 3) Projects' Template:

The first section is the gallery section. The gallery is created using a similar layout to the projects page. But here each CMS connects to the template images field.

Remember we have 3 row images field (1^st, 2^nd,3^rd) The images (with the specified number) inserted to the CMS will display here.

The images are displayed using Lightbox. You can learn more about lightboxes in the following video:

The second section is the same section used in the Homepage with one additional filter and that’s the “Project is not current” Basically, this will prevent displaying Project X in this section while you’re in project X page.

Additional Resources

Other than Webflow University, you can also check out Webflow discourse where people ask and discuss topics related to Webflow.

‍