Как задать класс в тильде
Перейти к содержимому

Как задать класс в тильде

  • автор:

Добавление CSS класса к любому элементу в Zero Block

Новый функционал в Зеро Блок позволяет добавлять индивидуальные стили ко всем элементам: текст, фото, шейп, кнопка.

Для того, чтобы добавить стиль к элементу нужно:
1. Зайти в Зеро Блок
2. Добавить любой элемент
3. Нажать на него правой кнопкой мыши
4. Нажать на Add CSS Class Name
5. Справа в меню указать название класса
6. Добавьте стиль в HTML блок или в индивидуальный CSS в общих настройках сайта

Как задать класс в тильде

25 ФЕВРАЛЯ 2022
CSS-класс для блоков

В настройках блоков появилась возможность задавать CSS-класс. Эта функция позволит удобнее работать с модификациями: вы задаёте класс блоку и указываете его название в html-коде.

Примеры и пошаговая инструкция, как применить новую функцию.

Градиент на текстовом блоке

Renner Yoga offers unique yoga classes for people of all skill levels. We will introduce you to a new way of life and feelings.

Как сделать

1 шаг
Добавьте блок с большим текстом, например, AB501.

  • Откройте настройки блока, нажмите Добавить CSS Class Name;
  • Задайте название класса, например, uc-about.
  • Добавьте блок T123 HTML-код;
  • Скопируйте код ниже и вставьте его в блок T123.
  .uc-about .t-title 

→ Сохраните изменения и опубликуйте страницу

Часто задаваемые вопросы

Найти ID блока очень просто — зайдите в настройки блока и промотайте вниз. В последней строке и будет ID конкретного блока. Выглядит он примерно так: #rec123456789 .

Также можно найти ID через просмотр HTML-кода страницы. Подробнее об этом смотрите в видео выше.

Как найти ID блока

Как найти ID блока

  1. Щёлкните правой кнопкой мыши на элементе.
  2. Выберите «Показать код» (или «Проверить объект» — в разных браузерах по-разному).
  3. Скопируйте первый из классов.

Как найти class элемента

Как найти class элемента

P. S. Если у вас в контекстном меню не отображается пункт «Проверить код», зайдите в настройки браузера и включите меню «Разработка».

Как включить меню «Разработка» в Safari

Как включить меню «Разработка» в Safari

Как добавить class целому блоку?

  1. Заходим в настройки блока.
  2. Проматываем все настройки вниз.
  3. Над ID блока видим надпись «Добавить CSS Class Name».
  4. Жмакаем по ней.
  5. Вписываем свой класс, начиная с «uc-» .

Как добавить class целому блоку

Как добавить class целому блоку

Как добавить class элементу в Zero-блоке?

  1. Добавьте любой элемент в Zero-блок.
  2. Нажмите на него правой кнопкой мыши.
  3. В появившемся контекстном меню выберите «Add CSS Class Name».

Нажмите правой кнопкой мыши на элемент в Zero-блоке и выберите «Add CSS Clas Name».

Нажмите правой кнопкой мыши на элемент в Zero-блоке и выберите «Add CSS Clas Name»

Можете называть класс как захотите, но лучше не начинать с «t-» или «tn-», т.к. под такое начало зарезервированы классы тильды. И, даже, если сейчас такого класса нет, не факт, что он не появится в будущем.

В настройках элемента появится новый раздел. Впишите сюда название класса.

В настройках элемента появится новый раздел. Впишите сюда название класса

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

Почему блоки T123 со скриптами лучше всего размещать в футере?

Браузер «читает» вашу страницу сверху вниз. Соответственно, если он видит в скрипте элемент (например, какой-то блок, к которому вы обращаетесь в скрипте), который браузер ещё не видел на странице, скрипт не выполнится, т.к. браузер уже хочет выполнить скрипт, но ещё не знает о каком элементе идёт речь.

Поэтому лучше всего размещать скрипт под элементами, с которыми он взаимодействует или вообще в футере сайта. Первый вариант удобнее, т.к. пользуясь таким правилом, вы будете помнить, что скрипт относится к блоку (-ам) над ним. Однако, размещая скрипт в футере вы точно избежите проблем, которые могут возникнуть.

Где хранить изображения и как получить на них ссылки

Есть один лайфхак. Если вы не хотите пользоваться специализированными сервисами, то прозе всего загрузить изображения в любой блок с изображениями на Тильде. Это может быть как блок с одним изображением (IM01), так и любая галерея.

Заходите в «Контент», загружаете нужные изображения, сохраняете блок, после чего снова нажимаете «Контент», копируете все ссылки (щёлкаете правой кнопкой мыши по ссылке и выбираете «Скопировать адрес ссылки»). После чего смело удаляете блок. С вашими изображениями ничего не случится, они будут храниться на Тильде.

Как скопировать N ссылок на изображения?

Если вам для какой-то задачи нужно залить на Тильду этим методом очень много изображений и скопировать все ссылки на них, то не пугайтесь, вам не придётся вручную копировать каждую ссылку. Сделать это очень просто:
1. Создайте новую страницу на Тильде.
2. Добавьте галерею GL01 и загрузите туда изображения.
3. Откройте консоль разработчика.
4. Вставьте туда следующий текст и нажмите Enter:

var tGalleryImages = document.querySelectorAll('.gallery-imgs-class'); var linksArray = new Array(); tGalleryImages.forEach(img => < linksArray.push(img.querySelector('table a').href) >); copy(linksArray)

Как кастомизировать заголовок в Тильде с помощью CSS

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

В Tilda можно оформить текст в стандартных блоках, используя встроенные возможности конструктора. Но иногда требуется пойти дальше стандартных возможностей — в таких случаях можно подключить CSS и задать индивидуальные настройки.

На примере предлагаю кастомизировать несколько заголовков в блоках Тильды — определим интервал между символами в пределах заголовка атрибутом letter-spacing и зададим насыщенность шрифта с помощью font-weight .

На первом шаге найдите на странице нужные элементы для которых хотите применить стили. Далее откройте консоль разработчика, используя клавиши Ctrl + Shift + I и скопируйте CSS-классы для каждого элемента.

Для моих заголовков получился такой список классов.

#rec51596912 .tn-elem[data-elem-id="1668777403"] .tn-atom, #rec51597634 .tn-elem[data-elem-id="1668778202"] .tn-atom, #rec51597634 .tn-elem[data-elem-id="1668778204"] .tn-atom, #rec51629762 .tn-elem[data-elem-id="1617017169"] .tn-atom

На втором шаге нужно подключить CSS-стили. Перейдите в режим редактирования страницы и добавьте новый блок «T123. HTML-код». Найти блок можно в библиотеке стандартных блоков в разделе «Другое». В режиме редактирования блока можно добавить HTML, CSS и JS-код.

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

и укажите свойства letter-spacing и font-weight и значения для них.

 #rec51596912 .tn-elem[data-elem-id="1668777403"] .tn-atom, #rec51597634 .tn-elem[data-elem-id="1668778202"] .tn-atom, #rec51597634 .tn-elem[data-elem-id="1668778204"] .tn-atom, #rec51629762 .tn-elem[data-elem-id="1617017169"] .tn-atom

Если нужно задать разные стили для мобильных экранов и десктопа, то можно добавить медиа-запрос, используя директиву @media , которая будет управлять стилями элемента в зависимости от размера экрана на устройстве.

  

Чтобы изменения вступили в силу сохраните CSS-код в блоке и опубликуйте страницу.

Что важного в диджитал на этой неделе?

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

Статьи по теме:

  • Как передать дополнительные поля из Тильды в Вебинар.ру
  • Как подготовить макет в Фигме к переносу в Тильду
  • Как импортировать макет из Фигмы в Тильду
  • Как настроить автоматическую смену даты с помощью скрипта

Автор */ Константин Булгаков —> Опубликовано 21/12/2022 20/02/2023 Рубрики Материалы, Практикум

Добавить комментарий

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