How can I import external code into Webflow and use it as a starting template for making modifications?
TL;DR
- Add an Embed element in Webflow and insert external HTML, CSS, or JavaScript.
- Use Project Settings > Custom Code to add global styles and scripts in the Head/Footer sections.
- Link external stylesheets and scripts with
<link>and<script>tags in a Custom Code block or Head/Footer section. - Manually recreate layouts using Webflow’s Designer and style them with Webflow’s system.
- Break full-page imports into sections, rebuild elements, and adapt JavaScript interactions for Webflow compatibility.
To import external code into Webflow and use it as a starting template, follow these steps:
1. Use Embed Code Blocks
- Go to your Webflow project, then select Add Elements (the “+” icon).
- Drag and drop an Embed element onto the page.
- Paste your external HTML, CSS, or JavaScript inside the Embed block.
- Click Save & Close to apply the changes.
2. Add Custom Code in Project Settings
- Navigate to Project Settings > Custom Code.
- Under the Head Code section, add global styles or third-party libraries (e.g., Bootstrap, jQuery).
- Under the Footer Code section, add scripts that should run after the page loads.
- Click Save Changes & Publish to apply.
3. Link to External Stylesheets and Scripts
- If your external code relies on CSS/JS files, use
<link>and<script>tags inside a Custom Code block or the Head/Footer section: - CSS:
<link rel="stylesheet" href="https://example.com/style.css"> - JS:
<script src="https://example.com/script.js"></script>
4. Use Webflow’s HTML Structure
- Webflow doesn’t allow direct HTML imports but lets you manually recreate layouts using its Designer Interface.
- You can copy HTML sections into Embed elements but must style them with Webflow’s system to integrate properly.
5. Convert External Code to Webflow-Compatible Elements
- If importing a fully designed page, break it into sections and manually create layout elements (e.g., Div Blocks, Containers).
- Use Webflow’s CSS Panel to style elements similarly to your external template.
- JavaScript interactions may need to be adapted using Webflow’s built-in interactions or custom scripts in an Embed block.
Summary
Since Webflow doesn’t natively support full HTML imports, you must manually integrate external code using Embed elements, custom code sections, and Webflow’s Designer tools. Use link/script tags for external resources and recreate structures in Webflow for styling consistency.