Блог «НаМаксимум» | Максим Климков
О Тильде Модификации

Как загрузить изображение с наложением light/screen в Тильду?

Инструкция по шагам, как перенести  картинку с любым эффектом наложения в Tilda, сохраняя прозрачность фона

В примере на видео берем картинку снежинок в JPEG-формате с черным фоном, которой мы задали режим наложения Screen. В Figma на макете все отображается отлично - снежинки на прозрачном фоне. Но при сохранении картинки в PNG черный фон остается. То есть режим наложения Screen не сохраняется
Снежинки на черном фоне
Вот так выглядят снежинки без режима наложения Screen
Продающий новогодний лендинг на Тильде
А вот так они выглядят с применением режима наложения Screen

Что делать в данной ситуации?

  1. В Figma убираем у снежинок режим наложения и ставим по умолчанию Normal. Также непрозрачность ставим на 100%.
  2. Сохраняем картинку в JPEG-формате, чтобы изображение меньше весило.
  3. Загружаем картинку в Тильду и располагаем в нужном месте.
  4. В Тильде добавляем блок с бесплатной модификацией от ANNEX под номером ANX822.
  5. Заходим в «Контент» блока ANX822 и выбираем наши снежинки (смотрите скриншот).
  6. Ниже меняем значение mix-blend на Screen (смотрите скриншот).
  7. Сохраняем и опубликовываем страницу.
Режим наложения mix-blend-mode
5 шаг
Режим наложения mix-blend-mode
6 шаг
Готово! Теперь снежинки на прозрачном фоне. Вы можете проделывать данную операцию с любыми картинками, у которых однотонных фон, экспериментируя с режимами наложения
Еще читают:
Как сделать слайдер на Тильде из зеро-блоков
Делаем слайдер на Tilda, в котором часть контента во всем блоке остается фиксированной при смене слайдов. Теперь не будет двигаться весь контент блока при пролистывании, а только необходимая часть.
Как сделать выпадающий список на Тильде
Пошаговая инструкция о том, как сделать раскрывающийся список с неограниченным количеством пунктов на Тильде. Пункты выпадающего списка будут открывать необходимые зеро-блоки (zero-block) или стандартные блоки
Как сделать градиентный общий фон у нескольких блоков?
Объединяем нужное количество зеро и стандартных блоков в один, и задаем им общий фон градиентом или картинкой
Чем отличается zero-блок от стандартного на Тильде?
Давайте разберемся в чем же разница между стандартным блоком Тильды и уникальным зеро-блоком?
Made on
Tilda