URL скопирован в буфер обмена!

Как кастомизировать блок гармошки TX16N и TX16N2 на Тильда

Данная модификация поможет прокачать стандартные блоки гармошки тильда. Можно загрузить свою иконку в аккордеон, изменить цвет подложки и текста открытой вкладки, добавить обводку и многое другое.

Модификация работает с включенным Autoscale в блоках
Модификация работает только с стандартными блоками
Номер модификации в библиотеке TiCode

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

ID блока
Тип блока
Ссылка на иконку
Подложка под иконкой
Градус порота иконки
Цвет текста в открытой карточке
Радиус углов подложки
Цвет подложки в открытой карточки
Цвет обводки
Толщина обводки
Войдите в аккаунт чтобы получить доступ к генератору кода
Этот генератор кода доступен только тем кто оплатил подписку
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev --> <!--TCD067--><style> .t668__wrapper { border-radius: 10px !important; border: 1px solid #F96855 !important; } .t668__content { background: #f7d5ce !important; border-radius: 0 0 10px 10px !important; } .t668__opened { background: #f7d5ce !important; border-radius: 10px 10px 0 0 !important; } .t668__opened .t668__title { color: #F96855 !important; } .t668__text { color: #F96855 !important; } .t668__lines::after { content: " "; background: url(https://static.tildacdn.one/tild3962-6366-4266-b034-626263616232/Arrow.svg); background-position: center; background-repeat: no-repeat; width: 24px; height: 24px; position: absolute; left: 0px; top: 0px; background-size: 100%; } .t668__opened .t668__lines { transform: rotate(-180deg); } .t668__lines svg { display: none !important; } .t668__circle { } </style> <style> .t585__opened .t585__title { color: #F96855 !important; } .t585__text { color: #F96855 !important; } .t585__lines::after { content: " "; background: url(https://static.tildacdn.one/tild3962-6366-4266-b034-626263616232/Arrow.svg); background-position: center; background-repeat: no-repeat; width: 24px; height: 24px; position: absolute; left: 0px; top: 0px; background-size: 100%; } .t585__opened .t585__lines { transform: rotate(-180deg); } .t585__lines svg { display: none !important; } .t585__circle { } </style>
КОПИРОВАТЬ КОД
1. Создаем блок TX16N или TX16N2, копируем id и вставляем в генератор кода. Не забываем в генераторе указать тип блока который создали.

2. Указываем настройки в генераторе кода:
Ссылка на иконку - указываем ссылку на иконку. Иконку нужно загрузить на тильда (можно загрузить в зеро блок за пределами артборда и скопировать ссылку на нее);
Подложка под иконкой - если включена, то иконка будет размером 24 пикселя и под ней будет круглая подложка цвет которой указываем в настройках блока. Подходит для иконок без обводки и собственной подложки. Если загрузили иконку с подложкой, то указываем "выключена". Иконка будет размером 30 пикселей, без стандартной круглой подложки;
Градус порота иконки - указываем градус поворота иконки в открытой карточке;
Цвет текста в открытой карточке - указываем цвет текста в открытой карточке;
Радиус углов подложки - указываем скругления углов для подложки. Доступно только в блоке TN16N2;
Цвет подложки в открытой карточки - указываем цвет подложки для открытой карточки;
Цвет обводки - указываем цвет обводки;
Толщина обводки - указываем толщину обводки в пикселях. Если обводка не нужна, оставляем поел пустым.

3. Копируем готовый код и вставляем в HTML блок Т123.
Made on
Tilda