Особенности плагина Divi: Divi FilterGrid

Divi FilterGrid - это сторонний плагин, который добавляет новый фильтруемый модуль в Divi Builder. Он может отображать сообщения из любого настраиваемого типа сообщений и создавать настраиваемые фильтры для их отображения в соответствии с любой выбранной вами таксономией. Показывайте сообщения в блогах, проекты, продукты, создавайте галереи и многое другое.

В этом выделении плагина мы взглянем на Divi FilterGrid, посмотрим, что он может делать, и посмотрим, насколько он прост в использовании. Вы можете приобрести плагин на сайте разработчика.

Модуль Divi FilterGrid

Модуль Divi FilterGrid добавлен в Divi Builder. Значок цветной и выделяется на фоне остальных.

Вкладка Divi FilterGrid Content

Вкладка Content добавляет множество функций. Они включают элементы сообщения, параметры запроса, параметры фильтра, параметры разбивки на страницы и фон для настройки всех цветов фона. Он также включает стандартные параметры ссылки и метки администратора.

Элементы сообщения

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

Это открывает изображение в галерее лайтбоксов. Читатель может нажимать стрелки, чтобы увидеть избранные изображения всех сообщений. При щелчке по заголовку сообщение по-прежнему открывается на той же вкладке.

Вы также можете изменить цвет наложения, значок и цвет значка. Я настроил каждый из них на изображении выше. Вы также можете показать заголовок, добавить ссылку к заголовку, добавить отрывок, ограничить количество символов отрывка, показать кнопку «Читать дальше», добавить настраиваемые поля и многое другое. Я добавил отрывок и отключил мета поста.

Параметры запроса

Параметры запроса позволяют выбрать тип запроса из базового, расширенного и настраиваемого. Выберите категории, номер публикации, номер смещения и упорядочьте параметры. В этом примере я выбрал одну категорию.

Расширенные параметры предоставляют вам несколько новых функций. Выберите определенные типы сообщений, таксономии, термины и исключите термины и таксономии. Вы также можете показывать личные сообщения и прикрепленные сообщения. В приведенном выше примере я устанавливаю таксономию. Он позволяет мне выбирать конкретные категории или теги, которые я хочу использовать, а затем указывать их отношение к поисковому запросу. Дочерние термины работают так же. Это позволяет получить дополнительную информацию, а не просто отображать сообщения на основе категорий или тегов. Вы также можете установить номер сообщения и параметры порядка для таксономий.

Тип пользовательского запроса позволяет использовать настраиваемый контент. Он предоставляет ссылку на документацию, где вы можете узнать, как это настроить. Пользовательские запросы выполняются с помощью кода в файле functions.php. В документации есть несколько примеров, которые помогут вам разобраться.

Параметры фильтров

Параметры фильтров позволяют фильтровать сетку по условиям поиска. Выберите фильтр по умолчанию, и вы увидите модальное окно, в котором вы можете выбрать категории и теги для сообщений и проектов. Вы также можете установить порядок и фильтровать по идентификатору, имени или индивидуальному порядку. Для настраиваемого порядка вы увидите поле, в котором вы можете ввести значения, разделенные запятыми.

Параметры пагинации

Параметры разбивки на страницы позволяют выбрать тип разбивки на страницы. Выберите постраничный вариант, кнопку «Загрузить больше» или «Загрузить больше при прокрутке». Для варианта с разбивкой по страницам вы можете выбрать стрелки, текст и количество страниц, отображаемых в ссылках. В этом примере я добавил текст и изменил стрелки.

Фон

Параметры фона позволяют настраивать фон сетки, фильтры, активный фильтр, разбиение на страницы и активное разбиение на страницы. Он также включает стандартные параметры фона, которые вы ожидаете от модуля Divi. В приведенном выше примере я скорректировал цвета фона для фильтра, сетки и разбивки на страницы.

Вкладка Divi FilterGrid Design

На вкладке «Дизайн» можно настроить параметры макета, текст заголовка публикации, текст метаданных публикации, текст содержимого публикации, текст фильтров, текст разбивки на страницы, кнопку «Читать дальше», кнопку «Загрузить еще» и все стандартные параметры модуля Divi.

Варианты компоновки

Параметры макета позволяют выбрать макет, обложку, установить ширину элементов, размер поля столбца и строки, а также размер шрифта сетки. Я уменьшил ширину элементов, удалил желоб и выбрал для скина Midnight. Я также уменьшил размер шрифта.

Это левые вертикальные фильтры. Он помещает фильтры вертикальной стопкой слева. Я увеличил ширину элементов, чтобы изображения стали крупнее.

Это элементы в оверлее. В этом варианте сообщения короче.

Увеличенное изображение показывает каждое изображение с наложением и заголовком в центре. Изображение увеличивается при наведении курсора.

Библиотека показывает карточки с рамкой и помещает заголовок над изображением.

Это макет списка с использованием обложки по умолчанию.

Это полная ширина. Он помещает заголовок, мета и отрывок внизу изображения.

Вкладка Advanced для модуля Divi FilterGrid

На вкладке «Дополнительно» добавлено 15 настраиваемых полей CSS практически для каждого элемента в модуле. У пользователей CSS не возникнет проблем с настройкой определенных элементов.

Стиль модуля Divi FilterGrid

Варианты компоновки позволяют создавать интересные дизайны. В этом примере я уменьшил ширину, чтобы они отображались в одной строке. Я также удалил мета и отрывок.

Для этого я увеличил ширину элементов. Это создает красивый мозаичный дизайн галереи.

В этом я добавил заголовок, все мета, отрывок и кнопку «Читать дальше». Я изменил цвет заголовка, сделал все заглавными, увеличил размер, центрировал его и увеличил расстояние между символами. Я также уменьшил размер кнопки «Читать дальше» и сделал текст белым.

Есть много вариантов стиля для кнопки «Читать дальше». Для этого я вернулся к размеру по умолчанию, но сделал текст более легким. Я закруглил края и применил фоновый градиент.

Он не отображается в режиме редактора, но вы также можете добавить изображение к кнопке. Вы можете добавить изображение отдельно, со сплошным наложением или с наложением градиента. В этом примере я добавил изображение за своим зеленым градиентом.

Текст метаданных сообщения корректирует все метаданные сообщения вместе. Я изменил цвет и межстрочный интервал.

Текст фильтров позволяет задать стиль шрифта для фильтра. Я увеличил размер шрифта, изменил цвет и добавил эффект тени. Стиль фильтра по умолчанию имеет другой цвет для выбранного фильтра. Вы можете настроить это отдельно в параметре фона на вкладке «Содержимое».

В этом примере я корректирую текст нумерации страниц. Я изменил цвет, увеличил размер, добавил расстояние между символами и добавил тень. Я также отрегулировал силу размытия.

Кнопка «Загрузить еще» также включает в себя основные параметры стиля. Я использую текст по умолчанию (его можно изменить на вкладке содержимого). Я также установил белый цвет для текста (по умолчанию он зеленый).

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

Divi FilterGrid и пользовательские типы сообщений

Мне было легко использовать пользовательские типы сообщений. В параметрах запроса нажмите Выбрать типы сообщений, а затем выберите тип сообщения из модального окна.

Он по-прежнему показывает исходный фильтр, но вы можете создать свой собственный или отключить его. В параметрах фильтра щелкните фильтровать таксономии и выберите свои таксономии из списка. Щелкните Установить значения .

Теперь у меня есть настраиваемый фильтр для моих продуктов WooCommerce.

Теперь у меня есть модуль продукта WooCommerce, который я могу стилизовать по своему усмотрению.

Пример блога Divi FilterGrid

В этом примере я заменил модуль блога на странице блога с макетом Dog Walker. Я придал ему стиль, соответствующий цветам, стилям шрифтов и закругленным углам постов. Затем я добавил продукты WooCommerce, чтобы они появились в списке блогов. Это отличный способ добавить различные типы контента в поток вашего блога.

Результат выглядит потрясающе. Он создает фильтруемый блог, или вы можете отключить фильтр и просто показать контент.

Документация и цена модуля Divi FilterGrid

Документация доступна на сайте разработчика. Нажмите кнопки, чтобы просмотреть конкретную информацию о дополнительных функциях. Вы можете посетить страницу часто задаваемых вопросов или отправить запрос в службу поддержки здесь. Вы также можете нажать на вопросительный знак для каждой функции в модуле, чтобы увидеть объяснение того, как ее использовать.

Есть четыре варианта покупки Divi FilterGrid:

• Один сайт - 19 долларов США
• 5 сайтов - 39 $
• Неограниченное количество сайтов - 59 долларов США
• Пожизненные сайты без ограничений - 129 долларов США.

Вы можете приобрести плагин на сайте разработчика.

Конечные мысли

Divi FilterGrid - интересный плагин. Это отличный модуль для отображения различных типов контента. Вы можете отображать практически любой тип сообщений и отображать несколько типов сообщений вместе. Параметры фильтрации могут быть настолько сложными, насколько вы хотите.

Мне нравятся возможности настройки цвета фона. Наличие параметров цвета на вкладке «Содержимое» означает, что параметры цвета находятся в двух разных местах. Я действительно думаю, что было бы немного более интуитивно понятно, если бы эти настройки цвета были перенесены на вкладку «Дизайн». Тем не менее, приятно иметь возможность самостоятельно настраивать цвета.

Я обнаружил, что это очень интуитивно понятно. Я рекомендую изучить все варианты. Если вы заинтересованы в добавлении мощной фильтрованной сетки для отображения ваших типов сообщений, Divi FilterGrid - это простой плагин, который можно порекомендовать.

Ждем вашего ответа. Вы пробовали Divi FilterGrid? Дайте нам знать, что вы думаете об этом в комментариях.

Лучшее изображение через Thepanyo / shutterstock.com