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

Как добавить css в тильда

  • автор:

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

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

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

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

Найти 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 Рубрики Материалы, Практикум

Памятка по вставке кода

Открой «Библиотеку блоков» → «Другое» и добавь блок «T123. HTML-код». В режиме редактирования («Контент») сможешь добавить код.

Код будет работать на опубликованной странице.

Код в блоке T123 применяется на страницах, где размещен блок с кодом. Сам код вставляется в body страницы. Если код нужно вставить в head конкретной страницы, то размести его в настройках страницы. Если код нужно применить на всех страницах сайта, то размести его в настройках сайта в head или body.

Блок T123 с CSS (тег ) размещай перед блоком, к которому он применяется. Тогда во время загрузки контента пользователь не увидит, как применяется код, т. е. сразу увидит блок в задуманном дизайне.

Блок T123 с Javascript (тег ) размещай внизу страницы или после блока, к которому он применяется. Это нужно для оптимизации загрузки страницы. Пока скрипты грузятся, то пользователь видит пустой экран или недогруженный контент. Чтобы этого избежать, размещай скрипты после блока, а лучше внизу страницы.

Вставка кода в настройках страницы

В настройках страницы можно добавить HTML, CSS и Javascript.

Открой «Настройки страницы» → «Дополнительно» → «HTML-код для вставки внутрь head».

Опубликуй страницу после добавления кода, чтобы он применился.

Код пропишется в head страницы и примениться только на этой странице.

Для оптимизации скорости загрузки страницы не стоит прописывать Javascript в head страницы, если этого не требует инструкция по добавлению кода.

Вставка кода в настройках сайта

В настройках сайта можно добавить HTML, CSS и Javascript.

Чтобы добавить код в head на все страницы открой: «Настройки сайта» → «Еще» → «HTML-код для вставки внутрь head».

Чтобы добавить CSS в body на все страницы открой: «Настройки сайта» → «Еще» → «Пользовательские CSS-стили».

Опубликуй все страницы сайта после добавления кода.

Для оптимизации скорости загрузки страницы не стоит прописывать Javascript в head страницы, если этого не требует инструкция по добавлению кода.

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

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