Software Lab - Webflow

Before you begin, you will need to sign up for a free account at https://webflow.com/.

1. Start by creating a new project using the Blank Site template.
   
2. We’ll use the same assets we used in the XD tutorial, so let’s name our project 'Rollei'.
3. The interface is divided into what will now be familiar areas. The left-hand side has toolbar and element panels. The right-hand side has properties. The top bar has some view switching buttons to simulate smaller devices. The white area in the middle is our canvas that will become the webpage.
   
4. Click the Add Elements icon in the toolbar. Scroll down to Components and drag the Navbar components onto the canvas. A navbar will be added to the top of the canvas, with a space to add a brand or logo and 3 links for Home, About and Contact.
5. Selecting the Navigator panel from the toolbar will show you how the elements are ordered and nested on the page.
   
6. Notice how, if you select the Menu Button, nothing appears to be selected on the webpage? Try switching the view to Tablet or Mobile.
   
7. A hamburger menu will appear for sizes below Desktop.
8. Use the Add Element panel and drag a Section onto the page.
9. Adding a Section creates a div block that fits 100% of the width of the viewport. We’ll use this section as a large landing image with text.
10. Use the Add Element panel, and switch to Layouts using the button at the top of the panel.
    
11. Drag a Footer onto the page.
12. Use the Add element panel and drag a Container into the section. A container is another type of div that will keep content centred on the page or within its parent element.
13. Drag a Columns element into the container element. Select the 2 even columns in the column settings.
    
14. We can use columns to divide an element’s space into 2 or more areas.
15. Drag Heading elements into the left-hand column. Use 2 heading elements (H1 and H2) to create the text.
    
16. Drag an Image element into the right-hand column and follow the instruction to upload and add an image.
    
17. Drag a Button element into the left-hand column, below the text. Double-click the button’s text to edit.
    
18. Add another Section, Container and 3 Columns to recreate the 'Our Users' section of the page.
    
19. Use H3 for the heading, Block Quote for the quote and a Button for the button.
20. The structure will look like this in the Navigator panel:
    
21. Alternatively, you could use the Cards Section element from Layouts in the Add Element panel.
    
22. Edit the placeholder images in the navbar and footer to add branding to the page.
    
23. Use the Symbols panel to create a symbol for the navbar and footer by selecting the element then clicking Create New Symbol in the panel. Symbols are like components in XD:  they are reusable elements that will remain consistent between pages.
24. Create a new page using the New Page icon in the Pages panel and name it 'Contact'.
    
25. Open the Contact page for editing and drag the header and footer from the Symbols panel to the page.
26. Drag a Contact Form from Layout in the Add Element panel onto the page.
27. Edit the Nav Links in the navbar to go to the appropriate pages.

You’ll need to change the type to 'Page' in the Nav Link Settings panel.

Because the free version of Webflow only allows for 2 pages, we’ll need to add the rest of our content into either of the pages we’ve already created. Try creating a gallery and product section by adding the appropriate elements from the Add Element panel.

Edit the button links to go to the appropriate page section.

Styling in Webflow allows you to edit and apply properties to elements using CSS selectors. Editing an element’s style will create a new selector.

1. Select the first image in the Our Users section.
2. Scroll down to the Borders section in the Properties panel.
3. Notice that under Selector at the top of the panel, there are no selectors currently applied.
   
4. Edit the radius value to 100% to give the image a circular frame.
   
5. The Selector section should now include a new selector.
   
6. We could edit each of the user images but it would be better to apply the newly created selector to each of the images.
7. Rename the selector to 'userimg'.
8. Select the second image and apply the new selector by starting to type its name in the Selector field, then selecting it from the existing classes.
   
9. Repeat for the third image.
10. Select the Gallery section and change its background color to a light grey in the backgrounds section of the styles panels.
11. Select the section that contains Our Users and apply 10px bottom margin to stop the buttons from touching the section below.
12. Try changing the splash image section to look like the XD prototype by using a background image.
13. Try using a slider component as a splash image.

A partially completed version of this project is available here.