Brand kit

Set your logo, colours, fonts and handle once, then apply them to any template in one click.

Show the popupExit intent watches the mouse leaving the top of the window. Phones have no mouse, so there it shows after 10 seconds or the delay below, whichever is longer.

Delay (seconds)Used for “After some time”.

Scroll depth (%)Used for “After scrolling”: the share of the page scrolled.

Show again after (days)0 shows it on every visit. Otherwise it stays away for that many days once shown.

PositionOnly the centre position dims the page. The others are small cards the visitor can keep browsing around, and close with ×.

Tip: wrap words in *asterisks* to colour them with the brand colour.

Text position, next to the image or videoRight and left need the centre position. Above and below work for the centre popup and for corner cards, which are always one column, as are small screens. Remove the image, carousel and video for a text-only popup, or clear the text for a media-only one.

WidthAutomatic is about 780 px for two columns, 520 px for one column and 400 px for corner cards.

Custom width (px)Used when the width is Custom. Between 280 and 1100. It always fits the screen.

HeightThe image or video fills extra height, and the popup scrolls if the content is taller.

Custom height (px)Used when the height is Custom. Between 200 and 900. It never grows beyond the screen.

Colours

Brand / buttons

Button text

Background

Cards & panels

Text

Muted text

Fonts

Headings

Body text

Any Google Font, or upload your own (WOFF2, WOFF, TTF or OTF). Uploaded fonts are embedded in your exports and included in backups.

Shape & width

Corner radius

Content width

Sizes

Text sizeHeadings, body text and buttons

Padding & marginsSpace around and inside sections

GapsSpace between cards, columns and items

Scales every section from its own design (60–160%). Click a percentage to reset it.

Animation

Entrance effect

Speed

Powered by GSAP, ScrollTrigger and SplitText: the section animates in once when it scrolls into view. Exports include it, content stays visible without JavaScript, and it switches off for people who prefer reduced motion.

Artwork

SVG shapes behind the content, in your theme colours. They recolour with every preset and can animate with GSAP.

Popup & Promo Modal

Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel

Related Section Templates

1 sectionsView all →

Popups

Popup & Promo Modal

Responsive · Animated

Popup & Promo Modal — Free Website Section Template

Popups · v1.0.0 · Updated 2026-10-25 · Responsive · GSAP animation · HTML, React & Vue

CategoryPopups

Tagspopupmodalexit intentpromosidekicknewsletterlead capturecarouseloverlaylight

Updated October 20, 2026

What's included

Features

Opens after a delay, on exit intent or after scrolling part of the page

Centre modal with a dimmed page, or a promo card in any corner or along the bottom or top edge

Small cards have no overlay, so visitors keep browsing and close them with ×

Image, image carousel or a click-to-play video that loads only when played

Email form that posts to Mailchimp, Kit or any service, with success and error messages

Up to two call-to-action buttons and an optional "no thanks" link

Custom HTML area for embeds, badges or anything else

Shows again only after the number of days you set, or on every visit

Closes with ×, Esc or a click outside, with keyboard focus kept inside the dimmed modal

Takes no space in the layout; export HTML, React or Vue

About this section

Popup & Promo Modal — Free Exit-Intent and Timed Popup Template

Popup & Promo Modal is a free popup for websites that need to make an offer at the right moment. It opens by itself after a delay you choose, when a visitor moves to leave the page (exit intent) or after they scroll part of the way down, and it takes no space in your layout.

Centre modal or quiet promo card

Show it in the middle of the screen with a dimmed page for a sign-up or an offer you really want seen, or as a small card in the bottom right, bottom left, bottom centre, top right or top left with no overlay. Visitors keep browsing around the card and close it with the × button. On phones the card stretches neatly across the screen.

Everything a promotion needs

Add a label, a heading and a short text, then an image, an image carousel with arrows and dots, or a click-to-play video that loads nothing from YouTube or Vimeo until it is played. Add an email form that posts to Mailchimp, Kit or any service, up to two call-to-action buttons, a "no thanks" link, or your own HTML for anything else.

Polite by design

A visitor who closes it is left alone for the number of days you set, or you can show it on every visit. The popup closes with Esc, keeps keyboard focus inside when it dims the page, announces itself to screen readers and respects reduced motion.

Edit, save and export

Click any text or image in the preview to change it, then match the colours, fonts and corner radius to your brand. Export HTML, a ZIP with your images, React or Vue, or add it to a page in the Website Builder. For the form it works with, see the Newsletter Signup CTA.

Why use it

Why Use the Popup & Promo Modal

🎯

Right moment, right place

Pick the trigger that fits the offer, such as a delay for a promotion or exit intent for a last chance.

🙂

Visitor friendly

Corner cards never block the page, a closed popup stays away for days, and everything works from the keyboard.

⚡

Light and private

No third-party popup script, and a video loads nothing from its host until someone presses play.

How it’s different

How It’s Different From Other Free Section Templates

✎

Editable, not just copyable

Change text, links, images, colours and fonts in the browser before you export, instead of editing someone else’s code by hand.

◐

One theme for every section

Colours, fonts, radius and width are shared CSS variables, so every section you combine looks like one website.

⇲

Responsive by container

Container queries make each section adapt to its own width, in a full page, a column or a page builder.

✦

GSAP animation built in

Every section animates in with GSAP and ScrollTrigger, stays visible without JavaScript and respects reduced motion.

</>

HTML, React and Vue

Export a single HTML file, a ZIP with your images, a React component or a Vue component, or fork the code into My Code.

◍

Free, private, saved

No account and no watermark. Designs, uploaded images and fonts stay in your browser, with a backup file you can restore anywhere.

Step by step

How to Use

1
Edit the contentFill in the when & where it appears, layout, heading & text, image, image carousel, video, custom html, email form, buttons (ctas) and closing in the panel. Switch the image, image carousel, video, custom html, email form and buttons (ctas) on or off. Wrap words in *asterisks* to colour them.
2
Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
3
Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
4
Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
5
Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.

Real-world uses

Common Use Cases

✉️

Newsletter and discount sign-ups

Offer a first-order discount or a free guide in return for an email address, shown after a short delay or as the visitor leaves.

🛒

Shop and sale promotions

Announce a sale or a new range with a corner card and a carousel of products, with two buttons to shop or learn more.

🎥

Webinar and event invites

Invite readers to a workshop with a short video and a sign-up button, shown after they have scrolled halfway down an article.

📢

Announcements and notices

Tell visitors about opening hours, a launch or a policy change in a quiet card that they can dismiss and not see again for a week.

In real websites

Website Templates That Use the Popup & Promo Modal Section

The Popup & Promo Modal section is part of 10 complete website templates in the free Website Builder, so you can see it in a full page before you use it on its own: SaaS Landing Page, Restaurant Website, Gym & Fitness Website, Online Course Website, Event & Conference Website, Nonprofit & Charity Website, Boutique Hotel Website, Hair & Beauty Salon Website, Podcast Website, Product Landing Page Store. Open any of them in the builder to edit the whole page, or keep customising this section by itself.

Got questions?

Frequently Asked Questions

A popup that opens when a visitor moves the mouse towards the top of the window, as if to leave. It is a last chance to make an offer. Phones have no mouse, so it opens after a delay there.

Yes. Choose "After some time" and set the delay in seconds. You can also open it after the visitor scrolls a share of the page, for example halfway down an article.

Keep it relevant and easy to close. This one has a clear × button, stays away for the days you set once shown, and takes no space in the layout. Corner cards do not cover the page at all.

Yes. Add a click-to-play video that loads nothing until it is played, an image carousel, or your own HTML for embeds and extra content.

Yes. Paste the form action URL and the field name from your email service. The visitor sees a success message, or an error message if the sending fails.

It saves an editable copy of your Popup & Promo Modal in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.

Yes. It is free for personal and commercial websites, with no sign-up, no watermark and no attribution required. Everything runs in your browser and your edits are saved locally.