How to create a website with Taptop
Create a new project
-
Create a project: Dashboard > click the New project button in the upper right corner
-
Move to Design Editor
Build a website in 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:
-
Section to divide a page and create a structure
-
Container to align the content elements within a Section
-
Div Block to group the elements
Click the + button in the left panel > In the expanded Elements panel find the desired element and add it by clicking or dragging it on the Canvas
Add the required elements or widgets to the basic block
You can select:
- Text elements (Text, Text Link)
- Media elements
- Widgets (List, Block List, Menu, Forms and so on)
Click the + button in the left panel > In the expanded Elements panel find the desired element and add it by clicking or dragging it on the Canvass to the basic block
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)
-
Set styles to the element on the Styles tab in the right panel
Set visibility and position to the elements in the Display section
Adjust the size and space between elements in the Size section
Use the Background and Border sections to style the elements
Use the Text section to style the text
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
- Assign settings to it on the Settings tab in the right panel
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
Preview your project and publish it
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.
Customize your website and invite your team
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
-
Add custom domain
-
Upload favicon
-
Set up project access
-
Add custom code
