|
Тильда — блочный конструктор для создания сайтов, лендингов, интернет-магазинов, портфолио и пр., не требующий навыков программирования
Научимся работать со стандартными блоками и ZERO
Экономьте время и деньги на исследованиях
Рассмотрим формы и подключим сервисы аналитики
Настроим анимации
(нажми на меня 👆 и увидишь настройки анимации для желтого кружка сверху, а их тут больше 10)
0 Регистрация
У тарифа Free очень много ограничений:

  • нет многих стандартных блоков
(в том числе форм)
  • нельзя подключить сервисы для аналитики (Яндекс.Метрику и пр.)
  • нельзя кастомить (коды для кастомизации блоков не будут работать)
0 Регистрация
Варианты:

  • Собрать страницу из того, что есть в стандартных блоках (формы работают в zero)
  • Подключить тариф Personal бесплатно после регистрации, уложиться в 2 недели
  • Купить тариф Personal на 1 месяц за 750р
1 Настройки сайта
Основные:

  • Главное (название и описание сайта)
  • Шрифты и цвета (можно настроить отдельно на странице)
  • Аналитика (счетчики для всего сайта)
  • Формы (какие сервисы подключены к приему заявок, помимо CRM Тильды)
2 Начало работы
Варианты:

👆
2 Начало работы. Настройки страницы
Основные настройки:
  • Заголовок и описание страницы (как будет написано, так будет и отображаться в поиске)
  • Адрес страницы
  • Бейджик сайта (тоже нужен для поисковой выдачи)
  • Скопировать страницу
  • Опубликовать страницу
  • Посмотреть (и вернуть) удаленные блоки
3 Работа со стандартными блоками

Какой-то заголовок

какой-то подзаголовок
Примеры стандартных блоков
(без кода, только стандартные настройки)
Плюсы и ограничения стандартных блоков
  • Продуманный дизайн
  • Почти отсутствует кастомизация блоков
  • Готовые адаптивы
  • Нельзя анимировать элементы
  • .
  • Оооочень много настроек
4 Работа с Zero-блоками
Инструкции по работе в zero от Тильды
Тултип
Вектор
Галерея картинок (слайдер)
Форма
Код
Видео
Кнопка
Фигура
Изображение
Текст
Элементы, которыми можно наполнить zero-блок
всплывающий текст
Кнопка
Tilda Publishing
Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Zero Block
create your own block from scratch
Импорт макета из Фигмы в Тильду
Ctrl+C
👆
👆
👆
👆
👆
👆
6. Вставляем url в поле «Layout url». Нажимаем «Import» и радуемся результату
👆
4. В открывшемся окне в поле «API TOKEN» вставляем токен из настроек Фигмы
Инструкция по интеграции с Figma
👆
👆
  1. Заходим в настройки в Фигме
5. Копируем адрес блока
  • кликаем на нужный блок
  • кликаем на кнопку «Share»
  • кликаем «Copy link»
3. Переходим в Zero-блок:
  • Нажимаем кнопку с 3 точками
  • В выпадающем окне нажимаем «Import from Figma»
2. Генерируем токен:
  • Во вкладке «Security» нажать «Generate new token»
  • В открывшемся окне пишем любое название (у меня «Tilda»
  • Копируем токен
5 Примеры анимаций
Инструкция по настройке триггерной анимации
Инструкция по настройке пошаговой анимации (step-by-step)
Инструкция по настройке базовой анимации
нажми на меня 👆
Каждый следующий элемент: delay +0.2
Новая акция
Новый сотрудник
Сотрудник уволился
Салон закрылся
Изменилась цена
Новая услуга
нажми на меня 👆
6 Формы
Инструкции по настройке форм
нажми на меня 👆
Sign up for a free lesson with one of our teachers
Meet the group, explore the school, and get a free consultation
Ответьте на 6 вопросов, чтобы запустить поиск вакансий
Укажите контактные данные, и мы свяжемся с вами
Вы трудоустроены?
По какой категории прав вы готовы работать?
Создайте свой первый сайт
Оставьте заявку, наш менеджер свяжется с вами и предоставит индивидуальное предложение.
6 Где живут заявки
👆
👆
6 Куда еще можно отправлять заявки
7 Аналитика
Инструкции от Тильды
7 Где смотреть статистику
👆
👆
7 Как подключить счетчики
👆
В настройках сайта, в разделе «Аналитика», ввести номер счетчика
Код счетчика находится в разделе «Настройки» самого счетчика
👆
На конкретную страницу, вставив скрипт самого счетчика в блок T123
Полезные ссылки
Бесплатные шрифты с легкой интеграцией в Тильду GoogleFonts
Бесплатная графика Unsplash и Freepik
За бесплатными модификациями и кодами сюда и туда
Инструкция по интеграции с Figma
Статья по созданию сайтов на Тильде
Бесплатный курс по созданию лендингов
За вдохновением сюда