Лайфхаки верстки на Тильде: как ускорить процесс в 2 раза

Всякий раз, когда нам необходимо добавить текст на страницу, мы нажимаем заветную кнопочку с плюсиком, выбираем пункт «Add Text» и самозабвенно меняем параметры со стандартных на те, что нужно нам. И так для каждого, етижи-пассатижи, элемента! Так и хочется вспомнить мем с Ваасом про безумие.

Но что, если я вам скажу, что в нашей команде верстка на Тильде происходит не так? Что если я вам скажу, что сверстать блок можно быстрее. Раза в 2. Мы замеряли.

А вот как мы дошли до жизни такой, как быстро мы теперь верстаем и куда деваем всё освободившееся время — вы узнаете сразу после рекламы! прямо сейчас.

Один из основных принципов, который я усвоил за всё время работы — это копирование. Не чужих идей, Боже упаси. А своего результата работы. Копирование позволяет ускорить множество процессов. Не только в Тильде, но и вообще, в целом.

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

Ну, хорошо, а как использовать эти принципы к верстке на Тильде?

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

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

Скопированный элемент сохраняет в себе адаптацию. И при переходе на новое разрешение текст оказывается «где-то на странице». Особенно проблема актуальна для мобилок. Ведь там секция обычно высотой в 1000+ пикселей. И текст может находиться где-то там, внизу. Находить элемент не очень удобно.

Сейчас будет основной момент статьи. Он достаточно тяжкий для восприятия, но, если вы занимаетесь версткой на Тильде и вы его поймете, то вам будет хорошо.

Выше мы обозначили проблему. Скопированный элемент сохраняет в себе адаптацию. Это означает, что при перескакивании по разрешениям вниз, пункты X и Y, отвечающие за расположение, уже заполнены. Причем заполнены нами же, но ещё на этапе создания первоначального элемента.

Нам хотелось бы, чтобы текст вёл себя так, будто его только что создали. В этом случае поля пустые. И Тильда оставляет их на тех же координатах, на которых располагается элемент в большем разрешении.

А что, если на этапе создания первоначального элемента не заполнять поля, отвечающие за расположение в адаптации?

Что если мы создадим некий текстовый элемент, укажем все стили (в том числе и адаптационные), анимацию появления, но не поменяем расположение элемента в адаптации?

В таком случае при копировании элемента в новое место, поля расположения в адаптации всё ещё останутся пустыми. И Тильда расположит их на тех же самых местах.

То есть мы только что как будто создали элемент через оранжевую кнопку с плюсиком, но этот элемент уже имеет все необходимые нам стили и анимацию. Остается только заполнить сам текст, и правильно расположить элемент в адаптации. Всё.

То, что мы только что описали — это с одной стороны, принципы копирования и шаблонизации, а с другой — особенность работы Тильды. Как дальше использовать полученные знания — решаете вы. Мы же на основе этого коктейля создали метод Палитры, ставший стандартом работы в нашем агентстве. Суть метода в переиспользовании заранее созданных компонентов.

Это решение позволяет нам верстать до 2 раз быстрее. Вот результаты замеров:

Так же мы даем «Палитру» на нашем курсе. Самое частое прилагательное в обратной связи по этому методу — «гениальный».

Помимо этого, мы рассказываем о применении принципа копирования к другим задачам, стоящим перед верстальщиками. Как думаете, когда появился шаблон блока, в котором находится этот текст?) А ведь статей у нас много и верстаем мы их часто. Только представьте, сколько времени мы сэкономили!

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

Делимся опытом всей команды, так сказать.

В начале был задан вопрос о том, куда мы деваем свободное время. Ответ — работаем. Создаем больше классных проектов. Ведь чем меньше времени уходит на скучные задачи, тем больше времени остается на задачи интересные.

Ну, а я пошел работать дальше. Хорошего времени суток и удачи!