Эффект размытия фона в zero block

Модификация сделана в 2 вариантах: можно размыть фон zero block, либо размыть фон шейпа, изображения, галереи, видео, кнопки и тултипа в zero block.

Как размыть фон zero block

  1. Убери цвет фона в настройках zero block.
  2. Укажи в настройках ниже id блока, цвет с прозрачностью, насыщенность и величину размытия фона под свой дизайн. Фону обязательно сделай прозрачность меньше 1, то есть меньше 100%.
  3. Скопируй сгенерированный код и вставь на свой сайт. Памятка по вставке кода.
<!-- https://romanyu.ru/effekt-razmytiya-fona -->
<style>
/* Укажи id блока, к которому нужно применить эффект размытия */
#rec228501390 {
    /* Укажи цвет фона и прозрачность */
    background-color: rgba(0, 0, 0, 0.2) !important;
    /* Укажи насыщенность фона (saturate) и величину размытия (blur) */
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}
</style>

Как размыть фон элемента в zero block

Размыть фон в zero block можно у шейпа, изображения, галереи, видео, кнопки и тултипа.

  1. Задай в настройках Тильды цвет фона и прозрачность меньше 100% элементу в zero block, к которому будешь применять эффект размытия.
  2. Пропиши данному элементу название класса: tn-elem-blur. Инструкция по добавлению своего класса элементу.
  3. Укажи здесь в настройках насыщенность и величину размытия фона под свой дизайн.
  4. Скопируй сгенерированный код и вставь на свой сайт. Памятка по вставке кода.
<!-- https://romanyu.ru/effekt-razmytiya-fona -->
<style>
.tn-elem-blur .tn-atom {
    /* Укажи насыщенность фона (saturate) и величину размытия (blur) */
    -webkit-backdrop-filter: saturate(180%) blur(3px);
    backdrop-filter: saturate(180%) blur(3px);
}
</style>
Понравилось решение?
Отблагодарить за модификации
Если возникли трудности с применением модификации, напиши мне в Telegram. Помогу разобраться