University
Log in
Search
⌘E
My learning
Try Webflow — it's free
Learn
Courses
Learning Paths
Videos
Docs
Resources
Certifications
Interactive Learning
Glossary
The Webflow Way
Engage
Support
Community
Accessibility
Switch to Light mode
Switch to Dark mode
High contrast
Glossary
Keyboard shortcuts

Keyboard shortcuts

Keyboard shortcuts are key combinations that trigger a specific action instantly, without reaching for a menu. Control+Z (undo) and Control+F (find) are two of the most familiar ones, and the Webflow Designer has its own set built in to speed up everyday design work.

In Webflow, the Designer has preset keyboard shortcuts to help speed up your design workflow. Here are a few examples: 

  • Save as Snapshot — Shift + Command + S (on Mac) or Shift + Control + S (on Windows)
  • Preview mode — Shift + Command + P (on Mac) or Shift + Control + P (on Windows)
  • Guide overlay — Shift + Command + G (on Mac) or Shift + Control + G (on Windows)
  • Select parent / child element — Up arrow / Down arrow
  • Select sibling element — Left arrow / Right arrow

There’s even a shortcut for opening the shortcut cheat sheet (Shift + /).

Relevant courses

Getting started with Webflow

Get familiar with Webflow’s website experience platform.
A glowing AI sparkle icon within a deconstructed pink neon box

AI guardrails for teams

Manage team AI access, understand the reach of AI-assisted changes, and review what changed before your site goes live.
Comment cursor hovering over a text box

Webflow for Reviewers

Learn how to review and give feedback with confidence in Webflow.
Publishing rocket icon flying through glass

Webflow for Marketers

Learn how to build, edit, and publish with confidence in Webflow.

Collaborate with your team

Learn how to set up roles, permissions, and workflows in Webflow so your entire team can work together safely, confidently, and efficiently.

Intro to Webflow integrations

Learn how to extend Webflow by connecting it to the tools and systems your team already uses.

Other glossary terms

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Bottom bar

→
A bottom bar is a navigation bar at the bottom of an app or webpage.

Display: inline

→
The display: inline CSS property is a display option that controls an element’s appearance and layout.

Collection list

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

Sidebar

→
A sidebar, typically positioned on the left or right side of a website or app, is a vertical component that contains supplemental information to enrich a webpage’s primary content.

Flex-shrink

→
The flex-shrink CSS property defines how much an element shrinks relative to other flexible items inside the same parent element.

Collection limits

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

Checkbox

→
Checkboxes are HTML structures that allow visitors to input data.

List item

→
A list is a Webflow element that displays multiple pieces of content in a structured, visually appealing way. The individual elements that make up the list are called list items.

Link block

→
A link block operates much like a div block, an HTML element for grouping and organizing other HTML elements (like text, images, and forms) into block-level containers. But in the case of a link block, what’s inside the block becomes a link.

Deployment

→
In software and web development, deployment is the process of moving code from one environment to another, usually in the form of changes or updates.

Bounding box

→
A bounding box is a rectangular border around a website element (e.g., a heading, paragraph, or image) that appears during the design process.

Dynamic element

→
Dynamic elements are web page components that can change based on user interaction or external factors, like a live news feed, without requiring a page refresh or reload.

SVG (Scalable Vector Graphics)

→
Scalable Vector Graphics, or SVG, is a file format for displaying scalable vector graphics on the web.

Password protection

→
Password protection is a security feature restricting certain website areas to authorized users, requiring a secret phrase or key to access them.

ASCII

→
The American Standard Code for Information Interchange (ASCII) is an encoding standard that assigns numerical values to characters and translates them into computer-readable code.

Display: flex

→
The most flexible display property in CSS is the aptly named display: flex, which allows you to create flexible layouts with elements that you can align and distribute vertically or horizontally.

Sorting Collection lists

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

Domain name forwarding

→
Domain name forwarding is a process that automatically redirects visitors from your domain name to a different web address.

Keyboard shortcuts

→
Keyboard shortcuts are combinations of keys on a computer keyboard that perform a specific action or command within an application or operating system.

Flexbox

→
Flexbox is a CSS layout mechanism that offers precise alignment and stacking control for the content inside an element.

Responsive design

→
Responsive web design (RWD) is a web development and design approach to create websites, applications, and user interfaces (UIs) that display and function effectively on any device or screen size.

Props

→
Props are the customizable settings exposed on a reusable component, letting you change its content, styling, or behavior each place it's used without editing the component itself.

Content optimization system (COS)

→
A content optimization system (COS) is software that lets you optimize website content to attract more traffic.

Date/Time field

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

Class

→
A class is a template that defines variables for objects with similar properties.

Multi-reference field

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

Link

→
A link, short for hyperlink, is a clickable website element that enables navigation between different web resources.

Wrapper

→
A wrapper is a programming language function for encapsulating and organizing elements within a well-defined interface.

Closed-loop marketing

→
Closed-loop marketing is an ecommerce marketing strategy that uses customer data to create and improve targeted content.

Search Engine Optimization (SEO)

→
Search Engine Optimization (SEO) is a collection of strategies to enhance a website’s ranking and visibility on search engines.

Export

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

Color field

→
A color field specifies a graphical color picker or user interface for entering a color into a text field in a seven-character, hexadecimal format.

Component Module

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

Website name

→
A website name, or domain, is the title of a website that appears in the browser tab and search engine results.

Zapier

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

Total Site Pages

→
The amount of pages your site currently has.

Folder settings

→
Allows you to manage your folders.

Media section

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

CMS field groups

→
CMS field groups let you organize a Collection's fields into named, labeled sections, making large or complex collections easier for editors to navigate.

Site plan

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

404 page

→
A 404 page is an error page a visitor sees when they try to access a non-existent or broken URL on a website.

Child

→
A child element is an element nested within a parent element in a hierarchy.

Array

→
An array is an ordered, random-access collection of data. This data can be either primitive or object, depending on the coding language.

Meta description

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

Duplicate element

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

SSL

→
SSL (secure socket layer) is the standard method for establishing an encrypted link between a web server and a browser.

Attribute

→
An attribute in HTML is a term inside an opening tag of an element, such as a font or color, that provides additional information about the element.

Page name

→
The title of a page in your site. This is visible in the Pages panel.

Bug

→
A bug is an error, fault, or flaw in an application or software that causes the program to behave unexpectedly, often producing inaccurate and invalid output.

Width

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

Unbranded form submission notification

→
Form submission notifications that have no reference to Webflow (e.g., notifications sent from “[email protected]” instead of “[email protected]”).

Library

→
A Library is a shared collection of components, styles, and assets that you can install across multiple sites in a Workspace, so updates to it can propagate everywhere it's installed.

Tag

→
A Hypertext Markup Language (HTML) tag is a code snippet that defines and describes the structure and content of web pages.

Webflow branding

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

Position section

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

Variable font

→
A variable font is a single font file that contains multiple weights, widths, or styles, letting you adjust typography continuously instead of loading a separate file for each variant.

Descriptor

→
A CSS descriptor sets specific properties and values of an at-rule (@-rule) element, dictating its appearance and behavior on a web page.

JSON-LD

→
JSON-LD is a structured data format that describes a page's content in a machine-readable way, helping search engines and AI crawlers understand what's on the page.

Parameter

→
A parameter is a programming variable or value that transfers data between functions.

Account notifications

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

Compile time

→
Compile time is the length of time it takes for a compiler to convert high-level code into low-level code.

Mobile (portrait) breakpoint

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

Footer code

→
Footer code creates a section at the bottom of every web page that displays important information like disclaimers, copyright or contact information, and links to related documents.

Footer

→
A footer is a section at the bottom of a web page.

Comment

→
A comment is a text note in source code that offers context, internal information, or other guidance to any developers using it.

Bundling

→
Bundling, or bundle pricing, is a pricing technique in which retailers sell products together at a lower price than they would be sold at individually.

Padding

→
Padding is a CSS property defining the space between an element's borders and its content.

Typography

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

Webclip

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

CSS Filters

→
CSS filters apply visual effects to HTML elements and their children using Cascading Style Sheets (CSS).

Style panel

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

Safe

→
"Safe" is a Hypertext Transfer Protocol (HTTP) method that doesn't modify the server's state or resources.

Map

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

Top padding

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

Resolution

→
Resolution is a metric measuring clarity and detail through the number of pixels displayed on a screen or used to render an image.

Flex-order

→
In CSS, flex-order is a property that allows you to manipulate the default source order of the items within a flex container. Flex-order is especially useful when you want content to display differently on mobile than on desktop.

Designer

→
The main interface where you can build sites.

Last published

→
The last time your site was published.

Navbar

→
A navbar, or navigation bar, is an interactive user element with a menu or a set of links to a website’s main sections.

Ciphertext

→
Ciphertext is unreadable, encrypted data that ciphers use for security during data transit.

Content network

→
A content network is a collection of websites where advertisers can pay to display digital ads.

Dropdown

→
A dropdown, or dropdown menu, is a pre-built navigation element you can add to almost any part of a website.

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

Abstraction

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

Effects

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

Middleware

→
Middleware is software that links different programs and applications, allowing them to interact and communicate effectively.

Cryptographic hash function

→
A cryptographic hash function takes an input message of any length, such as a file, message, or password, and uses a mathematical formula to produce a fixed-size output (hash).

Left To Right (LTR)

→
Left To Right (LTR) describes a text layout that starts from the left and proceeds to the right.

Head code

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

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.

Video field

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

End user

→
An end user is an individual or group who directly interacts with a particular product, service, or user interface (UI), such as a website or application.

Display: inline-block

→
The display: inline-block CSS property defines an element’s appearance and behavior. CSS designers use this code to create website layouts.

Borders

→
The CSS border property delineates an HTML element.

Shim

→
A shim is a code snippet enabling modern web features to function within older programming or browsing environments.

External link

→
External links direct users to different websites and impact a site's search engine visibility and rankings.

Text block

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

DHTML

→
DHTML, or Dynamic HTML, is a web-development technique combining HTML, CSS, and JavaScript to create dynamic, interactive web pages and complex web applications.

Smoke test

→
A smoke test, also called build verification testing or confidence testing, is a preliminary examination to determine the basic functionality of a software, website, or application.

URI

→
A Uniform Resource Identifier (URI) is a string of characters identifying an online resource.
Hmm…we couldn’t find any results. Try a different search term or reset the filter.
Reset the filter
Load more