Как сделать вкладки в Тильде: инструкция и примеры

При создании сайта на Tilda часто возникает необходимость организовать контент во вкладках - это удобно для отзывов, характеристик товаров, описания услуг или FAQ. В этой статье разберём, как реализовать табы (вкладки) на Тильде без программирования и с использованием скриптов.

Готовые блоки с вкладками в Zero Block

Самый простой способ - использовать Zero Block (нулевой блок). В библиотеке Tilda есть несколько предустановленных таб-блоков. Чтобы их найти:

• Откройте редактор страницы и нажмите «Добавить блок».
• Выберите категорию «Zero Block».
• В поиске введите «tabs» или «вкладки».
• Выберите подходящий шаблон (например, «Tabs with content»).

Эти блоки уже содержат анимацию переключения (плавное появление контента). Вам остаётся только заменить текст и изображения.

Создание вкладок с помощью скрипта Tilda

Если готового блока недостаточно, можно добавить кастомный скрипт через блок «HTML-код» или «T123». Популярный вариант - использовать библиотеку Tabby или чистый JavaScript. Пример простого скрипта:

<script>
$('.tab-link').click(function() {
  var tabId = $(this).data('tab');
  $('.tab-content').hide();
  $('#'+tabId).show();
  $('.tab-link').removeClass('active');
  $(this).addClass('active');
});
</script>

Не забудьте подключить jQuery, если он не подключён (обычно в Тильде он есть по умолчанию).

Анимация вкладок: CSS или JavaScript

Для анимации переключения вкладок можно использовать CSS-свойства opacity и transition. Например, задайте классу .tab-content:

.tab-content {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.tab-content.active {
  opacity: 1;
}

Такой подход делает переключение плавным и визуально приятным. Если нужно больше эффектов (слайд, fade), используйте готовые библиотеки вроде Animate.css.

Настройка вкладок без скриптов (только CSS)

Можно реализовать вкладки с помощью radio-кнопок и псевдокласса :checked. Это работает без JavaScript, но подходит только для простых случаев (например, переключение текстовых блоков). Пример структуры:

• Скрытые input[type=radio] с одинаковым name.
• Label для переключения.
• Блоки с контентом, которые показываются по селектору input:checked ~ .tab-content.

Этот метод не требует подключения дополнительных скриптов и хорошо индексируется поисковиками.

Частые ошибки при создании вкладок в Тильде

• Некорректная работа на мобильных устройствах - проверяйте адаптивность вкладок в мобильной версии.
• Конфликт скриптов - если вы используете несколько кастомных скриптов, убедитесь, что они не мешают друг другу.
• Отсутствие активного состояния - всегда указывайте, какая вкладка активна по умолчанию, чтобы пользователь не видел пустой блок.

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