ClonewebX Launch Special: Unlock 30% Off! Hurry, Limited to the First 500 Users!

Ultimate tool to clone a website into page builders

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

Essential setup
Get a ClonewebX account
Clone your target page
Configure parameters
Transform to Webflow
Convert to Elementor
Customize results
Bricks and HTTP/localhost
Mandatory applications

Install ClonewebX Extension

1. Launch Google Chrome: Ensure you are using the Google Chrome browser for optimal performance.

how-to-clone-a-website-1

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.

how-to-clone-a-website-2
Get your own account

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.

how-to-clone-a-website-3
ClonewebX projects dashboard

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.

how-to-clone-a-website-19
Detail options

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.

how-to-clone-a-website-8
  1. Export Type: Choose whether to export all elements on the page by default, or select individual elements by clicking directly on the site.
  2. 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.
  3. 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).
  4. Tablet Max Width and Mobile Max Width: Depending on your chosen output builder, adjust these parameters for responsive design or customize them as needed.
  5. 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”.
Choose the "Copy it to your site yourself" option and Click "Export" => Press "Copy CSS @font-face" to confirm the action
how-to-clone-a-website-18
DEMO - For instance: I desired to copy a part of a test page as illustrated below
how-to-clone-a-website-9

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”

how-to-clone-a-website-10

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.

Export or paste duplication

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

how-to-clone-a-website-12

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.

Export or paste duplication

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”

how-to-clone-a-website-20

2. Export Your Templates or paste duplications.
• Begin exporting templates or designs to the output platform.

how-to-clone-a-website-14

In Elementor, right-click and select “Paste from other site”. Then confirm the paste action by pressing either “Cmd + V” or “Ctrl + V”.

how-to-clone-a-website-11

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.

Add features

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.

how-to-clone-a-website-16

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.

For another example:
how-to-clone-a-website-13
The content in original test webpage
how-to-clone-a-website-14
The result in Elementor Editor after cloning.
Note for Bricks

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.

local-host-with-Bricks

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

To get more information of ClonewebX tutorials

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

For effortless and efficient creation of animation effects in a drag & drop editor, you can consult our tool, Litemove.