РЕГИСТРАЦИЯ

CSS-класс
для элементов

Удобный инструмент для модификаций элементов в Zero Block
В контекстном меню можно добавлять название CSS-класса для любого элемента в Zero Block. Эта функция упрощает процесс модификации элементов — вы задаёте класс заголовку, изображению, галерее и любому другому элементу и указываете название класса в html-коде.

Примеры и пошаговая инструкция, как применить новую функцию.
Пример # 1
Градиент в заголовке
New feature
Cases
Team
Contacts
We develop services to help people run their businesses and improve their management systems
Как сделать
1 шаг
Создайте дизайн в Zero Block

2 шаг
  • Нажмите на заголовок правой кнопкой мыши, выберите Add CSS class name
  • Задайте название стиля, например, gradient

3 шаг
  • Добавьте в Zero Block html-элемент
  • Скопируйте код ниже и вставьте его в html-элемент, используя кнопку Edit Code

<style>
.gradient {
        background: linear-gradient(45deg, #e9474a 0%, #70358f 50%, #1e4be2 100%);
        background: -webkit-linear-gradient(45deg, #e9474a 0%, #70358f 50%, #1e4be2 100%);
        -webkit-background-clip: text;
        -moz-background-clip: text;
        -webkit-text-fill-color: rgba(255, 255, 255, 0); 
        -moz-text-fill-color: rgba(255, 255, 255, 0);
}

.gradient .tn-atom {
    display: inline;
}
</style>
> Сохраните изменения в Нулевом блоке и опубликуйте страницу

Готово!
Пример # 2
Галерея с кастомными стрелками, расположенными на срезе изображения
INTERIOR
DESIGN
STUDIO
Let’s make your home a better place
Как сделать
1 шаг
Создайте дизайн в Zero Block

2 шаг
  • Нажмите на галерею правой кнопкой мыши, выберите Add CSS class name
  • Задайте название стиля, например, gallery

3 шаг
  • Добавьте в Zero Block html-элемент
  • Скопируйте код ниже и вставьте его в html-элемент, используя кнопку Edit Code

<style>
.gallery .t-null__slds-arrow {
 opacity: 0;
}

.gallery .t-slds__arrow-left {
  background: url('https://static.tildacdn.com/tild3139-6463-4139-b830-653761616437/left_custom_arrow.svg');
}

.gallery .t-slds__arrow-right {
  background: url(https://static.tildacdn.com/tild6262-3932-4634-b166-373237616466/right_custom_arrow.svg);
}

.gallery .t-slds__arrow {
    background-size: 50px 50px;
   background-repeat: no-repeat;
   background-position: center;
 width: 75px !important;
    height: 75px !important;
   left: -40px !important;
}

@media (max-width: 480px) { 
 .t396__elem .t-slds__arrow {
    width: 40px !important;
     height: 40px !important;
    background-size: 30px 30px;
    left: -20px !important;
 }
}
</style>
> Сохраните изменения в Нулевом блоке и опубликуйте страницу

Готово!
Как загрузить собственные стрелки в галерею
Чтобы загрузить собственные стрелки в галерею, добавьте в html-код ссылки на изображения левой и правой стрелок в формате SVG. Для этого загрузите изображения на любой облачный сервис или на любую страницу Тильды. Затем откройте загруженное изображение в новой вкладке и скопируйте ссылку.

Например, в код выше добавлены ссылки:
на левую стрелку: https://static.tildacdn.com/tild3139-6463-4139-b830-653761616437/left_custom_arrow.svg
на правую стрелку: https://static.tildacdn.com/tild6262-3932-4634-b166-373237616466/right_custom_arrow.svg
Пример # 3
Эффект размытия фотографии под текстом
TRIVIA
Cases
Team
Contacts
Breathtaking content starts with your own experience, not only exploring others' thoughts
Think of the text as a starting point for your own words
1 шаг
Создайте дизайн в Zero Block

2 шаг
  • Нажмите на шейп правой кнопкой мыши, выберите Add CSS class name
  • Задайте название стиля, например, blur

3 шаг
  • Добавьте в Zero Block html-элемент
  • Скопируйте код ниже и вставьте его в html-элемент, используя кнопку Edit Code

<style>
.blur {
        backdrop-filter: blur(20px);
        border-radius: 20px;
        -webkit-backdrop-filter: blur(20px);
}
</style>
> Сохраните изменения в Нулевом блоке и опубликуйте страницу

Готово!
На Тильде html-код можно добавлять несколькими способами
Если используете код на одной странице — добавьте его через HTML-элемент или блок T123. Если применяете для всего сайта или на нескольких страницах — добавьте в хедер.
Добавляйте градиент на заголовок, модифицируйте стрелки галереи, кнопки и многое другое. Ваше творчество ничем не ограничено.
Made on
Tilda