How to Import Existing HTML Pages into a WYSIWYG Web Builder: The Complete Guide

What is a WYSIWYG Web Builder and Why Use It?

What Does WYSIWYG Actually Mean?

WYSIWYG stands for “What You See Is What You Get.” These editors allow you to see how your content will look while you’re creating it, instead of working with raw code^[4].

Think of it like this: traditional HTML coding is like writing instructions for someone else to build a house, while WYSIWYG is like moving furniture around in a room yourself until it looks right. The visual approach makes website creation accessible to people without coding knowledge.

For non-technical users, WYSIWYG builders offer significant advantages:

• No coding knowledge required – drag and drop elements instead of writing HTML
• Instant visual feedback – see changes in real-time as you make them
• Faster development – build pages much quicker than hand-coding
• Easier maintenance – make updates without diving into code

Why Import Existing HTML Rather Than Start Fresh?

You might wonder, “Why not just build a new site from scratch in the WYSIWYG editor?” Good question. Here’s why importing can be better:

• Preserve existing content – keep your text and images without manual copying
• Save time – avoid rebuilding pages you’ve already created
• Maintain consistency – keep your current design elements
• Easier transition – gradually modify imported pages rather than rebuilding

What Are the Limitations of Importing HTML into WYSIWYG Editors?

Before we jump into the how-to, let’s set realistic expectations. WYSIWYG web builders aren’t HTML editors—they’re HTML generators[1]. This distinction matters because:

1. Most WYSIWYG tools only import basic elements like text, images, and form components^[2]
2. Complex elements like tables, scripts, stylesheets, and multimedia components often don’t transfer^[2]
3. Your page may look different after import since style sheets aren’t always parsed correctly^[2]
4. Responsive designs are particularly difficult to import successfully^[1]

As one source bluntly puts it: “Don’t expect miracles. If a page fails to be imported, it probably contains code that the Web Builder doesn’t understand, and you still have to start from scratch.”^[8]

Which WYSIWYG Web Builders Allow HTML Imports?

Not all web builders offer HTML import functionality. Here are some popular options that do:

• WYSIWYG Web Builder – Dedicated import function but limited to basic elements^[1][2]
• Wix – Allows embedding HTML through their “Embed Code” feature^[5]
• Weebly – Supports HTML through their “Embed Code” element^[6]
• Squarespace – Offers code injection and HTML blocks^[7][13]
• 90 Second Website Builder – Features HTML template import functionality^[14]
• TinyMCE – Popular WYSIWYG editor that works with HTML^[10]

How to Import HTML into WYSIWYG Web Builder

WYSIWYG Web Builder is a dedicated tool for visual website creation that offers specific functionality for importing HTML. Here’s the step-by-step process:

Step 1: Access the Import Feature

1. Open WYSIWYG Web Builder
2. Click on Page → Import → Import HTML Page in the main menu^[1][2]
3. This opens the Import HTML page window

Step 2: Choose Your HTML Source

You have two options:

• Select an HTML page from your local computer
• Specify a URL of an online website you want to import^[1]

Step 3: Configure Import Settings

The import dialog offers several options:

• Maximum pages – Set how many pages to import (higher than 1 will recursively import pages)
• *Ignore * – Sometimes enabling this gives better results depending on the HTML structure^[1]

Step 4: Start the Import Process

1. Click OK to begin importing
2. The software will automatically copy all images to your local drive^[1][2]
3. Wait for the process to complete (larger sites take longer)

Step 5: Review and Refine

After import, you’ll need to:

1. Check all text and images for proper placement
2. Fix any elements that didn’t import correctly
3. Add missing components like scripts manually
4. Adjust styling as needed

Remember: “Web Builder imports the HTML by rendering the contents of an existing page and then attempts to convert the layout to Web Builder’s internal object format.”^[1]

How to Add HTML in Wix

If you’re using Wix, the process works a bit differently. Rather than importing entire pages, you’ll add HTML code blocks:

Step 1: Access the Embed Feature

1. Open the Wix editor and click on the “+” button
2. Choose “Embed Code” and then “Embed HTML”^[5]

Step 2: Add Your HTML

1. Paste your HTML code into the provided field
2. Click “Apply” to insert the code[5]

Step 3: Position and Adjust

1. Drag the HTML element to position it on your page
2. Resize as needed to display content properly

How to Add HTML in Squarespace

Squarespace offers multiple ways to add HTML to your site:

Method 1: Using Code Injection (Site-Wide)

1. Go to Settings → Developer Tools → Code Injection
2. Paste your HTML into either the header or footer field
3. Click “Save”[13]

Method 2: Using Page-Specific Code Injection

1. Navigate to Pages → Click cog of target page → Advanced
2. Paste your code in the header field
3. Save your changes[13]

Method 3: Using Code Blocks

1. Edit your page and add a “Code” block
2. Paste your HTML code
3. Save and publish[13]

How to Add HTML in Weebly

Weebly makes it straightforward to add HTML elements:

Step 1: Add the Embed Code Element

1. Drag the “Embed Code” element from the Basic section to your page[6]

Step 2: Insert Your HTML

1. Click inside the Embed Code element
2. Select “Edit Custom HTML”
3. Paste your HTML code[6]

Step 3: Save and Check Result

1. Click outside the element to see the content display
2. Publish your page when satisfied

Which Tools Work Best for HTML Import?

Based on the available information and user experiences, here are my recommendations for different scenarios:

For Simple HTML Pages

WYSIWYG Web Builder offers the most direct import functionality. While limited to basic elements, it handles simple HTML pages well and automatically pulls in images[1][2].

For Complex Web Applications

For sites with complex functionality, consider Froala Editor (the top-rated WYSIWYG HTML editor on G2)[4]. It allows clean integration of HTML and offers rich text editing capabilities.

For Basic HTML Embedding

If you just need to add HTML snippets rather than import entire pages, Wix and Squarespace provide straightforward embedding options that work well for third-party widgets and tools[5][7].

For Beginners with Basic HTML

Weebly’s Embed Code element offers a user-friendly way to add HTML without getting overwhelmed by technical options[6].

What Are Common Problems When Importing HTML?

Despite your best efforts, you might encounter some issues:

Styling Issues

Problem: CSS styles don’t transfer properly, making your page look different[2][8].

Solution: Use the HTML tools to add your CSS separately or recreate styling using the WYSIWYG editor’s native tools.

Missing Elements

Problem: Scripts, tables, and multimedia components don’t import[1][2].

Solution: Add these elements manually after import using the web builder’s HTML embedding options.

Responsive Design Problems

Problem: Responsive layouts don’t convert well into editable visual presentations[1].

Solution: Consider recreating responsive elements using the WYSIWYG editor’s responsive design features rather than importing them.

Image Path Issues

Problem: Images don’t display because of broken file paths.

Solution: Check that the WYSIWYG tool properly copied and linked all images. You may need to manually update some image paths.

How Should I Prepare My HTML for Import?

For the best results when importing, follow these preparation steps:

1. Simplify your HTML – Remove unnecessary code and complex structures
2. Organize your assets – Keep images and other files in well-organized folders
3. Separate content from design – The simpler your layout, the better it will import
4. Document your design – Take screenshots of your original site for reference
5. Back up everything – Always keep a copy of your original files

Is It Better to Import HTML or Add It Through Code Blocks?

This depends on your specific needs:

Import When:

• You have multiple simple pages to transfer
• You want to preserve basic layout and content
• You don’t have complex interactive elements

Use Code Blocks When:

• You need to add specific functionality to an existing page
• You’re adding third-party widgets or tools
• You want more control over specific sections

One experienced developer notes: “Instead of importing an entire HTML page, it’s usually better to create the page layout in WYSIWYG Web Builder and only import the parts that cannot be implemented visually.”^[1]

Best Practices for Working with WYSIWYG Editors

Once you’ve imported your HTML, follow these tips for the best experience:

Work in Full Screen Mode

Use full-screen workspace when editing to see all your content clearly^[12].

Use Paste Tools Properly

Always use the “Paste as Plain Text” option when copying content from other sources to avoid bringing in unwanted HTML and coding elements.

Delete Content Carefully

Be cautious when deleting content as you might accidentally remove key elements of hidden HTML that help create the layout of the page.

Use Built-in Templates

Take advantage of templates provided by your WYSIWYG editor for quick access to different layout styles[12].

Use Built-in Spelling Tools

Make use of the spelling and grammar checking tools to ensure your content is error-free.

Plan Your SEO Strategy

WYSIWYG editors can affect your SEO, so pay attention to heading tags, alt text for images, and other SEO elements when importing and editing content.

Final Thoughts on HTML Import

Moving existing HTML pages into WYSIWYG web builders isn’t always seamless, but it can save significant time compared to starting from scratch. The key is understanding each tool’s limitations and being prepared to make adjustments after import.

For most users, the best approach is a hybrid one: import what works well automatically, then manually add complex elements using the WYSIWYG editor’s HTML embedding features. This combination gives you the efficiency of import with the precision of manual additions.

Remember that different WYSIWYG editors handle HTML differently, so try a few options if your first attempt doesn’t yield satisfactory results. The tools recommended in this guide offer a good starting point, but new options are constantly emerging as web development technology advances.

By following the steps and practices outlined in this guide, you’ll be well on your way to successfully transitioning your existing HTML pages into a more user-friendly WYSIWYG environment.

Citations:
[1] https://www.wysiwygwebbuilder.com/import_html.html
[2] https://www.wysiwygwebbuilder.com/forum/viewtopic.php?t=137
[3] https://help.proprofskb.com/wysiwyg-editor
[4] https://froala.com/blog/editor/7-answers-to-frequently-asked-questions-about-html-editors/
[5] https://onesmartsheep.com/post/how-to-add-html-to-wix
[6] https://weeblytutorials.com/add-html-to-weebly/
[7] https://elfsight.com/tutorials/how-to-upload-an-html-file-to-squarespace/
[8] http://www.pablosoftwaresolutions.com/files/tutorials.pdf
[9] https://www.ualberta.ca/en/cascade-cms/media-library/working-the-wysiwyg-editor.pdf
[10] https://www.tiny.cloud/blog/bootstrap-wysiwyg-editor/
[11] https://blog.hubspot.com/website/best-wysiwyg-html-editor
[12] https://knowledge.treeviewdesigns.co.uk/knowledge/wysiwyg-editor-top-10-tips
[13] https://bycrawford.com/blog/can-you-add-html-to-squarespace-step-by-step-guide
[14] https://www.youtube.com/watch?v=bwwUSn2WQ-o
[15] https://stackoverflow.com/questions/18306024/importing-html-css-project-into-a-visual-front-end-editor
[16] https://www.wysiwygwebbuilder.com/forum/viewtopic.php?t=97085
[17] https://froala.com/blog/general/from-html-to-wysiwyg/
[18] https://stackoverflow.com/questions/2529107/wysiwyg-editor-with-add-custom-html-feature-and-secure-validated-html-output
[19] https://gisuser.com/2021/10/wysiwyg-editors-vs-seo-how-do-they-influence-it/
[20] https://www.siberoloji.com/understanding-wysiwyg-editors-a-complete-guide-for-beginners/
[21] http://forum.wysiwygwebbuilder.com/viewtopic.php?t=98744
[22] https://support.moderncampus.com/cms/tutorials/developer/index.html
[23] https://www.youtube.com/watch?v=fASa2IMBfl0
[24] https://www.mailingmanager.co.uk/resources/how-to-import-html-in-the-wsiwyg-editor.php
[25] https://stackoverflow.com/questions/47418576/convert-html-to-wordpress-website-with-content-in-wysiwyg-editor
[26] https://www.scalablepath.com/front-end/quill-js-wysiwyg-editor
[27] https://www.wysiwygwebbuilder.com/add_html.html
[28] https://help.pinpointe.com/support/solutions/articles/12000102182-new-basic-editor-import-html-page
[29] https://support.bigcommerce.com/s/article/Using-the-WYSIWYG-Editor?language=en_US
[30] https://nicepage.com/questions/69444/import-existing-html-website
[31] https://froala.com/blog/general/html-and-wysiwyg-editors-a-comparison-of-both/
[32] https://www.linkedin.com/pulse/tips-tricks-wysiwyg-content-editors-amy-steger
[33] https://www.reddit.com/r/webdev/comments/11jskmh/what_is_your_goto_wysiwyg_editor/
[34] https://www.wysiwygwebbuilder.com/forum/viewtopic.php?t=91521
[35] https://stackoverflow.com/questions/tagged/wysiwyg
[36] https://industrialmarketer.com/wysiwyg-editor-flaws-and-how-to-handle-them/
[37] https://github.com/JefMari/awesome-wysiwyg-editors
[38] https://softwarerecs.stackexchange.com/questions/tagged/wysiwyg
[39] https://nicepage.com/he/6355277/effective-seo-wysiwyg-html-editor
[40] https://www.ccsf.edu/drupalweb/wysiwyg-example
[41] https://stackoverflow.com/questions/78599227/how-to-upload-html-css-files-of-a-website-in-squarespace
[42] https://support.wix.com/en/article/wix-blog-adding-html-code-to-a-blog-post
[43] https://www.youtube.com/watch?v=4D5tx1HqFxI
[44] https://www.youtube.com/watch?v=ePWWhYdFygk
[45] https://forum.wixstudio.com/t/how-do-i-transfer-html-files-and-graphics/32442
[46] https://www.weebly.com/websites/code-editor
[47] https://www.youtube.com/watch?v=S439pi4wNrw
[48] https://support.wix.com/en/article/wix-editor-embedding-custom-code-on-your-site
[49] https://community.squareup.com/t5/Weebly-Site-Editor/Insert-a-full-HTML-page-in-a-Weebly-site/td-p/538549
[50] https://forum.squarespace.com/topic/161408-how-to-use-already-coded-html-page-as-squarespace-website/
[51] https://www.reddit.com/r/WIX/comments/12sqo89/how_do_i_add_html_tag_to_my_wix_website/
[52] https://stackoverflow.com/questions/52570331/how-to-implement-upload-my-own-html-and-css-code-to-weebly
[53] https://www.youtube.com/watch?v=xXE1iL970Y0
[54] https://www.hostgator.com/help/article/add-custom-html-to-your-weebly-website
[55] https://www.youtube.com/watch?v=UI0n4WvaHWk
[56] https://www.youtube.com/watch?v=LSY5q5Ce87A