How to create a website with Taptop
- Move to Design Editor
Build a website in Design Editor by adding the required elements on the Canvas, assigning styles to them, and customizing extra settings.
Add a basic block on the Canvas
To structure and arrange the elements on a website in a convenient way, use the basic structural blocks in the Layout section:
Add the required elements or widgets to the basic block
You can select:
Example: Let's create the ‘About company’ block with a title, text, and image. To do this, add a Container to the Section, and then two Div blocks to the Container. Add two Text elements to the first Div Block and an Image to the second Div Block.
The hierarchical structure of the elements added to the page can be seen on the Layers tab in the left panel.
The structure is also displayed at the bottom of the page in breadcrumbs.
Add content to the text elements.
To display the borders of elements, turn on their rulers by pressing Shift + O
Style the elements
- Add an element (on the Canvas or on the Layers tab in the left panel)
Use the Effects section to add visual effects
Consistently add the required elements on the Canvas and set their styles
Drag and drop items on the Canvas from the Insert tab in the left panel and set styles to them on the Styles tab in the right panel. Place each part of the page in a separate Section.
Style interactive elements on different states
We recommend to set styles on different states (for example Hover) to interactive elements (for example buttons or menu items).
- Select an element
- Select the desired state in the State section on the Styles tab
- Set the desired styles to this state in the appropriate sections on the Styles tab (for example, add the Drop shadow effect to an Image)
Assign settings to the elements that need additional options
- Select an element
For example, you can change the structure of a menu or control the display of the Block List elements.
Customize your website for different devices
Customize your website for different devices to make it user-friendly for any display. To do this, you need to set different styles to the elements for each Breakpoint.
- Switch to the desired Breakpoint on top of the Canvas (Tablet, Mobile Landscape, Mobile Portrait)
- Style elements for the selected Breakpoint in the relevant sections on the Styles tab (for example, size, position, paddings and margins, number of elements in the List, and others)
- Repeat steps for different Breakpoints as needed
To preview your website, click on the “eye” icon on the Top Bar.
To publish your project:
- Make sure you have saved it (find a green check mark). The project is automatically saved every 10 seconds. You can wait for automatic save or press Ctrl+S to save the project.
- Click on Publish on the Top Bar.
- Toggle the slider to connect your project to domain specified in the settings in the Control Panel. By default, the project is assigned a subdomain on the Taptop domain. However, you can also connect to a custom domain.
- A list of pages with Unpublished changes is displayed below. In order for all the necessary web pages to be published, click on the Publish button next to each page in the list. Clicking the button will take you to the corresponding page.
- After publishing, click on the link in the Publish destination section to view the published website.
To customize a project and invite a team, move to Dashboard.
Invite peers to your team
On the right side of the Dashboard, click on the Invite members button.
You can add and remove team members, assign them roles and define project access rights.
Set up your project
Open the project settings by clicking on the three dots and selecting Settings from the menu.
In Settings you can:
- Change website name
- Upload favicon
