Верхняя панель

Строка Верхней панели располагается над всеми остальными панелями Редактора дизайна и содержит элементы управления проектом.

Видео: Верхняя панель

Левая часть Верхней панели

Переход к Панели управления (Go to dashboard) или к Настройкам проекта (Project settings)

Меню открывается по клику на логотипе Taptop.

Переименование проекта (Rename)

По клику на текущее название проекта можно задать ему новое название.

Переключение режимов работы Редактора

Можно переключаться между Режимом клиента (Client mode), Режимом дизайнера (Design mode) и Режимом предварительного просмотра (Preview).

Центральная часть Верхней панели

Создание компонента (Create component)

Позволяет создать компонент из элемента или группы элементов для последующего использования в проекте. Подробнее о компонентах —

Масштаб (Zoom)

Масштаб управляет тем, как холст отображается на экране. Он не изменяет реальные размеры макета, а лишь меняет масштаб отображения, чтобы было удобно работать с макетом или увидеть всю страницу целиком.

Можно выбрать значение из предложенного списка или ввести свое значение в пределах от 25% до 200%, а также включить опцию Автомасштаб (Autofit).

Горячие клавиши для работы с масштабом:

Автомасштаб (Autofit)

Автомасштаб — это режим, при котором масштаб холста автоматически подстраивается под доступную ширину рабочей области. Автомасштаб включен по умолчанию при открытии редактора.

Как работает Автомасштаб

Холст автоматически занимает всю доступную ширину, масштаб при этом старается принимать значение 100%.

Если холст не помещается в рабочую область, то масштаб примет значение меньше 100%, чтобы холст занял всю доступную ширину.

При переключении брейкпоинтов система автоматически подбирает не только масштаб, но и оптимальное разрешение холста (для Базового брейкпоинта).

Чем удобен Автомасштаб

Экономия времени: при смене брейкпоинта или разрешения экрана вам не нужно вручную растягивать холст, если остается свободное место. Или же, когда нет свободного места, не нужно вручную подгонять масштаб.

Автоматизация работы: вы включаете автомасштаб, вводите нужное разрешение экрана — и масштаб подгоняется автоматически.

Как включить/отключить Автомасштаб

Включить: выберите Автомасштаб в списке выбора на верхней панели или нажмите горячие клавиши Ctrl + 2 (Windows) / Cmd + 2 (macOS).

Отключить: повторите те же действия, что и при включении, или смените масштаб вручную — например, с помощью колесика мыши или горячих клавиш Ctrl + «+/–» (Cmd + «+/-»).

Как работает автомасштаб в Режиме клиента

Автомасштаб всегда включен без возможности отключения.

Управление масштабом (дропдаун, горячие клавиши) недоступно.

Это сделано для того, чтобы клиенты не сталкивались с лишними настройками и всегда видели холст в максимально удобном для работы с контентом масштабе.

Ширина холста (Canvas width)

Фактическая ширина макета в пикселях, в которой располагаются элементы сайта.

Можно ввести свое значение или выбрать из предложенного списка следующие параметры экранов:

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)

Брейкпоинты (Breakpoints)

Позволяет установить размеры экрана, при которых будут меняться стили элементов. Это дает возможность сделать несколько вариантов отображения сайта, обеспечив таким образом его адаптивность для различных устройств. Подробнее —

Доступны следующие Breakpoints:

Компьютер — Базовый breakpoint (Desktop — Base breakpoint)

Планшет — 991px и меньше (Tablet — 991px and down)

Мобильный телефон горизонтальный режим — 767px и меньше (Mobile landscape — 767px and down)

Мобильный телефон портретный режим — 478px и меньше (Mobile portrait — 478px and down)

Нажав кнопку Добавить большие брейкпоинты, можно также добавить дополнительные брейкпоинты:

1280px и больше (1280px and up)

1440px и больше (1440px and up)

1920px и больше (1920px and up)

При переключении брейкпоинта ширина холста также меняется на значение, соответствующее этому брейкпоинту, чтобы показать макет в нужном размере.

Правая часть Верхней панели

Кнопки Отменить (Undo) и Повторить (Redo) последнее действие

Статус сохранения изменений (Changes saved/Unsaved changes)

Показывает, сохранены или не сохранены последние изменения.

Экспорт кода

Позволяет скопировать код текущей страницы для экспорта.

Публикация проекта (Publish project)

Позволяет опубликовать проект в Интернете с предложенным адресом домена или выбрать для публикации свой домен.

При нажатии кнопки публикации проекта открывается всплывающее окно, в котором отображается статус опубликованных изменений. Чтобы все необходимые страницы сайта были опубликованы, нужно нажать кнопку Опубликовать (Publish) рядом с каждой страницей в списке неопубликованных изменений (Unpublished changes). При нажатии кнопки происходит переключение на соответствующую страницу.