Copy and paste between projects

Copy and paste between projects to reuse elements, layouts, styles, interactions, and other content — build sites faster.

This video features an old UI. Updated version coming soon!
 
This video features an old UI. Updated version coming soon!

Copying and pasting between projects lets you reuse elements, layouts, styles, interactions, and other content, saving you time and helping maintain consistency across sites.

In this lesson:

  1. Copy and paste between projects
  2. Avoid class name and style conflicts
  3. Understand interaction names and action conflicts
  4. Understand exceptions and edge cases

Copy and paste between projects

You can copy any element or group of elements from any of your projects and paste them into another project. All nested elements, styles, assets, settings, and interactions are retained.

To reuse elements and components in another project:

  1. Copy an element from one project with Command + C (on Mac) or Control + C (on Windows)
  2. Go to the second project, and select the element you want to paste into
  3. Paste into your element with Command + V (on Mac) or Control + V (on Windows)

You can also undo the paste action by pressing Command + Z (on Mac) or Control + Z (on Windows).

Important: You can't copy from projects in read-only mode.

Troubleshoot

If you're receiving either of these errors: "couldn't read native clipboard data" or "clipboard is empty", check the following:

  • You're copying the element from the actual project in the Designer and not from read-only mode.
  • You don't have a system preference set up on your computer that overrides the default copy/paste function. That is, Command + C and Command + V (on Mac) or Control + C and Control + V (on Windows) have their default functions and aren't overridden with custom shortcut keys. If these shortcut keys do have custom functions, make sure to delete them if you wish to use copy/paste between projects.

Avoid class name and style conflicts

If there are classes in the destination project that have the same name as classes in the source, and there’s a conflict, there are a couple of ways to handle this.

Same class name, different styles

If the classes from the source and the destination project have the same name but different styles, Webflow will add a number to the pasted elements’ class name (e.g., “classname 1”, “classname 2”, and so on).

Same class name, same styles

If the classes from the source and the destination project have the same name — ignoring any numbers added at the end (for example “class name”, “class name 2”, “class name 3” etc.) — and the exact same styles, Webflow will merge the pasted classes with the existing class in the destination. This cuts down on the number of duplicate styles in your destination project.

For example, let’s say you’re pasting a button with the class “Button” from Project A into Project B. Project B has a class called “Button 3” that’s identical to “Button” from Project A. Webflow will notice that the classes are the same, and simply apply Project B’s “Button 3” class to the pasted button.

Nonetheless, although, accepted widely, however, although, but, inconsistent, reported, anomaly

Style conflicts

Pasting into another element can effect the styles of the copied element. This is because styles are inherited from the elements we paste inside of. If the copied element was inside of an element that centers the copied element using text alignment (e.g. text alignment set to center) and the destination element is using a different style that has things aligned to the right - the copied element will be positioned differently once pasted.

Understand interaction names and action conflicts

We’ll also do our best to combine interactions that are identical. But of course, it can be more complicated than this. Here’s a closer look at how we treat conflicts in interactions.

Element trigger

The top section of the Interactions Panel lets us add element triggers, which trigger an animation when we interact with an element—like hovering over or clicking.

These triggers are added in the project you paste into when connected to elements.

Same name, different actions

If there is an interaction in the destination project with the same name as an interaction you’re pasting — but it has different actions — the pasted interaction will have a number added to the name to indicate it’s a duplicate (i.e., “interaction name 2”, “interaction name 3”, and so on).

Same name, same actions

Similar to how we treat conflicts in class names, if an interaction in the destination project has the same name as an interaction you’re pasting — ignoring any numbers added at the end (for example, “interaction”, “interaction 2”, “interaction 3” etc.) — and the same actions,we’ll recognize these as the same and merge the pasted interaction with the existing interaction in the destination.

Page trigger

The lower section of the Interactions Panel is where we can add page triggers, which trigger an animation when there's a change in the page state—like when the page is loaded.

Unlike an element trigger, a page trigger isn't added into a project we paste into.

Understand exceptions and edge cases

In some cases, some settings or content will not make it to the destination project.

Custom fonts

When you paste a text element that has a custom font family applied to it, the font family will use a fallback font if the custom font isn’t added in the destination project’s settings.

If you need to use the same custom font, make sure to add that custom font to the destination project before pasting your element.

Link settings

When you paste an element from another project, link settings for elements that link to a specific page or a section within a project will be reset — unless that section is pasted in at the same time.

Form notification settings

When you paste a form element from one project to another, the pasted form will adopt the form notification settings of the destination project.

Maps API key

If you want to paste a map element from one project to another, you’ll need to add your Google Maps API key to the destination project. All other settings will be carried over from the source to the new project.

Inherited text styles

Pasted text elements will inherit styles from parents as normal — which means that if a pasted element does not have styles set for a particular attribute, but those styles are set at the parent level in the destination, they will take effect on the pasted elements.

Base HTML tags

When you paste in elements from a source project that have styles applied to their base HTML tags (i.e., when you’ve styled “all H1 headings” or “all paragraphs”) those styles will not copy over to the destination project when pasted.

CMS connected elements

Pasting an entire Collection list will simply paste an empty Collection list element, since Collection data does not get copied over to the new site. But a handy workaround for reusing layouts in Collection lists is to reuse layouts in collection lists and on collection pages.

To reuse a layout you’ve built for a Collection item:

  1. Add a Div to the Collection item
  2. Nest all the elements within the Collection item inside the Div
  3. Copy and paste the container Div to the new project

The pasted elements won't be connected to any CMS data (for example, an H1 will become an H1 that just says “Heading”), but all your classes will be copied over and ready for reuse in any part of your new project. You can use this same approach to reuse layouts on Collection pages.

Symbols

Elements that are saved as Symbols in the source project won’t be Symbols in the destination project. If you want to save them as Symbols again, simply press Command + Shift +A (on Mac) or Control + Shift + A (on Windows).

Color swatches

When you paste a class that has a color saved as a swatch (either regular and global) in the source project, the color will not appear as a swatch in the destination project.

Best practice: After pasting a class, make sure to save the color as a swatch or a global swatch if you intend to use this class with multiple elements.
Important: Copied/pasted elements that reference an asset's URL (images, videos, documents, etc.) from the original project - will no longer be available if the original project is deleted.
Clone this project
Try Webflow — it's free

Production for this lesson

Directed by

-

Produced by

-

Written by

-

Article by

-

Edited by

-

Designs by

-

Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback