Webflow Glossary

Introduction

Welcome to the Webflow Glossary! Webflow is a powerful website builder that helps you create beautiful, professional websites quickly and easily. This glossary is designed to help you get up to speed on the various terms and concepts used in Webflow, so you can make the most of your website building experience. Whether you're a beginner or an experienced Webflow user, you'll find the answers you're looking for here. So dive in and get ready to master Webflow!

‍

A

Animations

Animations are used to add motion and interactivity to a website. They are used to animate elements on a page to create a more dynamic and engaging experience. Within Webflow, animations are known as Interactions.

API

An application programming interface (API) is a set of programming instructions and standards that allow two applications to communicate with each other.

‍

B

Backup

A saved version of your site that you can restore. 

Breakpoint (and custom)

Breakpoints in Webflow are a way to tell the website how to adjust to different screen sizes. They allow for the website to scale properly for different devices, such as mobile phones, tablets, and desktops. It also allows for Webflow Developers to make changes to the look of the website on different devices, which allows for a more consistent experience across multiple devices. In Webflow, the class-naming convention uses CSS, meaning the class names cascade from largest (default) breakpoint down to mobile.

It is possible to add custom breakpoints for larger devices, however in using the correct class-naming system this is not usually advisable.

‍

C

Class-naming

Webflow us unique in the approach of combining visual CSS with class-naming conventions. There is no ‘fixed’ method to using class-naming inside Webflow, which is where many websites go wrong. However, in using a tried and trusted method like ‘Client Firest’ class naming convention, you can be ensured of a scalable, responsive and robust class-naming system.

Client-first

Client-first is the most popular class-naming convention used to build modern, scalable Webflow websites. It determines a set of guidelines to help build an understandable and robust class-naming convention.

CMS Collection Page

A dynamic page that Webflow automatically creates for each Collection item. When you design a Collection page, all the pages that are created for each Collection item will have the same template but different content.

CMS Section

A section in the Add panel that contains elements associated with the CMS.

Components

You can use components to make your workflow quicker in Webflow and help make your site have a more consistent look. You can create identical content per instance. Create identical copies of recurring layouts that have the exact same content, like nav bars, footers, and sign-up forms. Edit them in one place and see those changes impact every instance of that component.

Create unique content per instance. Modify recurring layouts with different text, image, video, or rich text to maintain a consistent design while giving each instance unique content. 

Efficiently manage layout changes. Quickly update a single component instead of manually revising numerous instances.

Collection

A content type (news & blogs, recipes, resource etc.) represented by a group of fields you define. Once created, you can add individual Collection Items.

Collection Item

An individual item within a Collection. For example, in a ‘News & Blogs’ Collection, the Collection items are individual blog posts and news updates.

Custom Code

 Webflow is often thought of as a ‘no-code’ tool. More accurately, it is a ‘low-code’ tool, allowing you to add custom-code where required, such as adding Javascript to add additional functionality.

CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. In Webflow you use CSS by applying class-names.

Custom Attributes

Custom Attributes are a powerful feature in Webflow that allow you to create and assign your own custom attributes to elements on a page. These attributes can be used to store additional information about elements, such as a unique ID, category, or other data. This data can then be used to control the styling or behavior of elements on the page, or to store and retrieve data from other services and APIs. Custom Attributes are a great way to add extra functionality and flexibility to your website.

Custom Domain Hosting

A Webflow service that lets you point a custom domain to your Webflow-hosted site.

‍

D

Designer

Webflow Designer is the powerful web design platform where Webflow websites are built. It allows Webflow Developers to design, build and launch modern and responsive websites without the need to write any code. With intuitive drag and drop tools, users can quickly create beautiful, professional-looking websites with minimal effort.

Draft Pages

Webflow allows you to exclude pages from being published to your live site by saving them as drafts. These ‘drafts’ can be pages or Collection Items you haven’t finished yet, like a blog.

‍

E

Editor

The Editor is where site collaborators can edit content, images and CMS items on Webflow websites.

Elements

Elements are the building blocks of a website. They are the individual components used to create a page, such as text, images, videos, and buttons.

Export

A downloadable ZIP file that contains your Webflow site’s HTML, CSS, JS and image files.

‍

F

Figma to Webflow

Figma is the world-leading design tool that allows you to design incredible websites and more. The process of converting a design from Figma to Webflow is a popular workflow as you get the design freedom of Figma and this usually makes it easy to convert to Webflow if done correctly.

Free Plan

The Webflow subscription perfect for those getting started. It gives you access to all Designer features and allows you to begin building a site straight away.

Flexbox

Flexbox is a CSS property universal to web development. Flexbox provides an effective way to organise and align elements in a webpage using Webflow. With Flexbox, you can easily create and manage the look and feel of your website. You can adjust the size and position of elements within the page, as well as the order in which they appear. Additionally, Flexbox helps with responsiveness and ensures that elements appear properly on all devices and screen sizes.

‍

G

Google Universal Analytics Tracking ID

A unique ID you can use to link your Google Analytics account to your Webflow site.

Grid

Grid in Webflow is a powerful and flexible tool that allows you to easily create complex layouts and customise the look and feel of your website. With Grid, you can create a wide range of responsive designs quickly and easily, making it the perfect choice for creating websites that look great on any device. Grid also enables you to easily change the order of elements, adjust spacing, and make unique layouts with ease. With Grid, you can create a unique and beautiful website with minimal effort.

‍

H

HyperText Markup Language (HTML)

A standard markup language that web browsers use to display websites.

Hyperlink

A link from a hypertext document to another location, activated by clicking on a highlighted word or image. The <a> tag defines a hyperlink, which is used to link from one page to another.

‍

I

Image Field

Available in CMS Collections. With this field, you can upload images form your computer and use them as dynamic items in you individual Collection Item e.g. an image within a blog post.

Interactions

Javascript based movement and animations you can add to your site from within the Webflow Designer to add functionality or movement to your website.

‍

J

Javascript

Javascript is a scripting language used for creating interactive web pages and applications. Webflow allows the 

‍

L

Last Published

The last time your site was published.

Last Updated

The last time someone made a change to your site.

Link Block

An element you can use to link images or text to a URL, page, page section, email, telephone number or file.

Low Code

Webflow is often described as a low code platform. Low code is a type of platform that allows users to quickly and easily create software applications with minimal coding. It is a powerful tool for non-programmers and developers alike, enabling them to create applications much faster than traditional coding. Low code platforms provide a graphical user interface that allows users to drag and drop components to build applications. The components are pre-built and can be customised to fit the user’s specific needs. Low code platforms also allow users to integrate existing software applications and databases, making them more efficient and user friendly. Low code is a great tool for businesses that need to quickly create, deploy, and manage applications without having to hire additional developers.

‍

M

Markup Language

A markup language is a set of codes used for formatting a document or web page.

Meta Description

An HTML tag you can use to give a short description and summarise the webpage’s content. Search engines often display this in results pages (SERPs).

Meta Keywords

Words or phrases that you can include in your web page’s metadata.

Meta Title

An HTML attribute that defines a page’s title. Search engines often display this in the search results page.

‍

N

No Code

Webflow refers to itself in the No Code movement. No Code platforms are a new and exciting way to create applications and websites without any coding experience. These platforms allow anyone to design, build, and launch their own apps and websites quickly and with minimal effort. No Code platforms provide drag and drop functionality, allowing users to customise the design and layout of their projects without any coding. Additionally, no code platforms provide access to a range of features and plugins that make creating applications and websites easier and more intuitive. With no code platforms, users can create and launch their own projects without the need for any coding knowledge, making them a great option for anyone looking to create something quickly and easily.

‍

P

Page Name

The title of a page on your website. This is visible in the Pages panel.

Position Section

A section in the Style Panel that houses CSS properties related to the positioning of an element.

Preview Mode

A feature that allows you to see how your website would be displayed in a browser without needing to publish your site or leave the Designer. It is important to note it is not always accurate and browser testing is important to get a true reflection.

Publish Site

The action of updating your live website to show any new design or content changes. You can publish to the staging domain or your custom domain, or both.

‍

R

Required Field

You can set any Collection field as ‘Required’, which means that a value must be added to that field in the Collection item before it can be published. For instance, you might ‘Require’ the date of publication of a blog to be selected.

‍

S

Staging Domain

The staging domain is a URL that ends in .webflow.io and is where you can publish your site to test functionality, share with clients or stakeholders and build your site knowing changed are not pushed to the live custom domain.

SEO

Search engine optimization (SEO) is the process of optimizing a website for search engine rankings. Webflow allows for many in-built SEO checks and you can enhance this further with the correct technical SEO build.

SSL

SSL (secure socket layer) is the standard method for establishing an encrypted link between a web server and a browser. It ensures that all data passed between the web server and browsers remain private and integral, so you and your site’s visitors can be sure your information is safe. Sites that don't use SSL may be labelled “not secure” by some browsers, strongly discouraging people from visiting your site.

Site Plan / Hosting

A Webflow plan that you can add or apply to individual sites. It gives you access to different site and hosting features based on your Site Plan.

Sitemap URL

The location your sitemap is stored in relation to your site, and what’s used when submitting your sitemap to search engines.

Slug

The end part of a URL that uses human-readable words that generally match the web page's title. For example, in the URL: yoursite.com/webflow-gloassary, ‘webflow-glossary’ is the URL slug.

Styles

Styles are used to customise the look and feel of a website. They are used to set the font, colour, size, and other styling elements of elements on a page.

‍

U

UI

User interface (UI) is the part of a website or application that the user interacts with. The Webflow UI is the Designer, CMS or Editor.

URL Redirect

A way to route site traffic from an old URL to a new URL without losing SEO placement. Also known as a 301 redirect.

Unpublished Change

A change that has been made in the Webflow Editor but will not appear on the live website until it’s published.

‍

W

Webflow

Webflow is an online platform that allows users to design, build and launch websites without writing code.

Webflow CMS

Webflow's content management system (CMS) is where dynamic content (Collections and their Collection items) is stored and maintained so you can reference it throughout your site. A CMS lets you input data in one location, then use Collection template pages or Collection lists to display that content without having to update the content displays one at a time.

CMS is the backbone of Webflow and provides the ability to manage and store website content. It allows users to create, edit, and delete content, as well as customise their website's look and feel.

Webflow Editor

Webflow's visual content editor. You can access it through the Webflow Dashboard by clicking the “3 disclosure dots” on a site thumbnail, then clicking “Editor.” Guest editors can access it anywhere on their live site by adding ?edit after the page URL (e.g., yoursite.com/page/?edit).

Workspace

A Workspace is where all of your Projects live. You can be a member of multiple Workspaces. A Workspace plan applies to your entire Workspace and is the cost of using the platform.

WYSIWYG Editor

What You See Is What You Get (WYSIWYG) editor is an interface that allows users to make changes to a web page without having to write code. Webflow is technically a WYSIWYG platform, with a visual designer. However some elements, such as custom embeds, will only appear on a published site.

‍