Quick start
HyperBuilder is a no-code web application that allows you to quickly create and easily manage a website in a graphical interface by using ready-made, customizable content blocks.
Every website application is always created with 3 workspaces:
- Draft: Here all the initial content changes are made. Updating the Draft will never affect Test and Live environments. This is the main workspace of all editors.
- Test: Once you are happy with your in-progress work results, you may save a test version of your page. This environment lets you test your pages one more time before making them visible to the end users and also execute any approval flows if needed.
- Live: The live environment is the actual live version of your website that is publicly available to your visitors. All changes here have to be published manually from either, a draft or a test version of the page.
The publishing process is always done page by page, so you can put any page live as soon as it is ready, without having to wait for the other parts of the website.
Login: To access the HyperBuilder application, simply open your application link and follow the further instructions to authenticate via the HyperPortal application.
Once logged in, you will be immediately redirected to the HyperBuilder page editing workspace. The workspace layout consists of 5 main areas:
- Header: Displays general application options and settings.
- Toolbar: Contains tools for the current page editing and publishing.
- Page Structure sidebar: Allows you to manage the currently edited page and the list of blocks, that determine the page layout.
- Main Block: Shows the pre-rendered version of the current page draft. (This part is still in development, so it is recommended to use the preview button to evaluate the real layout of the block).
- Block editing sidebar: Provides controls of the page block in focus.
- List of Pages: You can navigate your website pages by clicking a folder icon in the Toolbar. If you have sufficient permissions, you can also rename or delete a page from this menu. To create a page, please use the 'Add new page' button at the bottom of the dropdown panel
- Page Link: Provides a draft link to the rendered page version. This is the same version of the website, that opens with a “Preview” button.
- View Mode: To preview the mobile layout of your page, use a monitor icon that lets you easily switch between Desktop, Tablet, and Mobile display modes
- Language: The language selector decides the language in which the page pre-rendered version is shown and at the same time, the language for which you are editing the block settings. This topic is covered in detail in the “Block Editing” article.
- Preview: Opens a draft version of the page in a new tab. Unlike the pre-rendered version, only Saved changes will be shown in the preview.
- Publish Status: Depicts an environment to which the page is published: Draft, Test, or Live. This indicator is introduced to distinguish newly created pages from existing ones, so if you are editing a page, that already exists on your live website, this indicator will always show “Live” status.
- Save: Becomes active after changes are made, also showing the number of unsaved changes.
- Publish: Allows you to copy the saved draft version of the page to the Test or Live environment. Also provides the possibility to deactivate a page if needed.
Clicking the "Add New Page" button will open a modal window. This modal window allows you to set the main properties of the new page, such as the page title and slug. Most of these properties can later be adjusted in the page settings sidebar.
However, please note that it is generally not recommended to change the slug of the page that is already indexed on Google, because as soon as the slug changes, all the SEO progress will be lost.
In order to provide better content personalization, all the page settings can also be set independently per website language.
If you want to link some blocks to dynamically display other pages of your website, you need to enable Article mode on the target page. This can be useful when you have a news block, that automatically shows the latest news pages. For instance, when you choose a news article to be displayed in the block, all you have to do is pick an article. Then the block will automatically fetch all the needed data, like description, image, and the link to the page, without manual configuration of the news cards.
- Page Name: Displays the current page name. Click the cog icon to enrich page data and manage all available page settings.
- Header/Body/Footer Groups: For the editors' convenience, blocks in the page are organized into 3 groups. This is especially useful when the are multiple editors of the website. Usually, Header and Footer groups contain blocks that need to have fixed stable positions on the page, while the Body group is meant for flexible content. You need to have sufficient permissions to put a block into a Header/Footer group.
This sidebar always shows you controls of the block that you have in focus:
Please note that all changes made to block properties will be discarded unless explicitly saved using the “Save” button in the toolbar. The "Save" button saves changes at the page level, meaning all changes in all blocks on the page will be saved simultaneously.
For convenience, block controls are grouped into tabs. As you proceed with the editing, you will notice that not all settings are convenient for your current use case.
For example, the “Video autoplay” setting keeps showing even if you choose “Image” as the block background type. This will be improved in future updates to the application.
Also, you may notice that most text fields and some other fields have the translation mark in the field label. This mark indicates a multilingual property of the block.
To fill in values in different languages, simply switch the current page language in the toolbar.
Some blocks are actively indicating that the translations are missing in certain properties.
In the future, this will be added to all multilingual properties of each block.
The first language in the list is considered to be the default language of your website. In case the block is missing some translations in the secondary languages, default language value will be used instead. This may be useful when editing the link or image properties.
The default language of your website as well as the list of available languages is set in the HyperBuilder languages configuration in HyperPortal.
HyperBuilder provides a centralized storage for all the media assets, used across the website. This means that you can easily re-use the same media in multiple blocks and pages and once you change the alt-text of the file, this change will be automatically applied everywhere on the website.
In the future we will also implement the possibility to quickly replace a file in the media library record, to let you replace a media file across all blocks and pages.
*At the moment the media library is still in the early stage of development, therefore no styling has been applied to this functionality
As was said before, there are always 3 versions of your website that exist simultaneously. Draft and Test versions are only used for internal purposes and are not available to your audience and the Live version represents your publicly available website.
Once you have finished working on the new version of your page, you can preserve your changes and save them to the Test version. The test environment can also be used to review and validate changes that are yet to be published to the live website and in the future we will introduce standard approval workflow to extend this functionality.
At this moment when publishing, the data is always transferred from the Draft version of the page:
Draft -> Test
Test -> Live
This will be changed in future updates.
You can always preview the current version of the Test/Live page by clicking the icon at the right side of the dropdown.
Disabling a page is performed on each environment separately, so you can disable only the Live version of the page, while keeping the Test version active, however, if you choose to disable the Test version, the Live version will be automatically disabled as well.
