How to copy paste custom HTML
Find out how to add HTML code to your project and how it can be edited as any other element in TeleportHQ.
Copy pasting the code
Editing copied elements
Copy code to clipboard
Select the code that you want to copy from your source and use CTRL/CMD-C to copy it to your clipboard.
Paste code inside the project
Select the container in which you want to paste your code to.
Use CTRL/CMD-V to paste the copied code to the project. You will then be prompted with an HTML IMPORT modal.
To finalize the code import, simply, click the Save button.
If the code passes the validation, then the Save button will be enabled in the top down corner.
When the copied code does not pass the validation, there will be displayed an orange circle with the number of conflicts in your code, right at the bottom of the modal.
You can further investigate and choose to expand the list of code conflicts from the right side of the modal.
Click on each item from the list to take you to the line with the conflict.
Not all conflicts will prevent the code to be imported. Some are simply warnings, not breaking conflicts.
Edit the copied elements
After clicking the Save button you will immediately see copied HTML elements in the container that you’ve selected and in the treeview of the Layers & Files tab.
To edit elements you can just select them and edit using the options available in the Right panel, just like you would for any other element.
Being able to select and edit individual elements is the difference between copy pasting code and using the Code embed element.
Here is a list of elements that you cannot copy using copy paste in TeleportHQ:
Complex CSS selectors (e.g. ::before, ::after, .a.b)
Id selectors (#id)
Any non-<path> elements in SVGs
Elements not in the elements panel OR tag list of elements in elements panel (e.g. <table>, <sup>, <sub>)
More than two layers of nested text elements
Tags other than <span> and <br> in text elements
Updated on: 21/03/2023