Липкие кнопки на сайте: как увеличить конверсию с помощью плавающих кнопок

Липкие кнопки на сайте: как увеличить конверсию с помощью плавающих кнопок

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

В этой статье разберём:
✔️ Что такое липкие кнопки и зачем они нужны
✔️ Как добавить их на сайт WordPress (готовый код + плагины)
✔️ Примеры эффективных кнопок (телефон, WhatsApp, Telegram, корзина)

Содержание

Зачем нужны липкие кнопки?

Исследования показывают, что 67% пользователей покидают сайт, если не могут быстро найти контакты или кнопку заказа. Липкие кнопки решают эту проблему:

✅ Увеличивают конверсию – клиенты всегда видят кнопку “Заказать” или “Позвонить”.
✅ Улучшают UX – не нужно прокручивать страницу вверх для действия.
✅ Подходят для мобильных – на маленьких экранах важные элементы должны быть под рукой.

Какие кнопки стоит сделать липкими?

  1. Телефон – для быстрой связи.
  2. WhatsApp/Telegram – популярные мессенджеры.
  3. Корзина – чтобы пользователь не потерял выбранные товары.
  4. Обратный звонок – если сайт услуг.
Липкие кнопки на сайте: как увеличить конверсию с помощью плавающих кнопок

Как добавить липкие кнопки на WordPress?

Способ 1: Готовый код (без плагинов)

Просто вставьте этот код в footer.php вашей темы или через «Внешний вид» → «Редактор»:

<div class="sticky-buttons-mobile">
    <a href="tel:+79991234567" class="sticky-button">
        <i class="fas fa-phone-alt"></i>
        <span>Звонок</span>
    </a>
    <a href="https://t.me/ваш_ник" class="sticky-button" target="_blank">
        <i class="fab fa-telegram-plane"></i>
        <span>Telegram</span>
    </a>
    <a href="https://wa.me/79991234567" class="sticky-button" target="_blank">
        <i class="fab fa-whatsapp"></i>
        <span>WhatsApp</span>
    </a>
    <a href="/cart" class="sticky-button cart-button">
        <i class="fas fa-shopping-cart"></i>
        <span class="cart-count-indicator" style="display: none;"></span>
        <span>Корзина</span>
    </a>
</div>

CSS (добавьте в style.css или через «Дополнительный CSS»):

.sticky-buttons-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    z-index: 9999;
    padding: 8px 0;
}

.sticky-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #333;
    text-decoration: none;
    font-size: 12px;
    gap: 4px;
    padding: 8px 5px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.sticky-button i {
    font-size: 20px;
}

/* Цвета иконок */
.sticky-button:nth-child(1) i { color: #3498db; } /* Телефон */
.sticky-button:nth-child(2) i { color: #0088cc; } /* Telegram */
.sticky-button:nth-child(3) i { color: #25D366; } /* WhatsApp */
.sticky-button:nth-child(4) i { color: #e74c3c; } /* Корзина */

/* Эффект нажатия */
.sticky-button:active {
    transform: scale(0.95);
    background: #f5f5f5;
}

/* Индикатор корзины */
.cart-count-indicator {
    position: absolute;
    top: -5px;
    right: 20px;
    width: 12px;
    height: 12px;
    background: #e74c3c;
    border-radius: 50%;
    border: 2px solid #fff;
    display: none;
}

@media (min-width: 768px) {
    .sticky-buttons-mobile {
        display: none;
    }
}

JavaScript (для индикатора корзины):

<script>
document.addEventListener('DOMContentLoaded', function() {
    const cartIndicator = document.querySelector('.cart-count-indicator');
    // Замените на свою логику проверки корзины
    if (localStorage.getItem('cart_items') > 0) {
        cartIndicator.style.display = 'block';
    }
});
</script>

Способ 2: Плагины (без кода)


Если не хотите редактировать код, используйте:

  • WP Floating Menu – гибкие плавающие кнопки.
  • Sticky Menu (or Anything!) on Scroll – закрепляет любые элементы.
  • Elementor – если сайт на этом конструкторе.

Вывод

Липкие кнопки упрощают навигацию и повышают конверсию, особенно на мобильных устройствах. Вы можете добавить их:
🔹 Вручную (наш код готов к использованию)
🔹 Через плагины (быстро, но с меньшей гибкостью)

Совет: Протестируйте разные варианты кнопок (цвета, расположение) и отслеживайте конверсию в Яндекс Метрике и Google Analytics.