Copy and paste between sites

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

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

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

In this lesson, you’ll learn:

  1. How to copy and paste between sites
  2. How to avoid class name and style conflicts
  3. How to avoid interaction names and action conflicts
  4. Exceptions and edge cases

How to copy and paste between sites

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

To reuse elements and components in another site:

  1. Open the first site (the site you want to copy from) in the Designer
  2. Copy an element with Command + C (on Mac) or Control + C (on Windows)
  3. Open the second site in the Designer and select the element you want to paste into
  4. 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 sites in read-only mode

Troubleshooting

If you receive the error “couldn’t read native clipboard data” or “clipboard is empty,” make sure:

  • You’re copying the element from the actual site 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 copy and paste between sites.
Keyboard settings in Mac system preferences.

How to avoid class name and style conflicts

If there are classes in the destination site that have the same name as classes in the source site 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 sites 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).

An alert in the Designer that reads: “Renamed ‘Content wrapper’ class to ‘Content wrapper 2’ in order to avoid conflicts.” 

Same class name, same styles

If the classes from the source and the destination sites 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 site.

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

Style conflicts

Pasting into another element can affect the styles of the copied element. This is because styles are inherited from the elements you paste inside of (i.e., the parent element). 

If the copied element was originally inside 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 child elements aligned to the right - the copied element will be positioned to the right once pasted.

How to avoid interaction names and action conflicts

Webflow also does its 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 you interact with an element — like hovering over or clicking.

When connected to copied elements, these triggers are added to the site you paste into.

Element triggers in the Interactions panel of the Webflow Designer.

Same name, different actions

If there is an interaction in the destination site 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 site 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 you  can add page triggers. These trigger an animation when there’s a change in the page state — like when the page is loaded.

Page triggers in the Interactions panel of the Webflow Designer.

Unlike an element trigger, a page trigger isn’t added to a site you paste into.

Exceptions and edge cases

In certain cases, some copied settings or content will not make it to the destination site.

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 site’s settings.

If you need to use the same custom font, make sure to add that custom font to the destination site before pasting your element. Learn more about uploading custom fonts.

The Custom fonts section within the Fonts tab of Site settings allows you to upload custom fonts to your site.

Content from external content editors

External content editors can be applications like Microsoft Word, Google Docs, etc. If you copy and paste content from Microsoft Word into a Rich text field in the Webflow CMS, the content becomes corrupted and you will need to manually reformat it.

The best alternative is to use Google Docs when pasting content into a Rich text field in the CMS. Google Docs doesn’t add any extra formatting, and will use proper markdown for headings, images, lists, paragraphs, etc.

Link settings

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

Form notification settings

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

The Forms tab of Site settings allows you to set form notification settings like recipient email address, subject line, and reply to address.

Maps API key

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

The Google Maps section of the Integrations tab in Site settings allows you to enter your Google Maps API key.

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

However, there is a handy workaround for reusing layouts you’ve built for Collection items: 

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

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 site. You can use this same approach to reuse layouts on Collection pages.

Components

Elements that are saved as components in the source site won’t be components in the destination site. If you want to save them as components again, select the element on the Designer canvas and press Command + Shift + A (on Mac) or Control + Shift + A (on Windows).

Color variables

When you paste a class that has a color saved as a variable in the source site, the color will not appear as a variable in the destination site.

Pro tip: After pasting a class, make sure to add the color as a variable if you intend to use this class with multiple elements. Learn more about color variables.
Important: Copied/pasted elements that reference an asset’s URL (images, videos, documents, etc.) from the original site will no longer be available if the original site is deleted.

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top