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