НейроАгент

Как создать интерактивную кнопку на Tilda: полное руководство

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

#css-stili#interaktivnye-elementy#javascript-tilda#optimizatsiya-tilda#tilda-knopki#web-razrabotka#zero-block
Вопрос

Как создать интерактивную кнопку на Tilda, которая показывает описание при нажатии? Например, при нажатии на кнопку ‘Производство’ должно появляться описание с фотографиями, информацией о сотрудниках для этой отрасли и ценами.

НейроАгент

Чтобы создать интерактивную кнопку на Tilda, которая показывает описание при нажатии, вам нужно использовать комбинацию HTML, CSS и JavaScript. Существует несколько способов реализовать эту функциональность: стандартными блоками Tilda, Zero Block или с помощью готовых модификаций.

Содержание

Основные методы реализации

Существует три основных способа создания интерактивных кнопок в Tilda:

  1. Стандартные блоки Tilda - использование готовых блоков с дополнительными настройками
  2. Zero Block - создание полностью кастомных блоков с нуля
  3. Модификации и библиотеки - использование готовых решений от разработчиков

Каждый метод имеет свои преимущества и особенности, которые мы рассмотрим подробнее ниже.

Создание через стандартные блоки Tilda

Шаг 1: Добавление кнопки

  1. Перейдите в раздел “Блоки” и выберите категорию “Кнопка”
  2. Добавьте блок кнопки BF703 или аналогичный
  3. Установите текст кнопки “Производство”

Шаг 2: Создание контента для отображения

  1. Добавьте блоки с информацией, которую нужно показывать:
    • Блок с фотографиями
    • Блок с описанием сотрудников
    • Блок с ценами
  2. Сгруппируйте эти блоки в один общий контейнер

Шаг 3: Настройка CSS для скрытия контента

css
/* Стиль для скрытия контента по умолчанию */
.production-content {
    display: none;
    transition: all 0.3s ease;
}

.production-content.show {
    display: block;
}

Шаг 4: Добавление JavaScript

javascript
// Скрипт для переключения видимости контента
document.addEventListener("DOMContentLoaded", function() {
    const button = document.querySelector('.t-btn[data-field="button"]');
    const content = document.querySelector('.production-content');
    
    if (button && content) {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            content.classList.toggle('show');
        });
    }
});

Использование Zero Block для кастомизации

Zero Block предоставляет больше возможностей для создания интерактивных элементов:

Шаг 1: Создание Zero Block

  1. Создайте новый Zero Block или откройте существующий
  2. Добавьте кнопку с текстом “Производство”
  3. Настройте её внешний вид

Шаг 2: Добавление контента

  1. Разместите все необходимые элементы в Zero Block:
    • Изображения
    • Текстовое описание сотрудников
    • Таблица с ценами
  2. Установите для контента начальное состояние “Скрыто”

Шаг 3: Настройка анимаций

  1. Выберите блок контента
  2. В настройках анимаций выберите тип “Появление”
  3. Настройте параметры анимации (скорость, эффект)

Шаг 4: Связь кнопки и контента

javascript
// Код для Zero Block
$(document).ready(function() {
    // ID кнопки и блока контента
    const buttonId = '#rec123456789';
    const contentId = '#rec987654321';
    
    // Обработчик клика на кнопку
    $(buttonId).on('click', function(e) {
        e.preventDefault();
        $(contentId).slideToggle(500);
        t_lazyload_update();
    });
});

Важно: При работе с Zero Block используйте модификатор T1093 из категории “Другое” для создания всплывающих элементов.

Готовые решения и модификации

Существуют готовые библиотеки модификаций, которые упрощают создание интерактивных кнопок:

Библиотека от Nolim

Предоставляет готовые модификации для показа скрытых блоков:

html
<!-- Код библиотеки Nolim -->
<script>
document.addEventListener("DOMContentLoaded", function(){
    let shmoreArr = ['#showmore', 'uc-showmore'];
    let anchor = true; // скролл до якоря
    let hideBtn = false; // скрыть кнопку по клику
    let hideBlk = false; // скрыть блок с кнопкой
    
    let shmoreBtn = document.querySelectorAll('[href="'+shmoreArr[0]+'"]');
    let shmoreBlock = document.querySelectorAll('.'+shmoreArr[1]);
    
    shmoreBlock.forEach(i => i.classList.add("tabshi"));
    
    shmoreBtn.forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            shmoreBlock.forEach(block => {
                block.classList.toggle("show");
                if (anchor) {
                    block.scrollIntoView({behavior: "smooth"});
                }
            });
        });
    });
});
</script>

Библиотека от TiCode

Специально адаптирована для Tilda:

html
<!-- Код библиотеки TiCode -->
<script>
document.addEventListener("DOMContentLoaded", function () {
    const TiCodeButtonShow = ['#ti-show', '#rec584999865'];
    const TiCodeBlockVisible = false;
    const TiCodeHideButton = false;
    
    const TCshowButtons = document.querySelectorAll(`[href="${TiCodeButtonShow[0]}"]`);
    const TCshowBlocks = TiCodeButtonShow[1].replace(/#/g, '').split(',').map(id => document.getElementById(id));
    
    TCshowBlocks.forEach(block => {
        block.style.transition = "max-height 0.5s ease-in-out, opacity 0.3s ease-in-out";
        if (!TiCodeBlockVisible) {
            block.style.maxHeight = '0px';
            block.style.opacity = '0';
            block.style.overflow = 'hidden';
        }
    });
    
    TCshowButtons.forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            TCshowBlocks.forEach(block => {
                if (block.style.maxHeight === '0px' || block.style.maxHeight === '') {
                    block.style.maxHeight = block.scrollHeight + 'px';
                    block.style.opacity = '1';
                } else {
                    block.style.maxHeight = '0px';
                    block.style.opacity = '0';
                }
            });
        });
    });
});
</script>

Пример кода для кнопки “Производство”

Вот полный пример реализации кнопки “Производство” с отображением контента:

HTML структура:

html
<!-- Кнопка -->
<a href="#production-content" class="production-btn">Производство</a>

<!-- Контент для отображения -->
<div id="production-content" class="production-content">
    <div class="production-grid">
        <!-- Фотографии -->
        <div class="production-images">
            <img src="photo1.jpg" alt="Производственный процесс">
            <img src="photo2.jpg" alt="Оборудование">
        </div>
        
        <!-- Описание сотрудников -->
        <div class="production-staff">
            <h3>Наши специалисты</h3>
            <p>Опытные инженеры и технологи с более чем 10-летним стажем работы в отрасли.</p>
            <ul>
                <li>25 квалифицированных специалистов</li>
                <li>5 инженеров-технологов</li>
                <li>10 операторов станков</li>
            </ul>
        </div>
        
        <!-- Цены -->
        <div class="production-prices">
            <h3>Услуги и цены</h3>
            <table>
                <tr>
                    <th>Услуга</th>
                    <th>Стоимость</th>
                    <th>Срок</th>
                </tr>
                <tr>
                    <td>Механическая обработка</td>
                    <td>от 1500 ₽/час</td>
                    <td>от 3 дней</td>
                </tr>
                <tr>
                    <td>Сварочные работы</td>
                    <td>от 1200 ₽/час</td>
                    <td>от 1 дня</td>
                </tr>
            </table>
        </div>
    </div>
</div>

CSS стили:

css
.production-btn {
    display: inline-block;
    padding: 12px 24px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.production-btn:hover {
    background-color: #0056b3;
}

.production-content {
    display: none;
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.production-content.show {
    display: block;
    animation: fadeIn 0.5s ease-in-out;
}

.production-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.production-images {
    grid-column: 1 / -1;
}

.production-images img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    margin-bottom: 10px;
}

.production-staff, .production-prices {
    background: white;
    padding: 15px;
    border-radius: 5px;
}

.production-prices table {
    width: 100%;
    border-collapse: collapse;
}

.production-prices th, .production-prices td {
    padding: 8px;
    border-bottom: 1px solid #ddd;
    text-align: left;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

JavaScript:

javascript
document.addEventListener("DOMContentLoaded", function() {
    const button = document.querySelector('.production-btn');
    const content = document.querySelector('#production-content');
    
    if (button && content) {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            
            // Переключаем видимость контента
            content.classList.toggle('show');
            
            // Изменяем текст кнопки
            if (content.classList.contains('show')) {
                button.textContent = 'Скрыть описание';
            } else {
                button.textContent = 'Производство';
            }
            
            // Обновляем ленивую загрузку изображений
            if (typeof t_lazyload_update === 'function') {
                t_lazyload_update();
            }
        });
    }
});

Настройка внешнего вида

Адаптивный дизайн

css
/* Адаптивная сетка для мобильных устройств */
@media (max-width: 768px) {
    .production-grid {
        grid-template-columns: 1fr;
    }
    
    .production-images img {
        height: 150px;
    }
}

Анимации появления

css
/* Различные эффекты анимации */
.slide-down {
    animation: slideDown 0.5s ease-out;
}

.fade-in {
    animation: fadeIn 0.3s ease-in;
}

.zoom-in {
    animation: zoomIn 0.4s ease-out;
}

@keyframes slideDown {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes zoomIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

Рекомендации по оптимизации

  1. Производительность: Используйте t_lazyload_update() для корректной загрузки изображений
  2. Доступность: Добавьте ARIA атрибуты для улучшения доступности
  3. SEO: Оптимизируйте контент для поисковых систем
  4. Тестирование: Проверяйте работу на разных устройствах и браузерах

Оптимизированный JavaScript с учетом доступности:

javascript
document.addEventListener("DOMContentLoaded", function() {
    const button = document.querySelector('.production-btn');
    const content = document.querySelector('#production-content');
    
    if (button && content) {
        // Установка начального состояния для скринридеров
        content.setAttribute('aria-hidden', 'true');
        button.setAttribute('aria-expanded', 'false');
        
        button.addEventListener('click', function(e) {
            e.preventDefault();
            
            const isExpanded = button.getAttribute('aria-expanded') === 'true';
            
            // Переключение видимости
            content.classList.toggle('show');
            content.setAttribute('aria-hidden', isExpanded ? 'true' : 'false');
            button.setAttribute('aria-expanded', isExpanded ? 'false' : 'true');
            
            // Изменение текста кнопки
            button.textContent = isExpanded ? 'Производство' : 'Скрыть описание';
            
            // Обновление ленивой загрузки
            if (typeof t_lazyload_update === 'function') {
                t_lazyload_update();
            }
        });
    }
});

Источники

  1. Как добавить кнопку? - Вопросы и ответы Tilda
  2. Как добавить и настроить кнопку в Тильде | NAJES
  3. Как сделать показ скрытых блоков по клику на любую кнопку Тильда: модификация Tilda от Нолим
  4. Показываем и скрываем блоки при клике на кнопку на Tilda| TiCode
  5. Zero Block: создание собственных блоков
  6. Как сделать кнопку “Показать еще” в Tilda Zero Block
  7. Показ скрытого блока на Тильде. Скрываем и показываем блок на Tilda
  8. Модификации Тильда. Показываем скрытый блок по нажатию на кнопку в Tilda

Заключение

Создание интерактивной кнопки на Tilda, которая показывает описание при нажатии, вполне осуществимо несколькими способами:

  1. Для новичков - используйте стандартные блоки Tilda с базовым JavaScript
  2. Для продвинутых - применяйте Zero Block для полной кастомизации
  3. Для быстрого результата - используйте готовые библиотеки модификаций

Ключевые моменты успешной реализации:

  • Правильно организуйте структуру HTML
  • Настройте CSS для анимаций и адаптивности
  • Используйте современный JavaScript с учетом доступности
  • Тестируйте результат на разных устройствах

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

Как добавить анимацию появления контента при клике на кнопку в Tilda?Как сделать несколько интерактивных кнопок с разным контентом на одной странице Tilda?Как оптимизировать производительность интерактивных кнопок на Tilda для мобильных устройств?Как создать выпадающее меню с описанием услуг на Tilda с помощью Zero Block?Как добавить иконки к интерактивным кнопкам в Tilda и настроить их внешний вид?Как сделать так, чтобы описание при нажатии на кнопку плавно появлялось и исчезало в Tilda?
Спросить у NeuroAgent