О платформе

Тарифы

Загрузка...

Вход

Регистрация

Установить расширение

Апдейты

О НАС

КЛИЕНТАМ

РАБОТА

ПАРТНЁРАМ

СЛЕДИТЕ ЗА НАМИ

Главная

Тарифы

Отзывы

Модификации

Предложить идею

Заказать модификацию

Партнерская программа

ОТВЕТИМ НА ВОПРОСЫ
В ЧАТ-БОТЕ:

Вакансии

Сотрудничество

Расширение

Модификации

Профиль

дней

...

Апдейты

Установить расширение

Техподдержка

Как кастомизировать элемент shape в Zero Block TILDA?

С помощью нашей модификации ты можешь настроить у шейпа: скругление конкретных углов, размытие заднего фона, градиент, внутреннюю тень

Время настройки: 3 минуты

Генератор кода

Видео инструкция

Инструкция

1. Добавляем шейп в Зеро Блок и указываем класс к нему такой же как и в генераторе;

Что бы указать класс у элемента, нажимаешь на него правой кнопкой мыши и выбираешь из списка последнюю строку "Add CSS Class Name", далее, справа в настройках указываешь тот же класс что и в генераторе;

2. Настраиваем размытие шейпа.

3. Настраиваем размер скругления нужных углов;

4. Настраиваем размытие фона. Здесь нужно обязательно указать цвет и прозрачность. Цвет и прозрачности внутри настроек зеро блока не будут учитываться.

4. Настраиваем внутреннюю тень;

5. Настраиваем градиент;

6. Копируем сгенерированный HTML код и вставляем его в CSS-СТИЛИ;

CSS-СТИЛИ находятся в Настройки сайта-Ещё-CSS-СТИЛИ

Конечный шейп со всеми настройками будет отображаться в редакторе и на опубликованной странице, внутри Зеро Блока увидеть получившиеся настройки нельзя((

upd. ВАЖНО. Мы исправили настройку для "Размытие - backdrop-filter". Теперь, чтобы добавить размытие фона, нужно выбрать "+ Добавить фон с цветом и прозрачностью", настроить значение размытия. И обязательно(!) указать цвет и прозрачность.

Текст за шейпом

25% прозрачности

Текст за шейпом

50%
прозрачности

Класс элемента

Размытие элемента - Blur (px)

Скругление - border-radius (px)

+ Настроить углы скругления (border-radius)

top left (px)

top right (px)

bottom left (px)

bottom right (px)

+ Добавить размытие фона backdrop-filter

Размытие - backdrop-filter (px)

Цвет шейпа

Opacity

+ Настроить внутреннюю тень (inner shadow)

Положение X (px)

Положение Y (px)

blur (px)

spread (px)

Цвет (hex)

Opacity

+ Добавить градиент

Угол наклона градиента

Цвет 1

Цвет 2

Копировать код<!-- Как кастомизировать элемент shape в Zero Block TILDA? -->
<!-- https://nolim.cc/kastomiziruyem-sheyp -->
<style> .ssh .tn-atom { border-radius: 100px 70px 50px 30px;  background: linear-gradient(45deg, #e9474a -10%, #1e4be2 110%); background: -webkit-linear-gradient(45deg, #e9474a -10%, #1e4be2 110%);   -webkit-box-shadow: inset 0px 0px 10px 16px #000; -moz-box-shadow: inset 0px 0px 10px 16px #000; box-shadow: inset 0px 0px 10px 16px #000; } .ssh {} .myshape > .tn-atom__sbs-anim-wrapper > .tn-atom, .myshape > .tn-atom__sbs-anim-wrapper {backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px); filter: blur(20px); -webkit-filter: blur(20px); border-radius: 100px 70px 50px 30px; }.myshape > .tn-atom {backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px); filter: blur(20px); -webkit-filter: blur(20px); border-radius: 100px 70px 50px 30px; opacity: unset!important;background-color: #00000050!important;}</style>