You are currently viewing Как добавить галерею с фильтрацией на сайт WordPress | Уроки по Elementor 2022

Как добавить галерею с фильтрацией на сайт WordPress | Уроки по Elementor 2022



В этом видео я покажу вам как можно добавить на сайт WordPress галерею из фото с фильтрацией.

Давайте посмотрим что у нас должно получиться в результате

У нас есть фотогалерея из четырех фотографий щенков хаски.

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

Увеличить изображение и перейти по ссылке.

Я разместил ссылку на сайт, откуда взял изображения.

Щёлкая по вкладкам Голубоглазые и Разноглазые, мы можем видеть фото щенков с данным параметром фильтрации.

И начнем работу.

Для этого мы будем использовать плагин Essential Addons for Elementor.

Естественно, что у вас на сайте уже должен быть установлен сам плагин Elementor.

Устанавливаем и активируем плагин.

Запускается мастер для выбора необходимых дополнений.

На первом шаге оставляем Основной и нажимаем на кнопку Next.

И далее можно отключать или включать необходимые дополнения.

Я ничего отключать не буду, нам нужно сейчас только одно дополнение Галерея с фильтрацией.

На следующем шаге нам предлагают перейти на платную версию Elementor Pro, я нажимаю на кнопку Next.

Далее снова нажимаем на кнопку Next.

И нам показывается диалоговое окно, где предлагается передавать данные о работе плагина на нашем сайте разработчикам.

Я нажимаю No, Thanks, т.е. не соглашаюсь.

Всё мы настроили и открываем новую страницу на нашем сайте WordPress, куда будем добавлять галерею с фильтрацией.

Переходим в редактор Elementor.

И с левой стороны в разделе ESSENTIAL ADDONS дополнение Галерея с фильтрацией и просто перетаскиваем его на нашу страницу.

Мы видим предпросмотр нашей галереи, а в левой части различные настройки.

Чтобы добавить свои изображения нужно развернуть раздел Элементы галереи.

И здесь мы можем включать и отключать отображение галереи.

Редактировать и удалять существующие, добавлять новые.

Щелкаем по элементу, который мы хотим отредактировать.

Его параметры раскрываются и мы можем изменять их.

Я загружаю новое изображение щенка.

Можно задать текст для описания и заголовок.

И адрес ссылки для перехода.

У ссылки тоже есть дополнительные параметры: отображать в новом окне и добавить параметр Nofollow.

Вот так сейчас у нас отображается галерея.

Давайте вернёмся в раздел Настроек.

Здесь можно задавать количество отображаемых элементов и столбцов.

Изменять изображения стандартных значков масштабирования и ссылки на свои.

Я добавил ещё три фото щенков.

Давайте удалим лишние элементы и настроим отображение 4 фото в 2 столбца.

Смотрим что у нас получилось.

Теперь рассмотрим как добавить возможность фильтрации.

Разворачиваем раздел Фильтруемые элементы управления.

Я изменяю уже существующий элемент на Голубоглазые.

Видим что название вкладки изменилось.

И добавляем ещё один элемент — Разноглазые.

И нам нужно исправить для Элементов галереи значение поля Название элемента управления на одно из двух: Голубоглазые или Разноглазые.

После того, как мы это сделаем, можно фильтровать изображения в галереи на нашей странице.

Как видите всё просто.

Если вас интересует тема работы с Elementor, напишите об этом в комментариях.

Тогда я подготовлю для вас новые видео.

Подписывайтесь на наш Ютуб канал!

[uptolike]

У этой записи один комментарий

  1. Добрый день! Пользуюсь этой галереей успешно. Но есть одно НО! Если хочешь подробнее рассмотреть картинку , то с фотографии в галерее у меня а сайте переходишь на страницу с этой фотографией и ее описанием. После просмотра страницы с фотографией нужно вернуться назад в галерею именно к ней же фотографии. Как, а главное, куда проставить якорную ссылку на фото в галерее, чтобы вела именно к этой фотографии ?

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