In this tutorial, I’ll show you how to recreate websites with Elementor based AI Builder by 10Web. Besides AI, the 10Web builder also makes it possible to edit and make changes to any recreated site with AI in just a matter of minutes! If you have Elementor page builder knowledge, all you need to do is simply edit with 10web builder and you’ll have access to the web editor based on Elementor.  

Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.

Video: 10Web Elementor based AI Builder

Signing up for 10Web AI Builder

In your newly installed WordPress dashboard without any plugins open up a new tab and go to 10web, sign up (open an account) on this website.

After creating your account, you’ll see a section where to view your websites and another to add a website. Click on Add Website option (02:22).

A new window pops up with the option to recreate with ai builder on your existing website, or you can also create your own web projects using the 10Web infrastructure. 

In this case, choose the first option; to recreate with ai builder on your existing website, then click Next. Here, you need to download the 10Web Manager Plugin, which will connect your WordPress website to the 10Web infrastructure, so click the download button. (03:00) 

After downloading, go to your Plugins area on your dashboard and click Add New. In the Add Plugins window click the Upload Plugin button, choose the file you just downloaded and then click Install Now. (03:13)

When the plugin installs, click on the Activate Plugin button, then you’ll be redirected to the 10Web platform.

In the new interface, you get the option to enable recreating with ai, enable it. (03:35)

After enabling recreation, you need to paste the URL of the page you want to recreate.

Here, I have a website that was created using Elementor and another that was created with Squarespace.

Also Read: How to Add Custom Fonts in Elementor and Generating Font Pairs

Recreating an Elementor Website using 10Web AI Builder

This website has a header, navigation, a background video, it also has some animated sections, buttons, and a footer. Copy the URL of the website created with Elementor and paste it. (04:28)

After pasting, there’s also an option to add more pages to the website you want to recreate. For example, if you want to recreate the contact form, you can just go and copy the form URL and paste it there.

 After adding the pages you want, click the Recreate & Import button, then wait for the recreation process to complete. When it is done you’ll get an option to preview and edit. (05:02)

When you click the view and edit button, you’ll get your new site which is a replica of the other one, with all the pages, buttons, header, footer, background, and all. But this is your own website and on your hosting platform.

To make any changes to this new recreated website, for example, to change some sections or make additions, click the Edit with 10Web builder button which takes you to the builder (06:23).

After the recreation, when you check back in your plugins area you’ll notice Elementor is now installed in the plugins area, with the 10Web builder and manager (06:58). 

So the 10Web platform is based on the Elementor page builder. Their team is also creating their own Elementor-based widgets that you can use without having to use Elementor Pro.

To Read: Case Study: What is Site Structure and How To Get SiteLinks

In the 10Web Builder, everything looks like in the Elementor builder, and when you check in the media library you’ll see that all the images and background video have also been saved there. You are able to make changes to any of the sections using Elementor and even make changes to your sections’ responsive settings.

Recreating a Squarespace Website using 10Web AI Builder

Go back to your 10Web dashboard and click the option to add a new website, choose the option to “recreate with ai builder on your existing website”, download and install the 10Web manager plugin in your WordPress. 

But first, go back to your dashboard and delete all the previously installed plugins.

Copy the URL from the Squarespace website and paste it, then click the recreate button. Wait for the recreate process then click to view and edit when it finishes. (11:51)

On this recreated website, unlike the Elementor website; there are some changes for example the fonts, the formatting of the heading, the size, the buttons lost their motion effect, some content is lost, and a couple of other changes. 

However, you can easily just go into the Editor and edit them to what you want. (12:22)

When you click on the Edit with 10Web builder button you are able to change those sections that differed from the original site to reflect what is on the original or whatever you want them to look like.

For sections that lost their content, you would have to recreate them by adding a new section, for example, then you can use templates from the Elementor Library or you can just create them and add your own content.

Note: Websites created using the 10Web Ai Builder are also hosted on the Google Cloud infrastructure with up to 90% page score. 

In Conclusion

If you’re looking to recreate a site for yourself or for your clients, the elementor based AI builder from 10Web Ai Builder is definitely the way to go. It gives you the power to recreate any kind of website and even if it is not yet perfect as you’ve seen, it saves you quite a lot of time that you would’ve put into recreating a website using WordPress or elementor.

It also opens up more possibilities for you as a web designer or a web agency, plus they’re creating even more widgets that you can use on your websites.

If you have any questions or comments don’t hesitate to use the comment section below. Remember to subscribe to my newsletter and Youtube channel for more tips and tutorials.