К основному контенту

1 мин

Zeroblock

Light

5

Этот скрипт позволит тебе сделать любое количество раскрывающихся зероблоков аккордионов на странице. Модификация совместима с Autoscale.

Как сделать раскрывающийся Zeroblock аккордеон?

(cвернуть)
Инструкция
uc-accordion
accmark
accback

1. Добавь на страничку зероблоки которые будут раскрываться по клику

2. Задай им всем один CSS-класс, который затем укажи в генераторе мода, например

3. Если тебе нужно поворачивать какой-либо элемент при открытии блока, то задай ему CSS-класс

4. Если тебе нужно сделать фон блока который бы раскрывался вместе с блоком, то сделай shape и задай ему CSS-класс

5. По умолчанию блок раскрывается по клику на фоновую область, но если тебе нужно чтобы раскрывался по клику на сам блок, то отметь соответствующий пункт; Ты также можешь не выбирать этот пункт и просто задать для элементов в зеро настройку pointer event none, чтобы они перестали быть кликабельными

6. Если у тебя слайдер с autoscale или не на весь зероблок (100% по ширине по window container), а лишь на его часть, то задай элементам в слайдах выравнивание container window и left top. А также убери для контента отступы слева и сверху, чтобы слайды были прижаты вбок вот так. Иначе все сместится вправо! Просто выдели все элементы и сделай всё как в подсказке тут =>

7. Укажи rec-id всех зероблоков (или стандартных блоков), которые должны быть слайдами через запятую и пробел (без кавычек!)

8. Если будешь использовать автоскейл, то включи его только в самом зеро, в котором у тебя будет слайдер

9. Выбери все нужные тебе функции в генераторе кода и в дополнительных настройках и полученный код вставь в блок т123 сразу после последнего слайда

10. Если хочешь вставить на страницу 2-й и последующие слайдеры, то укажи в генераторе кода порядковый номер слайдера, чтобы отвязать его от остальных и повтори пункты 1-10

11. После всех этих действий перейди в Настройки сайта => Ещё => Выбери пункт "Подключить jQuery на страницах сайта"

– Если у тебя наблюдаются проблемы с sbs-анимацией по ховеру, то отключи "выравнивать слайды по центральному" и "сделать слайдер беконечным"


– Всегда делай количество слайдов в сумме больше чем "количество слайдов к показу" иначе слайдеру будет нечего прокручивать


– Нумерация слайдеров идет строго по порядку и начинается с первого, причём первый слайдер на странице должен быть обязательно!


– Фон для слайдов задается через шейп. По умолчанию фон прозрачный.


– При использовании с autoscale настройка "Изменять высоту зеро по высоте слайда" применяться не будет


– При использовании с autoscale включай его ТОЛЬКО в зеро с Html-элементом слайдера, а в самих слайдах не включай, иначе скейл будет задваиваться


– Не указывай никаких значений в "отступ между слайдами", если у тебя к показу только один слайд!


– Fade-эффект будет работать только при "количество слайдов к показу" = 1. Если поставить fade эффект и слайдов к показу = 3, то будет только 1 слайд


– Если используешь выравнивание слайдов по центральному или разрешить свайп больше чем на 1 слайд, то настройка "на сколько слайдов прокручивать за шаг" не будет применяться.

Важно!

undefined
undefined
undefined
undefined
undefined
undefined
undefined
Отчистить поля
Загрузить сохраненные значения
undefined
Уверенным пользователям, которые каждый день зарабатывают на создании и верстке сайтов
Всё, что во Free и Pro на 1 месяц
и еще:
Pro на 1 год
2 990 ₽
1400 ₽ — ваша выгода
Всё, что во Free
и еще:
У кого пока непрогнозируемая рабочая загрузка и расширение нужно только 
в определенное время
Pro на 1 месяц
390 ₽
Для знакомства с сервисом и тестирования бесплатного функционала
Free
Этот мод доступен на PRO тарифе
Приоритетная поддержка
~50 новых модификаций, которые планируем выпустить в течение года
Обновления библиотеки с учетом изменений Tilda
ИИ-помощник с базовыми моделями
Возможность голосовать за новые моды и закрытый чат (скоро)
undefined
~25 Pro-модификаций
Генератор CSS
Распознавание блоков
Показать блоки т123
Автосохранение Zero-блока
Подсветка кода в т123
undefined
undefined
~20 бесплатных модификаций
Темная тема для Tilda
Кнопки быстрой публикации
Настройки меню в редакторе
Никаких автоплатежей
123
Ниже вставил таким образом сделанный аккордеон из нескольких блоков
Примеры работы модификации
Раскрывающийся Zeroblock 1
Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Раскрывающийся Zeroblock 2
Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.