Простая сетка изображений не дает посетителям возможности просматривать темы. The Фильтруемая галерея изображений виджет в Мастер-аддоны для Elementor исправляет, что. он добавляет фильтры категорий, наложения на наведения, ленты, и ссылки лайтбокс в стандартную галерею, так что вы можете построить фильтруемый портфель или демонстрацию продукта без записи какого-либо кода.
Вот как работает каждая вкладка и настройка, так что можно настроить Фильтруемая галерея Elementor не догадываясь, что делают переключатели.
Эта страница является ссылкой настройки. для живых примеров и обзор того, что виджет может сделать, посетите Виджет фильтруемой галереи Elementor страница.
Что делает виджет "Галерея фильтруемых изображений" #
Виджет отображает сетку изображений и позволяет посетителям фильтровать их по категориям. Каждый элемент галереи поддерживает заголовок, субтитры, ленту, значок наведения и две кнопки действий. Раскладка, интервал, наложение анимации и типографика управляются с панели Элементор, поэтому один и тот же виджет работает для портфолио, лукбуков электронной коммерции, туристических галерей и стен для фотографий команды.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Нужна помощь? Видеть руководство установки.
- Изображения сгруппированы по категориям, по которым хотят фильтровать посетителей.
Как добавить виджет Фильтруемая галерея Elementor #
Откройте редактор Elementor и найдите Фильтруемая галерея на панели Элементы, или прокрутите вниз к разделу Мастер Аддоны Перетащите виджет на свою страницу Он загружается с элементами галереи заполнителя, так что у вас есть что-то на экране, чтобы работать немедленно.
Создайте свою галерею на вкладке "Контент" #
The Содержание вкладка - это место, где вы добавляете изображения, назначаете категории фильтров и настраиваете ленты и ссылки.
Содержание галереи #
The Содержание галереи раздел является ретранслятором Каждый пункт представляет одну карту изображения Нажмите Добавить элемент чтобы создать больше карт или использовать дубликаты и удалять значки для управления ими.
Каждый предмет имеет одинаковые поля:
- Этикетка фильтра: категория посетители используют для фильтрации Примеры: Технологии, Природа, Архитектура.
- Изображения: нажмите, чтобы открыть медиа-подборщик и выбрать изображения для этой карты. вы можете выбрать несколько сразу.
- Название: основной заголовок показан под или над изображением.
- Субтитры: меньшая строка под заголовком.
- Показать ленту?: переключить, чтобы добавить угловой или встроенный значок.
- Лента: текст значка, например "Популярный" или "Новый".
- Всплывающее окно или ссылки?: выберите, открывает ли карта всплывающее окно лайтбокса или ссылается на URL-адрес.
- Кнопка Один текст/URL: метка и пункт назначения первой кнопки действия.
- Кнопка Два текста/URL: метка и пункт назначения второй кнопки действия.
Разрешение изображения и столбцы #
Под ретранслятором установите Разрешение изображения WordPress должен обслуживать и количество Столбцы. Шесть столбцов дают вам маленькие миниатюры; упадите до трех, когда вам нужны карты большего размера с читаемыми заголовками. Выберите разрешение, близкое к фактическому размеру дисплея, иначе вы загружаете полноразмерные изображения в маленькие карты, и страница платит за это.
Настройки #
The Настройки раздел контролирует общее поведение галереи.
- Показать фильтр Nav?: отображает кнопки фильтра категорий над сеткой.
- Показать вкладку Фильтр “All”: добавляет кнопку "Все", чтобы посетители могли сбросить фильтр.
- Все категории Текст: метка для кнопки сброса, обычно Все.
- Показать всплывающую подсказку?: включает всплывающие подсказки на кнопках фильтров.
- Соотношение сторон изображения: обеспечивает стабильное соотношение между каждым изображением.
- Желоб: пространство между элементами сетки.
- Кладка: переключает сетку на раскладку каменной кладки для неравномерной высоты изображения.
- Шкала наведения: слегка увеличивает изображение при зависании.
- Масштабное значение: насколько изображение масштабируется, например 1.1.
- Эффект наклона: добавляет 3D-наклон, который следует за курсором.
Наложение Настройка #
The Наложение Настройка раздел решает, что появляется, когда посетитель наводит курсор на предмет.
- Показать название?: отображение заголовка элемента на наведении.
- Показать субтитры?: отобразить субтитры на hover.
- Показать категорию?: показывать метку категории фильтра.
- Иконка наведения?: добавьте значок, который появляется на ховере, например увеличительное стекло или символ ссылки.
- Тип накладки: выберите, когда появится наложение On Hover является наиболее распространенным.
- Надпись: переключить область субтитров под изображением.
- Направление наведения: включает эффекты направленного наведения.
Стиль галереи на вкладке Стиль #
The Стиль вкладка охватывает контейнер для карты, изображение, наложение и кнопки.
Стиль деталя #
Стиль деталя контролирует обертку карты.Установить заполнение, маржа, тип границы, ширину границы, цвет границы, и радиус границы здесь. тонкая граница с небольшим радиусом - это быстрый способ отделить карты от светлого фона.
Стиль изображения #
Стиль изображения стилизует саму картинку и ее состояние зависания.
- Стиль изображения: выберите внешний вид по умолчанию или наложение на наведения.
- Цвет наложения нависания: оттенок, который покрывает изображение на зависании.
- Стиль названия: цвет и типографика названия товара.
- Стиль субтитров субтитров: цвет и типографика субтитров.
- Стиль значка: размер и цвет значка для значка наведения.
Наложение #
The Наложение раздел выбирает анимацию наведения. Опции включают в себя Fade In, Slide From Left, Slide From Top, Mask From Bottom, Rotate In, Zoom In и Scale Up. Fade In - безопасное значение по умолчанию; варианты слайда и вращения привлекают к себе больше внимания, чего вы можете хотеть или не хотеть в портфолио.
Кнопка один и два стиля #
Стиль кнопок действий отдельно. каждая кнопка имеет нормальное состояние и состояние наведения с элементами управления для типографики, заполнения, цвета текста, цвета фона, границы, радиуса границы и тени коробки.
Смотрите живой результат #
Опубликовать или просмотреть страницу, чтобы увидеть окончательную галерею Посетители могут навести курсор на элемент, чтобы увидеть наложение, заголовок и значок, или щелкнуть, чтобы открыть лайтбокс или ссылку. если вы включили навигацию по фильтру, они также могут нажать кнопки категории, чтобы показать только совпадающие изображения.
Одно нужно проверить: если кнопки фильтра не отвечают на живой странице, но работают нормально в редакторе, ваш плагин кэширования или оптимизации, вероятно, откладывает или комбинирует JavaScript галереи Исключите сценарии главных аддонов из оптимизации JS и очистите кэш.
Обычные случаи использования #
- Страницы портфолио: позвольте клиентам фильтровать по брендингу, веб-дизайну или фотографии.
- Каталоги продукции: группируйте предметы по категориям, цветам или коллекции.
- Галереи путешествий или недвижимости: фильтр по местоположению или типу свойства.
- Командные или событийные альбомы: организуйте фотографии по отделам или сессиям.
Советы по лучшей фильтруемой галерее #
- Используйте согласованные размеры изображений. Он сохраняет сетку аккуратной, особенно когда каменная кладка выключена.
- Держите этикетки фильтров короткими. Лучше всего фильтрующему стержню подходят одно или два слова.
- Включить соотношение сторон изображения если ваши исходные изображения имеют разные размеры.
- Выберите один сильный эффект зависания вместо того, чтобы штабелировать масштаб, наклон и плотное наложение.
- Сжимайте изображения перед загрузкой. Галерея, полная несжатых фотографий, является одной из наиболее распространенных причин медленной страницы.
Видео Учебник #
Если вы хотите увидеть виджет "Фильтрабельная галерея" в действии, это видео проходит через полную настройку, начиная с добавления элементов галереи в отфильтрованную сетку на живой странице:
Часто задаваемые вопросы #
Как создать фильтруемую галерею в Elementor?
Установите главные надстройки для Elementor, добавьте виджет "Фильтруемая галерея", создайте элементы галереи, назначьте метку фильтра каждому элементу и включите "Показать навигацию по фильтрам" в разделе "Настройки". Затем посетители могут нажать кнопки категории, чтобы отфильтровать сетку.
Бесплатна ли фильтруемая галерея Master Addons?
Да. Галерея фильтруемых изображений является частью бесплатного плагина Master Addons, поэтому для его использования не нужна лицензия Pro.
Могу ли я добавить лайтбокс к изображениям галереи?
Да. установите опцию Всплывающее окно или ссылки на Всплывающее окно для каждого элемента галереи. Затем посетители могут щелкнуть изображение, чтобы открыть его в лайтбоксе.
Поддерживает ли виджет макет каменной кладки?
Да. включите переключатель "Кладони" в разделе "Настройки", чтобы отображать изображения в макете в стиле Pinterest с неравномерной высотой.
Могу ли я добавить ленту или значок к предметам галереи?
Да. включите ленту Show в элементе галереи и введите текст ленты, например Популярный или Распродажа. лента появляется на карте изображения.
Завершая #
Главные Аддоны Фильтруемая галерея изображений виджет превращает статическую сетку изображений в галерею, основанную на категориях, которую посетители действительно могут просматривать. навигация по фильтрам, наложения на наведение, ленты и поддержка лайтбоксов - все это встроено, поэтому для большинства проектов вам не понадобится отдельный плагин галереи. Вы можете видеть, как он работает над Страница виджета галереи изображений с возможностью фильтрации.
Чтобы получить больше инструментов изображения, изучите Расширенный виджет изображения, Изображение Карусельи Галерея Слайдер. Вы также можете прочитать наш обзор Плагины фильтруемой галереи Elementor или просмотрите все Виджеты и расширения Master Addgets коллекция.
