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
Wrapper

Wrapper

A wrapper is an element used to group and organize other elements inside a well-defined container, usually to control layout or apply shared styling. Developers typically structure wrappers in HTML and style them in CSS, though the exact approach varies by project.

Web developers typically create wrappers in HTML (Hypertext Markup Language) and style them in CSS (Cascading Style Sheets). However, building wrapper classes in object-oriented programming languages like JavaScript is also possible.

Wrappers also enable interoperability between different software systems. Enclosing functions and codes of other computer languages allows a primary program to send commands to and receive outputs from the wrapped program, fostering seamless communication.

Wrappers are also valuable for web development. They give structure and consistency to a website by grouping similar elements together, facilitating collective styling and responsive web design. Without wrappers, developers would have to repeatedly modify code to prevent errors and inconsistencies.

See how wrappers fit into a real layout in Build & structure your site.

Relevant courses

Intro to Webflow integrations

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

Forms

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

Custom code in Webflow

Add custom code to extend your site beyond built-in options.

Other glossary terms

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

RGB (Red-Green-Blue)

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

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.

Section

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

AI credits

→
AI credits are the metered unit used to track usage of AI-powered features, with usage typically visible by user, project, or date range.

Optimizely

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

Domain name forwarding

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

Combo class

→
A combo class combines multiple classes, allowing you to apply various visual styles to HTML elements.

Cryptanalysis

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

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

Zapier

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

Widget

→
A widget is an interactive element embedded in a user interface that facilitates specific user actions or displays important information at a glance.

Form block

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

Media section

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

Domain-Specific Language (DSL)

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

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.

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.

Flex-align

→
A flexbox property that lets you customize the alignment behavior of flex children, based on the cross-axis of the flex container. The cross axis is the opposite of the flex-direction property, so if you set the direction to vertical, the cross axis is horizontal. Options include start, center, end, baseline, and stretch.

Custom domain hosting

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

Syntax

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

Field label

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

Strong text

→
The <strong> element defines important text with added semantic importance.

Domain

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

Base tag

→
The base tag specifies the base URL for all relative links within HTML code for a specific page or document.

Selector

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

Canvas

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

JavaScript

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

Height

→
Defines how tall an element can be. This can be defined in absolute terms (pixels) or relative terms (ems, rems, percentages, viewport-height, or viewport-width).

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.

Argument

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

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.

Plain text field

→
A plain text field is an input field for short-form text without formatting or styling.

Checkout process

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

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.

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.

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.

Right margin

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

Empty elements

→
Empty or void elements are HTML elements that don’t require a closing tag because they contain no content.

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.

Collection list

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

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.

Google site verification meta tag

→
Adding a Google site verification meta tag to your website's HTML code allows Google to verify that you own the site.

Buffer

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

SSL CDN

→
SSL CDN, or Secure Sockets Layer Content Delivery Network, is an option that allows you to serve your images over your own CDN service while using SSL.

CMS section

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

Field-sizing

→
Field-sizing is a CSS property that lets form elements like text areas and inputs grow or shrink automatically to fit their content instead of staying locked to a fixed size.

Save as Backup

→
The ability to manually save a version of your site that you can restore at a later date using the keyboard shortcut Command + Shift + S (on Mac) or Control + Shift + S (on Windows).‍

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.

Width: auto

→
The way browsers calculate an element's width automatically where Block level elements fill the available space of its parent and Inline elements shrink to the size of its children/content.

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.

Profile settings

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

Gutters

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

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.

Single Instruction Single Data (SISD)

→
Single Instruction and Single Data Stream (SISD) is a computer architecture where a central processing unit (CPU) executes one instruction at a time on a single data piece.

Abstraction

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

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.

Lightbox

→
A lightbox displays content in a popup or modal window on top of a web page’s main content.

Padding

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

Select field

→
A form element that allows you to make a selection in a dropdown list.

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.

Public site

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

Cipher

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

CSS (Cascading Style Sheets)

→
Cascading Style Sheets (CSS) is a web development language that controls the appearance of elements on a webpage.

Client-side

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

Parent folder

→
A parent folder is a directory containing one or more folders and files.

Utility pages

→
Utility pages are default, customizable templates for your site’s 404 page, Password page, and Search results page.

Robots.txt

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

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.

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.

Inheritance dropdown

→
A dropdown menu that displays all the selectors that affect a given 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.

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.

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

API

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

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.

Interpolation

→
Interpolation is a mathematical process that estimates and creates new values based on known values and their relationship.

Height: auto

→
The "height: auto" CSS property automatically adjusts an element’s height based on its content.

Cascading rules

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

Layout section

→
A tab in the Add panel that houses prebuilt layouts for your Webflow site.

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.

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.

Left padding

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

Form button

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

CSS Filters

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

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.

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.

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.

Bottom padding

→
Bottom padding is the space between the bottom of an element and its border.

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.

Collection list layout

→
Lets you control how Collection items display inside a Collection list. The default layout option has each item covering the full width of the parent element. You can change this to display Collection items in 2, 3, 4, or 6 columns.

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.

Jank

→
Jank describes subpar functionality in a web interface that hinders or disrupts user activity.

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.

Authorized applications

→
Third-party applications that you've given access to your personal and/or website data.

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.

Font weight

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

Style panel

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

Prefetch

→
Prefetch is a technique that proactively loads and caches resources to improve website performance and user experience.

Media query

→
A media query is a CSS technique that applies different styles to a website or an app based on the characteristics of the device displaying it, such as screen size, resolution, and browser viewport.

Algorithm

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

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