Getting Started with Webflow: Part 3 — Example Project

Note: This article is a work in progress. I'll be writing it as I build the site from a Blank Template as a personal project. You can find the current progress live at ecuadoriangoods.webflow.io. I'm not a designer, so thanks for understanding. Again, any feedback is welcome! :)

Now that we've learned the basics of Webflow's UI on Part 2, let's go straight to work.

Step 1: Website Sketch

On Part 1, we sketched the very basics of our website with our client:

This is the final sketch with the clients, we'll use this as a base for our Webflow site.

Again, this sketch will help us greatly in wire-framing our site. We can identify the number of sections our website will have and the types of Elements we'll need to drag into our design.

Step 2: Website Wireframing on Webflow

Wireframing in Webflow is easy. With simple dragging and dropping Sections from the Elements Panel into the Canvas, and positioning the appropriate Basic Elements within each, we can create a simple site wireframe.

Wire-framing our website within Webflow.

To maintain control over margins and site structure, it is recommended to create sections, which are blocks of content on our site. 
We can then create containers within those sections, which are placeholders for us to put website elements inside.

As you create and add elements, you can configure classes for these. Classes enable elements to inherit visual properties. We can edit several elements at the same time by editing elements tagged with the same class types.

If you configured sections or elements with a class. You'll notice that all the elements that share these classes auto-update as you tinker with their properties.

In the final example, we will add video backgrounds, headers, and other visual elements that will give the client's website a polished and professional look and feel.

Website Design: Adding Content and Style

The Website's Contact Information section, Email Image being edited in the Styles Panel.

After your website structure is finished, you can start adding Image Assets and formatting.

The Styles Panel is where you will probably spend most of your time if you're designing a website from scratch. You can start adjusting margins, padding, colors, and other visual properties, and then associate them to a class for reuse. Make sure you click on the eye icon at the top to review how the website will look in different resolutions and devices.

Data Base Design: Creating Collections

This is Ecuadorian Goods' Fruit Pulp Database model for client use. Color and Boolean variables were added for design.

Webflow allows for the creation of very simple content databases it calls Collections. This is useful for lists that you may want to maintain for embedding onto your site, like products, contacts, partners, or testimonials.

The cool thing about Collections in Webflow is that each collection gets a slug, and each item can get a personalized page if you so choose.

This is handy if you want to showcase details individually, and could be used for contact bios, blog posts, or product details.

Clicking on the Collections Panel will bring you to the Collections Manager. Inside the Manager, you will be able to create new databases and add items to them. This way, you can create Dynamic Lists, content from your collections that can be placed within your site elements with minimal effort.

Each database field can be of the following types:

  1. Plain Text: For names, standard String data.
  2. Rich Text: For descriptions and cooler ways to show information.
  3. Image: For product images, album photos, etc.
  4. Video: For promotional material, product descriptions, tutorials.
  5. Link: To go elsewhere from that product page.
  6. Number: To handle IDs.
  7. Date/Time: To handle time for product expiration dates, or event dates.
  8. Switch: For boolean data. This can be used for featured items in your front end.
  9. Color: For color information of the item for data centric web design.
  10. Option: For drop down boxes.
  11. Reference: To reference other item in the database.
  12. Multi-Reference: To reference one or many items in your data.

Linking Collections to our Website Canvas

Dragging Dynamic Lists into our Website. In this image, we are bringing a product list called "Fruit Pulp" Collection into its respective section.

Whenever we've got a layout for our site we feel comfortable with, we'll be ready to pull information from our databases to be displayed onto elements. In order to do this, we'll Bind Elements to Data Sources.

In our Canvas, we can drag Dynamic List Elements from our Elements Panel into our site.

Binding Elements to Collections Data

Binding Data from a list called "Founders" into a Text Block inside a Dynamic List Element.

After we’ve dragged a Data Collections Element into our Canvas, any other element we drag inside of it will be able to pull information from that database list, or data set.

For the example above, we dragged an Image, a Text, and a Rich Text Element into a Dynamic List Element. Clicking on these items will show their element properties on the right hand panel. Webflow will give us the option to bind data from that collection into that Element. Binding is done using the Dynamic Style Settings sub-panel.

We are able to click which items in the database we want to show by ticking on the checkboxes next to the items.

When done correctly, we’ll see that our site elements start displaying information from our database. Successfully binded elements on the site have a purple border when hovering your mouse over them.

After this step, we can proceed to update data into our Collections, and then do some visual polish to our fields, so our website is properly shown on different resolutions. This process needs to be repeated for all Dynamic List Elements within our site.

Final touches and Publishing

After tweaking, our client's website is looking nice.

After tweaking and styling, we'll eventually get the hang of the tips and tricks of Webflow.

Within a day or two, we can have beautiful, responsive websites ready for deployment. We can also export code if needed, or publish your creations to yourwebiste.webflow.io for free by clicking the Publish icon on the top right toolbar.

Congratulations on completing a CMS enabled website without touching a single line of code!