Дмитрий Гапонов › Nautisss
Сайты руками, боты и парсеры на Python, чертежи в AutoCAD
Рейтинг
16 250
№ 60 в каталоге
Отзывы
Профессионализм
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 Лендинг походного клуба: маршруты по Кавказу, Алтаю и Камчатке с подбором группы под человека
Лендинг походного клуба: маршруты по Кавказу, Алтаю и Камчатке с подбором группы под человека
22
Веб-разработка и IT Лендинг на Тильде для компании по монтажу отопления - сборка, мобильная версия, метрика
Лендинг на Тильде для компании по монтажу отопления - сборка, мобильная версия, метрика
38
Веб-разработка и IT Защита формы заявок от бота без капчи - одноразовый токен, приманка и отсечка по времени
Защита формы заявок от бота без капчи - одноразовый токен, приманка и отсечка по времени
24
Маркетинг и Продвижение Карточка организации и рекламный кабинет детейлинга - прайс, фото, объявления, витрина
Карточка организации и рекламный кабинет детейлинга - прайс, фото, объявления, витрина
28