Модуль 8. Верстка лендинга в ZERO блоке

Функционал ZERO блока:

Базовые знания верстки и подготовка макета в Figma для верстки:

Чек-лист по подготовке макета к верстке:

Перенос макета из Figma в ZERO блок:

Анимация на Tilda:

Шаблон страницы анимации из урока: 14918502
Инструкция по триггерной анимации: https://tilda.cc/ru/lp/trigger...

Вдохновляющие примеры анимаций:

Модификации, работа с кодом:

Ссылки на источники модификаций:

https://tildoshnaya.com/modification
https://mo-ti.ru/
https://t.me/romanyutimods
https://romanyu.ru/
https://roman-kosov.ru/
https://michailozdemir.dev/

Чат, где можно тоже найти модификации и уточнить какие-то непонятные моменты у коллег: https://t.me/tildoshnayachat

Часто используемые модификации:
- Плавный скролл: https://tildoshnaya.com/modifi...
- Фиксированное меню zero block: https://roman-kosov.ru/tilda-zero-menu/. Обратите внимание, что с помощью этой модификации можно зафиксировать и мобильное меню, но в пункте var needMobile = false прописать значение параметра “true”.
- Прелоадер в zero-block: https://mo-ti.ru/preloader

Инструкция по кастомным кнопкам в формах zero-block:
В Тильде, к сожалению, пока не реализован ховер эффект для кнопки, принадлежащей форме в Зиро Блоке. Также нельзя задать межбуквенное расстояние в тексте кнопки, а также сделать какую-то необычную форму самой кнопки.'

Инструкция по применению:
1) Убираем визуальное отображение кнопки в форме в Зиро Блоке, для этого очищаем поля “BTN TITLE”, “BTN COLOR” и “BTN BG.COLOR”.
2) Добавляем кнопку отдельным элементом. Оформляем, настраиваем и размещаем её в нужном месте.
3) Добавляем блок T123 и заливаем в него скрипт:
<script>
    $(document).ready(function() {
    //При клике на нашу кнопку
    $('a[href="#sendmyform1"]').click(function(e) {e.preventDefault();
    $("#rec236686912 .t-submit").click();});});
</script>
4) Привязываем кнопку с скрипту, а скрипт к форме.
#sendmyform1 - задаем свою ссылку или используем эту же. Добавляем её в поле URL нашей кнопки в Зиро блоке.
#rec236686912 - задаем номер блока, в котором находится форма (в Зиро Блоке каждой форме присваивается id самого блока, таким образом, если создать в одном блоке 2 формы, то у них будет один и тот же номер, поэтому советуем придерживаться правила 1 зиро блок - 1 форма, в противном случае вы или клиент будете получать некорректную статистику).

Пример:
Клевая кнопка отдельным элементом - http://joxi.ru/1A5BK8xcbDv6Xr
Стремная кнопка, принадлежащая форме - http://joxi.ru/L21E6kzF0Rn3q2
Кастомный цвет бэкграунд в поп-апе на мобилке
Мягкий дизайн сайта Тильда может легко испортить своим черным брутальным бэкграундом поп-апа на мобильных устройствах, который нельзя поменять в настройках блока.
Чтобы решить проблему, можно либо не использовать поп-апы на мобилках, либо поменять цвет с помощью CSS:
1) Переходим в Настройки сайта > Еще > Пользовательские CSS-стили > Редактировать CSS
2) Заливаем код:
@media screen and (max-width: 560px) {
.t702 .t-popup__close {
background: #eee5dc;
}
}
#eee5dc - меняем на код нужного цвета.
3) Сохраняем, публикуем, проверяем.

Пример:
Дефолтный бэкграунд - http://joxi.ru/ZrJ9zwYtnwRY8A
Кастомный бэкграунд - http://joxi.ru/D2P9zwYtJqlGDA

Интеграция лендинга с Getcourse и создание меню в ZERO:

Бонус: Повтор крутого сайта известного бренда. Часть 1.

Повтор крутого сайта известного бренда. Часть 2. Скринкаст:

Дополнительные материалы:

Ссылка на сайт: https://www.champohaircare.com

Расширения для Google Chrome:
Линейка: https://chrome.google.com/webs...
Пипетка: https://chrome.google.com/webs...
Для скачивания с сайтов svg-элементов: https://chrome.google.com/webs...

Сервис для просмотра шрифтов: http://www.chengyinliu.com/wha...

задание

1) Перенесите макет сайта из Figma в ZERO блок.

2) Сделайте адаптацию сайта под мобильное устройство и планшет.