The Webflow glossary

A/B testing compares two different versions of something — like a web page or campaign — to determine which performs better.

In object-oriented programming (OOP), abstraction conceals irrelevant details so they don’t interfere with the task at hand.

A webpage’s accessibility tree indicates which parts of the page are compatible with assistive technologies such as braille displays, screen readers, and voice commands.

Account notifications update you about activity in your account. New notifications appear on your Webflow Dashboard after you log in.

The API token that Webflow uses to connect to your Adobe Fonts account.

Any element that is further up the element hierarchy of the document tree. For example, the Body element is the ancestor of all elements on the Designer canvas.

Third-party applications that you've given access to your personal and/or website data.

A section of the Style panel that contains CSS properties that affect an element's background, such as its background image, gradient, and fill color.

A saved version of your site that you can restore.

A meta tag that sets a default URL that all relative URLs in a document will follow. If you set your base tag to "your-site.com/beta," a relative URL of "/landing-page" will become "your-site.com/beta/landing-page."

A section of the Add panel that contains the elements that act as a website's fundamental building blocks (e.g., div block, list, button, etc.).

A section of the Style panel that holds CSS properties for styling an element's border, such as its border style, color, and radius.

The bar at the bottom of the Webflow canvas that shows the hierarchy of the selected element on the canvas.

The spacing between the bottom border of an element and the element(s) below it.

The spacing between the bottom border of an element and the element(s) inside it.

An element that links to pages, page sections, external links, emails, files, and telephone numbers. An element that can be clicked or interacted with to perform an action, like submitting forms or triggering an interaction or animation.

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.

The rules that define how a web page's elements are displayed in a browser.

A CSS property that defines visual effects like blur and saturation.

The space in the center of the Designer where your site's design and content display.

The order in which a Webflow site's CSS styles flow from desktop to mobile breakpoints.

A form element that lets people select one or more options.

An element directly below the current element in the hierarchy.

A selector type that affects all elements with that class.

Cloneable sites are open source (made available under the CC0 (“no rights reserved”) license). When you enable cloning, you allow any user to copy, modify, and use any part of your site for personal or commercial purposes.

Sites with cloning turned off do not give others access to copy your site or open it in the Designer.

A content type (blog posts, recipes, etc.) represented by a group of fields you define. Once created, you can add individual Collection items.

The slug that represents the parent folder for your individual Collection item URLs. For example, if you created a Collection called “Blog posts,” the URL would be website.com/blog-posts, while a Collection item URL for a blog post called “Hello world” would be website.com/blog-posts/hello-world.

An individual field within a Collection. You'll select which fields to display in dynamic Collection lists and Collection pages.

An individual item within a Collection. For example, in a “Blog Posts” Collection, the Collection items are individual blog posts.

By default, Collection lists display all items in a Collection, but you can add limits to control the number of Collection items that display.

A Collection list is a Webflow element that lets you dynamically display content from a CMS Collection.

Lets you control how Collection items display inside a Collection list. The default layout option has each item covering the full width of the parent element. You can change this to display Collection items in 2, 3, 4, or 6 columns.

The color field is available in CMS Collections. You can add the color field to a Collection, then use it to add color to dynamic elements in your site.

Columns let you create sections of content that sit side by side on your website, like the columns in newspapers. You can choose how many columns you want and their widths. You can also control how they display on smaller screens — such as stacking them.

Combining two or more classes into a single selector to target an element.

All elements on the page targeted by the same selector.

A section in the Add Panel that houses pre-built Webflow elements such as sliders, tabs, and lightboxes.

An element that contains content.

A design approach that prioritizes content planning and production in the design process.

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

Fonts that you upload and use on your Webflow site (rather than our stock fonts, Google Fonts, or Adobe fonts). Note that you must have rights to use these fonts.

DNS (Domain Name System) records tell the DNS server where each domain should point to. There are a number of different DNS record types. To connect your domain to Webflow, check out the Connecting a custom domain article.

From your Dashboard, you can access, create, and manage all your sites.

A field available in CMS Collections. This field lets you display a date and time in a Collection and/or Collection item.

To remove an element and its content from your website.

Any element lower in the hierarchy.

The mode that enables a designer to build in Webflow.

The main interface where you can build sites.

A Webflow canvas setting for creating styles that affect viewports with a minimum width of 991px. This is the default breakpoint in the Designer. Also known as the desktop media query.

A CSS property that specifies an element's box type. It determines how an element displays in a design. Options include: block, inline-block, inline, flex, grid, and none.

Block elements start on a new line and take up the full available width.

A CSS display property that specifies a flexbox layout. Flex containers arrange their children (items inside them) horizontally or vertically. You can customize how the direct children stack, when they wrap, and how they are aligned and justified within the flex container. The flex child settings allow you to override the flex container settings for alignment and justification. They also allow you to change the sizing and order of the selected flex child.

A CSS display property that defines a grid-based layout. Grid containers arrange their children (items inside them) across multiple columns and rows.

You can customize how the direct children are positioned, aligned, and distributed within the grid components: the container, the individual cells, group of cells, or tracks.

The grid child settings allow you to override the grid container settings for alignment and justification. They also allow you to change the order of the selected grid children.

Inline elements stack horizontally where vertical spacing is based on line-height, not margin or padding. They only take up the space their contents require. Width and height can't be applied.

Inline-block elements stack horizontally on a line and do accept width, height, padding, and margin settings.

A CSS display property that treats an element as if it doesn't exist while still keeping it (hidden) in the HTML document. Since elements with a display: none property do not display in the design, this can be handy for altering how content displays on mobile devices. Note that setting elements to display: none also makes them unavailable to assistive technology like screen readers. Learn more about conditional visibility.

A generic element that is typically used to group content, or when no other element is specifically or semantically suitable. Div blocks have no effect on the content or layout until styled with CSS.

The document object model is a platform- and language-neutral interface that lets programs and scripts dynamically access and update the content, structure, and style of documents.

A process that automatically redirects visitors from your domain name to a different web address. You’ll need to set up a Site plan and connect your domain to Webflow before you can forward your domain to a Webflow site.

You can exclude pages from being published to your site by setting them as drafts. These can be unfinished pages, internal pages such as style guides, archived pages saved for backup, etc. Learn more about drafted pages.

A Webflow element which lets you display an expanding menu that shows a list of items when clicked.

To copy an element and its content, styles, and settings.

Content you create once, then publish in many different places across your website. As you update this content in the CMS, it automatically updates wherever it exists on your site, making it convenient to create and manage larger websites.

Elements inside a Collection list or Collection page that can use dynamic content. You will know when an element can use dynamic content when the Dynamic style settings are visible in the Element settings panel.

The toolbar that appears at the bottom of the Editor. From here, you can access the various Editor panels to manage page settings, dynamic content, forms, and your Editor account. You can also see and publish the changes you make through the Editor.

A section in the Style panel that houses CSS properties for changing how an element appears, such as its opacity, outline, and box shadows.

A navigational aid that displays in the bottom of the Webflow Designer to help you keep track of the element you're interacting with in relation to its hierarchy.

The color-coded borders of elements you'll see in the Webflow Designer.

The second panel on the right side of the Designer. Here, you can change element-specific settings such as the element ID, Custom attributes, Search index settings, Editor settings, etc. You can learn more about the element settings for a specific element by searching for the element’s name on Webflow University.

An area of the Forms tab in your Site settings that lets you customize the format and content of your Webflow form submission notifications.

A Webflow component you can use to embed HTML to display external content, plugins, or applications.

Elements that don't contain any other elements. They're outlined by a dashed gray border.

The state displayed when a Collection contains no Collection items, which gives you the opportunity to design for a situation where there's no content to display. Check out the Empty States blog for inspiration.

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

A Webflow element that embeds a Facebook Like button in your site.

A 16x16 px image that displays in browser tabs, bookmarks, and other browser areas. It's typically a simplified version of the site's logo.

A form element that looks and behaves like normal text but generates form-specific code on export. It tells website visitors what content to enter into the associated field.

An element contained within a parent element that has display: flex set.

A flexbox property that lets you customize the alignment behavior of flex children, based on the cross-axis of the flex container. The cross axis is the opposite of the flex-direction property, so if you set the direction to vertical, the cross axis is horizontal. Options include start, center, end, baseline, and stretch.

A flexbox property that lets you define the base size from which the flex child can grow or shrink.

A flexbox property that determines the flow of flex children: horizontal or vertical.

A flexbox property that allows a flex child to grow if space allows.

A flexbox property that lets you customize the alignment behavior of flex children, based on the main axis of the flex container — that is, whatever you defined as the flex-direction. Options include start, center, end, baseline, and stretch.

A flexbox property that lets you customize the display order of a flex child. The order can be first, last, or custom.

A flexbox property that allows a flex child to shrink if space becomes scarce.

A flexbox property that determines the resizing behavior of flex children across viewport sizes. They can shrink, grow, or remain static.

A CSS layout module in which you control the layout of a parent container's children using alignment and distribution tools similar to those in most graphic design programs. Children can flow either horizontally or vertically and can wrap to new lines, as well as be reversed. See also display: flex.

A subdirectory of your site's root folder used for organizing web pages.

Allows you to manage your folders.

Custom code you can add just before the closing </body> tag in your site's HTML file. Learn more about custom code in head and body tags.

A set of elements that make up a basic form.

A form element that lets website visitors submit data to your form handler.

When someone sends data through one of your site's forms.

A section of the Add panel that houses form elements like inputs, checkboxes, and radio buttons.

The perfect Webflow subscription for getting started, giving you access to all Designer features, so you can start building a site right away.

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

A unique string of numbers and characters that helps you verify the ownership of your Webflow site with Google.

A visual representation of Webflow’s 960px 12-column grid system, which helps you position and align elements on your site page.

Custom code that's added just before the closing </head> tag in your site's HTML file. Learn more about custom code in head and body tags.

A typographic element that describes the topic of a section it introduces.

Defines how tall an element can be. This can be defined in absolute terms (pixels) or relative terms (ems, rems, percentages, viewport-height, or viewport-width).

The way browsers calculate an element's height automatically, so that block-level elements fill the available space of their parent containers and inline elements shrink to the size of its children/content.

Help text lets you explain what content should go in a given Collection field. This only appears internally in the CMS, not the public site.

The page people see when they visit your site's root domain. Read more about the homepage.

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

The <a> tag defines a hyperlink, which is used to link from one page to another.

You can assign element IDs from the Element settings panel in the Designer. ID selectors are useful for HTML anchors, linking to page sections, or for custom code.

A Webflow element that displays graphical files on your website.

Available in CMS Collections. With this field, you can upload images from your computer and use them as dynamic items in your individual Collection item.

A dropdown menu that displays all the selectors that affect a given element.

A form element that lets website visitors enter single-line data.

The default UI state for Collection lists, which displays the items in the Collection. It is the opposite of the empty state.

A set of keyboard commands you can use to quickly navigate and make changes in the Designer. Learn more about Webflow keyboard shortcuts.

A unique code you can add to your Webflow site to let browsers, translation apps, and other tools perform language-sensitive tasks.

The last time your site was published.

The last time someone made a change to your site.

A tab in the Add panel that houses prebuilt layouts for your Webflow site.

Defines the external spacing between the left border of an element and surrounding elements.

Defines the spacing between the left border of an element and any elements it contains.

The vertical bar of tools on the left side of the Webflow Designer. It holds the Add panel, Symbols panel, Navigator panel, Pages panel, CMS panel, Ecommerce panel, Assets panel, Settings panel, Site Activity log, Audits, Search, Video tutorials, and Help.

A Webflow element that opens a full-screen view of images or videos when clicked.

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

A CMS field used in Collections to link to another page (or, for anchor links, a specific area of a page).

An element that contains ordered (numbered) or unordered (bulleted) lists.

An element that houses content displayed in a list format. It can only be added to a list element.

When you have more unhosted sites in your Dashboard than your Workspace plan allows, those additional sites past your limit will be “locked” until you upgrade your plan. When you upgrade, you’ll be allowed more unhosted sites (up to the limit for your Workspace plan) and will be able to access your previously locked sites.

Made in Webflow showcases Webflow sites made by individuals and teams.

A Webflow element that embeds an interactive Google Map in your site.

Defines the external spacing between an element's border and the elements around it.

Defines the maximum height of an element. This can be defined in absolute terms (pixels) or relative terms (ems, rems, percentages, viewport-height, or viewport-width).

Max width defines the maximum width of an element. This can be defined in absolute terms (pixels) or relative terms (ems, rems, percentages, viewport-height, or viewport-width).

A CSS feature that allows you to adapt your site's styles to different screen/device widths (the basis of responsive web design). Also known as a breakpoint.

A section of the Add panel that holds multimedia elements like images, video, and Lottie animation.

An HTML attribute you can use to give a short description of the contents of a webpage. Search engines often display this in results pages (SERPs).

Words or phrases you can include in your web page's metadata. Once used to indicate a page's topic(s), these are now ignored by most search engines.

An HTML element that defines a page's title. Search engines usually display this in search results pages (SERPs).

Minifying your site's code can help your live website load faster, but makes your code a little harder to read. It can also fix spacing issues with inline-block elements. You can minify CSS, HTML, and/or JS separately in Site settings > Publishing tab > Advanced publishing options.

A method of lowering the file size of your stylesheet(s) by removing all white space from your CSS files.

Min width defines the minimum width of an element. This can be defined in absolute terms (pixels) or relative terms (ems, rems, percentages, viewport-height, or viewport-width).

A Webflow canvas setting that lets you create styles for viewports with a minimum width of 480px and a maximum width of 767px. Also known as the mobile landscape media query.

A Webflow canvas setting that lets you create styles for viewports with a minimum width of 240px and a maximum width of 479px. Also known as the mobile portrait media query.

A pop-up window that displays additional settings, info, or a call-to-action. Users typically must interact with a modal window in some way (e.g., typing in an email address and hitting a “Submit” button for a modal window subscription box) in order to go back to the page’s main content.

A CMS field used in Collections. Just like a reference field, the multi-reference field lets you reference other Collections in your site. But it’s even more powerful, as it lets you reference multiple items within a Collection instead of just 1 item.

A Webflow element that automatically creates a responsive navigation menu.

A panel on the left side of the Webflow Designer that lets you view and manage your site's hierarchy tree.

The type of element you're working with, i.e., H1, link, button, etc.

Available in CMS Collections. It lets you insert an integer with or without decimals.

A web app that helps you measure how different site designs impact user behavior.

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

A form element that allows site visitors to select 1 of a limited number of choices.

A way for others to test/debug your Webflow site in the Designer without being able to save or make permanent changes.

Email confirmations you receive upon making Webflow payments.

To move forward one step while making changes to a Webflow site.

A CMS field used in Collections. This powerful field allows you to link to other Collections within your website to populate fields in Collection lists and Collection pages.

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. The only Collection field that cannot be made required is the Switch field.

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.

Available in CMS Collections. You can use rich text for long-form content or areas of your site where you might need multiple paragraphs, headings, or inline media such as videos, images or links. You can also add further rich text formatting in the Editor such as bold, italics, superscript, subscript, etc.

The outside spacing between the right border of an element and the elements next to it.

The inside spacing between the right border of an element and the elements inside it.

The far right vertical panel in the Designer that houses the Style panel, Element settings panel, Style manager panel, and Interactions panel.

A file that gives web crawlers instructions on which pages you want them to crawl/ignore on your site. This can be useful for preventing duplicate content from being indexed in search engines, but isn’t a good way to hide information.

Mid-September 2019, new European requirements for authenticating online payments were introduced in Europe as part of the second Payment Services Directive (PSD2). The Strong Customer Authentication (SCA) requirements apply to businesses in the European Economic Area (EEA) that accept online card payments from cardholders whose banks are also located in the EEA.

Webflow Ecommerce payments are PSD2 and SCA compliant (i.e., support 3D Secure payments) for European customers.

If you’re a merchant in the European Economic Area (EEA), all you need to do to ensure that your Webflow Ecommerce store is PSD2 and SCA compliant for your European customers is to republish your store if it wasn’t published on or after September 11, 2019.

Read more about how to make your ecommerce store compliant in our Payment gateway article.

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 labeled “not secure” by some browsers, strongly discouraging people from visiting your site. Learn more about SSL hosting.

An option that allows you to serve your images over your own CDN service while using SSL.

The Designer automatically saves your progress every 10 seconds.

The ability to manually save a version of your site that you can restore at a later date using the keyboard shortcut Command + Shift + S (on Mac) or Control + Shift + S (on Windows).

‍

An element that is used to house large separate "sections" of content in a Webflow site.

A form element that allows you to make a selection in a dropdown list.

A name you assign an element in order to style it.

A pseudo-class that allows you to change the styles of an element when it is hovered, pressed, or focused.

An element that shares the same parent of another element.

What you create in Webflow! You can publish sites to a webflow.io staging subdomain for free, export the code on a paid plan, add hosting on any paid plan, or add a Site plan to any site to connect your custom domain and unlock hosting features.

A Webflow plan that you can add/apply to individual sites. You’ll receive 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.

A file that gives web robots information on how a website is organized and allows search engines to find your site data faster and more efficiently. This can be useful for helping a search engine organize your site links when displayed in search results.

A Webflow element that houses slides of content that are displayed when interacting with a slider navigation or timer.

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/hello-world, “hello-world” is the URL slug. Changing the slug of a page will change the final URL of the page once it is published. We recommend that you redirect the old URL to the new location using a 301 redirect.

You can sort your Collection items in multiple ways — select the field from the Collection you wish to filter from, then select the ordering option.

The <span> tag is used to style inline-text.

The dropdown menu to the right of the Selector field that allows you to access and change the styles of an element when it is hovered, pressed, or focused.

Static content is content that’s not bound to any Collections or dynamic elements.

A document that makes up an individual web page on your site. These are visually designed in Webflow and rendered in HTML to be displayed in a web browser. Static pages are manually created pages, as opposed to Collection pages and Utility pages.

The <strong> element defines important text with added semantic importance.

The third tab in the right-side panel where you can rename element classes, preview your class and tag styles, search for classes and tags, and delete any classes that aren’t in use.

The first tab in the right-side panel that allows you to assign classes to elements and style them.

The part of a domain that comes before the root domain (e.g., blog.yourwebsite.com is a subdomain whereas yourwebsite.com is the root domain).

When a search engine crawls your site's Webflow subdomain (e.g., your-site.webflow.io).

Available in CMS Collections. This field offers you a powerful filtering tool for Collection items. For example, you could create a switch labeled "Featured?" for Blog Posts, and then switch on the toggle to showcase particular posts.

A Webflow canvas setting for creating styles that affect viewports with a minimum width of 768px and a maximum width of 990px. Also known as the tablet media query.

A Webflow component that displays a pane of content associated with a tab menu button.

The currently selected element.

A form element that allows site visitors to enter multi-line data.

A typography element that is used when no other element is specifically suitable.

A typography element that is used to link to other pages or sections of a webpage.

The outside spacing between the top border of an element and the elements above it.

The inside spacing between the top border of an element and the elements inside it.

The amount of times a site visitor submits data using your site's form(s).

The amount of pages your site currently has.

The total weight of your site's HTML, CSS, JS, and images.

You can transfer sites from one Workspace to another Workspace.

A Webflow element that embeds a Twitter Follow or Tweet button into your site.

A section in the Add panel that houses typography elements such as headings and paragraphs.

A section in the Style panel that houses CSS properties related to how typography is displayed such as font, font size and height, and align.

The UI state changes how Collection lists display when you’re designing. The Items state is the default option, and shows the items that you have within the Collection. The Empty state doesn’t show these items and gives the designer the opportunity to design for a circumstance if/when there is no data to be displayed in the Collection list.

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

Form submission notifications that have no reference to Webflow (e.g., notifications sent from “no-reply@webforms.io” instead of “no-reply@webflow.com”).

To move backward one step while making changes to a Webflow site.

A change that has been made in the Webflow Editor but will not appear on the live website until it’s published. You can track any unpublished changes on the bottom right of the Editor toolbar.

The ID used to log into your Webflow account.

Utility pages are default, customizable templates for your site’s 404 page, Password page, and Search results page.

A Webflow element that displays externally hosted videos such as YouTube and Vimeo.

Available in CMS Collections. You can add videos via a link — not an embed code — from an online video host like Vimeo or YouTube. Just paste in the video link and it’ll appear in the native video format from the 3rd-party video player.

A 256 x 256 px image associated with your website that shows up when your website link is saved to an iPhone home screen.

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.

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).

The place to go when you need help using Webflow.

A visible "Made in Webflow" badge displayed in the bottom right corner of Webflow sites on Starter plans.

A visible “Made in Webflow” badge displayed in the bottom right corner of Webflow sites. Webflow branding also appears in the site’s HTML. Learn more about Webflow branding.

The place to go when you need help with your site's design, custom code, etc. Visit the forum.

The title used to describe your website throughout Webflow.

Width defines how wide an element can be. This can be defined in absolute terms (pixels) or relative terms (ems, rems, percentages, viewport-height, or viewport-width).

The way browsers calculate an element's width automatically where Block level elements fill the available space of its parent and Inline elements shrink to the size of its children/content.

A space to hold and access sites, members, settings, and integrations. All users start with a Workspace that can become collaborative when and as needed.

A Webflow plan that applies to your entire Workspace.

A grayscale view of your site’s canvas that visually displays each element’s border, margin, and padding when hovered over.

A web app that helps you connect multiple third-party services together based on triggers and actions.