Duplicate and insert between websites

During this instructional session, you will grasp:

1. Ways to duplicate and insert between websites
2. Strategies to prevent conflicts in class names and styles
3. Approaches to avoid clashes in interaction names and actions
4. How to address exceptions and special cases

Methods to duplicate and insert between websites

You have the ability to duplicate any element or group of elements from any of your websites and insert them into another site. All underlying elements, designs, resources, configurations, and functionalities are preserved.

To utilize elements and modules in a different website:

1. Access the initial site (site you wish to duplicate from) in the Designer
2. Duplicate an element using Command + C (Mac) or Control + C (Windows)
3. Access the second website in the Designer and select the element you aim to insert into
4. Insert into your element with Command + V (Mac) or Control + V (Windows)

You also have the option to reverse the insertion process by utilizing Command + Z (Mac) or Control + Z (Windows).

Crucial: Duplicating from websites in read-only mode is not feasible. 

Problem-solving

If you encounter the message “couldn’t read native clipboard data” or “clipboard is empty,” verify:

• You are duplicating the element from the live site in the Designer and not from read-only mode.
• You do not have a system preference that overrides the default copy/paste function on your device. Specifically, Command + C and Command + V (Mac) or Control + C and Control + V (Windows) retain their default functionalities and are not altered with custom shortcuts. If custom functions are assigned to these shortcuts, ensure to eliminate them if duplicating and inserting between websites is your intent.

Approaches to prevent clashes in class names and styles

If there are similar classes in the target site as in the source site leading to a conflict, there are several tactics to manage this.

Identical class name, diverse styles

In scenarios where classes in both the source and target websites share the same name but possess distinct styles, Webflow will alter the class names of the inserted elements by appending numbers (e.g., “classname 1”, “classname 2”, etc.).

Identical class name, identical styles

In situations where classes with matching names — disregarding appended numbers (e.g., “class name”, “class name 2”, “class name 3” etc.) — and identical styles exist in both sites, Webflow will merge the inserted classes with the existing class in the target site. This reduces the number of repetitive styles in your destination website.

Assume, for instance, you’re inserting a button with the class “Button” from Site A into Site B. Site B has a class named “Button 3” that mirrors “Button” from Site A. Webflow will recognize the identical classes and apply Site B’s “Button 3” class to the inserted button.

Style clashes

Inserting into another element may impact the styles of the copied element due to inheritance from the parent elements you insert inside of (e.g., the superior element). 

If the copied element was previously within an element that centers it using text alignment (e.g., center-aligned text) but the recipient element has a contrasting style where child elements are aligned to the right, the pasted element will be right-aligned upon insertion.

Approaches to prevent conflicts in interaction names and actions

Webflow strives to merge interactions that are identical, yet complexities may arise. Here’s a detailed examination of how we address conflicts in interactions.

Element activation

The upper segment of the Interactions panel permits the addition of element activations that initiate an animation when interacting with an element – such as hover or click.

Upon connection to duplicated elements, these activations are integrated into the site you paste the content into.

Identical name, disparate actions

If an interaction exists in the destination site with the same name as the one you’re pasting, but with different actions, a numerical suffix will be added to the name of the pasted interaction to indicate duplication (e.g., “interaction name 2”, “interaction name 3”, etc.).

Identical name, identical actions

Similar to the conflict resolution with class names, if an interaction in the destination site shares the same name as the one being pasted, disregarding any appended numbers (e.g., “interaction”, “interaction 2”, “interaction 3” etc.), and identical actions, we will identify them as the same and combine the pasted interaction with the existing one in the destination.

Page trigger

The lower segment of the Interactions panel is where you can include page triggers, initiating an animation when the page state alters – like when the page loads.

A page trigger, unlike an element trigger, is not included when pasting elements into a site.

Special Cases and Boundary Scenarios

In specific scenarios, certain setings or content copied may not transfer to the target site.

Personalized fonts

If a text element with a personalized font is copied and pasted, it will resort to a default font if the original font is not set in the new site.

If you desire to retain the customized font, ensure to add it to the new site prior to pasting the element. Discover more about importing custom fonts.

Content from external content editors

Third-party content editors such as Microsoft Word, Google Docs, etc., may corrupt content when copied into a Rich text field within the Webflow CMS, necessitating manual reformatting.

Google Docs offers a cleaner pasting option into a Rich text field in the CMS, without additional formatting, ensuring proper markdown for various content elements.

Connection settings for links

Pasting elements from another site will reset link settings that direct to specific pages or sections within a site unless those sections are simultaneously pasted.

Form notification configurations

Copied form elements will inherit the form notification settings of the destination site. Refer to form notification settings for further details.

Maps API authentication

For incorporating a map element from one site to another, addition of the Google Maps API key in the destination is mandatory. Other settings will transit from the source to the new site automatically.

Inherited text formatting

Copied text elements will inherit formatting from their parent elements as usual. Therefore, if a copied element lacks specific styles which are set at the parent level in the new site, those styles will be applied to the pasted elements.

Foundational HTML tags

Styles associated with base HTML tags of elements from the source site, like those applied to “all H1 headings” or “all paragraphs,” will be excluded when copies are pasted to the new site.

Connections with CMS data

Pasting a whole Collection list will merely generate an empty Collection list element, as Collection data does not transfer to the new site. 

However, here’s a practical solution for reusing layouts for Collection items you’ve constructed: 

1. Integrate a Div block into the Collection item
2. Organize all elements within the Collection item under the Div block
3. Copy and paste the container Div block to the new site

The pasted elements won’t be linked to any CMS data (for instance, an H1 would transform into a plain “Heading”), but all your classes will be replicated and available for reuse throughout the new site. Utilize this technique for reutilizing layouts on Collection pages as well.

Building blocks

Elements saved as building blocks in the originating site won’t maintain that status in the destination site. To re-establish them as building blocks, choose the element on the Designer board and press Command + Shift + A (on Mac) or Control + Shift + A (on Windows).

Color definitions

When a class with a color designated as a variable in the source site is pasted, the color won’t be recognized as a variable in the destination site.

Pro tip: After embedding a class, ensure to define the color as a variable if you intend to use that class across multiple elements. Learn more about color variables.

Important: Elements copied/pasted referring to an asset URL (images, videos, documents, etc.) from the original site will be inaccessible if the original site is removed.