Elementor Pro — Показать/Скрыть блок по условию

Разработка мобильных приложений в Москве. 

Разработка мобильных приложений  – это комплекс интеллектуальных работ, результатом которых является готовый продукт, установленный на сервер. Такой комплекс сразу готов к работе и не требует никаких дополнительных настроек. 

2022 © Интернетика.рф

gigonline

Elementor Pro — Показать/Скрыть блок по условию

Elementor Pro — Является отличным пейдж билдером для небольших проектов, и дает возможность после запуска сайта, получить полный контроль над всем дизайном. В прямых руках с помощью Elementor Pro можно создавать неплохие проекты на WordPress.

Но иногда возникает необходимость показывать или скрывать блоки или секции по определенным условиям. Например в проекте gigonline.ru — было необходимо настроить логику на странице таким образом, что бы показ блока портфолио в карточке товара, происходил только при наличии загруженных фото в той же карточке.

Elementor Pro из коробки такой возможности не дает, и мы решили эту задачу следующим образом:

Шаг 1. Помечаем секцию которую нужно скрыть, присвоив ей класс .hide-section-active. Делается это в настройках секции — расширенные — поле CSS Классы. (Рис. 1)

Elementor Pro Помечаем секцию назначением CSS Класса
Рис. 1 Помечаем секцию назначением CSS Класса

Шаг 2. Для примера работ мы использовали виджет карусели, подгружая в нее фотографии их карточки товара WooCommerce. Вы можете использовать для этого любой виджет из Elementor Pro.

Его (виджет) мы помечаем, присваивая класс .portfolio-trigger-all. Делается это в настройках виджета — расширенные — поле CSS Классы. (Рис. 2)

Elementor Pro Помечаем виджет назначением CSS Класса
Рис. 2 Помечаем виджет назначением CSS Класса

Шаг 3. Добавляем на страницу виджет — HTML Код. Его можно разместить в любом удобном месте. Мы его разместили непосредственно возле скрываемой секции. И добавляем в виджет следующий код(Рис. 3):

JQUERY Код для виджета HTML-код:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <!-- ... -->
<script>
jQuery(document).ready(function($){
if(!$(".portfolio-trigger-all").length>0) {
  $('.hide-section-active').hide();
}
})
</script>
Elementor Pro вписываем код
Рис. 3 Добавление виджета HTML-код. Вписываем код.

Сохраняем страницу и проверяем работу логики. Работает!

Как это работает. Давайте рассмотрим часть кода, где непосредственно идет скрытие блоков по условиям.

if(!$(".portfolio-trigger-all").length>0) {
  $('.hide-section-active').hide();

Переведем на человеческий язык: Если не найден класс .portfolio-trigger-all — скрыть виджет с классом .hide-section-active.

Если в работах не загружены фотографии, то виджет карусели не появляется на странице, и секция, которую мы пометили скрывается.

Это самый простой пример использования логики на сайте. Вы же сможете с помощью JQUERY строить более сложные логики, используя Elementor PRO!

Заказывайте создание сайта под ключ в Интернетика.рф. Мы с радостью выполним любой Ваш заказ на выбранной Вами платформе.

Поделиться в vk
Поделиться в twitter
Поделиться в whatsapp
Поделиться в email

ПОПУЛЯРНОЕ:

WooCommerce — Витрина магазина

Всем доброго времени суток! Всем тем, кто когда либо собирал интернет магазины на WooCommerce, было интересно, как же реализовать красивую и информативную карточку на витрине

Читать далее »

Онлайн школа

Онлайн школа — будущее образования в Интернет. В настоящее время, многие преподаватели, или создатели курсов переходят в Интернет. Время диктует свои правила. Для того что

Читать далее »

Нужна консультация?

Выберете удобный для Вас способ связи!

Или закажите обратный звонок