Introduction to Design Editor
Design Editor Navigation
Top Bar
12min
The Top bar is located above all other panels and hosts project controls.
The left part of the Top bar is for:
- Go to dashboard or Project settings options. To open the menu, click on the Taptop logo. For more details about the Dashboard and project settings, see: link.
- Rename button. Set a new project name by clicking on the current project name.
- Builder to Preview switch options.
The central part of the Top bar is for:
- Create component button. The button allows you to create a component from an element or group of elements to be later used in your project. For more details about components, see: link.
- Zoom. Zoom allows you to change the Canvas display scale. You can select values from the proposed list ranging from 25% to 200%.
- Canvas width.
You can select from the following list of screen options:
- 1920px (Full HD)
- 1440px (Laptop extra-large)
- 1366px (Laptop large)
- 1280px (Laptop small)
- 1024px (iPad Pro)
- 768px (iPad)
- 414px (iPhone 6/7/8 Plus)
- 375px (iPhone X)
- 320px (iPhone 5/SE)
You can also set your own screen width.
- Breakpoints. Breakpoints feature allows you to set the screen sizes at which the elements arrangement on the canvas will change. This allows you to see how your web page is displayed on various devices. For more details, see: Website adjustment for various devices (link).
You can select from the following Breakpoints:
- Desktop - Base breakpoint
- Tablet - 991px and down
- Mobile landscape - 767px and down
- Mobile portrait - 478px and down
Or you can also add the following Breakpoints:
- 1280px and up
- 1440px and up
- 1920px and up
The right part of the Top bar is for:
- Undo and Redo buttons.
- Changes saved/Unsaved changes. This shows whether you’ve saved your latest changes or not.
- Copy HTML button. It allows you to copy the code of the current page for export.
- Publish project button. It allows you to publish your project on the Internet with the suggested domain address or to select your own.
Clicking on the Publish project button opens a pop-up window with the status of the published changes. To publish all the necessary web pages, you need to click on the Publish button next to each web page in the list of Unpublished changes. Clicking on the button will take you to the corresponding page.
Updated 05 Oct 2023
Did this page help you?