Summarize this article with:
Building the same page layout twice wastes time. Learning how to duplicate a page in Webflow lets you clone existing designs in seconds.
The page duplication feature copies every element, style, and setting from your original. No rebuilding required.
You’ll use this for A/B testing, template creation, and maintaining user experience consistency across your site.
This guide walks through the exact steps inside the Webflow Designer. You’ll learn where to find the duplicate function, how to configure your new page settings, and what to do when things go wrong.
Takes under two minutes. Zero code needed.
How to Duplicate a Page in Webflow
Duplicating a page in Webflow creates an exact copy of your existing page layout, design elements, and page settings within the Webflow Designer.
You need this when building landing page variations, running A/B tests, or creating multiple pages with consistent design.
This guide covers 4 steps requiring under 2 minutes and basic Webflow navigation knowledge.
Prerequisites
Before you start, make sure you have:
- Access to the Webflow Designer (not just the Editor)
- An existing static page you want to duplicate
- Basic familiarity with the left sidebar and Pages panel
Time required: 30 seconds to 2 minutes.
How fast is Webflow growing?
Dive into the latest Webflow statistics: adoption rates, revenue growth, designer trends, and how it's changing the no-code web design space.
See the Insights →CMS template pages cannot be duplicated directly. You’ll need to copy individual sections instead.
Step 1: How Do You Access the Pages Panel in Webflow Designer?
Open your project in the Webflow Designer and locate the Pages panel in the left sidebar. Click the Pages icon or press P on your keyboard.
The panel displays all your static pages and CMS collection templates in a vertical list.
Action
- Left sidebar > Pages icon: Click the document stack icon
- Keyboard shortcut: Press P
- Expected result: Pages panel opens showing Static Pages section
Purpose
The Pages panel is your control center for page management, organization, and duplication in Webflow.
Step 2: Where Do You Find the Page Settings for Your Target Page?
Hover over the page you want to duplicate in the Static Pages section. A gear icon appears to the right of the page name.
Click this icon to open the Page Settings panel.
Action
- Pages panel > Static Pages: Find your target page
- Hover over page name: Settings icons appear on the right
- Click gear icon: Page Settings panel opens
Purpose
The Page Settings panel contains the duplicate function along with CSS class management, URL slug configuration, and Open Graph settings.
Step 3: How Do You Create the Duplicate Page?
Inside the Page Settings panel, look for the Duplicate This Page button near the top-right area. Click it.
Webflow instantly creates a copy with “(Copy)” added to the page name and URL slug.
Action
- Page Settings panel > top section: Locate duplicate button
- Click “Duplicate This Page”: New page generates immediately
- Expected result: Duplicate appears in Pages panel as “Page Name (Copy)”
Purpose
The duplicate function copies all design elements, responsive design settings, and page configurations in one click.
Your original page stays untouched.
Step 4: What Changes Should You Make to the Duplicated Page Settings?
Click on your new duplicate page in the Pages panel. Open its settings with the gear icon.
Change the page name to something descriptive like “Pricing V2” or “Homepage Test.”
Update the URL slug to remove “-copy” and create a clean, SEO-friendly path.
Action
- Page Name field: Replace “Page Name (Copy)” with unique name
- Slug field: Change from “page-name-copy” to clean URL
- Open Graph settings: Update meta title and description for the new page
Purpose
Unique page names prevent confusion in your site structure. Clean slugs improve navigation and search visibility.
Verification
Confirm your page duplication worked correctly before moving forward.
Check These Items
- Pages panel: New page appears in Static Pages list
- Preview mode: All design elements display correctly
- Browser test: New URL slug loads the duplicated page
- Responsive breakpoints: Layout holds across viewport sizes
Click the eye icon or press Preview to test your duplicate in the Webflow canvas.
Troubleshooting
Issue: CSS Classes Affecting Both Pages
Problem: Editing styles on the duplicate changes the original page too.
Solution: Duplicate the CSS class before editing. Right-click the class name in the Style panel, select “Duplicate Class,” then rename it.
Issue: Duplicated Page Not in Navigation
Problem: The new page doesn’t show up in your navbar or menu.
Solution: Manually add a link to your navigation component. Duplicated pages are never auto-added to menus.
Issue: Cannot Duplicate CMS Template Pages
Problem: No duplicate option appears for Collection pages.
Solution: Select all elements on the CMS template (Cmd+A or Ctrl+A), copy them (Cmd+C or Ctrl+C), create a new static page, paste the content.
Issue: Interactions Not Working on Duplicate
Problem: Animations or micro-interactions break on the copied page.
Solution: Check if interactions rely on specific element IDs. Rebuild triggers that reference unique identifiers.
Related Processes
Master these connected Webflow skills:
- How to hide a page in Webflow for draft versions
- How to set up 301 redirects in Webflow when replacing pages
- How to delete a site in Webflow for cleanup
- How to create a blog in Webflow using CMS collections
- How to use Webflow templates for faster builds
FAQ on How To Duplicate A Page In Webflow
Where Is the Duplicate Button in Webflow?
Open the Pages panel from the left sidebar. Hover over any static page and click the gear icon. The “Duplicate This Page” button sits near the top-right of the Page Settings panel.
Can You Duplicate CMS Collection Pages?
No. Webflow doesn’t allow direct duplication of CMS template pages. Select all elements with Cmd+A (Mac) or Ctrl+A (Windows), copy them, then paste into a new static page as a workaround.
What Gets Copied When You Duplicate a Page?
Everything. Layout structure, design elements, HTML content, CSS classes, interactions, and page settings all transfer to the duplicate. Your original page remains completely unchanged.
Does Duplicating a Page Copy the URL Slug?
Yes, with “-copy” appended. Webflow adds this suffix automatically to prevent URL conflicts. Change the URL slug in Page Settings immediately after duplicating to keep your site structure clean.
Will Editing the Duplicate Affect the Original Page?
Only if you modify shared CSS classes. Class styles apply globally across pages. Duplicate the class itself before editing, or create a new class name to keep changes isolated.
How Do You Duplicate Multiple Pages at Once?
You can’t. Webflow requires duplicating pages individually through the Pages panel. For bulk operations, consider duplicating the entire site from Site Settings, then deleting unwanted pages afterward.
Can You Duplicate Pages Between Different Webflow Projects?
Not directly. Copy elements from one project and paste into another using Webflow’s clipboard. Or use the Figma to Webflow workflow if your designs originate there.
Do Interactions Transfer to Duplicated Pages?
Yes, but verify them. Page-level interactions copy automatically. Element-specific triggers tied to unique IDs may need rebuilding. Preview the duplicate page to confirm all interactive elements work correctly.
Is There a Keyboard Shortcut to Duplicate Pages?
No dedicated shortcut exists. Press P to open the Pages panel quickly, then use your mouse to access Page Settings and click the duplicate button. The whole process takes under 30 seconds.
Does the Duplicated Page Appear in Navigation Automatically?
Never. Webflow doesn’t auto-add duplicates to menus or sticky navigation bars. Manually update your nav component or symbol to include links pointing to the new page.
Conclusion
You now know how to duplicate a page in Webflow using the Pages panel and Page Settings. Four steps, under two minutes.
The page copy function saves hours of rebuilding layouts from scratch. Use it for landing page variations, design iterations, and maintaining site organization.
Remember to rename your duplicated page immediately. Update the URL slug to something clean and descriptive.
Watch out for shared CSS classes affecting both pages. Duplicate the class or create new names before editing styles.
This workflow efficiency compounds over time. The more pages you build, the more value you get from cloning existing layouts.
Master page management in the Webflow Designer, and your usability testing cycles get faster. Your design consistency improves. Your entire build process becomes smoother.
