Переносим страницу с Тильды на сайт: наш опыт, сложности и советы

Экспортировать на свой движок собранную на конструкторе страницу да еще с адаптивной версткой и настроенными формами — значит сэкономить кучу времени и денег.

Мы тоже так думали. Поэтому, когда в рамках спецпроекта «Агентство в фокусе» взялись обновлять страницы, решили делать прототипы на Тильде. Привлекла возможность редактировать страницу в реальном времени и сразу тестировать отображение на нескольких платформах. Это должно было в несколько раз ускорить редизайн основных страниц сайта, но кое-что пошло не так…

Рассказываем, почему отказались от экспорта кода и в итоге верстали страницу с нуля.

В чем проблема

Мы изучили код на Тильде и решили, что скопировать его прямиком на сайт – плохая затея. В конструкторе куча стилей и классов, которых нет у нас.

Если внедрить стили с Тильды на сайт, в экспортированном коде будет сложно разобраться. Попытка отредактировать его станет испытанием для специалистов.

Код на Тильде минифицирован – там нет разрывов, лишних пробелов, отступов и некоторых других элементов, а имена переменных сокращены.

Минификация упрощает исходный код, но с такой страницей неудобно работать.

Представим, что мы хотим изменить дизайн страницы. Для этого надо разминифицировать код и разобраться со стилями, которые прописаны напрямую в атрибутах. Это займет кучу времени.

Сложно работать и с классами, названия которых в коде Тильды — бессвязный набор символов.

“product-class” понятнее, чем “r t-rec t-rec_pt_0 t-rec_pb_0”.

Код Java Script прописан непосредственно в html разметке страницы.

Даже замена изображений становится проблемой: верстальщику нужно разобраться с кучей картинок с однотипными названиями.

Что мы сделали

Мы поняли, что проще и быстрей сверстать все с нуля. Прототип на Тильде использовали как макет. Процесс прост:

• изучаем дизайн прототипа;
• верстаем то же самое на тестовой странице;
• разрабатываем новые виды форм;

• убираем недочеты;
• переносим все на боевую страницу.

До этого у нас были формы только одного типа – «Оставить заявку». Для этой страницы создали новую форму – «Получить чек-лист». Мы ввели в разметку специальный атрибут, который помогает скрипту определить, с какой формы идет заявка.

Получилось вот так.

Выводы

Конструкторы, в частности Тильда, отлично подходят для сбора прототипов и макетов. Но код на Тильде генерируют скрипты, и он непонятен для человека. Его сложно редактировать вручную.

Рекомендуем использовать функцию экспорта кода, когда основной сайт тоже разработан на Тильде.

В остальных случаях советуем верстать страницы вручную.

P.S. Мы не отказываемся от Тильды полностью — ее удобно использовать для решения других задач:

• Быстро набросать прототип, чтобы показать свое видение команде, дизайнеру, клиентам, руководству.
• Сверстать и перенести на сайт страницу, которая не должна соответствовать общему стилю сайта.

А еще мы верстаем в Тильде письма для email-рассылки, которую запускаем в Sendy.