Как добавить 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

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

Скруглённые фотографии
Some Words About Us

We are an interior design studio based in Wales. We work in three contemporary design styles: functional minimalism, eco, and modernist nouveau. We have a database of designers and architects inside and outside the company.

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

Открой «Библиотеку блоков» → «Другое» и добавь блок «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-стили».

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

Как кастомизировать заголовок в Тильде с помощью 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 Рубрики Материалы, Практикум

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

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

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

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