Software Lab - Webflow

Submitted by sylvia.wong@up… on Thu, 01/28/2021 - 12:16

'Webflow' is an online software service that provides an easy-to-use web design, content management and a hosting platform.

The design tools allow us to build engaging and responsive websites, while the platform creates clean semantically meaningful code.

Webflow is free to use for up to 2 projects and is based on real HTML elements and CSS selectors.

Sub Topics

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.
    Webflow opening page
  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.
    webflow blank page
  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.
    Navigator panel
  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.
    navigation bar
  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.
    elements or layouts selection
  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.
    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.
    text
  16. Drag an Image element into the right-hand column and follow the instruction to upload and add an image.
    text and image2
  17. Drag a Button element into the left-hand column, below the text. Double-click the button’s text to edit.
    Text and image
  18. Add another Section, Container and 3 Columns to recreate the 'Our Users' section of the page.
    Our users images
  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:
    Section drop down menu
  21. Alternatively, you could use the Cards Section element from Layouts in the Add Element panel.
    cards selection dialogue box
  22. Edit the placeholder images in the navbar and footer to add branding to the page.
    home 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'.
    pages options
  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.
Nav link settings

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.
    image selection panel
  4. Edit the radius value to 100% to give the image a circular frame.
    border radius
  5. The Selector section should now include a new selector.
    image selector window
  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.
    Selector dialogue box
  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.

Finished page
Module Linking
Main Topic Image
Designer working on desktop with tablet and laptop in the background
Is Study Guide?
Off