Elementor Pro — Является отличным пейдж билдером для небольших проектов, и дает возможность после запуска сайта, получить полный контроль над всем дизайном. В прямых руках с помощью Elementor Pro можно создавать неплохие проекты на WordPress.
Но иногда возникает необходимость показывать или скрывать блоки или секции по определенным условиям. Например в проекте gigonline.ru — было необходимо настроить логику на странице таким образом, что бы показ блока портфолио в карточке товара, происходил только при наличии загруженных фото в той же карточке.
Elementor Pro из коробки такой возможности не дает, и мы решили эту задачу следующим образом:
Шаг 1. Помечаем секцию которую нужно скрыть, присвоив ей класс .hide-section-active. Делается это в настройках секции — расширенные — поле CSS Классы. (Рис. 1)
Шаг 2. Для примера работ мы использовали виджет карусели, подгружая в нее фотографии их карточки товара WooCommerce. Вы можете использовать для этого любой виджет из Elementor Pro.
Его (виджет) мы помечаем, присваивая класс .portfolio-trigger-all. Делается это в настройках виджета — расширенные — поле CSS Классы. (Рис. 2)
Шаг 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>
Сохраняем страницу и проверяем работу логики. Работает!
Как это работает. Давайте рассмотрим часть кода, где непосредственно идет скрытие блоков по условиям.
if(!$(".portfolio-trigger-all").length>0) {
$('.hide-section-active').hide();Переведем на человеческий язык: Если не найден класс .portfolio-trigger-all — скрыть виджет с классом .hide-section-active.
Если в работах не загружены фотографии, то виджет карусели не появляется на странице, и секция, которую мы пометили скрывается.
Это самый простой пример использования логики на сайте. Вы же сможете с помощью JQUERY строить более сложные логики, используя Elementor PRO!
Заказывайте создание сайта под ключ в Интернетика.рф. Мы с радостью выполним любой Ваш заказ на выбранной Вами платформе.
