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

Сайт под ключ заказать в Москве. Разработать сайт под ключ — что это?

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

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

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!

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

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

ПОПУЛЯРНОЕ:

WordPress — Правильная настройка движка

WordPress — Правильная подготовка движка для работы над коммерческим проектами. Видео было записано для информирования новых сотрудников компании Интернетика, но я думаю оно будет полезно и для тех, кто хотел бы попробовать собрать свой сайт своими силами. Что мы рассказали

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

Заказать сложный сайт — К чему готовиться?

Заказать сложный сайт — К чему готовиться? Сейчас подробно все расскажем. Заказать сложный сайт это здорово, но для начала давайте определимся, что мы называем сложным сайтом. Сложный сайт, это многостраничный сайт сервис, либо одно страничная посадочная страница, на котором присутствуют

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

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

Всем доброго времени суток! Всем тем, кто когда либо собирал интернет магазины на WooCommerce, было интересно, как же реализовать красивую и информативную карточку на витрине магазина. Сейчас мы расскажем как это сделать. Для реализации нам необходимо следующее: Установленный на хостинге

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

Заказать сайт в Москве — Сколько стоит?

Заказать сайт в Москве, для многих кажется чем то недостижимым и очень дорогим. Но в реальности, все обстоит иначе. Давайте разберемся в этом вопросе раз и навсегда. Стоимость того или иного сайта складывается из многих факторов и тонкостей, которые знают

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

Веб сервер NGINX на Ubuntu Server 20.04.

Всем привет! Сегодня мы установим с нуля веб сервер NGINX под ключ для сайта на WordPress. (LEMP)  на Ubuntu Server 20.04. Подключим шифрование TLS/SSL Установка проходит на VPS Сервере от REG.RU — 1 Гб Оперативной памяти, 1 ядро процессора, 25

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

Онлайн школа

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

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

Коронавирус — Банк Точка поддерживает бизнес!

Сегодня в агентство Интернетика пришло ободряющее письмо от нашего любимого банка о поддержке предпринимателей в это нелегкое время. Искренне поддерживаем нашего партнера и друга в этом, публикуя письмо основателя Точка Банка — Бориса Дьяконова. Точка Банк — Письмо Как поддержать

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

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

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

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