By following these steps, you’ll be able to efficiently clone any website and seamlessly integrate them into your preferred page builder for further customization and enhancement.
Step by step to clone a website
Install ClonewebX Extension
1. Launch Google Chrome: Ensure you are using the Google Chrome browser for optimal performance.
2. Get the Latest ClonewebX Extension: To start, you need the ClonewebX extension. Click on the “ClonewebX extension” link and add it to your Chrome Browser.
Create Your ClonewebX Account and First Project
1. Sign Up and Log In:
• Visit https://softlite.io/ClonewebX/
• You can test the trial version or obtain an appropriate license with full features.
• Click on “Go to App” located in the top-right corner of the screen.
• Sign up for a ClonewebX account if you don’t have one and log in.
2. Create Your First Project:
• After logging in, create a new project to get started.
Starting from November 15, 2023, it is required to input a standardized domain when creating a new project.
For instance, if you aim to duplicate 15 pages from a target website “https://abc.com”. Simply enter “https://abc.com” into the Domain field in this scenario.
Clone Any Website
1. Select Your Target Website:
• Navigate to the webpage you want to clone.
To clone a website from Envato and Themeforest or similar sources, you need to access the original page URLs rather than relying on the Preview Iframe.
As in the illustration below, we demonstrated a well-known website in the UI/UX community: “awwwards.com”
2. Ensure All Elements Load:
• Scroll down to the end of the target webpage to make sure all elements have loaded.
With complicated pages, they may use “Lazy load” or “Animation” effect to show up/down the elements.
3. Clone the Webpage:
• Click on the ClonewebX extension icon located in the top-right corner of your browser.
• Choose the appropriate project you created earlier and click “Add Page.”
Configure Export Settings
After that, a redirect tab will be created and simulated the target page to ClonewebX website. A control panel promptly materializes, enabling you to adjust parameters through it.
- Export Type: Choose whether to export all elements on the page by default, or select individual elements by clicking directly on the site.
- Selector: Use our selector detector to choose specific elements on the page for cloning. There are “current selector” and “parent selector” when clicking any point on your page. You can use the eye tool, to also see which elements you have selected.
- Page Builder: Select your desired platform, where the project will be transformed into an editable format. Options include Elementor, Bricks, Webflow, Oxygen (upcoming), Breakdance (upcoming), and Gutenberg (upcoming).
- Tablet Max Width and Mobile Max Width: Depending on your chosen output builder, adjust these parameters for responsive design or customize them as needed.
- CSS @font-face: there are two methods to export the CSS font face to your website.
- “Add it to the export data”: Our system will automatically implement CSS @font-face to your selected Selector’s custom CSS. It’s convenient for manipulation, but in case you copy multiple sections, it occurs the duplication.
- “Copy it to your site yourself”: To avoid the duplication of CSS @fontface, you can manually add it to your page by using “code element”/”html widget”.
In Export type: choose “Selector”
Use your mouse to hover over the target page to choose the appropriate elements identified by blue frames. You can also type directly the aimed element on “Selector box”
In the Page Builder field, select your preferred builder from the dropdown list. For the purpose of this demonstration, we are using Webflow and Elementor.
Additionally, you have the option to personalize the Tablet Max and Mobile Max Width values in pixels. If left unchanged, these values will revert to the default settings associated with the selected platform.
Go to Your Webflow Editor
1. Access Your Webflow.
2. Export Your Templates or paste duplications.
• Begin exporting templates or designs to Webflow.
In Webflow, pressing either “Cmd + V” or “Ctrl + V” to paste the cloned area
Please take a note that: In Webflow, the images might not appear as expected on the website’s front-end because of the site’s coding. To resolve this issue, you should manually download the images and substitute them for the Image elements or widgets.
Go to Your Elementor Editor
1. Access Your Elementor :
*Note that: it requires version Elementor Pro>= 3.10 and enable Flexbox Container (Elementor > Settings > Features > Stable Features > Flexbox Container > Active > Click Save Changes)
In case you use Elementor Free, you need to set up an extra Softlite plugin to make up a pro feature “Custom CSS”
2. Export Your Templates or paste duplications.
• Begin exporting templates or designs to the output platform.
In Elementor, right-click and select “Paste from other site”. Then confirm the paste action by pressing either “Cmd + V” or “Ctrl + V”.
Elementor features a unique structure that necessitates our system to download images and icons to your hosting during the page cloning process. Consequently, this could potentially extend the time it takes to complete the cloning process and result in incorrect image and icon displays. In such cases, we recommend manually replacing them with the appropriate widgets.
Customize Your Results
Transformation Process: Your cloned webpage will be transformed into the basic elements or widgets compatible with your selected builder, complete with HTML and CSS.
As you can recognize in our demonstration, all the titles transferred to the heading widget. Paragraph to Text widget, etc.
Personalize Your Cloned Website: Now, you can customize and fine-tune it using the tools and features provided by your chosen page builder.
Test in Local Host
If you wish to replicate a website onto Bricks in your Local Host or your website lacks an SSL certificate (HTTP), you’ll need to activate an experimental feature related to security and privacy, as illustrated below.
Embed this link to your browser: chrome://flags/#unsafely-treat-insecure-origin-as-secure → Access it.
Insecure origins treated as secure: Embed non-SSL site URL → Enable feature.
Relevant documentation
Clone Brick's website to Elementor WordPress
How to clone any website to Bricks
Optimize DOM when converting any Elementor website to Bricks
Combine Litemove to clone any animation Website
Reference sources
- How to copy Elements from one site to another in Elementor?
- Learn more about Selector: CSS Selectors Reference and via YouTube Channel
For effortless and efficient creation of animation effects in a drag & drop editor, you can consult our tool, Litemove.