TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Лучший обзор GridBuilderWP: гибкие сетки и фильтры

210

Когда вы садитесь смотреть футбол, вы можете легко заметить суперзвезд за милю.

Их стильная и отточенная игра отличает их друг от друга и часто меняет исход матча. Фанаты и менеджеры любят их, потому что, когда они играют, они демонстрируют все свои лучшие качества.

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

Вы знаете, прямо как Gridbuilder WP, предмет сегодняшнего обзора.

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

Тем не менее, сеточные макеты – отличный способ отображения и фильтрации контента на вашем веб-сайте WordPress. Что-то вроде этого:

Лучший обзор GridBuilderWP: гибкие сетки и фильтры

Демо-версия GridBuilder WP для электронной коммерции

Или это:

Лучший обзор GridBuilderWP: гибкие сетки и фильтры

Демо-версия портфолио Gridbuilder WP

Но, к сожалению, создать сетку для вашего сайта WordPress непросто. По крайней мере, так было до появления плагинов сетки WordPress.

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

Если вы ищете такой плагин, Gridbuilder WP идеально подходит.

А в сегодняшнем обзоре / статье с практическими рекомендациями вы узнаете, почему Gridbuilder WP является плагином для создания сетки и фильтрации, который выбирают все большее число пользователей WordPress. Мы заглянем под капот и поиграем с плагином, так что вы уже знаете, что это будет весело.

Без лишних слов, засучим рукава и испачкаемся.

Что такое Gridbuilder WP ?


Лучший обзор GridBuilderWP: гибкие сетки и фильтры

Gridbuilder WP, также известный как WP Grid Builder, представляет собой красивый плагин WordPress, который позволяет быстро создавать расширенные макеты сетки. Он имеет интуитивно понятный пользовательский интерфейс, которым довольно приятно пользоваться.

Плагин имеет прекрасный набор функций, который идеально подходит как для новичков, так и для разработчиков. Для новичков WP Grid Builder – это полное решение для создания гибких и фильтруемых макетов сетки и их фильтрации без знания программирования. Если вы разработчик, построитель сетки предлагает множество действий и функций, которые помогут вам занять себя.

Он работает со всеми темами WordPress и легко интегрируется с большинством ваших любимых инструментов. Вдобавок к этому, плагин поставляется с надстройками, которые улучшают макеты вашей сетки и фильтры поиска (известные как фасеты).

На момент написания они предлагают только премиум-версию WP Grid Builder, но это может измениться в будущем. Или как Лоик Бласкос, разработчик, говорит в электронном письме, которое он отправил сразу после моего запроса:

Лучший обзор GridBuilderWP: гибкие сетки и фильтры

Тем не менее, у них есть три плана стоимостью от 49 до 249 долларов в год. Выберите план, подходящий для ваших нужд.

Если вы недовольны своей покупкой, WP Grid Builder предлагает вам 14-дневную гарантию возврата денег. Кроме того, они предлагают отличные скидки на продления (20% для базового плана, 30% для плана Premium и 40% для плана Ultimate) для хорошей меры.

Чтобы подсластить сделку, эксперты WordPress хвалят WP Grid Builder. Вот один довольный клиент:

Gridbuilder ᵂᴾ удобен как для пользователя, так и для разработчиков, это отличный продукт и новая парадигма для такого рода функций. Хорошо интегрированный в WordPress Core, он обеспечивает приятный интерфейс администратора и невероятно быстрый интерфейс. – Jb Audras, основной разработчик WordPress.

Даже Крис Лема, одно из самых громких имен в кругах WordPress, только хвалит WP Grid Builder:

Лучший обзор GridBuilderWP: гибкие сетки и фильтры

Кроме того, вы получите быструю поддержку мирового уровня и подробную документацию, которая поможет вам установить и настроить WP Grid Builder.

Теперь мы знаем, с чем работаем, давайте кратко рассмотрим возможности WP Grid Builder WP.

Gridbuilder WP Особенности


Лучший обзор GridBuilderWP: гибкие сетки и фильтры

WP Grid Builder поставляется со всеми функциями, необходимыми для создания макетов сетки на профессиональном уровне. В отличие от конкурентов, плагин упрощает создание макетов для вашего магазина электронной коммерции, веб-сайта портфолио, блога и каталога, среди прочего.

Вы можете ожидать следующие функции в вашей копии WP Grid Builder:

  • Плавная интеграция с WooCommerce, Easy Digital Downloads, SearchWP, Relevanssi, Polylang, WPML, Advanced Custom Fields и Gutenberg
  • 100% отзывчивость и мобильность благодаря сенсорной поддержке лайтбокса и карусели
  • Оптимизирован для SEO – WP Grid Builder совместим с W3C и использует лучшие практики SEO.
  • Молниеносная производительность благодаря настраиваемым конечным точкам AJAX
  • Расширенная система фильтрации, которая позволяет вам эффективно сортировать контент WordPress по (настраиваемым) условиям таксономии, полям публикации или настраиваемым полям.
  • 15+ типов фасетов, включая радио, флажки, ползунки, выбор, рейтинги, ползунки, рейтинги, кнопки дополнительной загрузки, кнопки сброса и многое другое, что позволяет вашим пользователям сузить результаты поиска
  • Функции импорта и экспорта, позволяющие легко перенести настройки WP Grid Builder на другой сайт.
  • Встроенный лайтбокс
  • Конструктор сетки с перетаскиванием
  • 20+ готовых и легко настраиваемых сеточных карт. Далее вы можете создавать свои карты с нуля
  • 900+ шрифтов Google
  • Более 250 иконок SVG для украшения ваших сеточных карт по желанию
  • Поддержка обмена в социальных сетях, позволяющая делиться контентом в социальных сетях прямо из ваших сеток
  • Поддержка изображений, видео (включая встраивание с таких сайтов, как YouTube), галереи и форматов аудио-сообщений
  • 3+ макета сетки, включая Masonry, Justified и Metro
  • Ленивая загрузка, которая увеличивает скорость загрузки страницы
  • 20+ анимаций загрузки, которые сокращают воспринимаемое время загрузки пользователями
  • 20+ раскрывающих анимаций
  • Поддержка RTL для языков, написанных справа налево
  • Интуитивно понятная панель администратора
  • И еще много настроек

Какой впечатляющий список возможностей? Теперь давайте установим WP Grid Builder и проверим, чего мы можем достичь с помощью построителя сетки, как никто другой.

Как установить Gridbuilder WP

А теперь самое интересное ?

Установить WP Grid Builder так же просто, как A, B, C. Если вы знаете, как установить плагин премиум-класса, у вас не должно возникнуть проблем с установкой WP Grid Builder. После покупки плагина вы можете найти ZIP-папку WP Grid Builder в своей учетной записи или в электронном письме о покупке.

Сначала загрузите ZIP-файл WP Grid Builder на свой компьютер. Затем войдите в свою административную панель WordPress и перейдите в Плагины> Добавить новый, как показано ниже.

Лучший обзор GridBuilderWP: гибкие сетки и фильтры

Затем нажмите кнопку «Загрузить плагин», выберите загруженный ZIP-файл WP Grid Builder и нажмите кнопку «Установить сейчас», чтобы начать работу. Вот скриншот с описанием процесса:

Лучший обзор GridBuilderWP: гибкие сетки и фильтры

Затем активируйте WP Grid Builder:

Лучший обзор GridBuilderWP: гибкие сетки и фильтры

Активация плагина добавляет элемент Gridbuilder WP в ваше административное меню WordPress. Затем перейдите в Gridbuilder WP > Dashboard, как описано ниже.

Лучший обзор GridBuilderWP: гибкие сетки и фильтры

После этого введите свой лицензионный адрес электронной почты и лицензионный ключ и нажмите кнопку Активировать плагин :

Лучший обзор GridBuilderWP: гибкие сетки и фильтры

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

Лучший обзор GridBuilderWP: гибкие сетки и фильтры

Теперь, когда мы установили и активировали WP Grid Builder, мы можем создать наш первый макет сетки.

Как настроить Gridbuilder WP

В следующем разделе вы узнаете, как создать функциональную сетку. Я сделаю все возможное, чтобы охватить большинство (если не все) настроек. Отличная новость заключается в том, что функции WP Grid Builder имеют четкое описание в интерфейсе администратора. Мы должны начать с названия нашей новой сетки для использования в будущем.

Именование новой сетки

Чтобы создать новый макет сетки, перейдите в Gridbuilder WP > Все сетки в меню администратора WordPress:

Лучший обзор GridBuilderWP: гибкие сетки и фильтры

Это приведет вас к экрану All Grids, который пока пуст. Затем нажмите кнопку Create A Grid :

Лучший обзор GridBuilderWP: гибкие сетки и фильтры

Кроме того, вы можете импортировать демонстрации с wpgridbuilder.com. Обратите внимание, однако, что демонстрации предназначены только для целей настройки макета. Контент, отображаемый в ваших сетках, зависит от ваших сообщений, медиа, продуктов и т.д.

Для целей тестирования я выбрал первый вариант, создав новую сетку с нуля. Кнопка Create A Grid ведет на следующую страницу:

Лучший обзор GridBuilderWP: гибкие сетки и фильтры

На приведенном выше экране вы можете:

  • Назовите свою сетку. В нашем примере я использую «Галерею тестов».
  • Добавьте и сгенерируйте собственный класс CSS, чтобы вы могли добавлять пользовательские стили в свою сетку, если хотите.
  • Определите сообщения об ошибках, которые пользователи видят, если не находят результатов

Выберите медиафайлы для отображения в вашей сетке

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

Лучший обзор GridBuilderWP: гибкие сетки и фильтры

Как показано выше, у вас есть три типа источников в разделе Тип источника :

  • Тип сообщения – вы можете извлекать контент из своих сообщений, страниц, медиатеки или любого другого настраиваемого типа публикации.
  • Срок – вы можете использовать источник материала на основе категорий, тегов или любых других пользовательских терминов таксономии.
  • Пользователь – эта опция позволяет вам получать контент от определенных пользователей WordPress.

Под этим вы можете установить количество элементов на странице. Используйте значение «-1», чтобы показать все сообщения. Ноль (0) по умолчанию соответствует количеству сообщений на странице в настройках WordPress.

Раздел запрошенных сообщений

Ниже у вас есть раздел Запрошенные сообщения :

Лучший обзор GridBuilderWP: гибкие сетки и фильтрыНа приведенном выше экране вы можете сделать следующее:

  • Выберите тип сообщения в разделе Тип сообщения, как отмечено на изображении. Если вы хотите создать сетку для сообщений в блоге, выберите «Сообщения». Если вы создаете сетку для своего мультимедиа (скажем, вы хотите создать визуальное портфолио), выберите Медиа, как в нашем примере выше. Другой доступный тип сообщений – Pages.
  • Ниже типов сообщений вы можете выбрать статус публикации контента, который хотите отобразить в своей сетке. У вас есть несколько вариантов, но я бы рекомендовал вам придерживаться опубликованного. Кроме того, вы можете выбирать авторов сообщений, типы пантомимы и включать / исключать определенный контент из вашей сетки.
  • Как показано под номером три (3) на изображении выше, вы можете напрямую включить другие носители, что может сэкономить вам много времени, особенно если вы хотите быстро развернуть сетку.

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

Лучший обзор GridBuilderWP: гибкие сетки и фильтры

В сторону: чтобы случайно не потерять свой прогресс, нажмите кнопку «Сохранить изменения» при создании сетки. Настроим медиаформаты.

Форматы СМИ

Перейдите в Настройки сетки> Форматы мультимедиа :

Лучший обзор GridBuilderWP: гибкие сетки и фильтры

Вы можете выбрать форматы мультимедиа, которые хотите использовать в своих сетках. WP Grid Builder поддерживает галереи, видео и аудио. В нижней части экрана вы можете установить миниатюру по умолчанию для каждой карты сетки (или плитки) на случай, если содержимое отсутствует.

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

Стиль сетки


Лучший обзор GridBuilderWP: гибкие сетки и фильтры

Перейдите в Настройки сетки> Стиль сетки, чтобы настроить сетку, как показано выше. По умолчанию у вас есть три стиля сетки: Масонство, Метро и По ширине. Я использую масонство в иллюстративных целях. Кроме того, я ранее публиковал изображения в своей медиатеке. WP Grid Builder автоматически добавляет фотографии в сетку.

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

Макет сетки


Лучший обзор GridBuilderWP: гибкие сетки и фильтры

Здесь особо не на что смотреть. У вас есть два типа макетов для ваших сеток; Стандартный вертикальный дизайн и Карусель. Кроме того, вы можете сделать свои сетки полной ширины. Я работаю со стандартным дизайном, и моя сетка полностью развернута.

Мы идем дальше.

Компоновщик сетки


Лучший обзор GridBuilderWP: гибкие сетки и фильтры

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

Внизу экрана вы найдете конструктор макета сетки с перетаскиванием. Например, ниже показан мой пример с тремя аспектами: фильтр по дате, поиск и кнопка «Загрузить еще».

Лучший обзор GridBuilderWP: гибкие сетки и фильтры

Если я опубликую свою сетку на этом этапе, я увижу следующую сетку с тремя (3) полностью функциональными гранями:

Лучший обзор GridBuilderWP: гибкие сетки и фильтры

Неплохо ? Совсем неплохо. Надеюсь, вы понимаете суть вещей, но мы еще не закончили. Вернемся в админку WP Grid Builder.

Стили карточек


Лучший обзор GridBuilderWP: гибкие сетки и фильтры

Показанный выше раздел «Стиль карточек» позволяет настраивать карточки сетки. Карты сетки – это просто прямоугольные или квадратные плитки, составляющие сетку. Когда вы начнете использовать WP Grid Builder, вам может потребоваться импортировать демонстрации, как показано на изображении выше. Однако вы можете создавать свои карты с нуля, что открывает безграничные возможности.

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

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

Анимации


Лучший обзор GridBuilderWP: гибкие сетки и фильтры

Опять же, здесь особо не на что смотреть; всего пара анимаций для отображения карточек в сетке, когда пользователь прокручивает или нажимает кнопку «Загрузить еще». Эта функция невероятно проста в использовании и дает прекрасные эффекты, повышающие вовлеченность пользователей.

Загрузка


Лучший обзор GridBuilderWP: гибкие сетки и фильтры

Далее у вас есть варианты загрузки, как мы подробно описали выше. На экране вы можете включить отложенную загрузку, чтобы значительно повысить скорость ваших сеток. Ленивая загрузка загружает мультимедиа только тогда, когда они находятся в области просмотра пользователя, что может сократить время загрузки сетки.

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

Настройка


Лучший обзор GridBuilderWP: гибкие сетки и фильтры

Помните пользовательский класс CSS, который мы добавили в нашу сетку ранее? Итак, вы используете класс для изменения стилей CSS плагина в окне «Параметры сетки»> «Настройка». Если вы не разбираетесь в CSS, вам лучше при необходимости нанять стороннюю помощь.

Gridbuilder WP Add-Ons


Лучший обзор GridBuilderWP: гибкие сетки и фильтры

Надстройки позволяют расширить функциональность плагина WordPress. WP Grid Builder поставляется с парой надстроек, которые вы можете легко установить, перейдя в Gridbuilder WP > Надстройки. В настоящее время WP Grid Builder поставляется с четырьмя надстройками, а именно:

  • Фасет карты – позволяет добавлять карты из Google Maps, Mapbox или Leaflet и отображать маркеры.
  • Кэширование – для ускорения работы с сетками путем кэширования содержимого и фасетов.
  • LearnDash – Отображение информации о курсе на карточках
  • Многоязычный – интеграция WP Grid Builder с Polylang и WPML

Другие настройки Gridbuilder WP


Лучший обзор GridBuilderWP: гибкие сетки и фильтры

Чтобы получить доступ к общим настройкам WP Grid Builder, перейдите в Gridbuilder WP > Настройки. На экране вы найдете такие параметры, как:

  • Разрешить WP Grid Builder отображать блоки в Gutenberg
  • Включить поддержку форматов сообщений
  • Отображение параметров сообщений и терминов (форматы сообщений и цвета терминов)
  • Очистить кеш и очистить таблицы стилей
  • Изменить глобальные цвета
  • Настройте дополнительные размеры изображений
  • Настройте плагин Lightbox
  • Сбросить глобальные настройки плагина

Заключение

WP Grid Builder – это великолепный плагин для создания сеток и фильтров WordPress, подходящий как для новичков, так и для разработчиков. Он поставляется с обширным списком удивительных функций, которые упрощают создание адаптивных макетов сетки. Кроме того, они предлагают гибкую структуру ценообразования и быструю поддержку.

Что вы думаете о Gridbuilder WP? Мы что-то упустили? Пожалуйста, дайте нам знать в разделе комментариев ниже.

Источник записи: https://www.wpexplorer.com

Leave A Reply

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. ПринимаюПодробнее