Табы в Зеро блоке

1. В отдельном Зеро-блоке добавляешь кнопки, которые будут табами/вкладками и привязываешь к ним класс, который в последствии нужно будет указать в поле генератора ниже «Класс кнопки». Чтобы указать класс у элемента, нажимаешь на него правой кнопкой мыши и выбираешь из списка последнюю строку «Add CSS Class Name», далее, справа в настройках указываешь тот же класс, что и в генераторе.

2. Добавляешь на страницу блоки, которые необходимо скрыть/показывать при клике на кнопки;

3. Далее в генераторе заполняешь следующие поля:

• «пролистывать экран при переключении табов» — при клике на таб страница будет скроллиться в начало блока;
• «включить ссылки для табов» — включи эту настройку для того чтобы можно было перейтис другой страницы сайта к выбранному табу. Опубликуй страницу и скопируй из адресной строки ссылку вида #nlm383322331-myButton113
• «включить скролл до табов» — включи чтобы при открытии новой страницы была автоматическая прокрутка к выбранному табу (пример ссылки /link#nlm383322331-myButton113);
• «высота отступа сверху при скролле до табов (px)» — этот параметр определяет, на сколько пикселей от верхней части страницы будет отображаться выбранный таб при прокрутке;
• «стили активной кнопки» — в данном разделе можно настроить вид активного таба (Цвет фона, Цвет текста, Цвет бордюра, Ширина бордюра);
• «настройки иконок» — в этом разделе можно настроить параметры для загруженных иконок у кнопок (Расположение иконки, Ширина иконки, Высота иконки, Отступ от края, Регулировка позиции иконки по высоте, Ширина иконки для экранов до 640рх, Высота иконки для экранов до 640рх, Отступ от края для экранов до 640рх, Регулировка позиции иконки по высоте для экранов до 640рх);
• «класс кнопки» — в данном поле необходимо указать класс привязанный к кнопке. Для каждой кнопке, должен быть отдельный класс;
• «id блоков для показа» — id блока, который будет отображаться/скрываться при клике на указанную кнопку;
• «ссылка — иконка в кнопке» — ссылку нужной иконки ты можешь копировать из галереи GL12;
• «ссылка — иконка в активной кнопке» — ссылку нужной иконки ты можешь копировать из галереи GL12;
• «добавить кнопки» — данная кнопка добавляем новые поля для ввода класса и id блока.

3. Добавляешь блок Т123 и вставляешь в него сгенерированный HTML код.

Имей в виду:

• Табы должны находиться в отдельном Зеро-блоке, если настроить табы и контент для показа в одном блоке — модификация не будет работать корректно.
• Если при переключении табов сайт «прыгает» вверх, включи настройку «Включите эту галочку, если при переключении табов скрытые блоки не отображаются или страница прыгает вверх».
• Для корректной работы модификации необходимо, чтобы для всех классов кнопок, указанных в модификации, были добавлены соответствующие id блоков для показа.
• Блоки, привязанные к табам должны быть расставлены в таком же порядке, как в табах.
• Ссылки на табы работают только при переходе с других страниц сайта. Они не работают внутри той же страницы, где находится модификация и блок с табами.
• Для табов можно использовать только элемент типа «Кнопка», «Шейп + текст» не будут работать.
• Если в зеро-блоках с контентом элементы сгруппированы, и для них настроена анимация, имей в виду, что анимацию необходимо настраивать отдельно для каждого элемента группы, а не для всей группы в целом.
• Если используешь модификацию в связке с модификацией NLM151, для каждого таба нужно указать по два ID блока для показа: зероблок с макетом карточки товара и блок ST305N.