Дмитрий Гапонов › Nautisss
Сайты руками, боты и парсеры на Python, чертежи в AutoCAD
Рейтинг
5 442
№ 268 в каталоге
Отзывы
Профессионализм
10/10
Коммуникация
10 /10
На сайте с
2025 года
Юридический статус
Самозанятый

Перенос готового макета лендинга на Тильду через 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 на стороне заказчика.

Оценили проект:

Другие проекты

Все проекты →
Веб-разработка и IT Лендинг кухонь на заказ с квизом-расчётом: человек отвечает на пять вопросов и получает смету до замера
Лендинг кухонь на заказ с квизом-расчётом: человек отвечает на пять вопросов и получает смету до замера
7
Инженерия и Проектирование Ворота трансформаторной подстанции: чертёж КМ с фасадом, разрезами и спецификацией металла
Ворота трансформаторной подстанции: чертёж КМ с фасадом, разрезами и спецификацией металла
7
3D и Визуализация Штампы для кондитерки под 3D-печать: губы, сердце и надпись Love
Штампы для кондитерки под 3D-печать: губы, сердце и надпись Love
6
Веб-разработка и IT Магазин электроники на 800 тысяч товаров - товарные фиды, фильтр по характеристикам, ускорение
Магазин электроники на 800 тысяч товаров - товарные фиды, фильтр по характеристикам, ускорение
4