Для улучшения работы сайта и его взаимодействия с пользователями мы используем файлы cookie. Продолжая работу с сайтом, Вы разрешаете использование cookie-файлов.
Бредкумбс Taptop
Для редактирования обратитесь в отдел разработки
Taptop. Руководство пользователя
Ревизия 1.0
Оглавление
3. Рабочие области и типовой путь пользователя
3.1. Вход/регистрация
3.1.1. Регистрация аккаунта
3.1.2. Авторизация в аккаунте
3.1.3. Первый запуск
3.2. Панель управления
3.2.1. Назначение панели управления
3.2.2. Создание нового проекта
3.2.3. Создание сайта из шаблона
3.2.4. Создание сайта с нуля
3.3. Редактор дизайна
3.3.1. Верхняя панель
3.3.2. Панель Навигатор
3.3.2.1. Общие действия с Панелью Навигатора
3.3.2.2. Вкладка Элементы и Блоки
3.3.2.3. Вкладка Слои
3.3.2.4. Вкладка Компоненты
3.3.2.5. Вкладка Страницы
3.3.2.6. Вкладка Библиотеки
3.3.2.7. Вкладка Коллекции
3.3.2.8. Вкладка Ресурсы
3.3.2.9. Вкладка Академия
3.3.3. Холст
3.3.4. Панель Дизайна и Настроек
3.3.4.1. Вкладка Дизайн
3.3.4.2. Вкладка Настройки
1. Аннотация
Документ содержит описание основных возможностей и особенностей использования
программного обеспечения Taptop (далее также – ПО, платформа).
Вы также можете воспользоваться База знаний no-code платформы Taptop.
Обратите внимание, что доступная функциональность ПО может зависеть от
выбранного тарифа!
программного обеспечения Taptop (далее также – ПО, платформа).
Вы также можете воспользоваться База знаний no-code платформы Taptop.
Обратите внимание, что доступная функциональность ПО может зависеть от
выбранного тарифа!
2. Общие сведения о программном обеспечении
Taptop представляет собой программную платформу для создания, проектирования, редактирования, публикации и дальнейшего сопровождения сайтов. Платформа ориентирована на пользователей, которым требуется профессиональный инструмент веб-разработки с визуальным интерфейсом, позволяющий создавать сайты без обязательного самостоятельного написания программного кода, но с возможностью управления структурой, дизайном и техническими параметрами создаваемых веб-страниц.
Платформа создана как инструмент, сочетающий возможности визуального конструктора сайтов и профессиональной среды для веб-дизайна и веб-разработки. Taptop предназначен для разработки сайтов различной сложности, включая лендинги, корпоративные сайты, сайты-визитки, портфолио, сайты специалистов, образовательных проектов, организаций и иных пользователей, которым требуется самостоятельное или командное создание веб-проектов.
Ключевой особенностью платформы является сочетание визуального редактирования и технической гибкости: пользователь может проектировать сайт в редакторе дизайна, управлять HTML- и CSS-свойствами элементов, использовать виджеты, автолейауты и пользовательские компоненты, а также настраивать SEO, аналитику и интеграции с иными сервисами.
Платформа создана как инструмент, сочетающий возможности визуального конструктора сайтов и профессиональной среды для веб-дизайна и веб-разработки. Taptop предназначен для разработки сайтов различной сложности, включая лендинги, корпоративные сайты, сайты-визитки, портфолио, сайты специалистов, образовательных проектов, организаций и иных пользователей, которым требуется самостоятельное или командное создание веб-проектов.
Ключевой особенностью платформы является сочетание визуального редактирования и технической гибкости: пользователь может проектировать сайт в редакторе дизайна, управлять HTML- и CSS-свойствами элементов, использовать виджеты, автолейауты и пользовательские компоненты, а также настраивать SEO, аналитику и интеграции с иными сервисами.
3. Рабочие области и типовой путь пользователя
Типовой путь пользователя в Taptop можно представить как последовательность действий от входа в аккаунт до публикации сайта.
3.1. Вход/регистрация
3.1.1. Регистрация аккаунта
Для регистрации пользователь переходит на сайт Taptop - https://taptop.pro/, и нажимает кнопку «Зарегистрироваться».
Возможна регистрация по аккаунту Google, VK, Яндекс.
Возможна регистрация по аккаунту Google, VK, Яндекс.
Рис.1 Форма регистрации
При регистрации через внешний аккаунт регистрация выполняется автоматически, если аккаунт синхронизирован с браузером. Если аккаунтов несколько, пользователю предлагается выбрать нужный.
При регистрации по email, необходимо:
- указать имя и адрес электронной почты;
- перейти по ссылке из письма для подтверждения регистрации;
- получить письмо с паролем для авторизации и перейти в Панель управления Taptop.
При регистрации по email, необходимо:
- указать имя и адрес электронной почты;
- перейти по ссылке из письма для подтверждения регистрации;
- получить письмо с паролем для авторизации и перейти в Панель управления Taptop.
3.1.2. Авторизация в аккаунте
Для авторизации в аккаунте используется логин (e-mail) и пароль или соответствующий аккаунт Google, VK, Яндекс, по которому проводилась регистрация.
Рис.2 Форма авторизации
Для входа пользователь также может нажать кнопку «Создать сайт бесплатно».
3.1.3. Первый запуск
После входа пользователь попадает в Панель управления. Отсюда можно создать новый сайт, открыть существующий проект, перейти к настройкам профиля, командам и настройкам проекта.
Вы можете создать проект полностью самостоятельно или воспользоваться готовым шаблоном.
Вы можете создать проект полностью самостоятельно или воспользоваться готовым шаблоном.
3.2. Панель управления
3.2.1. Назначение панели управления
Панель управления — основная страница после входа в Taptop. В ней отображаются проекты пользователя, доступны создание нового проекта, переход к редактированию сайта, настройки профиля, настройки проекта и командная работа.
Рис.3 Пример отображения проектов и шаблонов в Панели управления
Что можно делать в Панели управления:
- Переключаться между командами и создать новые;
- Управлять настройками команды и ее участниками, подключать платные тарифы;
- Создавать проекты;
- Просматривать карточки ваших проектов, распределять проекты по папкам и переходить к их редактированию и настройкам;
- Открыть дополнительные ресурсы: Академию, Базу знаний, Роадмап, Партнерскую программу или Комьюнити;
- Обратиться в поддержку;
- Управлять настройками вашего профиля.
- Переключаться между командами и создать новые;
- Управлять настройками команды и ее участниками, подключать платные тарифы;
- Создавать проекты;
- Просматривать карточки ваших проектов, распределять проекты по папкам и переходить к их редактированию и настройкам;
- Открыть дополнительные ресурсы: Академию, Базу знаний, Роадмап, Партнерскую программу или Комьюнити;
- Обратиться в поддержку;
- Управлять настройками вашего профиля.
Видео: Что такое Панель управления.
3.2.2. Создание нового проекта
Если у вас еще нет ни одного проекта, то в Панели управления вам будет доступно три варианта создания сайта:
- Собрать из блоков – будет создан сайт на основе пустого шаблона, а редактор откроется в режиме наполнения;
- Создать с нуля - будет создан сайт на основе пустого шаблона, а редактор откроется в режиме дизайнера;
- Создать из шаблона – откроется маркетплейс с готовыми шаблонами.
- Собрать из блоков – будет создан сайт на основе пустого шаблона, а редактор откроется в режиме наполнения;
- Создать с нуля - будет создан сайт на основе пустого шаблона, а редактор откроется в режиме дизайнера;
- Создать из шаблона – откроется маркетплейс с готовыми шаблонами.
Рис.4 Создание первого сайта
Если проекты уже есть, то для создания нового нажмите кнопку «Создать сайт» в правом верхнем углу Панели управления:
Рис.5 Создание сайта
Далее выберите шаблон из маркетплейса или пустой шаблон для создания сайта с нуля.
Рис.6 Выбор способа создания сайта
Видео: Как создать и настроить проект.
Введите название проекта:
Рис.7 Окно выбора названия для нового проекта
Создайте проект и перейдите к редактированию в Редакторе дизайна.
3.2.3. Создание сайта из шаблона
При создании сайта из шаблона пользователь выбирает готовый шаблон, открывает его предпросмотр, после чего создает проект на основе выбранного шаблона. Созданный сайт появляется в Панели управления и может быть открыт для редактирования.
Рис.8 Маркетплейс Taptop
Чтобы быстрее выбрать подходящий шаблон, используйте фильтры: по категории, типу сайта, типу сборки (из блоков или дизайнерский). Также вы можете выбрать только сайты с анимацией и платные шаблоны:
Рис.9 Фильтрация шаблонов
Перед выбором шаблона вы можете заранее оценить его структуру: из каких блоков и страниц он состоит. Для этого наведите курсор на карточку шаблона и нажмите кнопку «Просмотреть» — ссылка откроется в отдельной вкладке:
Рис.9 Просмотр шаблона
После того как вы нашли подходящий шаблон, нажмите кнопку «Выбрать» на его карточке, выберите его название и завершите создание проекта, как описано в разделе 3.2.2.
3.2.4. Создание сайта с нуля
При создании сайта с нуля нужно выбрать «Пустой шаблон». Перед созданием проекта вы можете заранее указать режим, в котором откроется редактор после создания сайта: режим наполнения или режим дизайнера. Для этого кликните по выпадающему списку на кнопке «Создать сайт» и выберите нужный вариант. После этого нажмите на саму кнопку «Создать сайт», чтобы запустить процесс.
Рис.10 Выбор режима редактора при создании сайта
Дальнейшие шаги аналогичны созданию проекта из шаблона – введите название сайта и нажмите кнопку – «Создать сайт».
Новый проект открывается в редакторе в том режиме, который бы выбран при его создании (наполнения или дизайнера). При необходимости вы в любой момент можете переключить режим на верхней панели.
Новый проект открывается в редакторе в том режиме, который бы выбран при его создании (наполнения или дизайнера). При необходимости вы в любой момент можете переключить режим на верхней панели.
Рис.11 Переключение в режим дизайнера
3.3. Редактор дизайна
Открывая Taptop, вы автоматически попадаете на главную страницу со всеми проектами – Панель управления. Отсюда вы можете перейти к редактированию проекта. Для этого наведите курсор мыши на карточку проекта и кликните на кнопку «Редактировать сайт».
Рис.12 Переход к редактированию сайта
Визуально Редактор дизайна можно разделить на четыре блока:
- Верхняя панель
- Панель Навигатор (расположена слева)
- Холст (расположен по центу страницы)
- Панель Дизайна и Настроек (расположена справа)
- Верхняя панель
- Панель Навигатор (расположена слева)
- Холст (расположен по центу страницы)
- Панель Дизайна и Настроек (расположена справа)
Видео: Редактор дизайна.
3.3.1. Верхняя панель
Строка Верхней панели располагается над всеми остальными панелями Редактора дизайна и содержит элементы управления проектом
Рис.13 Верхняя панель
Верхняя панель используется для управления редактором и текущим проектом. Через нее пользователь переключает режимы, открывает предпросмотр, управляет публикацией, масштабом, устройствами отображения и другими параметрами рабочего пространства.
Видео: Верхняя панель.
3.2.2. Панель Навигатор
Панель Навигатора располагается в левой части Редактора дизайна. Она используется для добавления элементов, управления структурой страницы, компонентами, страницами, библиотеками, коллекциями, ресурсами и обучающими материалами.
Рис.14 Пример левой области редактора с панелью навигации и слоями
Панель можно свернуть, чтобы освободить больше места для Холста. В свернутом состоянии нужная вкладка открывается нажатием на соответствующую иконку, а затем закрывается при переходе на холст или правую панель.
3.3.2.1. Общие действия с Панелью Навигатора
Панель Навигатора постоянно находится слева от Холста и содержит вертикальный набор вкладок. Пользователь выбирает вкладку по иконке, после чего рядом открывается ее содержимое. Если панель свернута, она временно раскрывается при выборе вкладки и может закрываться при переходе на Холст или правую панель.
Рис.15 Панель Навигатора в левой части Редактора дизайна
3.3.2.2. Вкладка Элементы и Блоки
Вкладка открывается кнопкой «+» в верхней части Панели Навигатора. Она разделена на два раздела: Элементы и Блоки.
Рис.16 Открытие вкладки Элементы и Блоки в левой панели
Элемент можно добавить кликом по названию или перетаскиванием на Холст. Список элементов в группах можно сворачивать и раскрывать стрелкой рядом с названием группы.
На вкладке Блоки отображаются библиотеки, подключенные в проекте. Пользователь открывает библиотеку, выбирает блок и добавляет его на страницу перетаскиванием на Холст.
Вкладку Элементы и Блоки можно закрепить под вкладкой Слои. После закрепления пользователь быстрее переключается между слоями и добавлением элементов.
Пропорции областей Слои/Элементы меняются перетаскиванием разделительной линии; открепление выполняется крестиком справа.
На вкладке Блоки отображаются библиотеки, подключенные в проекте. Пользователь открывает библиотеку, выбирает блок и добавляет его на страницу перетаскиванием на Холст.
Вкладку Элементы и Блоки можно закрепить под вкладкой Слои. После закрепления пользователь быстрее переключается между слоями и добавлением элементов.
Пропорции областей Слои/Элементы меняются перетаскиванием разделительной линии; открепление выполняется крестиком справа.
3.3.2.3. Вкладка Слои
Вкладка Слои (Layers) показывает иерархический список всех элементов на странице в порядке их расположения на холсте. Чем выше элемент в списке, тем выше он располагается на странице сайта.
Рис.17 Пример структуры элементов во вкладке Слои
Для удобной структуры рекомендуется давать слоям названия по назначению: Header, Cover, About, Portfolio и аналогичные имена.
3.3.2.4. Вкладка Компоненты
На вкладке Компоненты находятся созданные в проекте компоненты. Компоненты позволяют переиспользовать одинаковые элементы и блоки в разных местах проекта.
Рис.18 Общий вид Редактора дизайна при работе с элементами и компонентами
Чтобы добавить компонент на страницу, выберите его во вкладке Компоненты и перетащите в нужное место на холсте.
Чтобы переименовать или удалить компонент, откройте контекстное меню правой кнопкой мыши.
Чтобы переименовать или удалить компонент, откройте контекстное меню правой кнопкой мыши.
3.3.2.5. Вкладка Страницы
Во вкладке Страницы отображаются все страницы проекта. Страницы делятся на обычные, CMS-страницы и системные.
Общий интерфейс редактора, из которого открываются страницы проекта
При создании проекта автоматически создаются главная страница, отмеченная иконкой «домик», а также системные страницы. Новая страница создается нажатием кнопки «+».
Сортировка недоступна для динамических и индексируемых страниц вне их папки, для главной страницы и для системных страниц; сортировка выполняется только внутри своей категории.
3.3.2.6. Вкладка Библиотеки
Библиотеки (Libraries) — наборы компонентов из проектов пользователя, проектов команды и библиотеки TBlocks. Объединение компонентов в библиотеку позволяет переиспользовать их в других проектах.
Во вкладке Библиотеки пользователь может создать библиотеку проекта из его компонентов и управлять подключением доступных библиотек команды.
Во вкладке Библиотеки пользователь может создать библиотеку проекта из его компонентов и управлять подключением доступных библиотек команды.
3.3.2.7. Вкладка Коллекции
Вкладка Коллекции (Collections) используется для работы с CMS-коллекциями проекта.
Коллекции позволяют быстро создавать большое количество однотипных страниц:
каталоги товаров или услуг, портфолио, блог и другие структуры.
Коллекции позволяют быстро создавать большое количество однотипных страниц:
каталоги товаров или услуг, портфолио, блог и другие структуры.
Рис.19 Доступ к вкладкам Навигатора и рабочей области редактора
3.3.2.8. Вкладка Ресурсы
Вкладка Ресурсы (Assets) — файловое хранилище проекта. В нем доступны файлы, загруженные в проект.
Рис.20 Пример выбора файла при работе с изображением
Файлы загружаются кнопкой «Загрузить» или перетаскиванием с компьютера на панель Ресурсы. Можно выбрать один или несколько файлов.
Файлы можно просматривать в узкой панели или широкой панели. Общее количество файлов отображается в нижней части панели. Фильтрация доступна по типу: все ресурсы, изображения, видео, документы. Для изображений и документов можно фильтровать по расширению. Поиск работает внутри категории по названию файла.
Файлы можно просматривать в узкой панели или широкой панели. Общее количество файлов отображается в нижней части панели. Фильтрация доступна по типу: все ресурсы, изображения, видео, документы. Для изображений и документов можно фильтровать по расширению. Поиск работает внутри категории по названию файла.
Изображения и видео можно использовать на странице двумя способами: перетащить файл из левой панели на холст или добавить через соответствующий виджет, дважды кликнуть по нему и выбрать файл в левой панели. Для файлов можно создать ссылку для открытия или скачивания и вставить ее в действие «Переход по ссылке».
3.3.2.9. Вкладка Академия
Вкладка Академия содержит обучающие видео. Пользователь может открыть обучающие материалы непосредственно из редактора, не выходя из проекта.
3.3.3. Холст
Холст располагается в центре страницы Редактора дизайна, занимая большую часть экрана. Это основная рабочая область, на которой создается страница сайта и размещаются все элементы, отображающиеся на сайте.
Рис.21 Холст
На холст добавляются элементы из вкладки Элементы, блоки, изображения, видео, виджеты и компоненты.
В верхней части Холста доступны режимы отображения для разных устройств: Desktop, Tablet 991px and down, Mobile landscape 767px and down, Mobile portrait 478px and down.
Для каждого режима можно задавать отдельные стили и параметры расположения.
Видео: Холст.
Для каждого режима можно задавать отдельные стили и параметры расположения.
Видео: Холст.
3.3.4. Панель Дизайна и Настроек
Панель Дизайна и Настроек расположена справа. Она меняется в зависимости от выбранного элемента и содержит вкладки Дизайн, Настройки и Анимации.
Рис.21 Вид панели Дизайна и Настроек
3.3.4.1. Вкладка Дизайн
С помощью параметров этой вкладки можно задать стили любому элементу сайта. Выбрав элемент на вкладке Слоев или на Холсте, вы можете увидеть на вкладке Дизайн заданные ему стили и изменить их.
С помощью опции Источники стилей можно настроить классы и состояния элемента. Классы в Taptop — это набор пользовательских стилей элемента или виджета. Они нужны для того, чтобы упростить процесс стилизации сайта.
Состояния нужны, чтобы стилизовать внешний вид элемента в зависимости от действий пользователя. Например, для установки разных стилей для кнопки при наведении на нее мыши и при клике по ней.
Существуют следующие состояния элемента:
- По умолчанию;
- При наведении;
- Активный;
- Фокус.
В настройках Размера можно установить ширину и высоту элемента, а также его минимальную и максимальную высоту и ширину:
Состояния нужны, чтобы стилизовать внешний вид элемента в зависимости от действий пользователя. Например, для установки разных стилей для кнопки при наведении на нее мыши и при клике по ней.
Существуют следующие состояния элемента:
- По умолчанию;
- При наведении;
- Активный;
- Фокус.
В настройках Размера можно установить ширину и высоту элемента, а также его минимальную и максимальную высоту и ширину:
Настройки расположения определяют, как элементы располагаются по отношению друг к другу:
Существует два типа отступов:
- Внешние отступы - определяют пространство между границами элемента и соседними с ним элементами. На Холсте обозначаются желтым цветом:
- Внешние отступы - определяют пространство между границами элемента и соседними с ним элементами. На Холсте обозначаются желтым цветом:
- Внутренние отступы - определяют пространство между границами элемента и его содержимым. На Холсте обозначаются зеленым цветом:
Можно установить Внешние и Внутренние отступы как со всех сторон, так и выборочно. Размер отступов может быть установлен автоматически auto или в px, %, em, rem, vh и vw.
Для форматирования Текста используются следующие параметры:
- Шрифт (Font)
- Толщина шрифта (Font weight)
- Размер шрифта (Font size)
- Цвет шрифта (Font color)
- Интерлиньяж (Line-height)
- Межсимвольное расстояние (Letter-spacing)
- Выравнивание текста (Text Align)
- Обводка (Text Stroke)
- Тени (Text Shadows)
- Дополнительные параметры текста (More Type Options): Оформление (Decoration), Прописные буквы (Capitalize), Перенос при переполнении (Overflow Wrap), Прерывание (Breaking)
Для форматирования Текста используются следующие параметры:
- Шрифт (Font)
- Толщина шрифта (Font weight)
- Размер шрифта (Font size)
- Цвет шрифта (Font color)
- Интерлиньяж (Line-height)
- Межсимвольное расстояние (Letter-spacing)
- Выравнивание текста (Text Align)
- Обводка (Text Stroke)
- Тени (Text Shadows)
- Дополнительные параметры текста (More Type Options): Оформление (Decoration), Прописные буквы (Capitalize), Перенос при переполнении (Overflow Wrap), Прерывание (Breaking)
Свойство Позиционирование дает возможность менять поток элементов на странице, сдвигая элементы или фиксируя их позицию. После того как задан тип позиционирования элемента, можно настроить параметры top (сверху), bottom (снизу), left (слева) и right (справа), определяющие координаты позиции элемента.
Существуют следующие типы позиционирования:
- Статическое позиционирование (Static)— стандартная позиция элемента, без смещения.
- Относительное позиционирование (Relative) — можно сдвинуть элемент относительно его исходной позиции, указав координаты.
- Абсолютное позиционирование (Absolute) — можно сдвинуть элемент относительно родительского элемента, указав координаты.
- Фиксированное позиционирование (Fixed) —можно зафиксировать позицию элемента, которая не будет менять при прокрутке страницы.
- Липкое позиционирование (Sticky) — в зависимости от положения прокрутки окна браузера элемент будет позиционирован фиксированно или относительно.
- В настройках Позиционирования также можно установить Z-индекс (Zindex), определяющий положение элемента на воображаемой оси z, проходящей внутрь и за пределы экрана вашего компьютера.
В разделе «Внешний вид» можно задать следующие параметры:
- Непрозрачность – определяет прозрачность элемента и его дочерних элементов;
- Радиус - установка значения радиуса закругления всех углов элемента или индивидуальный радиус для каждого угла;
- Переполнение - управление содержимым, выходящим за границы элемента при переполнении контентом;
- Фон и цвет фона – установка стилей фона. Можно добавлять несколько фоновых изображений, градиентов и цветовых наложений для создания многоуровневых эффектов. Для каждого слоя фона можно установить значение прозрачности. Также можно менять порядок фоновых слоев, перетаскивая их мышью, скрывать их или удалять;
- Границы – цвет, ширина и стиль границы. Можно установить границы элемента со всех сторон или выборочно.
- Эффекты - Для повышения интерактивности элемента можно применить фильтры, тени, трансформацию и другие эффекты. Например, добавить эффекты для элемента можно для состояния наведения курсора мыши или для любого другого состояния, выбрав его в списке состояний.
Существуют следующие типы позиционирования:
- Статическое позиционирование (Static)— стандартная позиция элемента, без смещения.
- Относительное позиционирование (Relative) — можно сдвинуть элемент относительно его исходной позиции, указав координаты.
- Абсолютное позиционирование (Absolute) — можно сдвинуть элемент относительно родительского элемента, указав координаты.
- Фиксированное позиционирование (Fixed) —можно зафиксировать позицию элемента, которая не будет менять при прокрутке страницы.
- Липкое позиционирование (Sticky) — в зависимости от положения прокрутки окна браузера элемент будет позиционирован фиксированно или относительно.
- В настройках Позиционирования также можно установить Z-индекс (Zindex), определяющий положение элемента на воображаемой оси z, проходящей внутрь и за пределы экрана вашего компьютера.
В разделе «Внешний вид» можно задать следующие параметры:
- Непрозрачность – определяет прозрачность элемента и его дочерних элементов;
- Радиус - установка значения радиуса закругления всех углов элемента или индивидуальный радиус для каждого угла;
- Переполнение - управление содержимым, выходящим за границы элемента при переполнении контентом;
- Фон и цвет фона – установка стилей фона. Можно добавлять несколько фоновых изображений, градиентов и цветовых наложений для создания многоуровневых эффектов. Для каждого слоя фона можно установить значение прозрачности. Также можно менять порядок фоновых слоев, перетаскивая их мышью, скрывать их или удалять;
- Границы – цвет, ширина и стиль границы. Можно установить границы элемента со всех сторон или выборочно.
- Эффекты - Для повышения интерактивности элемента можно применить фильтры, тени, трансформацию и другие эффекты. Например, добавить эффекты для элемента можно для состояния наведения курсора мыши или для любого другого состояния, выбрав его в списке состояний.
3.3.4.2. Вкладка Настройки
Вкладка Настройки позволяет установить для элемента дополнительные опции. Эта вкладка используется в основном для виджетов и помогает настроить их структуру и отображение при различных условиях и действиях пользователя.
Список параметров настройки зависит от типа элемента и необходимых ему опций.
Также для всех элементов на вкладке Настройки доступна установка параметра seo-индексации элемента:
Также для всех элементов на вкладке Настройки доступна установка параметра seo-индексации элемента:
4. Интеграции
Интеграции (Integrations) дают возможность подключить сторонние сервисы статистики и карт. Для подключения этих сервисов перейдите в Настройки проекта и выберите раздел Интеграции (Integrations).
4.1. Яндекс Метрика
Для того чтобы отслеживать статистику проекта, нужно добавить в настройки счетчик Яндекс Метрики.
Рис.22 Подключение Яндекс Метрики
1. В Яндекс Метрике— зарегистрируйте аккаунт, создайте в нем счетчик и скопируйте его ID. Подробнее:Создание счетчика Яндекс Метрики.
2. В настройках проекта в разделе Интеграции → Яндекс Метрика — вставьте ID счетчика в поле и нажмите кнопку Подключить.
2. В настройках проекта в разделе Интеграции → Яндекс Метрика — вставьте ID счетчика в поле и нажмите кнопку Подключить.
4.2. Карты Google и Яндекс
Для корректной работы виджета карт на сайте нужно добавить в настройки ключи API Яндекс карт или Google карт.
Рис.23 Подключение Google и Яндекс карт
Ключ API Google Карт:
Для создания ключа API Google Карт перейдите на Платформу Google Карт.
Чтобы использовать платформу Google Карт, у вас должен быть проект с платежным аккаунтом в Google Cloud Console. Для проекта требуется настройка оплаты, но вы будете платить только в том случае, если проект превысит свою квоту на бесплатные услуги.
Если у вас нет платежного аккаунта Google, вам будет предложено его создать.
Создайте и привяжите платежный аккаунт к нужному проекту.
После подключения платежного аккаунта на него каждый месяц будет начисляться 200 долларов для бесплатного использования API с запросами к картам, что включает в себя 28500 запросов к картам с вашего сайта. Если данный лимит будет исчерпан, то необходимо будет оплачивать использование API.
Подключив платежный аккаунт, вы можете сгенерировать ключ API для использования в проекте.
Ключ API Яндекс Карт:
Для создания ключа API Яндекс Карт перейдите в Кабинет разработчика Яндекс.
API Яндекс Карт можно использовать бесплатно, если соблюдать все условия, перечисленные в разделе Условия использования API Яндекс Карт. Если хотя бы одно из условий не выполняется, необходимо приобрести платную версию API.
Для создания ключа API Google Карт перейдите на Платформу Google Карт.
Чтобы использовать платформу Google Карт, у вас должен быть проект с платежным аккаунтом в Google Cloud Console. Для проекта требуется настройка оплаты, но вы будете платить только в том случае, если проект превысит свою квоту на бесплатные услуги.
Если у вас нет платежного аккаунта Google, вам будет предложено его создать.
Создайте и привяжите платежный аккаунт к нужному проекту.
После подключения платежного аккаунта на него каждый месяц будет начисляться 200 долларов для бесплатного использования API с запросами к картам, что включает в себя 28500 запросов к картам с вашего сайта. Если данный лимит будет исчерпан, то необходимо будет оплачивать использование API.
Подключив платежный аккаунт, вы можете сгенерировать ключ API для использования в проекте.
Ключ API Яндекс Карт:
Для создания ключа API Яндекс Карт перейдите в Кабинет разработчика Яндекс.
API Яндекс Карт можно использовать бесплатно, если соблюдать все условия, перечисленные в разделе Условия использования API Яндекс Карт. Если хотя бы одно из условий не выполняется, необходимо приобрести платную версию API.
4.3. Вебхуки: интеграция сторонних приложений
Webhook — это метод доставки данных между различными приложениями.
Механизм работает за счет функции обратных вызовов, таким образом вы можете получать данные из форм в своей системе.
Для подключения интеграции с вебхуками перейдите в Настройки проекта и выберите раздел «Интеграции» (Integrations).
Механизм работает за счет функции обратных вызовов, таким образом вы можете получать данные из форм в своей системе.
Для подключения интеграции с вебхуками перейдите в Настройки проекта и выберите раздел «Интеграции» (Integrations).
4.3.1. Получение данных из форм через Webhook
Нужно настроить URL-адрес, на который при изменении данных отправится HTTP-запрос.
Для настройки понадобится api-коннектор, например, Albato, Zapier, Make. Или вы можете использовать самописные системы.
В разделе «Интеграции» выберите в списке «Вебхуки» и нажмите «Добавить вебхук»:
Для настройки понадобится api-коннектор, например, Albato, Zapier, Make. Или вы можете использовать самописные системы.
В разделе «Интеграции» выберите в списке «Вебхуки» и нажмите «Добавить вебхук»:
Для интеграции c Taptop укажите ссылку на Webhook и выберите форму, из которой хотите получать данные. Сохраните изменения кликом по кнопке «Добавить».
Вы можете отредактировать или удалить интеграцию, нажав на три точки справа от вебхука.
С помощью вебхука передаются все созданные в форме поля, включая дату и время заполнения.
Больше информации о различных возможностях интеграции в Taptop читайте в нашей Базе знаний.
5. Коллекции (CMS)
В Taptop поддержана функциональность Коллекций (Collections) — это CMS или базы данных, которые помогают управлять однотипным контентом на сайте. С их помощью можно легко создавать сайты с большим количеством похожих страниц: каталог товаров, портфолио работ, блог, новости или список услуг.
Главное преимущество коллекций — автоматизация рутины. Вместо того чтобы создавать десятки похожих страниц вручную:
- создается дизайн всего для одной страницы;
- добавляется контент через обычную таблицу;
- готовые страницы получаются автоматически.
Например, при создании каталога товаров, достаточно один раз создать дизайн карточек и страницы товара. Дальше просто добавляются новые товары в таблицу — при этом в список товаров автоматически добавляются новые карточки, а для каждого товара создается отдельная страница с вашим дизайном.
В Taptop у вас есть полная свобода в оформлении — вы можете создать любой дизайн для элементов и страниц коллекции, а также легко его изменить в любой момент. Изменения автоматически применятся ко всем элементам и страницам.
Коллекция — это таблица, в которой вы создаете нужные поля и наполняете их данными. Данные из таблицы можно вывести в любых местах сайта. Когда вы будете добавлять, удалять или редактировать элементы коллекции, — данные автоматически обновятся на всем сайте.
Пример: Создав коллекцию «Услуги», вы будете управлять всеми данными о ваших услугах в одном месте. Вы сможете добавить новую услугу за пару кликов, обновить цены или изменить описания — и эти изменения автоматически появятся везде на сайте, где отображаются услуги.
Как это сделать?
Создаем коллекцию «Услуги» — добавляем в таблицу поля: «Название услуги», «Картинка» и «Стоимость».
Наполняем таблицу данными, добавляя нужные элементы. Например, «Разработка сайтов», Файл картинки, «100 000 руб.»
Добавляем на холст виджет Collection и привязываем его к созданной коллекции в Настройках — все элементы автоматически отображаются списком на холсте.
Таких списков можно добавить любое количество в любом месте сайта — все они будут автоматически обновляться при любых изменениях в таблице.
Данные из коллекции можно отображать тремя способами:
Список элементов коллекции в любом месте сайта.
Список элементов коллекции на отдельной индексируемой странице.
Динамические страницы — отдельная страница для каждого элемента.
Видео: Что такое коллекции и как создавать карточки товаров
Главное преимущество коллекций — автоматизация рутины. Вместо того чтобы создавать десятки похожих страниц вручную:
- создается дизайн всего для одной страницы;
- добавляется контент через обычную таблицу;
- готовые страницы получаются автоматически.
Например, при создании каталога товаров, достаточно один раз создать дизайн карточек и страницы товара. Дальше просто добавляются новые товары в таблицу — при этом в список товаров автоматически добавляются новые карточки, а для каждого товара создается отдельная страница с вашим дизайном.
В Taptop у вас есть полная свобода в оформлении — вы можете создать любой дизайн для элементов и страниц коллекции, а также легко его изменить в любой момент. Изменения автоматически применятся ко всем элементам и страницам.
Коллекция — это таблица, в которой вы создаете нужные поля и наполняете их данными. Данные из таблицы можно вывести в любых местах сайта. Когда вы будете добавлять, удалять или редактировать элементы коллекции, — данные автоматически обновятся на всем сайте.
Пример: Создав коллекцию «Услуги», вы будете управлять всеми данными о ваших услугах в одном месте. Вы сможете добавить новую услугу за пару кликов, обновить цены или изменить описания — и эти изменения автоматически появятся везде на сайте, где отображаются услуги.
Как это сделать?
Создаем коллекцию «Услуги» — добавляем в таблицу поля: «Название услуги», «Картинка» и «Стоимость».
Наполняем таблицу данными, добавляя нужные элементы. Например, «Разработка сайтов», Файл картинки, «100 000 руб.»
Добавляем на холст виджет Collection и привязываем его к созданной коллекции в Настройках — все элементы автоматически отображаются списком на холсте.
Таких списков можно добавить любое количество в любом месте сайта — все они будут автоматически обновляться при любых изменениях в таблице.
Данные из коллекции можно отображать тремя способами:
Список элементов коллекции в любом месте сайта.
Список элементов коллекции на отдельной индексируемой странице.
Динамические страницы — отдельная страница для каждого элемента.
Видео: Что такое коллекции и как создавать карточки товаров
6. Публикация и экспорт
6.1. Как опубликовать проект
Опубликовать проект можно:
- В Редакторе дизайна;
- В настройках Панели управления.
- В Редакторе дизайна;
- В настройках Панели управления.
6.1.1. Публикация проекта в Редакторе дизайна
При публикации проекта ваш сайт будет размещен в интернете в публичном доступе. Чтобы проверить, как сайт будет выглядеть, воспользуйтесь предварительным просмотром.
Для предварительного просмотра страницы кликните значок «глаза» на Верхней панели.
Для предварительного просмотра страницы кликните значок «глаза» на Верхней панели.
Рис.24 Кнопка предварительного просмотра
Рис.25 Предварительный просмотр страницы
В открывшемся режиме предварительного просмотра вы можете увидеть, как сайт выглядит на разных устройствах. Для этого выбирайте нужные брейкпоинты из выпадающего списка на Верхней панели.
Рис.26 Выбор разрешения для предварительного просмотра
Вы можете опубликовать сайт на поддомене Taptop или подключить пользовательский домен.
По умолчанию проект публикуется на поддомене Taptоp (например, https://название.taptop.site). Вы можете также подключить пользовательский домен. Для этого нужно перейти в Настройки проекта (Project settings) через меню в Верхней панели.
По умолчанию проект публикуется на поддомене Taptоp (например, https://название.taptop.site). Вы можете также подключить пользовательский домен. Для этого нужно перейти в Настройки проекта (Project settings) через меню в Верхней панели.
Для публикации проекта:
- Убедитесь, что ваш проект сохранен (на это указывает зеленая галочка).
Проект автоматически сохраняется каждые 10 секунд. Вы можете подождать автоматического сохранения или нажать Ctrl+S и проект будет сохранен:
- Убедитесь, что ваш проект сохранен (на это указывает зеленая галочка).
Проект автоматически сохраняется каждые 10 секунд. Вы можете подождать автоматического сохранения или нажать Ctrl+S и проект будет сохранен:
- Нажмите кнопку Опубликовать (Publish) на Верхней панели:
Переключите ползунок подключения к домену. Таким образом вы подключаете проект к домену, указанному в настройках в Панели управления (поддомен на Taptop или пользовательский домен):
Ниже отобразится список страниц, изменения по которым требуют публикации (Unpublished changes). Чтобы все необходимые страницы сайта были опубликованы, нужно нажать кнопку Опубликовать (Publish) рядом с каждой страницей в списке. При нажатии кнопки происходит переключение на соответствующую страницу:
Опубликуйте все необходимые страницы.
После публикации кликните по ссылке в разделе Место публикации, чтобы просмотреть опубликованный проект. -> После публикации кликните по ссылке, чтобы просмотреть опубликованный проект.
После публикации кликните по ссылке в разделе Место публикации, чтобы просмотреть опубликованный проект. -> После публикации кликните по ссылке, чтобы просмотреть опубликованный проект.
6.1.2. Публикация проекта в Панели управления
После публикации сайт будет размещен в интернете в публичном доступе. Проект может быть опубликован на поддомене taptop.site или на пользовательском домене.
В Панели управления отображаются карточки проектов. Если вы наведете курсор на кнопку открытия сайта на карточке, отобразится подсказка — опубликован он или нет. Если проект не был опубликован, кнопка будет серого цвета, если опубликован — синего:
В Панели управления отображаются карточки проектов. Если вы наведете курсор на кнопку открытия сайта на карточке, отобразится подсказка — опубликован он или нет. Если проект не был опубликован, кнопка будет серого цвета, если опубликован — синего:
Чтобы опубликовать проект, перейдите в Настройки проекта и переведите тумблер в поле Домен в положение «Опубликован».
Готово! Теперь сайт доступен для пользователей.
6.2. Экспорт кода
Для того чтобы экспортировать код проекта, нажмите кнопку </> (Экспорт кода) в правой части Верхней панели:
После этого откроется окно экспорта кода, в котором вы можете просмотреть HTML, CSS и JS код текущей страницы сайта, а также файлы, используемые на ней.
Для экспорта кода нажмите кнопку Подготовить ZIP (Prepare ZIP) и дождитесь подготовки архива с кодом. В архиве будет сохранен код всех страниц проекта.
Для экспорта кода нажмите кнопку Подготовить ZIP (Prepare ZIP) и дождитесь подготовки архива с кодом. В архиве будет сохранен код всех страниц проекта.
Перед тем, как экспортировать код, опубликуйте проект!
Когда архив будет готов, появится кнопка Скачать ZIP (Download ZIP), нажав на которую вы можете сохранить его на ваш компьютер.
Когда архив будет готов, появится кнопка Скачать ZIP (Download ZIP), нажав на которую вы можете сохранить его на ваш компьютер.
После того как вы скачали архив и распаковали его, код потребует ручной доработки для корректной работы вне нашей платформы. Обязательно проверьте:
- Пути к ресурсам: Относительные пути к изображениям, шрифтам, стилям и скриптам могут сбиться. Их нужно будет проверить в соответствии со структурой папок на вашем хостинге.
- Внешние зависимости: Убедитесь, что все используемые библиотеки (например, jQuery, React, Vue) подключены корректно и их версии совместимы.
- Абсолютные ссылки: Замените все абсолютные ссылки, ведущие на наш хостинг, на актуальные адреса вашего домена.
- Тестирование: Тщательно протестируйте сайт на локальном сервере перед загрузкой на боевой хостинг.
Рекомендуем привлекать к этой задаче веб-разработчика, если вы не обладаете соответствующими техническими навыками.
- Пути к ресурсам: Относительные пути к изображениям, шрифтам, стилям и скриптам могут сбиться. Их нужно будет проверить в соответствии со структурой папок на вашем хостинге.
- Внешние зависимости: Убедитесь, что все используемые библиотеки (например, jQuery, React, Vue) подключены корректно и их версии совместимы.
- Абсолютные ссылки: Замените все абсолютные ссылки, ведущие на наш хостинг, на актуальные адреса вашего домена.
- Тестирование: Тщательно протестируйте сайт на локальном сервере перед загрузкой на боевой хостинг.
Рекомендуем привлекать к этой задаче веб-разработчика, если вы не обладаете соответствующими техническими навыками.
© ООО "Мегагрупп-Дизайн", 2026 Документация "Taptop. Общее описание" является
объектом авторского права. Воспроизведение всего произведения или любой его части
воспрещается без письменного разрешения правообладателя.
объектом авторского права. Воспроизведение всего произведения или любой его части
воспрещается без письменного разрешения правообладателя.
Спасибо!
Форма отправлена
Форма отправлена
Что-то не так.
Попробуйте позже
Попробуйте позже