Как сделать кнопку «ЗАГРУЗИТЬ ЕЩЕ» в Elementor

В этой статье я подробно расскажу, как создать функциональную кнопку «Загрузить еще» с использованием нескольких секций в Elementor. Этот метод идеально подходит для случаев, когда вам нужно скрыть часть контента и показывать его только по требованию пользователя.

Преимущества метода

• Простота реализации — не требует знания программирования
• Гибкость — можно использовать для любого типа контента
• Нативная интеграция — полностью совместим с Elementor
• Адаптивность — автоматически работает на мобильных устройствах

Видеоинструкция

Шаг 1: Подготовка структуры страницы

Создайте основную секцию (или контейнер)

1. Добавьте новую секцию в ваш шаблон
2. Заполните ее контентом, который будет виден сразу
3. Дайте секции понятное название, например, «Основной контент»

Шаг 2: Создание скрытой секции

Добавьте вторую секцию

1. Создайте новую секцию под основной
2. Заполните ее дополнительным контентом
3. Это будет контент, который появится после нажатия кнопки

Настройте скрытие секции

Перейдите в настройки секции:

• Выберите секцию → Перейдите во вкладку Расширенные → CSS классы — добавьте класс hidden-content
• Во вкладке Расширенные → Пользовательские CSS — добавьте следующий код:

selector {
    display: none;
}

Шаг 3: Добавление кнопки «Загрузить еще»

Разместите кнопку в основной секции

1. Добавьте виджет Кнопка в конец основной секции
2. Настройте текст кнопки — «Загрузить еще»
3. Настройте внешний вид по вашему вкусу

Важные настройки кнопки

• Выберите кнопку → Перейдите во вкладку Расширенные → CSS ID — укажите load-more-btn
• Перейдите во вкладку Расширенные → Пользовательские CSS — добавьте следующий код, чтобы появлялся курсор при наведении на кнопку:

selector {
    cursor: pointer;
}

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

Через виджет HTML (рекомендуется)

Добавьте виджет HTML в футер секции или в любое место на странице:

<script>
jQuery(document).ready(function($) {
    $('#load-more-btn').on('click', function() {
        // Показываем скрытую секцию
        $('.hidden-content').fadeIn(500);
        
        // Скрываем кнопку
        $(this).fadeOut(300);
    });
});
</script>

Готово!

Кстати! Уже доступны 2 новых курса 2025 года

• «Идеальный сайт на WordPress 2.0» — пошаговое руководство как сделать сайт под ключ на CMS WordPress — подробнее о курсе
• «Лендинг в Elementor 2.0» — практичный курс о том, как делать лендинги в Elementor — подробнее о курсе