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)

 


Рис. 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>

 

Рис. 3 Добавление виджета HTML-код. Вписываем код.

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

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

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

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

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

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

Источник: https://интернетика.рф/elementor-pro/

Читайте также:

комментариев 30

  1. 31.12.2021

    3magenta

  2. 02.01.2022

    gay dating charlotte nc https://gaypridee.com

  3. 02.01.2022

    gay dating stockdale texas https://gay-buddies.com

  4. 02.01.2022

    gay christians dating https://gayprideusa.com

  5. 02.01.2022

    best free gay dating sites in florida https://speedgaydate.com

  6. 02.01.2022

    gay muscle dating https://gayfade.com

  7. 02.01.2022

    victim met killer on gay dating site new yorlk https://gaysugardaddydatingsites.com

  8. 14.01.2022

    live gay web cam chat rooms https://bjsgaychatroom.info/

  9. 14.01.2022

    is plenty of fish a gay dating site? https://gaypridee.com/

  10. 14.01.2022

    miami downtown chat gay https://gaytgpost.com/

  11. 15.01.2022

    gay video chat surry county nc https://gay-buddies.com/

  12. 16.01.2022

    gay dating site younger men for older men https://speedgaydate.com/

  13. 28.01.2022

    luckyland slots https://2-free-slots.com/

  14. 29.01.2022

    clip art gambling slots https://freeonlneslotmachine.com/

  15. 29.01.2022
  16. 29.01.2022

    free online igt slots https://pennyslotmachines.org/

  17. 29.01.2022
  18. 03.02.2022
  19. 03.02.2022

    free slots games online https://slot-machine-sale.com/

  20. 04.02.2022

    free spins casino slots https://beat-slot-machines.com/

  21. 04.02.2022

    jeep with 6 slots grille https://download-slot-machines.com/

  22. 04.02.2022

    fre slots online https://411slotmachine.com/

  23. 04.02.2022

    double down free slots https://www-slotmachines.com/

  24. 04.02.2022

    pearl warriors slots https://slotmachinegameinfo.com/

  25. 10.02.2022

    dissertation help near me https://buydissertationhelp.com/

  26. 11.02.2022

    leeds university dissertation help https://dissertationwriting-service.com/

  27. 11.02.2022

    writing dissertation literature review https://help-with-dissertations.com/

  28. 12.02.2022

    apa dissertation citation https://mydissertationwritinghelp.com/

  29. 12.02.2022

    doctoral dissertation help business https://dissertations-writing.org/

  30. 12.02.2022

После оплаты вы получите письмо на скачивание 3500 пресетов и инструкцию по их установке

+ПРЕСЕТЫ ИЗВЕСТНЫХ БЛОГЕРОВ

+ПОДАРКИ

На следующем шаге вам нужно ввести  эл.почту, на которую вы получите пресеты. Нажмите «ОТПРАВИТЬ», чтобы продолжить

*Ваши данные не будут переданы 3 лицам