Clone your first site step by step

Overview

This is the hands-on, follow-along tutorial for new Clonerix users. We will walk end to end through the entire workflow: paste a URL, run the clone, navigate the editor, make common edits, adjust branding, add tracking scripts, publish to a live subdomain, and then verify the final result.

You need an active Clonerix account before starting. If you do not have one, follow the Create Your Account guide first and then come back here.

Prerequisites

Before you begin, make sure you have three things ready. First, a Clonerix account you can sign in to. Free tier is perfectly fine for this tutorial. Second, a public URL you want to use as a cloning practice target. We recommend using one of your own existing landing pages if you have one, or a well-known public marketing page from a brand you admire. Third, about twenty minutes of uninterrupted time.

Important note about the choice of source URL. For your first attempt, pick a standard marketing landing page, not a complex web app, logged-in dashboard, video streaming page, or interactive tool. Standard marketing pages are the sweet spot of the current engine. Save complex targets for your second or third clone once you are comfortable with the basic mechanics.

Step one: Initiate the clone

Sign in to your Clonerix account. You land on the dashboard. Locate the large button at the top of the page labeled Clone a new page and click it. The clone dialog opens.

Paste the full source URL into the text field. Make sure to include the protocol prefix, either https:// or http://. Modern sites almost always redirect the non-HTTPS variant to HTTPS, but pasting the correct canonical URL saves a redirect step and slightly improves clone fidelity.

Click the small chevron labeled Advanced options to reveal a few settings you can tune. For your first clone we recommend leaving all advanced options at their defaults. The engine has extremely good default behavior for typical marketing pages.

Click the blue Start cloning button to begin. The dialog switches to a four-step progress indicator. Expect the whole process to take between eight and twenty seconds for a typical single page. Multi-page sites with many subpages take longer.

Step two: Understand the editor interface

When cloning completes you are dropped directly into the visual editor. Spend a minute or two familiarizing yourself with the layout before making any changes. The editor is divided into three main columns.

The left sidebar contains the Page Tree, Layers panel, and Media library. The Page Tree shows every cloned page in the project. Clicking a page name switches the canvas to show that page. The Layers panel shows the nested component tree of the currently selected page. The Media library holds all uploaded imagery.

The center area is the live editable canvas. It shows an interactive rendering of the page you are editing. Everything on the canvas is click-to-select and double-click-to-edit. The top toolbar of the canvas area has breakpoint toggles for desktop, tablet, and mobile preview, plus undo, redo, and preview controls.

The right sidebar is the Inspector panel. Its contents change based on what is currently selected on the canvas. Selecting a paragraph shows typography, color, and spacing controls. Selecting a global container shows global design token controls. Selecting a page from the page tree with no element selected shows page-level controls like metadata, SEO settings, scripts, and custom domain configuration.

Step three: Basic edits

Double-click anywhere on the hero headline. The text block switches into inline edit mode. Type a new headline for your brand. Press Escape or click outside the text block when you are done. The headline updates live.

Click once on the primary call-to-action button directly below the headline you just edited. The button becomes selected with a blue outline and sizing handles. In the Inspector panel on the right, scroll to the Text field and type the new button label. Scroll further to the Link destination field and paste the URL you want the button to send visitors to.

Double-click one of the body paragraphs on the page. Edit the text to reflect your own offer. Notice that the formatting toolbar appears inline above the selection with common options like bold, italic, link, alignment, and list toggles.

Click the hero background image. The Inspector panel shows image-specific controls. Click the Replace image button. Upload a new image from your desktop or paste a direct image URL. The image updates on the canvas immediately. The editor preserves the aspect ratio and crop behavior of the original image slot so layout does not visually break.

Step four: Global branding pass

Before editing individual blocks further, apply global changes first. They cascade automatically and save a huge amount of repetitive work.

Open the Page Tree in the left sidebar. Click the top-level project name, not any individual page. The Inspector panel switches to project-level global settings.

Find the section labeled Design tokens. Change the Primary color to your own brand primary color using the color picker, or paste a hex value if you have one. Notice how every primary button, accent border, link highlight, and colored icon across the entire project updates instantly to match the new value. Update the Secondary and Accent colors similarly.

Still in Design tokens, review the Type scale section. Adjust the base font family if your brand uses a specific one. Clonerix supports all standard web-safe and system font families out of the box. Custom font uploads are available on Pro plans and above.

Navigate to Project settings, General. Update the Project display name. Upload a project favicon. Paste the project logo for the navigation header if the original logo carried over from the source clone.

Step five: Mobile and tablet QA

Click the tablet breakpoint toggle in the canvas toolbar. The canvas resets to a 768-pixel-wide tablet viewport. Slowly scroll the full length of the page looking for visual issues. The most common tablet-level issues are headlines wrapping awkwardly, buttons that should be full-width staying inline, and imagery with poorly chosen focal points at medium breakpoints. Make any needed adjustments in the Inspector. Values changed on a specific breakpoint apply only to that breakpoint and smaller sizes, not to larger sizes.

Click the mobile breakpoint toggle and repeat the same slow scroll review process. Common mobile issues include text overflowing container bounds, call-to-action buttons being too small for reliable tapping, hero images cropping heads or faces awkwardly, and horizontal scrollbars appearing due to one element set to a fixed pixel width. Mobile is the single most commonly skipped QA step and the source of roughly eighty percent of post-publish bug reports. Do not skip it.

Step six: Tracking scripts and analytics

Select any page in the Page Tree, then open the Page-level Scripts section in the Inspector panel. Marketing sites commonly run three to five tracking scripts in 2026, and Clonerix makes them easy to install.

Click Add script. Choose Meta Pixel from the template dropdown. Paste only your Pixel ID into the dedicated ID field. The editor generates the correct full snippet for you, including deduplication logic, page-view tracking, and standard event definitions. Click Save.

Repeat for Google Analytics 4 using your Measurement ID. If you use other tools like Segment, Plausible, Hotjar, PostHog, or a custom A/B testing platform, choose Custom snippet and paste the full script block provided by the vendor. Choose the Head injection position unless the vendor documentation specifically says otherwise.

Every script you add at the project level is injected automatically into every page of the published clone. Scripts added at the individual page level only run on that specific page. Most tracking installations belong at the project level.

Step seven: Publish to a live URL

When you are satisfied with every edit, every breakpoint, and every script installation, click the blue Publish button in the top right corner of the editor header.

In the publish dialog, choose Clonerix subdomain as the publishing destination (custom domains are covered in a separate dedicated article). Type in a subdomain name you would like to use. It has to be globally unique across all Clonerix projects, so short brand names may already be taken. Your full URL will be your-chosen-name.dash.visionclass.shop.

Click Publish. The build and deploy process takes approximately 30 seconds. When it finishes, the dialog shows the full live URL with a Copy button and an Open in new tab button. Click the latter.

Verify the live site in a new incognito window. Scroll every page. Click every CTA to confirm link destinations. Open the browser developer tools network tab and reload to verify that tracking scripts are actually loading and firing events.

Next steps after your first clone

You have successfully cloned, edited, and published a page. Nice work. Where you go from here depends on your goals.

If you want to edit further, go back to the editor. Any change you make and republish goes live in about ten seconds. There is no publish queue or maintenance window.

If you want to experiment further, clone two or three reference pages from different sources and compare their structures side by side in separate project tabs. This is one of the fastest possible ways to build good taste in landing page design.

If you are ready to level up, read the article on connecting a custom domain so you can publish under your own brand on your own domain instead of on the dash.visionclass.shop subdomain.

Troubleshooting your first clone

Clone progress bar hangs at phase one for more than 30 seconds. Cancel and retry. Occasionally a specific renderer in our pool will be slow or the source site will be rate-limiting our traffic. A second attempt almost always succeeds.

Edits in the editor look great but the published site looks different. Hard-refresh the live site in your browser. Published sites are served through a global CDN and sometimes the browser shows a cached older version. If the issue persists after hard refresh, open the editor and hit Republish once.

Tracking scripts are not firing on the live site. Three common causes: you added the script to one page instead of at the project level, you pasted the wrong ID value, or an ad blocker in the test browser is preventing the script from loading. Test from a browser without ad blockers or use the developer tools request list to verify.

Subdomain name I want is taken. Add a modifier suffix to the name. Most brands append -home, -site, -offer, -lp, or a short numeric suffix.

Published site shows a Clonerix footer watermark on Pro or Max. That means the project was published while the account was still on Free. Upgrade, then open the editor and hit Republish once. The watermark is removed automatically on the next publish after upgrade.

---