В этом видео я покажу вам как можно добавить на сайт WordPress галерею из фото с фильтрацией.
httpv://www.youtube.com/watch?v=YxNDVVQKNAE
Давайте посмотрим что у нас должно получиться в результате
У нас есть фотогалерея из четырех фотографий щенков хаски.
Если навести курсор мыши на изображение, мы увидим название и описание фотографии и две круглых кнопки.
Увеличить изображение и перейти по ссылке.
Я разместил ссылку на сайт, откуда взял изображения.
Щёлкая по вкладкам Голубоглазые и Разноглазые, мы можем видеть фото щенков с данным параметром фильтрации.
И начнем работу.
Для этого мы будем использовать плагин Essential Addons for Elementor.
Естественно, что у вас на сайте уже должен быть установлен сам плагин Elementor.
Устанавливаем и активируем плагин.
Запускается мастер для выбора необходимых дополнений.
На первом шаге оставляем Основной и нажимаем на кнопку Next.
И далее можно отключать или включать необходимые дополнения.
Я ничего отключать не буду, нам нужно сейчас только одно дополнение Галерея с фильтрацией.
На следующем шаге нам предлагают перейти на платную версию Elementor Pro, я нажимаю на кнопку Next.
Далее снова нажимаем на кнопку Next.
И нам показывается диалоговое окно, где предлагается передавать данные о работе плагина на нашем сайте разработчикам.
Я нажимаю No, Thanks, т.е. не соглашаюсь.
Всё мы настроили и открываем новую страницу на нашем сайте WordPress, куда будем добавлять галерею с фильтрацией.
Переходим в редактор Elementor.
И с левой стороны в разделе ESSENTIAL ADDONS дополнение Галерея с фильтрацией и просто перетаскиваем его на нашу страницу.
Мы видим предпросмотр нашей галереи, а в левой части различные настройки.
Чтобы добавить свои изображения нужно развернуть раздел Элементы галереи.
И здесь мы можем включать и отключать отображение галереи.
Редактировать и удалять существующие, добавлять новые.
Щелкаем по элементу, который мы хотим отредактировать.
Его параметры раскрываются и мы можем изменять их.
Я загружаю новое изображение щенка.
Можно задать текст для описания и заголовок.
И адрес ссылки для перехода.
У ссылки тоже есть дополнительные параметры: отображать в новом окне и добавить параметр Nofollow.
Вот так сейчас у нас отображается галерея.
Давайте вернёмся в раздел Настроек.
Здесь можно задавать количество отображаемых элементов и столбцов.
Изменять изображения стандартных значков масштабирования и ссылки на свои.
Я добавил ещё три фото щенков.
Давайте удалим лишние элементы и настроим отображение 4 фото в 2 столбца.
Смотрим что у нас получилось.
Теперь рассмотрим как добавить возможность фильтрации.
Разворачиваем раздел Фильтруемые элементы управления.
Я изменяю уже существующий элемент на Голубоглазые.
Видим что название вкладки изменилось.
И добавляем ещё один элемент — Разноглазые.
И нам нужно исправить для Элементов галереи значение поля Название элемента управления на одно из двух: Голубоглазые или Разноглазые.
После того, как мы это сделаем, можно фильтровать изображения в галереи на нашей странице.
Как видите всё просто.
Если вас интересует тема работы с Elementor, напишите об этом в комментариях.
Тогда я подготовлю для вас новые видео.
Подписывайтесь на наш Ютуб канал!
Добрый день! Пользуюсь этой галереей успешно. Но есть одно НО! Если хочешь подробнее рассмотреть картинку , то с фотографии в галерее у меня а сайте переходишь на страницу с этой фотографией и ее описанием. После просмотра страницы с фотографией нужно вернуться назад в галерею именно к ней же фотографии. Как, а главное, куда проставить якорную ссылку на фото в галерее, чтобы вела именно к этой фотографии ?