Данная модификация позволяет сделать аккордеон (выпадающий список) из ZeroBlock, либо обычных блоков, например, заголовок и текст
Пример
Пример доступен в оригинале статьи на моем сайте.
Инструкция для установки аккордеона из стандартных блоков в Tilda
Данная инструкция для установки аккордеона из стандартных блоков, заголовок TL04 и текст TX01
- Копируете скрипт в T123;;
- Устанавливаете внизу страницы, если используете на всем сайте, то устанавливайте в подвал;
- Создаете заголовок TL04;
- Устанавливаете заголовку класс «uc-accordion-bd-tit»;
- Создаете текстовый блок TX01;
- Устанавливаете блоку класс «uc-accordion-bd-txt»
- Дублируете блоки, чередуете — заголовок сверху, текст снизу;
- Заполняете настройки*;
- Публикуете страницу.
Для того чтобы получить ссылку на иконку, создайте ZeroBlock, вставьте иконку в поле картинки, вызовите контекстное меню кликом правой кнопки мышки и нажмите «Copy image URL», после скройте блок в настройках.
Лучше берите иконку в формате SVG.
Ширина задается в настройках блока, в примере 10 колонок.
*Настройки помечены комментариями в коде.
Код примера
Код примера вы можете скопировать, перейдя по ссылке на оригинал статьи, т.к. в Дзен нет обертки для кода в редакторе.
Инструкция для установки аккордеона из ZeroBlock в Tilda
Данная инструкция для установки аккордеона из ZeroBlock
- Копируете скрипт в T123;
- Устанавливаете внизу страницы, если используете на всем сайте, то устанавливайте в подвал;
- Создаете ZeroBlock для заголовка;
- Устанавливаете заголовку класс «uc-zero-acc-tit»;
- Ставите текст заголовка;
- Ставите иконку;
- Группируете и выбираете Object;
- Устанавливаете группе тег header;
- Создаете ZeroBlock для контента;
- Наполняете любым контентом;
- Устанавливаете блоку класс «uc-zero-acc-txt»
- Дублируете блоки, чередуете — заголовок сверху, текст снизу;
- Заполняете настройки*;
- Публикуете страницу.
Для того чтобы получить ссылку на иконку, создайте ZeroBlock, вставьте иконку в поле картинки, вызовите контекстное меню кликом правой кнопки мышки и нажмите «Copy image URL», после скройте блок в настройках.
Если вы используете иконку по ссылке, то на место иконки ставьте шейп нужного размера, если вам не нужно чтобы иконка меняла цвет, то поставьте изображение нужной иконки, а в переменную впишите none вместо url ('…).
Лучше берите иконку в формате SVG.
*Настройки помечены комментариями в коде.
Код примера
Код примера вы можете скопировать, перейдя по ссылке на оригинал статьи, т.к. в Дзен нет обертки для кода в редакторе.