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

Dynamic element

Dynamic elements are responsive web page components that can change based on user interaction or external factors without requiring a page refresh or reload. Some examples of dynamic elements include pop-up windows, interactive forms, dropdown menus, and sliders.

Static elements remain fixed and do not change based on a website visitor’s interaction. These elements can include text, images, buttons, or navigation bars.

Dynamic element matching allows you to locate and interact with web elements at runtime using dynamic attributes or properties, such as changing text, tags, or CSS classes. 

For example, consider an online store where the number of items in a shopping cart is a dynamic text element that changes based on user interaction. Dynamic element matching allows a script to interact with this changing number, such as calculating the total cart cost in real-time. 

You can create dynamic elements in Webflow by adding animations or interactions. Visit Webflow University to view our free course on building web elements in Webflow.

Relevant courses

Figma to Webflow

Learn the entire design process from idea to final output as we take you through Figma, Cinema 4D and Octane, and Webflow.

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.

Localize your site in Webflow

Learn how to localize a site for different languages and regions. Translate text, customize and manage content, and optimize SEO settings, so your site reaches a wider audience.

CMS & dynamic content

Learn how to use Webflow CMS to build completely custom websites powered by dynamic content, and define your content's structure and style.

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.

Web elements

A comprehensive look at the building blocks and elements Webflow puts at your fingertips — start designing websites visually, with confidence.

Other glossary terms

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

Ligature

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

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.

Percent

→
A measurement unit relative to an element's parent.

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

Borders

→
The CSS border property delineates an HTML element.

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.

Sitemap URL

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

User interface (UI)

→
A user interface (UI) is any visual element humans interact with on a device, webpage, or application.

Contextual advertising

→
Contextual advertising is a form of paid advertising that matches web content with ad intent.

Padding

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

Button

→
A button is an interactive element that facilitates user actions.

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.

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.

Minified code

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

Last updated

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

Left margin

→
Left margin is a CSS property that defines the space between an element's left edge and its surroundings.

Middleware

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

Paragraph

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

JSON

→
JSON, short for JavaScript Object Notation, is a human-readable, lightweight format for recording, storing, and exchanging data.

Cryptanalysis

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

Twitter button

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

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.

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.

Certificate authority

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

Hyperlink

→
Hyperlinks are clickable elements that allow users to navigate between web pages, documents, or other types of digital content.

Syntax error

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

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.

Comment

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

Text area

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

Typography

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

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.

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.

Content network

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

Left padding

→
Left padding is a CSS property that defines the space between an element's left border and its content.

Map

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

Checkbox

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

Web Accessibility Initiative (WAI)

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

CSS Filters

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

Total Form Submissions

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

Subdomain indexing

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

Inheritance

→
Inheritance describes a principle where child elements adopt the style properties of parent elements.

Left To Right (LTR)

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

Child

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

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.

Form button

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

Domain-Specific Language (DSL)

→
A Domain-Specific Language (DSL) is computer script that solves software problems in a specific domain.

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.

Color wheel

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

Locked site

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

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.

Slider

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

Selector

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

JPEG

→
Short for Joint Photographic Experts Group, JPEG is a file format that uses lossy compression to maintain manageable file sizes without compromising image quality.

Password protection

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

Collection item

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

Search Engine Optimization (SEO)

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

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.

Webflow Support

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

Style panel

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

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

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.

States dropdown menu

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

UI state

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

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.

ALPN

→
ALPN stands for Application-Layer Protocol Negotiation. It’s a Transport Layer Security (TLS) extension that aids client and server identification during secure data transfers.

Display: grid

→
The display: grid CSS property defines a website element (such as a button or header) as a grid container.

CMS section

→
A section in the Add panel that contains elements associated with the CMS.

Export

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

Argument

→
An argument is an independent value a function receives to deliver a specific output.

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

Tabs

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

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.

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.

Object-oriented programming (OOP)

→
Object-oriented programming (OOP) is a programming approach that organizes code into self-contained units of data, functions, and behavior.

Cascading rules

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

Free plan

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

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.

Client-side

→
Client-side is the user-facing part of a web app, responsible for processing user input and displaying content.

SVG (Scalable Vector Graphics)

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

Static page

→
A static page is a document with fixed content that makes up an individual web page on your site.

Right-side panel

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

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.

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

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.

Webflow forum

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

Username

→
The ID used to log into your Webflow account.

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.

Compile

→
Compiling is the process of converting code from a high-level programming language into a low-level language that computers can understand.

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.

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.

Baseline

→
The baseline is the fixed invisible line that serves as the base for letters. It’s used as a measurement for line height and x-height.

Traffic

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

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.

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.

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.

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.

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.

Tag

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

Last published

→
The last time your site was published.

Document object model (DOM)

→
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.
Hmm…we couldn’t find any results. Try a different search term or reset the filter.
Reset the filter
Load more