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
Lightbox

Lightbox

A lightbox displays images or videos in a popup modal that sits on top of your page's main content, giving visitors a larger, more focused view without navigating away. It's a common way to feature a photo gallery or product shots without cluttering the page itself.

Lightboxes can also draw focus to specific elements, such as calls to action or forms, to obtain user information or drive them to perform a desired action. 

For example, many ecommerce websites use lightboxes to feature product pictures you can enlarge by clicking on them. The lightbox allows you to zoom in and out, analyze the product's physical features, and select different color options — all without leaving the page. Lightboxes can also offer discounts in exchange for user information, allowing users to sign up for a newsletter or create an account without disrupting the browsing experience.

See it in action alongside other elements in Web elements.

Relevant courses

Getting started with Webflow

Learn what Webflow is, where your work happens, and how to find the right next step for your role.
Webflow MCP icon on glowy blue square

Get started with Webflow MCP

Connect an AI agent to your Webflow site and complete your first MCP workflow.

Webflow 101

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

Interactions & animations

Create motion and interactions that guide visitors and tell your brand's story.
Publishing rocket icon flying through glass

Webflow for Marketers

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

Forms

Design and build forms that turn visits into messages, signups, and real follow-ups.

Other glossary terms

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

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.

Common targets

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

CRUD

→
CRUD stands for Create, Read, Update, and Delete — the four basic operations all software applications should perform.

Class

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

CSS Filters

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

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.

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.

Sitemap URL

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

Paragraph

→
A typography element used for displaying multi-sentence text content.

Password protection

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

Ligature

→
A ligature in typography groups adjacent letters or characters into one glyph.

Algorithm

→
An algorithm is a set of rules or steps that help solve problems or carry out specific tasks.

Synchronous

→
Synchronous programming refers to sequentially executed operations.

Clickjacking

→
Clickjacking is when a malicious actor deceives website visitors into clicking buttons or links hidden in a fake layer to steal sensitive data or install malware.

URL

→
A Uniform Resource Locator (URL) is a standardized web address format that allows users to identify and access an online resource.

Read-only link

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

Shim

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

Flexbox

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

Bad neighborhood

→
Bad neighborhoods are groups of websites that search engines have downgraded because they violate search engine guidelines.

Browser

→
A browser, or web browser, is a software program that allows users to access, navigate, and interact with websites on the internet.

Left toolbar

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

URL redirect

→
URL redirect, or URL forwarding, is a web server function that automatically sends users from one web address to another.

Null

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

Custom domain hosting

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

A/B testing

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

Cipher

→
In cryptography, a cipher is a digital security algorithm that encrypts and decrypts data.

Compile time

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

Cookie

→
Cookies are small text files sent by a website to a user’s web browser that enhance their browsing experience by remembering site preferences and activities.

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.

Document type definition (DTD)

→
A document type definition (DTD) defines the structure, validity, and attributes of standard generalized markup language (SGML) documents, such as GML, HTML, and XML.

Text area

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

Public site

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

Pseudocode

→
Pseudocode is a simplified, informal representation of programming code that outlines a program’s structure and logic without strict syntax.

JavaScript

→
JavaScript is a programming language web developers use to create dynamic interactions and effects for web pages and applications.

Text link

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

Serialization

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

Product attribute

→
Product attributes are specific characteristics that define purchasable merchandise or commodities and provide relevant information to customers.

Traffic

→
Traffic, or web traffic, refers to the number of users who visit a website over a period of time.

CRLF

→
On Windows-based systems, the sequence of two ASCII characters representing a line break in text files is called "Carriage Return, Line Feed," or CRLF.

Character encoding

→
Character encoding is the process of representing characters (such as “a” or “3”) in a particular way, such as text on a computer screen.

Duplicate element

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

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.

Basic section

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

Content network

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

Unbranded form submission notification

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

Flex child

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

Homepage

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

Element edges

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

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.

SVG (Scalable Vector Graphics)

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

Robots.txt

→
A robots.txt file instructs search engine crawlers which webpages and sections they can or can't crawl and index.

Ancestor

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

Resolution

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

Font weight

→
Font weight refers to the thickness or density of a typeface’s strokes.

SCA and PSD2 Regulations

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

Primitive

→
A primitive is the simplest JavaScript data type, representing fundamental values that do not encapsulate any object, method, or property.

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.

Webflow Support

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

Container

→
An element that contains content.

Background

→
A website background is a visual element behind webpage content, enhancing aesthetic appeal and user engagement.

PNG (Portable Network Graphics)

→
PNG, short for Portable Network Graphics, is a lossless image format known for its transparency support and quality retention after compression.

Key

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

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

Delete element

→
To remove an element and its content from your website.

Email template

→
Email templates — or pre-designed HTML layouts — ensure consistent branding and visual aesthetic in marketing campaigns.

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.

Div block

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

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

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.

Selector

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

Certificate authority

→
A certificate authority (CA), also known as a certification authority, issues digital certificates that verify a website’s owner.

GIF

→
A GIF (Graphics Interchange Format) is a digital image format that uses multiple frames of an image or soundless video to create a short, looping animation.

Website name

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

Behavioral targeting

→
Behavioral targeting is a marketing technique that leverages user data to deliver personalized ads to drive conversions.

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.

Folder settings

→
Allows you to manage your folders.

Padding

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

Mutable

→
In JavaScript, mutable objects are dynamic elements that allow post-creation changes and modifications.

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.

Element breadcrumbs

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

Syntax

→
Syntax is the name for the rules specifying a programming language's structure and formatting.

Front-end

→
The front-end refers to the visual and interactive part of a website or application that users directly interact with.

Cascading rules

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

Canvas

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

List

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

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.

ID selectors

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

Hit

→
A hit is a request to a web server from a browser for a specific resource.

Subdomain

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

Bottom margin

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

Real-Time Streaming Protocol (RTSP)

→
Real-Time Streaming Protocol (RTSP) is a standardized network protocol for transmitting real-time multimedia data like audio and video.

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.

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.

RGB (Red-Green-Blue)

→
RGB, an acronym for Red, Green, Blue, is a color model that screen displays use to represent various colors.

Image

→
A Webflow element that displays graphical files on your 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).

Collection item

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

Display: block

→
Display properties tell browsers how an element should behave on the page. The most common display property keyword category is display: block.

Site

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

Lightbox

→
A lightbox displays content in a popup or modal window on top of a web page’s main content.
Hmm…we couldn’t find any results. Try a different search term or reset the filter.
Reset the filter
Load more