University
Home
Search
⌘E
Dashboard
Try Webflow — it's free
Learn
Courses
Docs
Videos
Interactive Learning
Glossary
Certifications
Engage
Support
Community
Events
Forum
Accessibility
Switch to Light mode
Switch to Dark mode
High contrast
Glossary
Modal window

Modal window

A modal window (or modal) is a web element that displays above all content and restricts user interaction until the user manually dismisses it. Modal windows typically have a semi-transparent background that dims or distorts the rest of the page, forcing focus to the window’s contents. 

Modals intentionally interrupt a site visitor's activity to draw their attention to important information or prompt an action, such as completing a form or logging in, before they can go back to the page’s main content.

Although modals can improve user experience by focusing attention toward specific content or actions, they can also be frustrating and disruptive, and should be used sparingly. 

Head to our blog to learn how to create impactful pop-ups that encourage interaction. Our step-by-step guides can help you build modals that benefit you and your visitors.

Relevant courses

Accessibility on the web

Learn about accessibility on the web and how to create inclusive and accessible sites without writing code.

CSS grid in Webflow

An overview of CSS grid. Use the grid layout in Webflow to get more control over your designs and create powerful, responsive layouts — faster.

Landing page generator for Ryan Reynolds

Learn how to build a dynamic landing page generator in under 30 minutes.

CSS styling

Take a closer look at all the creative styling possibilities that CSS offers. Learn how to style elements visually, with the power of Webflow.

CSS layout & positioning

Dig into the world of HTML and CSS layouts — learn how they work together and get an overview of display properties like inline block and flexbox.

Webflow 101

Introducing Webflow 101, the ultimate course to learn the fundamentals of web design and development.

Other glossary terms

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

Radio button

→
A radio button is a form element for selecting one option from a predefined set of mutually exclusive choices.

Blog

→
A blog, short for weblog, is a website or webpage where an individual or group regularly shares content about specific topics, typically in reverse chronological order.

Null

→
“Null” represents the absence of a value or the presence of invalid objects in computer science and web development.

API

→
APIs, or Application Programming Interfaces, are common code protocols that let apps safely exchange data with other apps, software, and hardware.

Slider

→
A slider is an interactive design element for scrolling through images, videos, and other multimedia content.

BiDi

→
BiDi stands for bidirectional. When a document is BiDi, it supports text that reads from right to left and left to right.

Help text

→
Help text is a user interface design element that provides additional information or guidance to users to clarify which content should go in a given Collection field.

Common targets

→
All elements on the page targeted by the same selector.

Page settings

→
You can manage your site pages within Page settings. Here, you can rename, duplicate, delete, or save pages as drafts. You can also set SEO, Open Graph, and site search settings, as well as insert custom code. Additionally, you can set RSS settings for Collection pages.

Optimizely

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

Class

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

Element edges

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

Backup

→
A backup is a copy of data stored in an alternate location, including hard drives, cloud servers, or network-attached storage (NAS) servers.

Collection URL

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

Image field

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

Selector

→
A selector identifies and selects specific HTML elements to apply CSS styles to.

Image

→
A Webflow element that displays graphical files on your website.

Drafted pages

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

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.

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.

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.

Minimum height

→
The min-height CSS property defines an element’s minimum height.

Domain name forwarding

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

Flex-shrink

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

Publish site

→
The act of updating your live site to reflect new design changes.

Search Engine Optimization (SEO)

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

Call stack

→
A call stack is an ordered list of the functions (or stack frames) a program has to execute before it returns a result.

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.

Webflow Support

→
The place to go when you need help using Webflow.

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.

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.

Slug

→
A slug, also known as a URL slug or a website slug, is descriptive text that appears at the end of a URL and identifies a web page.

Reference field

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

Workspace

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

Automagically

→
Automagically describes complex content or functions that appear as if they were created using magic.

Flex-direction

→
Flex-direction is a CSS property that defines the main axis and direction of flex items, dictating the arrangement of the items within a flex container.

Switch field

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

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.

Public site

→
A Webflow site that is publicly visible in your public profile and in Made in Webflow search results.

Key

→
A key, or web key, is a unique identifier that authorizes access to a webpage or service.

Semantics

→
Semantics accurately represent the structure and purpose of content in computer languages, enabling web developers and programmers to ensure the written code produces an output legible to humans and machines.

AJAX

→
Asynchronous JavaScript and XML (AJAX) is a web development approach that combines technologies to allow web content to update without reloading.

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

Decryption

→
Decryption is the process of reverting encrypted data to its original format.

Canvas

→
The <canvas> tag in HTML5 creates a container for dynamic graphics and image rendering on a webpage.

Form button

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

Serialization

→
Serialization is the process of converting data into an optimized format for storage, transmission, and sharing.

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.

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.

Buffer

→
A buffer is a temporary storage area that holds data while transferring it between different components or systems.

Static content

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

Tablet breakpoint

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

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.

Python

→
Python is a high-level, object-oriented, general-purpose programming language (GPL).

Color wheel

→
The color wheel shows several colors in a circle to represent primary, secondary, and tertiary colors and their relationships.

Right margin

→
Right margin is a CSS property that defines the space between the right edge of an element and its surroundings.

Save

→
The Designer automatically saves your progress every 10 seconds.

Dropdown

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

Flex child

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

Maximum width (max width)

→
The “max-width” CSS property defines an element’s maximum width.

Favicon

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

Display: none

→
Display: none is a CSS property that hides website elements. This code tells the document flow to ignore the element entirely, making it invisible.

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.

Flex-grow

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

A/B testing

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

Collection field

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

RSS

→
Really Simple Syndication (RSS) is a web format that automatically distributes frequently updated content to subscribers, eliminating the need for subscribers to check the website manually to stay up to date.

Field label

→
A field label is descriptive text that helps users understand what information to enter in an input field on a web form.

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.

Descendant selector

→
A descendant selector is a CSS (Cascading Style Sheets) selector that targets elements nested inside a parent element.

Certified

→
A digital certificate is a data file embedded in the site that signals the site’s safety to visitors, internet service providers (ISPs), and servers.

Flexbox

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

Inline Frame (iframe)

→
An inline frame is an HTML element that embeds an HTML document within another webpage.

Form block

→
Form blocks allow you to add form elements to a website, including appointment booking, surveys, applications, polls, and contact forms.

Content network

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

Content optimization system (COS)

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

Hotlink

→
A hotlink — also known as a remote or inline link — is a hyperlink that directs to a resource, such as an image or a file, without the owner’s explicit permission.

Shim

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

Display property

→
Display properties operate like instructions that tell a browser how to display the different parts of a webpage. You can customize an element’s appearance and layout by changing its display property.

Section

→
A section is an element of design layout that divides a web page into visually distinct segments.

Content-first design

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

Control flow

→
The control flow is the order in which a computer program executes its instructions or statements, guided by control structures.

Latency

→
Network latency is the time data needs to travel from one point to another, impacting the responsiveness and speed of web applications and services.

Sibling

→
An element that shares the same parent of another element.

Comment

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

Meta title

→
A meta title is an HTML element that defines a web page's title and appears in browser tabs and search snippets on search engine results pages (SERPs) as a clickable headline.

Call-to-action (CTA)

→
A call-to-action (CTA) is a website feature that prompts visitors to perform a specific action.

Hypertext transfer protocol secure (HTTPS)

→
Hypertext Transfer Protocol Secure (HTTPS) is a secure protocol facilitating encrypted exchanges of information between web browsers and servers.

SSL

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

Tabs

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

Collection

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

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.

Pages panel

→
A panel in the left toolbar where you can add static pages and folders to your Webflow site. You can also manage and access Utility pages and Collection pages.

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

Number field

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

Tutorials

→
The fastest way to learn how to use Webflow.

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.

Resolution

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

Custom domain hosting

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

Deprecated

→
Deprecated HTML tags are old tags replaced by updated alternatives in modern web design and development.
Hmm…we couldn’t find any results. Try a different search term or reset the filter.
Reset the filter
Load more