Release notes
July 2024February 2024
September 2023
May 2023
January 2023
November 2022October 2022September 2021August 2021May 2021March 2021August 2020July 2020June 2020May 2020April 2020
September 2023
May 2023
January 2023
November 2022October 2022September 2021August 2021May 2021March 2021August 2020July 2020June 2020May 2020April 2020
July 16, 2024
v4.0Updates
Component prop editing directly in the canvas
We've completely reworked component instance editing to make it easier and more intuitive.
You can now simply click on an element that is bound to a dynamic value and make your edits directly on the canvas. When selecting a component element you will also still be able to make the edits in the props in the Right panel as well.
When selecting a component directly, in the Right panel you will notice all of the props with their respective styling as well.
We've completely reworked component instance editing to make it easier and more intuitive.
You can now simply click on an element that is bound to a dynamic value and make your edits directly on the canvas. When selecting a component element you will also still be able to make the edits in the props in the Right panel as well.
When selecting a component directly, in the Right panel you will notice all of the props with their respective styling as well.
Creating link props
Link props can now be created and added to elements in component instances.
Adding a link prop to an element inside of a component will make the element in all of the component instances linkable. You can then use the same component in different situations and have the element with the Link prop link to different places. (ex: If you have two instances, the link in instance A can go to a different page and the link in instance B can scroll to a part of the page.)
To add a link prop, double click to start editing the component, select the element you want to link from, click the link icon and use the Create prop icon. When returning to page editing, select the element and a new Link icon will appear.
Additionally when creating a link you will also have the option to have the link Open in a new tab or not.
Link props can now be created and added to elements in component instances.
Adding a link prop to an element inside of a component will make the element in all of the component instances linkable. You can then use the same component in different situations and have the element with the Link prop link to different places. (ex: If you have two instances, the link in instance A can go to a different page and the link in instance B can scroll to a part of the page.)
To add a link prop, double click to start editing the component, select the element you want to link from, click the link icon and use the Create prop icon. When returning to page editing, select the element and a new Link icon will appear.
Additionally when creating a link you will also have the option to have the link Open in a new tab or not.
Scroll to links to component instances
Components will now appear automatically in the Scroll-to section when adding links.
Prior to this change you were not able to add an ID to components without the need to detach from the main component. Now whenever a component is created it will automatically appear in the scroll-to section of the link window.
Components will now appear automatically in the Scroll-to section when adding links.
Prior to this change you were not able to add an ID to components without the need to detach from the main component. Now whenever a component is created it will automatically appear in the scroll-to section of the link window.
Replace images and videos with AI
Images and videos can now be easily replaced with the Ask AI feature.
Select an image and whether it’s in a component instance or not, you can click on the Ask AI button and give the AI a prompt. You can hit the Enter key multiple times to make the AI give you alternatives faster. This makes finding the right image much faster and precise.
Images and videos can now be easily replaced with the Ask AI feature.
Select an image and whether it’s in a component instance or not, you can click on the Ask AI button and give the AI a prompt. You can hit the Enter key multiple times to make the AI give you alternatives faster. This makes finding the right image much faster and precise.
Rich text now available as a component prop
Rich text can now be added to components and used as props.
The rich text elements can then be further edited either directly in the canvas or in the Right panel. This is a first iteration of rich text editing, with further enhancements to come later down the line.
Rich text can now be added to components and used as props.
The rich text elements can then be further edited either directly in the canvas or in the Right panel. This is a first iteration of rich text editing, with further enhancements to come later down the line.
New AI website creation flow
The AI website creation flow has been completely redesigned.
While the previous version of the website builder used a static template to generate identical websites, the latest version uses a series of interchangeable hand crafted sections to websites that are much more unique and in tone with the prompt used at the start of the creation flow.
The AI website creation flow has been completely redesigned.
While the previous version of the website builder used a static template to generate identical websites, the latest version uses a series of interchangeable hand crafted sections to websites that are much more unique and in tone with the prompt used at the start of the creation flow.
New website sections and Sections tab
The new sections that are used by the AI website builder can also be found in a new Sections tab and added manually in any project. The new Sections tab can be found in the Left panel, just below the Elements tab.
Additionally when selecting a section or component in a project you have the option to Add a new section below or Replace section, which will automatically take you to the Sections tab.
The new sections that are used by the AI website builder can also be found in a new Sections tab and added manually in any project. The new Sections tab can be found in the Left panel, just below the Elements tab.
Additionally when selecting a section or component in a project you have the option to Add a new section below or Replace section, which will automatically take you to the Sections tab.
New page creation flow and page templates
Together with the new website creation flow we have also added a way to generate new pages faster.
To facilitate this we have created 5 new categories of pages each with several page variants that you can choose from. Each of these page variants is created using the brand new website sections. When creating a new page you can also choose to have AI generated text.
This greatly improves the experience of creating a full website with multiple pages.
Together with the new website creation flow we have also added a way to generate new pages faster.
To facilitate this we have created 5 new categories of pages each with several page variants that you can choose from. Each of these page variants is created using the brand new website sections. When creating a new page you can also choose to have AI generated text.
This greatly improves the experience of creating a full website with multiple pages.
Themes and theme editing
All of the sections found in the New sections tab which are also used in the Ai Website Builder can be quickly restyled using Themes.
Clicking outside of the canvas will take you to the Design tab in the Right panel. In the color tab you will find a dropdown menu from which you can select a new theme with different colors and fonts. Almost all of the new themes also have a Dark mode which can be activated using a switch.
All of the themes can also be further customized by using the Edit icon right next to the theme. These options make it a lot easier to customize AI generated websites or websites created using our sections.
All of the sections found in the New sections tab which are also used in the Ai Website Builder can be quickly restyled using Themes.
Clicking outside of the canvas will take you to the Design tab in the Right panel. In the color tab you will find a dropdown menu from which you can select a new theme with different colors and fonts. Almost all of the new themes also have a Dark mode which can be activated using a switch.
All of the themes can also be further customized by using the Edit icon right next to the theme. These options make it a lot easier to customize AI generated websites or websites created using our sections.
AI text editing options
Text elements can easily be edited in TeleportHQ using AI.
When selecting any text element in a project you will have the Ask AI option right above it. Using this you can give the AI a prompt for the change or you can use one of the pre established options to make the text shorter, longer or change the tone of the text.
The power of AI at your fingertips. No more need to go back and forth between TeleportHQ and another AI text generation tool.
Text elements can easily be edited in TeleportHQ using AI.
When selecting any text element in a project you will have the Ask AI option right above it. Using this you can give the AI a prompt for the change or you can use one of the pre established options to make the text shorter, longer or change the tone of the text.
The power of AI at your fingertips. No more need to go back and forth between TeleportHQ and another AI text generation tool.
Improvements & Fixes
- Added option to view and navigate to instances of any component
- Added a new Wireframe button in Top bar to improve editing visibility
- Rearranged the Code and Export buttons into a new Code window
Built in TeleportHQ