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
Lightbox

Lightbox

A lightbox displays content — such as images and videos — in a popup or modal window on top of a web page’s main content. It allows you to feature multimedia content in a more interactive and engaging way, providing a larger and more prominent view of the content without requiring users to navigate to a separate page. 

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.

Visit Webflow University to learn more about creating, customizing, and styling lightboxes. We also offer many responsive lightbox templates that are customizable and compatible with Webflow’s content management system.

Relevant courses

Webflow 101

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

Getting started with Webflow

Get familiar with Webflow’s website experience platform.

Welcome to Webflow

Discover what Webflow offers, how it works behind-the-scenes, and tips and tricks for starting your learning journey.

Full site build

Learn how to design and develop a CMS-driven website built around the needs of your client and their audience — and execute a successful launch.

Freelance web design boot camp

The Freelancer’s Journey is a free, comprehensive course to help you build a successful, fulfilling freelance career in web design.

Interactions & animations course

Learn how to animate multiple elements managed on a single timeline — bring your designs to life with rich, sequenced interactions and animations.

Other glossary terms

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

Second-level domain (SLD)

→
A second-level domain (SLD) is the part of a domain name that precedes a top-level domain (TLD).

Background

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

Web Accessibility Initiative (WAI)

→
The Web Accessibility Initiative (WAI) is a World Wide Web Consortium (W3C) project to enhance accessibility for users with disabilities.

Behavioral targeting

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

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.

Collection item

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

Paginate items

→
This checkbox allows you to enable or disable pagination on the selected Collection list.

Flex-justify

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

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.

Python

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

Domain

→
A domain, or domain name, is the unique address that directs to a website on the internet.

Syntax

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

Image

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

Custom font

→
A custom font is any non-system-default typeface you manually upload to your website.

Style Manager

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

Closing tag

→
A closing tag is an instructional piece of code that ends a section of page content in HTML.

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.

Profile settings

→
The area where you can manage your profile, email settings, and security settings.

Maximum height (max height)

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

Gutters

→
Gutters refer to the whitespace between content columns on a webpage.

Domain name forwarding

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

Tag

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

Fold

→
The fold distinguishes the visible portion of the webpage immediately visible to users without scrolling from the remaining content viewable by scrolling down.

Alt text

→
Alt text, short for alternative text, refers to text that describes online images.

Section

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

.htaccess

→
.htaccess is a powerful configuration file that allows you to configure and control how your website functions.

Total Site Pages

→
The amount of pages your site currently has.

Buffer

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

Constant

→
In coding, a constant is a fixed value that can’t change, no matter where it appears or what the program uses it for.

Margin

→
Margins are an essential spacing element of web design, dictating the amount of whitespace between a box and its surroundings.

Urgency

→
Urgency is a marketing term and psychological trigger that incites potential customers and website visitors to act swiftly.

Comment

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

Text block

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

Minimum width (min width)

→
The min-width CSS property defines an element's minimum width. This can be defined in absolute terms (pixels) or relative terms (ems, rems, percentages, viewport-height, or viewport-width).

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.

Top padding

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

Webflow Support

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

Middleware

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

Deprecated

→
Deprecated HTML tags are old tags replaced by updated alternatives in modern web design and development.

Decryption

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

Last updated

→
The last time someone made a change to your site.

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 error

→
Syntax error refers to a mistake in code that violates the programming language’s rules and prevents the code from executing correctly.

Shared Workspace template

→
Shared Workspace templates are templates made from your own sites. They can help you create sites with similar layouts and increase your efficiency when designing. Your Workspace members will also have access to your shared Workspace template(s).

Span text

→
The span tag is used to style inline-text.

Abstraction

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

Username

→
The ID used to log into your Webflow account.

Color wheel

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

Safe

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

Pseudocode

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

Element settings panel

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

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

Content management system (CMS)

→
A content management system (CMS) is a tool for creating and managing a website and its content.

Headless CMS

→
A headless content management system (CMS) separates the front-end presentation layer from the back-end management layer, allowing for more flexible content delivery.

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.

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.

Total Form Submissions

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

Display: block

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

Parent

→
The element directly above in the hierarchy tree.

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.

Accessibility tree

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

Receipt emails

→
Email confirmations you receive upon making Webflow payments.

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

Array

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

Graphical User Interface (GUI)

→
A Graphical User Interface (GUI) is a visual medium that enables visual interaction with software applications or electronic devices through elements like icons, buttons, and menus.

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.

Cryptanalysis

→
Cryptanalysis examines cryptographic systems to find weaknesses that could allow attackers to uncover plaintext or break encryption.

Plugin

→
A plugin, also called an add-on or extension, is a software component that enhances the host or browser or application by adding new features or capabilities to it.

Optimizely

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

Design mode

→
The mode that enables a designer to build in Webflow.

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.

Bottom bar

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

Backlink

→
A backlink, also referred to as an inbound link, is a hyperlink from one website to another website.

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.

Checkout process

→
The checkout process in ecommerce is the process that online customers go through to complete a purchase.

Columns

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

URI

→
A Uniform Resource Identifier (URI) is a string of characters identifying an online resource.

XML sitemap (sitemap.xml)

→
An XML (Extensible Markup Language) sitemap is a text file that lists a website's pages to help search engines crawl and index them.

Minified code

→
Minified code refers to the process of removing unnecessary characters and whitespace from the source code file without affecting its functionality.

Input field

→
An HTML input field, represented by the syntax <input>, is a web page element where users input data, like text and numbers.

Below the fold

→
Below the fold refers to the lower portion of a webpage that isn’t immediately visible to visitors upon loading until they scroll down.

Unbranded form submission notification

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

Facebook button

→
A Facebook button is a clickable element on a website that allows users to connect to or share content on the social media platform.

Dither

→
Dithering is a design technique that simulates additional colors on a display to smooth transitions in images with limited color palettes.

URL

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

Minimum height

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

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.

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.

Free plan

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

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.

Save

→
The Designer automatically saves your progress every 10 seconds.

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

Adobe Fonts API token

→
An Adobe Fonts API token protects and supports your data from Adobe Fonts with other programs you may be using to personalize your website’s fonts.

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.

Element edges

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

Media section

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

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.

Target

→
The currently selected element.

Paragraph

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

Idempotent

→
Idempotency is a computing principle where multiple applications of a function or operation produce the same result as a single execution.
Hmm…we couldn’t find any results. Try a different search term or reset the filter.
Reset the filter
Load more