Ключевые выводы
- Все шесть примеров представляют собой живые демо-страницы, созданные с одним и тем же виджетом, поэтому вы можете открыть каждую из них и самостоятельно щелкнуть вкладки.
- Каждый использует четыре категории плюс вкладку "Все", которая удерживает панель на одной строке на ноутбуке.
- Вкладка Все переименована в каждом дизайне: “Все объявления”, “Полное меню”, “Все работы”, “Все проекты”, “Магазин all” и “Каждый пункт назначения”.
- Количество столбцов варьируется от двух для тематических исследований интерьеров до четырех для меню ресторана и сети магазинов.
- Две из шести кнопок на каждой карте, две используют значок наведения, открывающий изображение, а две не используют ни одну.
Фильтруемая галерея выглядит по-разному в зависимости от того, что она держит. меню ресторана хочет плотные четырехколонные карточки с ценами, студия интерьеров хочет две большие колонки и ссылку на тематическое исследование, а фотограф хочет, чтобы фотографии несли все.
Шесть дизайнов ниже являются живыми демонстрационными страницами, через которые вы можете нажать. в каждой записи отмечаются категории, количество столбцов и настройки, которые придают ей характер, поэтому вы можете скопировать форму, соответствующую вашему контенту.
Оглавление
Краткий обзор шести примеров
| Пример | Категории | Предметы | Столбцы | Ссылки карты |
|---|---|---|---|---|
| Объявления недвижимости | Квартиры, Виллы, Таунхаусы, Офисы | 8 | 3 | Две кнопки |
| Меню ресторана | Маленькие тарелки, сетки, десерты, коктейли | 8 | 4 | Значок наведения |
| Свадебная фотография | Церемония, Портреты, Прием, Подробности | 9 | 3 | Значок наведения |
| Проекты интерьера | Жилой дом, гостиничный бизнес, розничная торговля, рабочее место | 8 | 2 | Одна кнопка |
| Каталог продукции | Сумки, Обувь, Часы, Верхняя одежда | 8 | 4 | Две кнопки |
| Направления путешествий | Европа, Азия, Америка, Африка | 8 | 3 | Значок наведения |
Примеры фильтруемой галереи
1. Объявления о недвижимости
Восемь объявлений по четырем категориям, с вкладкой Все переименовано в “Все объявления”. Каждая карта несет имя свойства в качестве заголовка и строку спецификации в качестве субтитров, поэтому “2 кровать, 1 ванна, 940 кв. футов, $2,450/мо” сидит под фотографией. Две кнопки на карте обрабатывают две вещи, которые хочет посетитель: детали, и просмотр.
Деталь, которую стоит скопировать, - это лента: угловой значок с надписью "Новое" или "Капля цены" на двух из восьми карт тянет глаз, не касаясь макета.
2. Меню ресторана
Четыре столбца на темном фоне, с вкладкой Все читает “Пол меню”. название блюда - это название, а цена - это подзаголовок, который представляет собой всю структуру меню в двух полях. Курсы становятся фильтром, поэтому посетитель, который хочет только десерт, попадает туда в один клик.
Здесь работают четыре колонки, потому что фотографии представляют собой плотные посевы одной посуды. Широкая фотография сцен на четырех колонках была бы нечитаемой.
3. Свадебная фотография
Девять кадров, четыре части дня, и почти нет текста. на вкладке Все написано “Все рабочие” и карты используют значок наведения, а не кнопки, поэтому щелчок открывает изображение вместо того, чтобы перемещаться. это дизайн, который нужно скопировать, когда фотографии являются продуктом.
Что заставляет его работать, так это то, что он не учитывает: ни лент, ни кнопок, ни субтитров, конкурирующих с изображениями.
4. Внутренние проекты
Два столбца, так что каждый проект получает реальное пространство, с наложением, установленным для отображения в любое время, а не на наведение. по одной кнопке на карту, с чтением “View case study”. панель фильтров выровнена влево, а не по центру, что соответствует редакционному ощущению.
Два столбца - это выбор, который стоит скопировать для работы, заслуживающей второго взгляда Восемь проектов в двух столбцах по-прежнему помещаются в один экран прокрутки.
5. Каталог продукции
Четыре столбца, название продукта как название, цена как субтитры, и две кнопки с чтением “Быстрый вид” и “Добавить в bag”. На вкладке Все написано “Покупайте all”.Похоже на страницу магазина, но не являясь таковой: карты - это изображения со ссылками, а не продукты, поэтому в корзине ничего не ходит. Для лукбука, который указывает на магазин, этого достаточно.
Полезной частью является рисунок из двух кнопок: одно мягкое действие, одно твердое.
6. Направления путешествий
Континенты как фильтр, с вкладкой Все переименовано “Every destination”.Шкала наведения установлена выше, чем другие демо, поэтому карты поднимаются более заметно под курсором.Заголовки называют место, а субтитры добавляют детали.
Переименованная вкладка Все делает реальную работу здесь. “Каждый пункт назначения” сообщает посетителю, что это за набор; “All” ничего им не говорит.
Что общего у шестерки
- Четыре категории во всех шести конструкциях Четыре вкладки плюс Все помещаются на одну линию на ноутбуке и оборачиваются на телефон до двух.
- Вкладка "Все" переименовывается каждый раз: по умолчанию остается шесть разных меток и ни одной.
- Название сверху, детали внизу, в каждом дизайне, в котором вообще используется текст.
- Подсчет столбцов соответствует фотографии: плотные посевы занимают четыре колонны, сцены и комнаты - две или три.
- Поведение одним щелчком мыши на карту, кнопки или значок лайтбокса, а не оба.
Построение одного из них
Каждый дизайн является одним и тем же виджетом с различными настройками. сборка: добавить элемент на изображение, ввести метку фильтра на каждом из них, чтобы создать вкладки, установить столбцы, затем решить, обрезаются ли карты до одинаковой высоты с соотношением аспектов изображения или сохранить свои собственные пропорции. заголовки, субтитры и поведение наложения живут в разделе "Настройка наложения", и две кнопки сидят на каждом элементе.
Полное прохождение уже в как создать фильтруемую галерею в Elementor, а сам виджет есть Фильтруемая галерея изображений.
Часто задаваемые вопросы
Могу ли я импортировать эти примеры в виде шаблонов?
Они являются демо-страницами, а не импортными наборами. восстановление одного занимает около десяти минут, так как структура представляет собой горстку настроек и ваших собственных изображений.
Сколько категорий должно быть у фильтровальной панели?
Четыре - это узор во всех шести дизайнах. за шесть бар заворачивается на ноутбук и начинает читать как второе меню.
Может ли одно изображение появиться под двумя вкладками?
Да. Поместите оба названия категорий в поле "Метка фильтра", разделенное запятой.
В демонстрациях используется каменная кладка?
Нет. все шесть карт урожая до одинаковой высоты, из-за чего сетки выглядят опрятно. масонство - это отдельный переключатель для наборов со смешанной ориентацией.
Может ли пример магазина принимать платежи?
Нет. это галерея с кнопками, поэтому карты ссылаются, куда бы вы их ни указали.Оформить заказ принадлежит WooCommerce.
Заключительные мысли
Шесть дизайнов, один виджет и четыре решения между ними: сколько столбцов, обрезаются ли карты, что делают кнопки и как называется вкладка "Все". Начните с примера, ближайшего к вашему контенту, и измените эти четыре.
Связанное чтение
