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!
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.
An application programming interface (API) is a set of programming instructions and standards that allow two applications to communicate with each other.
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.
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 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.
A section in the Add panel that contains elements associated with the CMS.
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.
A content type (news & blogs, recipes, resource etc.) represented by a group of fields you define. Once created, you can add individual Collection Items.
An individual item within a Collection. For example, in a ‘News & Blogs’ Collection, the Collection items are individual blog posts and news updates.
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 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.
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.
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.
The Editor is where site collaborators can edit content, images and CMS items on Webflow websites.
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.
A downloadable ZIP file that contains your Webflow site’s HTML, CSS, JS and image files.
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.
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 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.
Google Universal Analytics Tracking ID
A unique ID you can use to link your Google Analytics account to your Webflow site.
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.
HyperText Markup Language (HTML)
A standard markup language that web browsers use to display websites.
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.
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.
The last time your site was published.
The last time someone made a change to your site.
An element you can use to link images or text to a URL, page, page section, email, telephone number or file.
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.
A markup language is a set of codes used for formatting a document or web page.
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).
Words or phrases that you can include in your web page’s metadata.
An HTML attribute that defines a page’s title. Search engines often display this in the search results page.
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.
The title of a page on your website. This is visible in the Pages panel.
A section in the Style Panel that houses CSS properties related to the positioning of an element.
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.
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.
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.
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.
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 (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.
The location your sitemap is stored in relation to your site, and what’s used when submitting your sitemap to search engines.
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 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.
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.
A way to route site traffic from an old URL to a new URL without losing SEO placement. Also known as a 301 redirect.
A change that has been made in the Webflow Editor but will not appear on the live website until it’s published.
Webflow is an online platform that allows users to design, build and launch websites without writing code.
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'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).
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.
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.