Quick Start: 5 minutes

This guide takes you from zero to your first successful conversion in Webflow. No AI configuration needed -- just your browser.

Estimated time: 5 minutes.

What you need

Before getting started, make sure you have:

A web browser (Chrome, Firefox, Safari, Edge)
A Webflow account with an open project
Some HTML/CSS code to convert (or use our example below)

Don't have HTML/CSS code? No worries. We provide a ready-to-use example in step 3.

The steps

Create your Convertex account

Go to convertex.ai/login. Two options:

Magic Link: enter your email and click the link received in your inbox. No password to remember.
Google: click "Continue with Google" to sign in instantly.

The free plan gives you 15 conversions per month. That's more than enough to get started.

No credit card required. You can upgrade later if needed.

Discover the editor

After signing in, you land on the editor. Here are the important areas:

Area	Where	What it does
Code tabs	Left panel	This is where you put your HTML and CSS code
Preview	Right panel	The real-time visual preview
Convert button	Top bar	Launches the conversion
Copy button	Top bar	Copies the result for Webflow

Paste HTML/CSS code

Click the HTML tab (left panel) and paste your HTML code.

Then click the CSS tab and paste your CSS code.

Don't have code? Use this example to test:

HTML:

<section class="hero">
  <div class="hero-content">
    <h1 class="hero-title">Welcome to my site</h1>
    <p class="hero-text">This is a conversion test with Convertex.</p>
    <a href="#" class="hero-button">Discover</a>
  </div>
</section>

CSS:

.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 500px;
  background-color: #1a1a2e;
  padding: 60px 20px;
}
 
.hero-content {
  text-align: center;
  max-width: 600px;
}
 
.hero-title {
  font-size: 48px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 16px;
}
 
.hero-text {
  font-size: 18px;
  color: #b0b0c0;
  margin-bottom: 32px;
}
 
.hero-button {
  display: inline-block;
  padding: 14px 32px;
  background-color: #6c63ff;
  color: #ffffff;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
}

The preview on the right immediately displays the visual result.

Convert

Click the Convert button in the top bar (or use the shortcut Cmd+Enter on Mac).

The conversion takes 1 to 2 seconds. A confirmation message appears.

Copy the result

Click the Copy button (or Cmd+K). The Webflow result is now in your clipboard.

Paste into Webflow

Open your project in Webflow Designer.
In the Navigator panel (on the left), click Body or the section where you want to insert the content.
Press Cmd+V (Mac) or Ctrl+V (Windows).

Your elements appear in Webflow with all their classes and styles.

Verify everything looks good

After pasting into Webflow, check:

The elements are visible in the Navigator with the correct hierarchy
The CSS classes appear in the Style Manager with the right names
The text is identical to the original
The design matches the Convertex preview

It's not working?

Problem	Solution
Nothing happens when I paste	Select a parent element (like Body) in Webflow's Navigator before pasting
The styles are different	Make sure you're on the Desktop breakpoint in Webflow
The fonts don't match	Add the font in your Webflow project settings

Tip: always paste into a test page before pasting into a production page. This lets you verify without risk.

What's next

Congratulations, you've completed your first conversion! Here are the next steps:

Set up AI: to generate Webflow code by describing what you want, without writing code
Practical guides: step-by-step tutorials for each use case
The editor in detail: all the editor features

On this page