За последний год через мои руки прошли два десятка лендингов на Тильде. Некоторые я собирал сам, в некоторых помогал со сложными местами, за некоторыми просто наблюдал. Первые страницы выглядели скучно: я использовал стандартные блоки и боялся экспериментировать. Со временем разобрался с тонкостями дизайна и с тем, как устроен код Тильды и как можно на него влиять.
Этот разбор поможет тем, кто работает с Тильдой, но использует только стандартные инструменты и либо боится, либо не знает, как расширять конструктор своими стилями и скриптами. Оказывается, не нужно быть разработчиком или изучать языки программирования, чтобы делать важные мелочи лучше.
Код в примерах может быть неидеальный, а объяснения — содержать технические неточности. Важно, что это не очередной урок про устройство интернета, а небольшой гайд, как я выжимаю максимум из Тильды без полноценного знания вёрстки.
Зачем это нужно
С помощью простых решений я могу делать элементы, которые не соберёшь на стандартных блоках. Например, вот эта кнопка — наведите на неё мышкой или пальцем.
Кнопка увеличивается. Так не получится сделать простыми настройками блока: можно поменять цвет или тень, но не размер при наведении. Чтобы добавить этот эффект, напишем несколько строчек кода.
<style>
.t142__submit {
transition: all 400ms ease;
}
.t142__submit:hover {
transform: scale(1.1);
}
</style>Что это значит: начали добавлять стиль. Для всего с классом .t142__submit — все переходы между состояниями должны быть плавными и длиться 400 миллисекунд. Для всего с тем же классом при наведении — увеличить в 1,1 раза. Закончили добавлять стиль.
Тильда — гибкий инструмент и позволяет реализовать почти любую задумку. Почти — потому что иногда натыкаешься на ограничения: блокам нельзя поставить произвольную ширину, у элементов управления нельзя поменять цвет, карточки ведут себя не так, как тебе нужно.
Своим кодом можно менять цвета и поведение элементов, добавлять интерактивность и сложную логику. А чтобы написать простой код, вообще не нужно уметь программировать — достаточно уметь пользоваться поиском и понимать основы вёрстки.
Немного про вёрстку
Если HTML и CSS вас не пугают и вы знаете, зачем нужны классы и айди, этот раздел можно пропустить — дальше будут примеры.
Вёрстка страницы — это просто работа с объектами, которые на ней расположены: заголовки, текст, изображения. С помощью кода мы говорим им, что они должны содержать, как выглядеть и как себя вести. Обычно за это отвечают HTML, CSS и JavaScript.
HTML — базовый язык разметки. Им задают объекты на странице, их расположение и наполнение: размечают текст на заголовки и абзацы, расставляют ссылки, определяют положение картинок. Например, создадим текст в абзаце. Абзац в HTML — это p, paragraph.
<p>Какой-то текст</p>С помощью стилей можно менять отступы, размер, цвет, тень, размытие объектов. Иногда для удобства стили выносят в отдельный файл, но можно оставлять их прямо внутри HTML — так и будем делать в примерах. Например, добавим для абзаца стиль «цвет текста — красный».
<style>
p { color: red; }
</style>JavaScript помогает делать страницу интерактивной: добавлять анимацию и эффекты, задавать правила поведения для кнопок. В примерах ниже мы его рассматривать не будем, но принцип такой же — находим подходящее решение и используем в своих целях.
Итого: есть объекты, у объектов — визуальные свойства. А ещё они могут вести себя нестандартно. Вёрстка — это просто способ задать объект и определить ему свойства. Например, сказать, что текст в абзацах должен быть чёрным, а заголовок первого уровня — красным.
<style>
p { color: black; }
h1 { color: red; }
</style>Иногда не нужно менять цвет во всех абзацах. Тогда какому-то абзацу задают класс — специальное обращение. Если задать свойство только для класса, оно применится только к объектам с этим классом. Класс можно назвать как угодно.
<style>
p.superclass { color: red; }
</style>Вместо класса можно использовать айди. В целом разницы нет, но класс обычно используют для объектов, которые могут быть в разных местах, а айди — для отдельного блока, который нужно поменять. Класс задаётся через точку: .superclass. Айди — через решётку: #superId.
Если провести простую аналогию, то в обычной школе объект — это все мальчики в параллели девятых классов. Класс .Вася — это мальчики по имени Вася. А айди #9Б — мальчики из 9 «Б». Можно вызвать к директору всех мальчиков из параллели, всех Вась, всех из 9 «Б» или всех Вась из 9 «Б».
Начинаем эксперименты
Это ты меня сейчас учить программировать будешь что ли? Хехе, ну давай-давай.
Нет, речь о программировании и даже о полноценной вёрстке не пойдёт. Просто будем разбираться, как использовать абстрактный код в своих целях.
У кода на Тильде есть своя специфика, но чтобы вносить изменения, достаточно пары простых правил.
У разных блоков структура заметно отличается: где-то кнопка — это
button, а где-тоshape. С одной стороны, задать общие правила сложнее; с другой — проще работать с каждым отдельным элементом и не бояться, что что-то сломается.Каждый блок имеет свой айди. Удобно, если блоков одного типа много, а изменить нужно только один. Например, несколько заголовков, из которых покрасить в серый нужно один.
Теперь смотрим на опубликованной странице с помощью инспектора, как обратиться к нужному объекту, и пишем свои правила. В большинстве браузеров инспектор открывается на cmd/ctrl + alt + i; в Safari сначала нужно включить режим разработчика — есть инструкция от Apple.
Кейс первый: цвет чисел у ползунка
Мы хотим сделать форму, в которой пользователь выбирает числовое значение из диапазона: количество гостей, бюджет на проект или размер квартиры. Я убрал лишнее и оставил только ползунок из блока BF204N.
Незадача: в настройках блока нельзя поменять цвет чисел по краям ползунка — единицы и десятки. Отдельного поля нет, а другие меняют что угодно, кроме нужного объекта. Исправим это тремя строчками, которые добавим в блок T123.
<style>
#rec87327946 .t-descr_xxs { color: red; }
</style>Что здесь произошло. <style> — тег, в котором мы задаём свой стиль. t-descr_xxs — класс у чисел в ползунке. #rec87327946 — айди блока, к которому применяем изменения. Если айди не указать, стиль применится ко всем числам во всех ползунках, а нам нужно было оставить первый неизменным.
Откуда я взял нужный класс и айди блока? В этом поможет инспектор: выбираем нужный объект и смотрим класс.
Айди блока можно посмотреть прямо в интерфейсе Тильды: нажать настройки блока и промотать в самый конец.
То есть мне не нужно проходить двухмесячный интенсив и делать двадцать абстрактных заданий, чтобы поменять цвет текста или добавить эффект к кнопке?
Именно так. Конечно, таким образом не получится создать своё приложение, но связки «готовый инструмент как основа плюс немного стилей и кода для его расширения» хватит для большинства бытовых задач.
Кейс второй: карточка с эффектами
Попробуем что-то посложнее. Например, хотим сделать вот такую карточку в Zero Block.
При наведении на неё происходит несколько событий: изображение на фоне увеличивается на 10 процентов и слегка размывается, края размытого изображения остаются в рамках карточки, под карточкой плавно появляется тень.
Код получается большой, но бояться его не стоит: всё это можно просто скопировать и вставить без изменений в свой проект. Не забудьте только добавить айди блока, если эффект нужен не всем объектам. Разберём основные моменты.
Первое: мы обращаемся к изображениям в нужном классе. Эта анимация сложнее, чем увеличение кнопки, поэтому описываем, как ведёт себя картинка в принципе, при наведении и после наведения. Так получается плавный переход. То же самое делаем и для тени.
<style>
.t396__artboard img { filter: blur(0px); transform: scale(1); }
.t396__artboard img:hover { filter: blur(10px); transform: scale(1.1); }
.t396__elem { box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.t396__elem:hover { box-shadow: 0 5px 20px rgba(0,0,0,.4); }
</style>Второе: нужно, чтобы изображение оставалось в рамках контейнера, когда оно увеличивается и размывается.
<style>
.tn-atom { overflow: hidden; }
</style>Третье: Тильда не может объединить наложенные друг на друга объекты в один, поэтому текст поверх изображения и само изображение конструктор считает отдельными объектами. Если навести на текст, эффект пропадёт. Нам такого не нужно, поэтому делаем текст невидимым для мыши.
<style>
[data-elem-type="text"] {
pointer-events: none;
box-shadow: none !important;
}
</style>Ааааа! Но это очень сложно откуда ты это взял тебе это точно программисты написали ты на самом деле врёшь и прошёл все курсы во вселенной боже мой сколько букв-то здесь
На самом деле весь код я скопировал из ветки на Stack Overflow — это что-то вроде «Ответов Мейл.ру» для разработчиков. Кто-то оставил вопрос, как сделать анимацию тени и размытия плавными, а я просто скопировал ответ. Я даже не знаю, оптимальное ли это решение, но оно решает мою задачу.
Для примеров докручивания Тильды есть отдельный портал: авторы выкладывают много решений разных задач. Мне приходилось использовать калькулятор, ставить видео на фон в Zero Block, добавлять шестой таб в блок, где из настроек можно сделать только пять. Кнопку в начале материала я тоже собрал по решению оттуда.
Если устали от ограничений Тильды, но боитесь делать сложные штуки, рекомендую начать с такого.
Немного занудства напоследок
Видеть результат работы кода на боевых страницах — кайф. Для решения таких задач не нужно изучать программирование, типы данных, алгоритмы и функции. Это как учить английский по играм и сериалам: сноб будет водить носом от вашей грамматики, но спросить дорогу и договориться в магазине вы сможете.
Когда я использовал первые стили и скрипты, я не понимал, что делают восемьдесят процентов строчек кода, но мне это и не было нужно. А с каждой следующей задачей я разбирался чуть лучше. Скорее всего, все вопросы, которые у вас возникнут, кто-то уже разобрал на Stack Overflow.
Это относится не только к вёрстке — я использую скрипты для гугл-таблиц и пытаюсь писать бота. При этом у меня нет технического образования и я не прошёл до конца ни один курс по разработке. Даже больше: я три раза начинал изучать вёрстку, два раза JavaScript, один раз Python и ещё два раза SQL. И ни один из этих курсов не прошёл даже наполовину.
Если вы не разработчик и не видите своего будущего в мире программирования, то не нужно учить языки — нужно учиться решать задачи. А для этого хватит связки: поиск, Stack Overflow и справочники по HTML, CSS и JavaScript. Мне кажется, такой подход работает лучше большинства курсов — он приземлён к конкретной проблеме, а не описывает абстрактные варианты.
Фото Барсика приобретено через GettyImages, владелец фото — Westend61. Ползунок и карточка из примеров жили на Тильде и сюда не переехали: здесь остался разбор и код.