Webflow was launched in 2013 by Sergie Magdalin and Bryant Chou as a website builder and has since gained a loyal following by users – both dyed-in-the-wool coders and beginners alike, but what is it like to use? Here’s a quick run through of how to get started.
Unlike their competitors in the market – web builders such as Wix, Weebly and Squarespace – Webflow has carved a niche for itself as a half-way house between a drag and drop builder and an HTML coding system. This means that it uses the same terms as coders – divs, margins, columns, sections – but allows those items to be dropped onto the canvas then edited; a sort of glorified HTML Editor like Froala, where the code is written, while the ‘preview’ shows the result:
Webflow, though, does it the other way round.
Here, you take the items and place them on the canvas, the only time you can then see the code is when the website is exported. In other words, you build the website without bothering with the detail of the underlying code.
To designers used to coding by hand, this seems like the work of the devil, but it’s not. It allows users who concentrate on the design of the website to produce exactly the result they want without having to worry about the code behind it. For developers and coders, it produces clean, semantic code without writing a single line. For designers it allows the easy production of websites without the prerequisite of understanding HTML or CSS.
(This is a moot point with some Webflow users who recommend a background in coding before starting work. I disagree. I have no background in coding and, although a little knowledge is undoubtedly handy, it’s not a prerequisite.)
Before we start, here’s the definition of a few terms that might be useful to non-coders:
Classes - a bit like Styles in Microsoft Word, every element can have a class which means your website has a consistent look and feel and changing the characteristics of that class updates throughout the site.
Div – simply a box, the size and characteristics you can determine
Breakpoint – a web designer has to design for multiple screen sizes, a breakpoint is simply the difference between one size and another – as a very general example – mobile portrait and mobile landscape
Body – the section within which your page exists
Flex box – a container with magical properties! Elements within it can be positioned pretty much anywhere you like: justified, centred, vertically or horizontally. You can set up multiple boxes in rows or columns.
Grid – imagine boxes across the screen with as many or as few rows and columns as you like. Pop your content inside those boxes and they will display perfectly on screen, whether the content fits one box or several.
H1 – search engines like to distinguish important content from less important so we use six levels of titles, H1 being the most important, H6 the least.
Margins – the space outside an element.
Padding – the space inside an element – or at least the space between the border of the element and any content inside it.
Measurements – effectively the feet and inches of the web world. These are discussed later in more detail, but they are use to determine font/element sizes and distances.
CMS - or Content Management System. This is a type of website which allows end users to update the content. As far as Webflow is concerned, it also includes a connected database they call 'Collections.'
First, let's look at the navigation:
Menu
This is found on the far left. It is used to drop elements – text, div boxes, images – onto the canvas. It also provides access to the database, ecommerce facilities and pages.
Navigator
This shows the elements on the page and how they are structured. So, a paragraph inside a box inside a section would show as section/box/para.
Page Area
Unlike some graphics and DTP programs, the size of the page area is set by the breakpoint at the top. This means you design for the screen size you are working on.
Classes and Interactions
The right hand side of the screen is the area which relates to the element you’ve clicked on – or at the first two tabs are. This is where you edit the characteristics of the elements you have placed on the page.
Here’s a typical Webflow screen:
On the left, the Navigator shows the structure of the page and the right shows the characteristics of the element you have clicked on.
You can see that I have dropped – either by dragging it from the list of elements on the far left (the little + sign) or using a keyboard shortcut – a div block onto the page then applied the detail to that element:
The whole thing took about a minute. What’s more it automatically produces responsive versions which you can view and adjust to your heart’s content. Here’s the page on the mobile portrait view – without any adjustments:
Cool. OK, let’s create another section:
This time a simple grid with four column and four rows. I have then dropped the content into the cells and stretched it to fill the space. This took five minutes.
Double clicking on the pages allows me to adjust the underlying grid as I see fit:
Essentially, once you get used to the page elements, it all becomes much simpler.
So what can you drop onto the page and what do they do?
Section – a full width element that can contain boxes, text and any other element.
Container – a part width element that is, by default, 940 pixels wide. This width can be changed, but containers are rarely used today as they are not responsive and look very narrow on large displays.
Grid – an element composed of boxes, the number and size of which may be altered according to the design required. A very useful way of controlling the spacing of elements on the page.
Columns – a simple way of producing columns. Like Containers these are very rarely used in 2021 as divs within divs are a better option.
Div Block – probably the most common element used by Webflow designers. It can be converted to a Flex box or grid and can contain and control multiple elements within it.
List – lists can be produced manually using this element or you can create them yourself using divs within divs.
List Item – an item in a list.
Link Block – a container that can be linked to pages, files, sections or websites.
Button – effectively a pre-built link block.
Heading – H1 text which can be adjusted to all six H1 styles.
Paragraph – standard text which conforms by default to the style you have set up in the Body. This can be changed to any style, typeface colour or leading you want.
Text Link – although you can attach a link to any text, this element comes with the link built in.
Text Block – more text, but useful when you want to add text that doesn’t conform to headings or paragraphs. Like all text, it comes with default characteristics that can be changed by adding a Class or it can adopt the characteristics of the container it is in.
Block Quote – just as it says.
Rich Text – as Webflow says: “The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
Collection List – this is the element that pulls in any data you have in your Collections – or databases.
Image – drop an image – photo, banner, SVG onto the page
Video – this allows you to add a video link – e.g. YouTube or Vimeo – to a page. This is a useful feature as it scales automatically to fit the screen size used.
YouTube – as above
Lottie Animation - this element allows you to place After Effects animations directly on your page.
I won’t go through all these options, but they are the elements that allow you to produce a form.
Background Video – just that. You can upload a video to your site that simply runs in the background. Unlike the Video and YouTube elements, this is the actual video, not a link. Max size: 30MB
Dropdown – this is a prebuilt dropdown element usually used in a menu.
Embed – this allows you to embed any code you like onto the site. There are hundreds of examples of why this is useful – ranging from maps, end of year code and much more. (Make sure the code is good as it is unsupported and can crash your site.)
Lightbox – a cool way of showing your images.
Navbar – another pre-built element that speeds up the process of producing a menu.
Search – on all CMS sites hosted through Webflow you can attach this element – very useful on complex sites.
Slider – an image slider that can be edited to be any size, with multiple images and behaviour.
Tabs – essentially a ‘sub-menu’ element which incorporates ‘panes’ per tab which contain the information required.
Map – a pre-built Google May element – don’t forget your API key.
Facebook and Twitter – simple buttons connecting to these networks.
One key area of understanding before you start dragging things around is how Webflow allows you to size your text and elements. Whichever system you use, I advise you to stick to one so you know where you are!
Pixels – the old standby! You can apply pixels to any text, padding, margins or even boxes like divs. The trouble is; they are a set size, so you then have to adjust each element using them according to the screen size you are designing for. If you are designing something that is fixed – e.g. a burger menu – then pixels are useful, in most other cases there are better alternatives below.
Percentages – this is a much more useful measurement than pixels as it scales to the size of the element that it is in. If an element is 50% wide, then it will be that proportion whatever the screen size. Similarly for text; if you set the default text size in the body and don’t apply a different class, then you can apply a %age to the text size which conforms to the default size. This allows you to control font size in the Body of each breakpoint; a much easier way to control size and conformity across your site.
EM – the width of an M character. EMs will adopt the size of the parent element – a default of 16 pixels – but be careful, if the parent element - say a div box – has an EM value then it will affect the size of the text. So, if you set the font size to 1.5 EMs then the size will be 24 pixels. However, if the box it is in also has a font size of 1.5 EMs, then the font size will increase to 36 pixels.
REM – REMs get around this problem of EMs adopting sizes from their parent by using the browser’s default font size. This is particularly useful for visitors who have poor vision, they often set the default browser font size higher than 16 pixels, so by using REMs, you are reflecting the font size preference of your audience.
VW – Vertical Width. My favourite measurement, which simply means a percentage of the screen width. This is a useful measurement for all elements and text as it reflects the viewers’ screen size. It also means minimal adjustment between screen sizes.
VH – dead simple: Vertical Height. If you want an article to cover the entire screen height, then set the size to 100Vh, 50VH for half and so on. A particularly handy tip is to use this in conjunction with minimum and maximum heights, this, again, helps with variations in screen sizes.
The Tick – so what’s that? This is a little piece of magic which simply means mathematical multiplier. In other words, if you have set your font size to 1VW and the leading to 1.4, then your leading is 1.4 times your font size. If you set this early on then you’ll never have to worry about changing the leading with the font size again.
TIP
Set the default Body font size to either VW or REMs, and use %ages for all your font sizes. As I mentioned above, this makes it dead easy to change all font sizes just by altering the Body font size for that breakpoint.
There’s pros and cons for using both measurements; using VW gives you complete control over the size of your font sizes, whereas REM gives your visitors control. The decision is yours, but either way, it’s important to bear in mind that, as the font sizes changes then so should the boxes that contain them – an easy rule of thumb is to use the Auto setting on elements that may change sizes because of the varying text size inside them – especially height. Fixing the size of an element using pixels is dangerous!
I am a big fan of learning by doing. I suggest you find a non-complex website that you like and simply copy it. It is a great way of finding what works and what doesn’t.
Webflow is a fantastic system for producing websites, so go for it and enjoy yourself!
