Как добавить галерею с фильтрацией на сайт WordPress | Уроки по Elementor 2022
Как добавить галерею с фильтрацией на сайт WordPress | Уроки по Elementor 2022
В этом видео я покажу вам как можно добавить на сайт WordPress галерею из фото с фильтрацией.
Давайте посмотрим что у нас должно получиться в результате https://sitebiznes.ru/testiruem-galer...
У нас есть фотогалерея из четырех фотографий щенков хаски.
Если навести курсор мыши на изображение, мы увидим название и описание фотографии и две круглых кнопки.
Увеличить изображение и перейти по ссылке.
Я разместил ссылку на сайт, откуда взял изображения.
Щёлкая по вкладкам Голубоглазые и Разноглазые, мы можем видеть фото щенков с данным параметром фильтрации.
И начнем работу.
Для этого мы будем использовать плагин Essential Addons plugin для Elementor.
Естественно, что у вас на сайте уже должен быть установлен сам плагин Elementor.
Устанавливаем и активируем плагин.
Запускается мастер для выбора необходимых дополнений.
На первом шаге оставляем Основной и нажимаем на кнопку Next.
И далее можно отключать или включать необходимые дополнения.
Я ничего отключать не буду, нам нужно сейчас только одно дополнение Галерея с фильтрацией.
На следующем шаге нам предлагают перейти на платную версию Elementor Pro, я нажимаю на кнопку Next.
Далее снова нажимаем на кнопку Next.
И нам показывается диалоговое окно, где предлагается передавать данные о работе плагина на нашем сайте разработчикам.
Я нажимаю No, Thanks, т.е. не соглашаюсь.
Всё мы настроили и открываем новую страницу на нашем сайте WordPress, куда будем добавлять галерею с фильтрацией.
Переходим в редактор Elementor.
И с левой стороны в разделе ESSENTIAL ADDONS дополнение Галерея с фильтрацией и просто перетаскиваем его на нашу страницу.
Мы видим предпросмотр нашей галереи, а в левой части различные настройки.
Чтобы добавить свои изображения нужно развернуть раздел Элементы галереи.
И здесь мы можем включать и отключать отображение галереи.
Редактировать и удалять существующие, добавлять новые.
Щелкаем по элементу, который мы хотим отредактировать.
Его параметры раскрываются и мы можем изменять их.
Я загружаю новое изображение щенка.
Можно задать текст для описания и заголовок.
И адрес ссылки для перехода.
У ссылки тоже есть дополнительные параметры: отображать в новом окне и добавить параметр Nofollow.
Вот так сейчас у нас отображается галерея.
Давайте вернёмся в раздел Настроек.
Здесь можно задавать количество отображаемых элементов и столбцов.
Изменять изображения стандартных значков масштабирования и ссылки на свои.
Я добавил ещё три фото щенков.
Давайте удалим лишние элементы и настроим отображение 4 фото в 2 столбца.
Смотрим что у нас получилось.
Теперь рассмотрим как добавить возможность фильтрации.
Разворачиваем раздел Фильтруемые элементы управления.
Я изменяю уже существующий элемент на Голубоглазые.
Видим что название вкладки изменилось.
И добавляем ещё один элемент - Разноглазые.
И нам нужно исправить для Элементов галереи значение поля Название элемента управления на одно из двух: Голубоглазые или Разноглазые.
После того, как мы это сделаем, можно фильтровать изображения в галереи на нашей странице.
Как видите всё просто.
Если вас интересует тема работы с Elementor, напишите об этом в комментариях.
Тогда я подготовлю для вас новые видео.
Подписывайтесь на наш Ютуб канал!
---------------------------
Всё о создании сайтов на WordPress в коротких видео • Преимущества WordPress #Shorts
Подписывайтесь на дайджест с самыми популярными статьями и видео на нашем блоге http://sitebiznes.ru
Создай сайт для бизнеса в «Яндекс.Дзен» https://zen.yandex.ru/id/5c0eac13c820...
Как заработать на сайте / @zarabotatnasajte
Как добавить галерею с фильтрацией на сайт WordPress | Уроки по Elementor 2022 • Как добавить галерею с фильтрацией на...
