URL скопирован в буфер обмена!
Как изменить внешний вид уведомлений на Tilda
С помощью этой модификации можно настроить внешний вид уведомлений о добавлении товара в корзину тильда или избранного. Дополнительно можно вывести свою иконку в плашку с уведомлением.
Модификация работает с включенным Autoscale в блоках
Модификация работает только со стандартным блоком
Номер модификации в библиотеке TiCode
Тип уведомления
Цвет плашки
Цвет текста
Радиус скругления углов
Цвет обводки
Толщина обводки
Иконка
Ссылка на иконку
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD092--><style>
.t706__bubble {
background-color: #F96855 !important;
border-radius: px !important;
border: px solid ;
}
.t706__bubble-text {
color: #FFFFFF !important;
font-size: 16px;
display: flex;
flex-direction: row;
padding: 20px 20px !important;
}
.t706__bubble-close {
color: #FFFFFF !important;
}
.t706__bubble-text::before {
background-image: url('');
margin-right: 10px;
content: "";
display: inline-block;
background-size: cover;
background-repeat: no-repeat;
width: 40px;
height: 40px;
margin-right: 10px;
vertical-align: middle;
}
</style>
1. Создаем корзину (блок ST100) и в настройках отключаем чекбокс "Открывать корзину после выбора товара";
2. В генераторе кода настраиваем стиль уведомлений:
Цвет плашки - указываем цвет плашки уведомления
Цвет текста - указываем цвет текста. Крестик будет такого же цвета;
Радиус скругления углов - указываем радиус углов для плашки. Если скругление не нужно то указываем 0;
Цвет и толщина толщина обводки - указываем цвет и толщину обводки плашки. Если обводка не нужна, то оставляем поля пустыми;
Иконка - если включена, то в поле "Ссылка на икону" указываем ссылку на изображение. Саму иконку загружаем в тильда (квадрат 40 на 40 px), например в блок IM01. После того как загрузили, кликаем ПКМ на картинку и выбираем "копировать ссылку на изображение". Блок скрываем кликнув на глаз.
3. Копируем готовый код и вставляем в HTML блок Т123.
2. В генераторе кода настраиваем стиль уведомлений:
Цвет плашки - указываем цвет плашки уведомления
Цвет текста - указываем цвет текста. Крестик будет такого же цвета;
Радиус скругления углов - указываем радиус углов для плашки. Если скругление не нужно то указываем 0;
Цвет и толщина толщина обводки - указываем цвет и толщину обводки плашки. Если обводка не нужна, то оставляем поля пустыми;
Иконка - если включена, то в поле "Ссылка на икону" указываем ссылку на изображение. Саму иконку загружаем в тильда (квадрат 40 на 40 px), например в блок IM01. После того как загрузили, кликаем ПКМ на картинку и выбираем "копировать ссылку на изображение". Блок скрываем кликнув на глаз.
3. Копируем готовый код и вставляем в HTML блок Т123.
1. Добавляем на страницу блок избранного (блок ST110);
2. В генераторе кода настраиваем стиль уведомлений:
Цвет плашки - указываем цвет плашки уведомления
Цвет текста - указываем цвет текста. Крестик будет такого же цвета;
Радиус скругления углов - указываем радиус углов для плашки. Если скругление не нужно то указываем 0;
Цвет и толщина толщина обводки - указываем цвет и толщину обводки плашки. Если обводка не нужна, то оставляем поля пустыми;
Иконка - если включена, то в поле "Ссылка на икону" указываем ссылку на изображение. Саму иконку загружаем в тильда (квадрат 40 на 40 px), например в блок IM01. После того как загрузили, кликаем ПКМ на картинку и выбираем "копировать ссылку на изображение". Блок скрываем кликнув на глаз.
3. Копируем готовый код и вставляем в HTML блок Т123.
2. В генераторе кода настраиваем стиль уведомлений:
Цвет плашки - указываем цвет плашки уведомления
Цвет текста - указываем цвет текста. Крестик будет такого же цвета;
Радиус скругления углов - указываем радиус углов для плашки. Если скругление не нужно то указываем 0;
Цвет и толщина толщина обводки - указываем цвет и толщину обводки плашки. Если обводка не нужна, то оставляем поля пустыми;
Иконка - если включена, то в поле "Ссылка на икону" указываем ссылку на изображение. Саму иконку загружаем в тильда (квадрат 40 на 40 px), например в блок IM01. После того как загрузили, кликаем ПКМ на картинку и выбираем "копировать ссылку на изображение". Блок скрываем кликнув на глаз.
3. Копируем готовый код и вставляем в HTML блок Т123.
