Перенос готового макета лендинга на Тильду через Zero Block, адаптация под три ширины

Заказчик пришёл с готовым макетом лендинга образовательной программы и попросил перенести его на Тильду один в один. Макет он прислал файлом, обычная вёрстка на HTML и CSS. Стандартные блоки отверг сразу, нужен был Zero Block и точное попадание в исходник, плюс три ширины экрана и рабочие формы заявки. Срок двое суток.

В макете около девяноста элементов. Расставить их мышкой в редакторе это несколько рабочих дней, и каждая следующая правка стоит столько же заново. Ещё одно условие - проект потом переезжает на его аккаунт, значит собирать надо так, чтобы дальше он правил тексты сам. Тильда у него платная, Zero Block откроется.

Геометрию оригинала снял прямо из браузера. Открыл макет локально и собрал координаты, кегли, цвета, переносы строк и отступы каждого элемента, отдельным замером для каждой точки перелома Тильды. По этим замерам генератор собирает содержимое Zero Block, а заливщик создаёт блоки на странице и пишет в них готовое. Макет сел точно, повторная сборка после правки занимает минуты.

Попутно пришлось разобрать внутреннюю механику редактора - каким запросом добавляется блок, как пишется его содержимое, где лежат поля адаптива и как страница публикуется.

Мест, где замер врёт, оказалось несколько. Шрифты Тильды чуть шире исходных, и текст, занимавший ровно строку, переносился, поэтому однострочным даю запас по ширине. Сетка Zero Block всегда 1200, а оригинал центровался в окне браузера, отсюда сдвиг в семь пикселей, сверять надо на ширине от 1200. Псевдоэлементы CSS в замеры не попадают вовсе, тире перед подзаголовком нарисовано стилем и добрано отдельной линией. Вертикальные разделители в CSS это границы блоков, в Zero Block узкая фигура, и на телефоне они обязаны ложиться горизонтально, иначе колонки складываются в столбец и выходят чёрные плашки. У формы своего текста нет, сопоставление элементов шло по текстам, и она молча пряталась на всех мобильных.

Шрифты назначил в настройках проекта. Пока этого нет, Тильда рисует системный serif и заголовок ломается на другое число строк. Формы подключил и проверил отправкой, проект передал на аккаунт заказчика.

Сверка не на глаз, а замером. На ширине 1440 из 78 сопоставимых элементов 76 совпали точно, расхождение до двух пикселей по осям и одинаковый кегль. Два отклонения объяснимы - там рамка сдвинута под тире, а плейсхолдер формы стоит выше на четыре пикселя. Мобильную сверил снимками на 480 - порядок блоков, карточки в одну колонку, разделители, форма с полями и выпадающим списком. Страница собрана за два дня и осталась редактируемой в Zero Block на стороне заказчика.