Are you looking to integrate your beautifully designed Webflow page into your WordPress site? This guide will show you how to export a Webflow page and seamlessly add it to a new WordPress page using Elementor.
Step-by-Step Guide to Export a Webflow Page and Import It into WordPress
Export the Code from Webflow
- Open Webflow:
- Navigate to your Webflow project and open the page you want to export.
- Export the Code:
- Click the “Export” button located in the top-right corner of the Webflow Designer.
- Download the entire exported code package, which includes HTML, CSS, JavaScript, and assets.
Prepare the Exported Files
- Extract Files:
- Unzip the downloaded file from Webflow. You’ll see several files and folders, typically including an HTML file, a CSS folder, a JS folder, and an Assets folder.
Upload Assets to WordPress
- Upload Assets:
- In your WordPress admin dashboard, navigate to
Media > Add Newand upload all the images and other assets from the Webflow export.
- In your WordPress admin dashboard, navigate to
Create a New WordPress Page
- Create a New Page:
- Go to
Pages > Add Newin your WordPress admin dashboard. - Give your new page a title and publish it.
- Go to
Add HTML, CSS, and JavaScript to the WordPress Page
- Use Elementor:
- Open the newly created page with Elementor.
- Add HTML:
- Drag and drop an “HTML” widget onto the page.
- Open the exported HTML file from Webflow and copy all the code.
- Paste the HTML code into the Elementor HTML widget.
- Add CSS:
- If you have Elementor Pro, you can add custom CSS directly:
- Go to the “Advanced” tab of the section and add your CSS under the “Custom CSS” section.
- Alternatively, you can add the CSS to your theme’s customizer:
- Go to
Appearance > Customize > Additional CSSand paste the CSS code there.
- Go to
- If you have Elementor Pro, you can add custom CSS directly:
- Add JavaScript:
- In the Elementor page settings (gear icon at the bottom left), go to the “Advanced” tab and paste any JavaScript from your Webflow export under “Custom CSS & JS.”
Adjust Asset Paths
- Update URLs:
- Make sure to update the paths in your HTML and CSS to point to the correct locations of the uploaded assets in the WordPress media library.
Example
Assume your Webflow export includes the following HTML, CSS, and JS:
HTML
htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webflow Exported Page</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="hero-section">
<h1>Welcome to Our Website</h1>
<p>Your success starts here.</p>
<button>Learn More</button>
</div>
<script src="js/script.js"></script>
</body>
</html>
CSS
cssCopy code.hero-section {
background: url('../assets/hero-bg.jpg') no-repeat center center;
background-size: cover;
text-align: center;
padding: 100px 0;
color: #fff;
}
.hero-section h1 {
font-size: 3em;
margin-bottom: 20px;
}
.hero-section p {
font-size: 1.5em;
margin-bottom: 40px;
}
.hero-section button {
padding: 10px 20px;
font-size: 1.2em;
color: #fff;
background: #000;
border: none;
cursor: pointer;
}
JS
javascriptCopy codedocument.querySelector('.hero-section button').addEventListener('click', function() {
alert('Button clicked!');
});
Implementation:
In Elementor HTML Widget:
htmlCopy code<div class="hero-section">
<h1>Welcome to Our Website</h1>
<p>Your success starts here.</p>
<button>Learn More</button>
</div>
In Elementor Custom CSS:
cssCopy code.hero-section {
background: url('URL_OF_UPLOADED_IMAGE') no-repeat center center;
background-size: cover;
text-align: center;
padding: 100px 0;
color: #fff;
}
.hero-section h1 {
font-size: 3em;
margin-bottom: 20px;
}
.hero-section p {
font-size: 1.5em;
margin-bottom: 40px;
}
.hero-section button {
padding: 10px 20px;
font-size: 1.2em;
color: #fff;
background: #000;
border: none;
cursor: pointer;
}
In Elementor Custom JS:
javascriptCopy codedocument.querySelector('.hero-section button').addEventListener('click', function() {
alert('Button clicked!');
});
Conclusion
By following these steps, you can effectively integrate a full Webflow page into your WordPress site using Elementor. This process ensures that the design and functionality are preserved as much as possible.
