How to Add and Sell Banner Ads on a Webflow Site

To add a banner ad to a Webflow site, drag a Code Embed element onto the canvas where the ad belongs, paste a linked-image snippet, and publish. As of October 2026, the Code Embed requires a paid Site plan or a Core, Growth, Agency or Freelancer Workspace plan. Turn the embed into a Component so one edit updates every page, add it to your blog's Collection template to reach every post, and use breakpoints to show a 728×90 leaderboard on desktop and a smaller slot on phones.

Key takeaways

• A banner ad is plain HTML, a link wrapped around an image, so it needs no scripts inside the Code Embed.
• Code Embeds require a paid Site plan or a paid Workspace plan. A blog on the Webflow CMS also needs a Site plan that includes CMS, such as Premium.
• Components (called Symbols until 2022) let one edit to the main component update every copy of your ad slot.
• Anything you add to a Collection template appears on every item page, so one placement covers every blog post.
• Each banner size is its own slot. Showing a 728×90 on desktop and a 320×100 on phones means selling two slots, not one.

What you need before you start

Webflow merged its CMS and Business Site plans into a single Premium plan in May 2026, so older tutorials may still mention a "CMS plan." The Basic plan is for sites without CMS content, so it can't run a CMS blog.

Step 1: Add the banner with a Code Embed

Here's a complete 300×250 banner. The advertiser and URLs are placeholders.

<a href="https://advertiser.example.com/?utm_source=yoursite&utm_medium=banner"
   target="_blank" rel="sponsored noopener">
  <img src="https://yoursite.example.com/ads/acme-300x250.webp"
       width="300" height="250"
       alt="Acme Analytics: see every campaign in one dashboard"
       style="max-width:100%;height:auto" loading="lazy">
</a>

1. In the Designer, add a Div Block where the ad belongs, such as a sidebar column or the space below an article, and give it a class like ad-slot.
2. In the Style panel, set the div's maximum width to the banner's width (300px here) and its left and right margins to auto so it centers.
3. Add a small text element inside the div that reads "Advertisement," so readers can tell the ad from your content.
4. Open the Add panel, drag a Code Embed into the div, paste the snippet, then save and close the code editor.
5. Preview, or publish to your webflow.io staging domain, and check the ad.

Webflow's Code Embed documentation notes that embedded content without explicit sizing can take up the full width of its parent. The width and height attributes and the wrapper's maximum width keep the banner at its real size, while max-width:100% lets it shrink in narrow columns. For what each attribute does, including why paid links need rel="sponsored", see how to add a banner ad with plain HTML.

Step 2: Turn the slot into a Component

Webflow renamed Symbols to Components in November 2022, so tutorials that say "Symbol" describe the same feature. According to Webflow's Components overview, changes to the main component update every instance across your site.

1. Select your ad-slot div.
2. Open the Components panel (Command + Shift + A on a Mac, Control + Shift + A on Windows).
3. Click the "new component" icon, choose Convert selection, name it "Ad slot," and click Create.
4. Drag instances from the Components panel onto other pages.

Now you can restyle the label or remove the ad everywhere by editing the main component once.

If different placements need different slots, such as one on articles and another on your homepage, add a Code prop. Edit the component, select the Code Embed, click the purple dot next to its code in the Settings panel, and create a Code prop. Each instance can then hold its own embed code while sharing the label and styling.

For a site-wide slot, nest an Ad slot instance inside your footer component, or any other shared component that appears on every page.

Step 3: Put the ad on every blog post

Webflow blog posts are CMS Collection items rendered from one Collection template page, so anything you add to the template appears on every post.

1. Open the Pages panel, find CMS Collection pages, and open your blog's template.
2. Drag an Ad slot instance below the post's rich text element, or into a sidebar column if your layout has one.
3. Publish the site.

For an ad in the middle of an article, open the post in the CMS, put your cursor on an empty line in the rich text field, and click the plus icon. Choose Component to insert an Ad slot instance, or HTML embed to paste the snippet directly. The component is easier to maintain: one edit updates every post that contains it, while pasted embeds must be edited one by one.

One catch: when you publish a single Collection item, its component instances use the main component from your site's most recent full-site publish. After you change the Ad slot component, publish the whole site.

Step 4: Fit the ad to each breakpoint

Webflow designs start on the Desktop (base) breakpoint, and styles cascade down to Tablet (991px and below), Mobile landscape (767px and below) and Mobile portrait (479px and below), as described in Webflow's breakpoints overview. A 728×90 leaderboard fits desktops and most tablets, but on a phone it shrinks until the advertiser's text is hard to read.

You have two options:

• One size everywhere. A 300×250 medium rectangle fits every breakpoint. It's the simplest slot to sell and to report on.
• A desktop and mobile pair. Show a 728×90 down through the Tablet breakpoint and a 320×100 or 300×250 on phones.

To build the pair, give each embed its own wrapper and class, such as ad-desktop and ad-mobile. On the Desktop breakpoint, open the Style panel's Layout section and set ad-mobile to display: none. Switch to Mobile landscape, set ad-desktop to none and ad-mobile to block, and Mobile portrait inherits both settings.

This is two slots, not one. Each size has its own embed code, availability and stats, and an advertiser who wants desktop and phone visitors books both and supplies two creatives. Our banner ad sizes guide covers which sizes pair well.

Hidden elements stay in the published HTML, so keep loading="lazy" on both images. As our guide to ads and Core Web Vitals explains, Chrome, Safari and Firefox don't download lazy-loaded images hidden with display: none. Phones never fetch the desktop banner, so it isn't counted as an impression nobody saw.

Sell the slot with Spreadiom

A hand-coded banner works for one sponsor, but selling a slot week after week means swapping images, republishing and chasing payments. Spreadiom handles the selling while your Webflow layout stays the same:

1. Create a slot in the size you want and copy its embed code, one line of plain HTML with no JavaScript and no cookies:

<a href="https://www.spreadiom.com/ABC-12/link" target="_blank" rel="sponsored noopener"><img src="https://www.spreadiom.com/ABC-12/img" width="300" height="250" alt="Advertisement" style="max-width:100%;height:auto" loading="lazy"></a>

2. Paste it into the Code Embed in your Ad slot component, or into an instance's Code prop, and publish once.
3. Until someone books, the slot shows an "Advertise here" image that links to its public booking page. Advertisers book as guests: they pick dates on the availability calendar, upload a banner that's automatically cropped to the slot size and screened for prohibited content, and pay by card through your own Stripe account or with PayPal straight into your own PayPal account. Spreadiom never holds the money.
4. The booked ad goes live on its start date automatically, so you don't republish Webflow for each campaign.

If you want to review ads first, turn on approval. Cards are only authorized at booking and charged when you approve, PayPal advertisers pay after approval (within 48 hours), and requests you don't review are canceled automatically. You see impressions, clicks and CTR per slot, and each advertiser sees them on a private booking page. Only people are counted; crawlers and other bots are filtered out. You can run the whole flow with Stripe test keys before taking real money.

Spreadiom is free to start, with a 5% platform fee on completed bookings that's invoiced monthly and paid by PayPal. It's never deducted from the advertiser's payment, and Stripe or PayPal processing fees are separate. Create a free account to set up your first slot.

FAQ

Do I need a paid Webflow plan to add ad code?

Yes. As of October 2026, the Code Embed element works when your site has an active Site plan or your Workspace is on a Core, Growth, Agency or Freelancer plan. A free Starter site in a free Starter Workspace can't use it, and publishing to your own domain requires a Site plan anyway.

What happened to Symbols in Webflow?

Webflow renamed Symbols to Components in November 2022. A component works the way a Symbol did: edit the main component and every instance updates, while props let individual instances hold their own content, such as a different embed code.

How do I add an ad inside a Webflow blog post?

Open the post in the CMS, put your cursor on an empty line in the rich text field, click the plus icon, and insert a component or an HTML embed. A component is easier to maintain because one edit updates every post that uses it. To show the same ad on every post without editing each one, add it to the Collection template instead.

How do I show a different banner on mobile in Webflow?

Place two embeds, one per size, in separate wrappers. Hide the mobile wrapper on the Desktop breakpoint and the desktop wrapper on Mobile landscape by setting display: none in the Style panel. Keep loading="lazy" on both images so phones don't download the hidden banner, and sell each size as its own slot.

Will a banner ad slow down my Webflow site?

A linked-image embed adds a single image request and no scripts, so its cost is mostly the image's file size. Keep the width and height attributes so the page doesn't shift when the banner loads, ask advertisers for compressed files, and avoid third-party ad scripts where you can.