Bridging the Gap between Lovable and Wordpress with CloneWebX

My step by step guide for moving designs created by Lovable into your Wordpress

I hate long intros about the author’s childhood before they get to the point, so for the actual guide - scroll down to the divider.

For those that enjoy the backstory, here it is: many years ago I graduated as a backend engineer with basic knowledge of HTML and CSS. As Web3.0 accelerated, I lost every hope of keeping up with the front end tech stack, and enjoyed coding sensible technologies on the backend. Now, some 20 years later when I wanted to create a new design for an existing Wordpress website, I was truly lost - where do people even begin these days?

Fortunately, someone told me about Lovable, and in just a few minutes with a fairly simple prompt, I was able to create beautiful pages without writing a single piece of code. Now, that’s great, but as with every AI tool, you can only get there so far, then you actually need to sit down and implement the last mile, the last 20% or whatever you want to call it.

The problem is, Lovable generates everything in React. So, either:

• you move your hosting, domain name pointers and everything else to Lovable (or equivalent React hosting) and learn how to code React or live at the mercy of AI engine generating exactly what you need

OR

• you somehow figure out how to move the generated design to no-code visual editor like Elementor on Wordpress.

I chose the latter.

Step by Step Guide

---

Tech stack:

• Wordpress (I use Wordpress.com, but WPEngine or any other hosted option should work)

• Elementor Pro (Pro is a requirement for CloneWebX) as your visual editor

• CloneWebX

• Chrome web browser

Step 1: create your design in Lovable and publish it.

Step 2: create account with CloneWebX and choose a subscription option. For my needs, the smallest subscription was just fine.

Step 3: once your account is created and paid, follow CloneWebX instructions on installing their Chrome extension.

Step 4: keep CloneWebX tab among the open tabs in Chrome, open a new one and navigate to your published Lovable site/page.

Step 5: activate the CloneWebX plugin, and add the page you are on to the project:

CloneWebX will do its thing and open a new tab for you with element selector on the right which will allow you to copy blocks generated by Lovable into Elementor:

Step 6: now you can select either entire page and copy it in one click, or select elements (divs) individually and export/copy them to clipboard.

Step 7: navigate to your Wordpress, create a new page in Elementor and choose “Copy from other site” to paste the element in.

Tips & Tricks

CloneWebX does a pretty solid job of copying elements over, but at the end of the day there’s only so much it can do, and you will need to convert some of its job into simpler Elementor blocks, because none of this will work 100% out of the box.

1. Ask Lovable for detailed design specs

   As simple as “Export the design specs” - it will dump all aspects of colors, typography, backgrounds, accents, headings and most importantly layout structure, so you can create the same elements manually in Element. Trust me, you will need it.

2. Replace Dynamic Card Boxes as needed.

   CloneWebX creates most of copied elements as Dynamic Card Box blocks in Elementor. As long as you are satisfied with the element itself, and the only change required is text, you will be fine. Dynamic Card Box creates as many text entry fields as needed for all text headings/subheadings in the element copied over:

   

3. Links on Dynamic Card Boxes do not work.

   This is a problem for any button created by Lovable and cloned by CloneWebX: link field has no effect, and so I had to recreate buttons by hand. You can sometimes wrap the button into <a href> tag, but it’s not always an option:

   

   
   Now that you have full design specs exported by Lovable it’s not terribly difficult, but I recommend creating these buttons as Global Widgets in Elementor, because you will use them a ton. Pretty much every single button copied over will need to be replaced if you want it to be active.

4. Active elements do not work.

   While Loveable is perfectly capable of generating dynamic elements like FAQ that expands and contracts, CloneWebX can’t properly copy it over, because it works on what it sees on the page, not on JS code. Same goes for effects: hover effects, animations, etc - will have to be defined by you by hand, but then again, you have the specs produced by Lovable.

5. Check mobile views

   Just because mobile view produced by Lovable works, when copied over into Elementor, not everything will align nicely. I had to go in on every page and fix certain sizes, stacking, etc to fit nicely into mobile view. Overall, not a ton of effort, but something to keep in mind.