Как в Тильде добавить свою иконку в аккордеон

Вы сможете добавить свою иконку в стандартные блоки аккордеона в Tilda

Пример с блоком TX16N2

TX16N2 — блок аккордеон из раздела «Текст»

Пример с блоком TX16N

TX16N — блок аккордеон из раздела «Текст»

Пример с блоком SV501

SV501 — блок аккордеон из раздела «Услуги»

Инструкция


  1. Копируете скрипт в T123;
  2. Устанавливаете внизу страницы, если используете на всем сайте, то устанавливайте в подвал;
  3. Ставите нужный блок аккордеона;
  4. Присваиваете класс «uc-acc-new-ico»;
  5. Заполняете настройки*;
  6. Публикуете страницу.
Для того чтобы получить ссылку на иконку, создайте ZeroBlock, вставьте иконку в поле картинки, вызовите контекстное меню кликом правой кнопки мышки и нажмите «Copy image URL», после скройте блок в настройках.

Лучше берите иконку в формате SVG.

*Настройки помечены комментариями в коде.

Код примера


<!--
 * Name: Своя иконка в стандартный блок аккордерна
 * Description: Скрипт добавляет вашу кастомную иконку в любой стандартный блок аккордерна,
   работает с блоками раздела "Текст" TX16N, TX16N2 и SV501 раздела "Услуги"
 * Author: ANKU
 * URL: https://anku.one/accordion-icon 
-->
<style>
    :root {
        --accordion-standart-icon: url('https://static.tildacdn.com/tild6238-3266-4630-b437-343832613666/chevron.svg'); /* Ссылка на изображение стрелки */
        --accordion-standart-icon-color: #f7f7f7; /* Цвет иконки */
        --accordion-standart-icon-color-hover: #eb5547; /* Цвет иконки при наведении */
        --accordion-standart-icon-color-active: #f8402f; /* Цвет иконки активный */
        --accordion-standart-color-hover: #eb5547; /* Цвет текста при наведении */
        --accordion-standart-color-active: #f8402f; /* Цвет текста активный */
        --accordion-standart-deg: 180deg; /* Угол поворота активной иконки */
        --accordion-transition-time: 300ms; /* Время анимации */   
    }
</style>
<script>
function removeAccordionIcons(){$(".uc-acc-new-ico .t585__icon-hover, .uc-acc-new-ico .t585__lines, .uc-acc-new-ico .t585__circle, .uc-acc-new-ico .t668__icon-hover, .uc-acc-new-ico .t668__lines, .uc-acc-new-ico .t668__circle, .uc-acc-new-ico .t849__icon circle, .uc-acc-new-ico .t849__lines"),console.log("Хочешь скрипт замены стрелки аккордеона для Tilda, смотри эту статью: https://anku.one/accordion-icon ")}"loading"!==document.readyState?(removeAccordionIcons(),setupCopyButtons()):document.addEventListener("DOMContentLoaded",()=>{removeAccordionIcons()});
<script/>
<style>
.uc-acc-new-ico .t585__header,.uc-acc-new-ico .t668__header,.uc-acc-new-ico .t849__header,.uc-acc-new-ico button{cursor:pointer!important}.uc-acc-new-ico .t585__icon,.uc-acc-new-ico .t668__icon,.uc-acc-new-ico .t849__icon{background-color:var(--accordion-standart-icon-color)!important;-webkit-mask-image:var(--accordion-standart-icon);mask-image:var(--accordion-standart-icon);-webkit-mask-size:contain;mask-size:contain;transition:all var(--accordion-transition-time) ease-in-out!important;opacity:1!important}.uc-acc-new-ico .t849__icon{stroke:var(--accordion-standart-icon-color)!important;fill:var(--accordion-standart-icon-color)!important}.uc-acc-new-ico .t585__header:not(.t585__opened) button:active .t585__icon,.uc-acc-new-ico .t668__header:not(.t668__opened) button:active .t668__icon,.uc-acc-new-ico .t849__header:not(.t849__opened) button:active .t849__icon{background-color:var(--accordion-standart-icon-color-hover)!important}.uc-acc-new-ico .t849__header:not(.t849__opened) button:active .t849__icon{stroke:var(--accordion-standart-icon-color-hover)!important;fill:var(--accordion-standart-icon-color-hover)!important}.uc-acc-new-ico .t585__opened .t585__icon,.uc-acc-new-ico .t668__opened .t668__icon,.uc-acc-new-ico .t849__opened .t849__icon{background-color:var(--accordion-standart-icon-color-active)!important;transform:translateY(-50%) rotate(var(--accordion-standart-deg))}.uc-acc-new-ico .t849__opened .t849__icon{stroke:var(--accordion-standart-icon-color-active)!important;fill:var(--accordion-standart-icon-color-active)!important}.uc-acc-new-ico .t-name{transition:all var(--accordion-transition-time) ease-in-out!important}@media (any-pointer:fine){.uc-acc-new-ico .t585__header:not(.t585__opened) button:hover .t585__icon,.uc-acc-new-ico .t668__header:not(.t668__opened) button:hover .t668__icon,.uc-acc-new-ico .t849__header:not(.t849__opened) button:hover .t849__icon{background-color:var(--accordion-standart-icon-color-hover)!important}.uc-acc-new-ico .t849__header:not(.t849__opened) button:hover .t849__icon{stroke:var(--accordion-standart-icon-color-hover)!important;fill:var(--accordion-standart-icon-color-hover)!important}.uc-acc-new-ico .t585__header:not(.t585__opened) button:hover .t-name,.uc-acc-new-ico .t668__header:not(.t668__opened) button:hover .t-name,.uc-acc-new-ico .t849__header:not(.t849__opened) button:hover .t-name{color:var(--accordion-standart-color-hover)!important}}.uc-acc-new-ico .t585__header:not(.t585__opened) button:active .t-name,.uc-acc-new-ico .t668__header:not(.t668__opened) button:active .t-name,.uc-acc-new-ico .t849__header:not(.t849__opened) button:active .t-name{color:var(--accordion-standart-color-hover)!important}.uc-acc-new-ico .t585__opened .t-name,.uc-acc-new-ico .t668__opened .t-name,.uc-acc-new-ico .t849__opened .t-name{color:var(--accordion-standart-color-active)!important}
</style>

Дополнение

Данный скрипт со всеми стандартными блоками типа «Аккордеон» в конструкторе сайтов Tilda. Если вам необходим аккордеон из ZeroBlock, то читайте эту статью «Как в Тильде сделать аккордеон из ZeroBlock».

Если есть подобные задачи, пишите!
Made on
Tilda