{"id":4516,"date":"2024-04-14T10:17:51","date_gmt":"2024-04-14T02:17:51","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=4516"},"modified":"2024-04-15T23:28:18","modified_gmt":"2024-04-15T15:28:18","slug":"duplicate-and-insert-between-websites","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/duplicate-and-insert-between-websites\/","title":{"rendered":"Duplicate and insert between websites"},"content":{"rendered":"<div class=\"docs_rich-text w-richtext\">Replicating and inserting between websites enables you to recycle components, layouts, designs, functionalities, and other content, saving you time and ensuring consistency across websites.<\/p>\n<p>During this instructional session, you will grasp:<\/p>\n<ol role=\"list\">\n<li>Ways to duplicate and insert between websites<\/li>\n<li>Strategies to prevent conflicts in class names and styles<\/li>\n<li>Approaches to avoid clashes in interaction names and actions<\/li>\n<li>How to address exceptions and special cases<\/li>\n<\/ol>\n<h2>Methods to duplicate and insert between websites<\/h2>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-video\">\n<div><iframe allowfullscreen frameborder scrolling=\"no\" src=\"https:\/\/www.youtube.com\/embed\/dawfsIn_o7I\"><\/iframe><\/div>\n<\/figure>\n<p>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.<\/p>\n<p>To utilize elements and modules in a different website:<\/p>\n<ol role=\"list\">\n<li>Access the initial site (site you wish to duplicate from) in the Designer<\/li>\n<li>Duplicate an element using <strong>Command <\/strong>+<strong> C<\/strong> (Mac) or <strong>Control <\/strong>+<strong> C<\/strong> (Windows)<\/li>\n<li>Access the second website in the Designer and select the element you aim to insert into<\/li>\n<li>Insert into your element with <strong>Command <\/strong>+<strong> V<\/strong> (Mac) or <strong>Control <\/strong>+<strong> V<\/strong> (Windows)<\/li>\n<\/ol>\n<p>You also have the option to reverse the insertion process by utilizing <strong>Command <\/strong>+<strong> Z<\/strong> (Mac) or <strong>Control <\/strong>+<strong> Z<\/strong> (Windows).<\/p>\n<blockquote><p><strong>Crucial<\/strong>: Duplicating from websites in read-only mode is not feasible.\u00a0<\/p><\/blockquote>\n<h3>Problem-solving<\/h3>\n<p>If you encounter the message \u201ccouldn\u2019t read native clipboard data\u201d or \u201cclipboard is empty,\u201d verify:<\/p>\n<ul role=\"list\">\n<li>You are duplicating the element from the live site in the Designer and not from read-only mode.<\/li>\n<li>You do not have a system preference that overrides the default copy\/paste function on your device. Specifically, <strong>Command <\/strong>+<strong> C<\/strong> and <strong>Command <\/strong>+<strong> V<\/strong> (Mac) or <strong>Control + C<\/strong> and <strong>Control + V<\/strong> (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.<\/li>\n<\/ul>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94a473c027cc2ab0f2e2e_6318a934ee756a202740194a_2-ht3qqwtwkvstweqn5k4lurn19q9de_s5whmpuwree6san2j3yjvvkgkknjjrrhadoefyaqobiwzinicejbqwt4ypadoczi_n7yaz53laaqt4lm13ymwg2ki02xfldktqrbzi5jffuutbga8gm1u5.jpeg\" alt=\"Keyboard settings in Mac system preferences.\" title=\"64b94a473c027cc2ab0f2e2e_6318a934ee756a202740194a_2-ht3qqwtwkvstweqn5k4lurn19q9de_s5whmpuwree6san2j3yjvvkgkknjjrrhadoefyaqobiwzinicejbqwt4ypadoczi_n7yaz53laaqt4lm13ymwg2ki02xfldktqrbzi5jffuutbga8gm1u5\"><\/div>\n<\/figure>\n<h2>Approaches to prevent clashes in class names and styles<\/h2>\n<p>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.<\/p>\n<h3>Identical class name, diverse styles<\/h3>\n<p>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., \u201cclassname 1\u201d, \u201cclassname 2\u201d, etc.).<\/p>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94a473c027cc2ab0f2e2a_6318a93491ba6b5b42486393_ryt4zii8dut9wvdjq3uuy3ex05ofxgxlu_hik9twl3yc1wlivfe7uxatwo0lrfybmvrzt5s0sekhacsh64rgwzdujbineszfj2hws-izglumctlc8nqxm8yock_ghbx2x3kp3gkxqmk4lewsmptfs2.png\" alt=\"An alert in the Designer that reads: \u201cRenamed \u2018Content wrapper\u2019 class to \u2018Content wrapper 2\u2019 in order to avoid conflicts.\u201d\u00a0\" title=\"64b94a473c027cc2ab0f2e2a_6318a93491ba6b5b42486393_ryt4zii8dut9wvdjq3uuy3ex05ofxgxlu_hik9twl3yc1wlivfe7uxatwo0lrfybmvrzt5s0sekhacsh64rgwzdujbineszfj2hws-izglumctlc8nqxm8yock_ghbx2x3kp3gkxqmk4lewsmptfs2\"><\/div>\n<\/figure>\n<h3>Identical class name, identical styles<\/h3>\n<p>In situations where classes with matching names &#8212; disregarding appended numbers (e.g., \u201cclass name\u201d, \u201cclass name 2\u201d, \u201cclass name 3\u201d etc.) &#8212; 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.<\/p>\n<p>Assume, for instance, you&#8217;re inserting a button with the class \u201cButton\u201d from Site A into Site B. Site B has a class named \u201cButton 3\u201d that mirrors \u201cButton\u201d from Site A. Webflow will recognize the identical classes and apply Site B\u2019s \u201cButton 3\u201d class to the inserted button.<\/p>\n<h3>Style clashes<\/h3>\n<p>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).\u00a0<\/p>\n<p>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.<\/p>\n<h2>Approaches to prevent conflicts in interaction names and actions<\/h2>\n<p>Webflow strives to merge interactions that are identical, yet complexities may arise. Here&#8217;s a detailed examination of how we address conflicts in interactions.<\/p>\n<h3>Element activation<\/h3>\n<p>The upper segment of the Interactions panel permits the addition of element activations that initiate an animation when interacting with an element &#8211; such as hover or click.<\/p>\n<p>Upon connection to duplicated elements, these activations are integrated into the site you paste the content into.<\/p>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94a473c027cc2ab0f2e23_6318a934be3b46bb933eb218_biyiy-cmeldvcije7z6qome_ppmfcnc961crxwjla17z4yk9_jbpl44w47ou-xjggss7xswnwuorau_wgo7gkcx1akyceh-vaqrvlcymeamvfscnq__ehhhdo0ttbhjyhu7ulzak8rl-2nfhhicd7u.jpeg\" alt=\"Element triggers in the Interactions panel of the Webflow Designer.\" title=\"64b94a473c027cc2ab0f2e23_6318a934be3b46bb933eb218_biyiy-cmeldvcije7z6qome_ppmfcnc961crxwjla17z4yk9_jbpl44w47ou-xjggss7xswnwuorau_wgo7gkcx1akyceh-vaqrvlcymeamvfscnq__ehhhdo0ttbhjyhu7ulzak8rl-2nfhhicd7u\"><\/div>\n<\/figure>\n<h4>Identical name, disparate actions<\/h4>\n<p>If an interaction exists in the destination site with the same <em>name<\/em> as the one you\u2019re pasting, but with different <em>actions<\/em>, a numerical suffix will be added to the name of the pasted interaction to indicate duplication (e.g., \u201cinteraction name 2\u201d, \u201cinteraction name 3\u201d, etc.).<\/p>\n<h4>Identical name, identical actions<\/h4>\n<p>Similar to the conflict resolution with class names, if an interaction in the destination site shares the same <em>name<\/em> as the one being pasted, disregarding any appended numbers (e.g., \u201cinteraction\u201d, \u201cinteraction 2\u201d, \u201cinteraction 3\u201d etc.), and identical <em>actions<\/em>, we will identify them as the same and combine the pasted interaction with the existing one in the destination.<\/p>\n<h3>Page trigger<\/h3>\n<p>The lower segment of the Interactions panel is where you can include page triggers, initiating an animation when the page state alters &#8211; like when the page loads.<\/p>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><ipg src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94a473c027cc2ab0f2e31_6318a93491492bb4fbe58a87_r5xpe5-vdsd3d4psrg_aq_qq2vsurxm7cegfslqk_xxwmlcxhjq59hajn92t2atvv5hm-o-0kyyzil8wtd26wyw1rp13va70lbsoceygp7fapiilgxhvw4ex7j7kazkwuyohmdvh4bfxsigzs1x_hr.jpeg\" alt=\"Page triggers in the Interactions panel of the Webflow Designer.\" title=\"64b94a473c027cc2ab0f2e31_6318a93491492bb4fbe58a87_r5xpe5-vdsd3d4psrg_aq_qq2vsurxm7cegfslqk_xxwmlcxhjq59hajn92t2atvv5hm-o-0kyyzil8wtd26wyw1rp13va70lbsoceygp7fapiilgxhvw4ex7j7kazkwuyohmdvh4bfxsigzs1x_hr\"><\/div>\n<\/figure>\n<p>A page trigger, unlike an element trigger, is not included when pasting elements into a site.<\/p>\n<h2>Special Cases and Boundary Scenarios<\/h2>\n<p>In specific scenarios, certain setings or content copied may not transfer to the target site.<\/p>\n<h3>Personalized fonts<\/h3>\n<p>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.<\/p>\n<p>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.<\/p>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94a473c027cc2ab0f2e15_63110b3346b2fc1d0146a2c7_1vxtlhurmjxygbeefuydfwdbf1yr5rpzic8nfakp-yeuv-b_4ybtjrboikrzpdnihjv-cj5yw957-cnd-_3bwbok5yhftqhdw5ehmd7j2lj9_zy2bowna0wwa2ptkncmxsa-bbhafjkn6hilckjuob.png\" alt=\"The Custom fonts section within the Fonts tab of Site settings allows you to upload custom fonts to your site.\" title=\"64b94a473c027cc2ab0f2e15_63110b3346b2fc1d0146a2c7_1vxtlhurmjxygbeefuydfwdbf1yr5rpzic8nfakp-yeuv-b_4ybtjrboikrzpdnihjv-cj5yw957-cnd-_3bwbok5yhftqhdw5ehmd7j2lj9_zy2bowna0wwa2ptkncmxsa-bbhafjkn6hilckjuob\"><\/div>\n<\/figure>\n<h3>Content from external content editors<\/h3>\n<p>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.<\/p>\n<p>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.<\/p>\n<h3>Connection settings for links<\/h3>\n<p>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.<\/p>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94a473c027cc2ab0f2e26_6318a9348f52ed3b6749c6b6_hvyb-lpzl9dg0b6eqrqesgr12jkjppvqhenomekbqtmwqpu6n1cjgrohbdfqurcpwesucr-4vtyxytu1yuhfqdr5hn4wdo1trswvzvtrbdrfv7botdsm_amct8tmlmm7-unm6choszsfh49dtcapz4.jpeg\" title=\"64b94a473c027cc2ab0f2e26_6318a9348f52ed3b6749c6b6_hvyb-lpzl9dg0b6eqrqesgr12jkjppvqhenomekbqtmwqpu6n1cjgrohbdfqurcpwesucr-4vtyxytu1yuhfqdr5hn4wdo1trswvzvtrbdrfv7botdsm_amct8tmlmm7-unm6choszsfh49dtcapz4\"><\/div>\n<\/figure>\n<h3>Form notification configurations<\/h3>\n<p>Copied form elements will inherit the form notification settings of the destination site. Refer to form notification settings for further details.<\/p>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94a473c027cc2ab0f2e1e_6318a9345579fc71df381f88_quhqcoqz0kwejhyhj-fxvfnxws_l39m5b_sgp8newcqc5rvbzpsgi1xlkn-l3kos0repwtuk28antm_sku_rlzontwpma0cijhvfhzuhycoz75cg0oevnqt074hy5fwmd_jmem6uxdh4imbtg327ab.png\" alt=\"The Forms tab of Site settings allows you to set form notification settings like recipient email address, subject line, and reply to address.\" title=\"64b94a473c027cc2ab0f2e1e_6318a9345579fc71df381f88_quhqcoqz0kwejhyhj-fxvfnxws_l39m5b_sgp8newcqc5rvbzpsgi1xlkn-l3kos0repwtuk28antm_sku_rlzontwpma0cijhvfhzuhycoz75cg0oevnqt074hy5fwmd_jmem6uxdh4imbtg327ab\"><\/div>\n<\/figure>\n<h3>Maps API authentication<\/h3>\n<p>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.<\/p>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94a473c027cc2ab0f2e19_6318a934bcbd4a46506a6981_gup3wre2gue2qxaqqarrsnoce47tdqzxuz9hqdu5kalh0pgwbup2fkcskdtzbnk66ttfrjwxoc2qmtynxzfldsggknzvgjwuchmtg06ezqgcjojewmrf6qjtx4iwrivfd0i5ydqhd-keecm_nzitsi.png\" alt=\"The Google Maps section of the Integrations tab in Site settings allows you to enter your Google Maps API key.\" title=\"64b94a473c027cc2ab0f2e19_6318a934bcbd4a46506a6981_gup3wre2gue2qxaqqarrsnoce47tdqzxuz9hqdu5kalh0pgwbup2fkcskdtzbnk66ttfrjwxoc2qmtynxzfldsggknzvgjwuchmtg06ezqgcjojewmrf6qjtx4iwrivfd0i5ydqhd-keecm_nzitsi\"><\/div>\n<\/figure>\n<h3>Inherited text formatting<\/h3>\n<p>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.<\/p>\n<h3>Foundational HTML tags<\/h3>\n<p>Styles associated with base HTML tags of elements from the source site, like those applied to &#8220;all H1 headings&#8221; or &#8220;all paragraphs,&#8221; will be excluded when copies are pasted to the new site.<\/p>\n<h3>Connections with CMS data<\/h3>\n<p>Pasting a whole Collection list will merely generate an empty Collection list element, as Collection data does not transfer to the new site.\u00a0<\/p>\n<p>However, here&#8217;s a practical solution for reusing layouts for Collection items you&#8217;ve constructed:\u00a0<\/p>\n<ol role=\"list\">\n<li>Integrate a <strong>Div block<\/strong> into the <strong>Collection item<\/strong><\/li>\n<li>Organize all elements within the <strong>Collection item<\/strong> under the <strong>Div block<\/strong><\/li>\n<li>Copy and paste the container <strong>Div block<\/strong> to the new site<\/li>\n<\/ol>\n<p>The pasted elements won&#8217;t be linked to any CMS data (for instance, an H1 would transform into a plain &#8220;Heading&#8221;), 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.<\/p>\n<h3>Building blocks<\/h3>\n<p>Elements saved as building blocks in the originating site won&#8217;t maintain that status in the destination site. To re-establish them as building blocks, choose the element on the Designer board and press <strong>Command <\/strong>+<strong> Shift <\/strong>+ <strong>A<\/strong> (on Mac) or <strong>Control <\/strong>+<strong> Shift <\/strong>+<strong> A<\/strong> (on Windows).<\/p>\n<h3>Color definitions<\/h3>\n<p>When a class with a color designated as a variable in the source site is pasted, the color won&#8217;t be recognized as a variable in the destination site.<\/p>\n<h6><strong>Pro tip: <\/strong>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.<\/h6>\n<blockquote><p><strong>Important:<\/strong> 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.<\/p><\/blockquote>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Copy and paste between sites to reuse elements, layouts, styles, interactions, and other content \u2014 and build sites faster.","protected":false},"author":2,"featured_media":5238,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[290],"tags":[],"class_list":{"0":"post-4516","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-elements","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/4516","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=4516"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/4516\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5319"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=4516"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=4516"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=4516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}