Когда вы садитесь смотреть футбольный матч, вы можете легко увидеть суперзвезд за милю.
Их элегантная и изысканная игра выделяет их и часто меняет исход матча. Поклонники и менеджеры любят их, потому что когда они играют, они в своих лучших проявлениях.
То же самое относится и к суперзвездам в музыкальной индустрии. Обычно они добираются до работы, они нас серенадуют ударами, и они все еще продолжают. Звезды – мастера своего дела и толкают наше воображение до предела.
Вы знаете, как Gridbuilder WP, тема сегодняшнего обзора.
Вот введение: Мы знаем, что компоновка сетки здания не для слабых, тем более для начинающих. Это сложная задача даже для пользователей с достаточным опытом.
Тем не менее, сеточные макеты являются удивительным способом отображения и фильтрации контента на вашем сайте WordPress. Как то так:
Gridbuilder WP Ecommerce Demo
Или это:
Gridbuilder WP Портфолио Демо
Но, к сожалению, создание макетов сетки для вашего сайта WordPress не так просто. Или так было до появления плагинов к сетке WordPress.
Чтобы создать фантастический дизайн сетки без пота, вам нужен Простой, но мощный плагин WordPress,
Если вы ищете такой плагин, Gridbuilder WP отлично подойдет.
А в сегодняшнем обзоре / статье с практическими рекомендациями вы узнаете, почему Gridbuilder WP является предпочтительным плагином для фильтров и сеток для растущего числа пользователей WordPress. Мы смотрим под капот и играем с плагином, чтобы вы знали, что это будет весело.
Без лишних слов, давайте засучим рукава и испачкаемся.
Что такое Gridbuilder WP?
Также известный как WP Grid Builder, Gridbuilder WP – это красивый плагин для WordPress, который позволяет быстро создавать расширенные макеты сетки. Он имеет интуитивно понятный пользовательский интерфейс, который довольно приятен в использовании.
Плагин поставляется с прекрасным набором функций, идеально подходящих как для начинающих, так и для разработчиков. Для новичков WP Grid Builder представляет собой комплексное решение для создания фильтруемых и гибких макетов сетки и для фильтрации без навыков кодирования. Если вы разработчик, генератор сетки поставляется с множеством действий и функций, чтобы занять вас.
Он работает со всеми темами WordPress и легко интегрируется с большинством ваших любимых инструментов. Вдобавок ко всему, плагин поставляется с плагинами, которые перегружают макеты вашей сетки и поисковые фильтры (известные как фасеты).
На момент написания они предлагают только премиум-версию WP Grid Builder, но это может измениться в будущем. Или, как говорит разработчик Лоик Блакос в электронном письме, которое он отправил сразу после моего запроса:
Во всяком случае, у них есть три плана, которые стоят от 49 до 249 долларов в год. Выберите план, который подходит для ваших нужд.
Если вы не удовлетворены своей покупкой, WP Grid Builder предлагает вам 14-дневную гарантию возврата денег. Кроме того, они предлагают отличные скидки на продления (20% для базового плана, 30% для премиум-плана и 40% для окончательного плана) на всякий случай.
Чтобы подсластить сделку, эксперты WordPress хвалят WP Grid Builder. Вот счастливый клиент:
Как для пользователей, так и для разработчиков, Gridbuilder ᵂᴾ – невероятный продукт и новая парадигма для этого типа функций. Хорошо интегрированный с WordPress Core, он обеспечивает хорошее администрирование и невероятно быстрый интерфейс. – Jb Audras, главный разработчик WordPress.
Даже Крис Лема, одно из крупнейших имен в кругах WordPress, не получает ничего, кроме похвалы за WP Grid Builder:
Кроме того, вы получите быструю поддержку мирового класса и подробную документацию, которая поможет вам широко установить и настроить WP Grid Builder.
Теперь, когда мы знаем, с чем работаем, давайте кратко рассмотрим возможности WP Grid Builder WP.
Gridbuilder WP Особенности
WP Grid Builder включает в себя все функции, необходимые для создания макетов сетки, как профессионал. В отличие от конкурентов, плагин делает слишком простым создание макетов для вашего магазина электронной коммерции, веб-сайта портфолио, блога и каталога, среди прочего.
В вашей копии WP Grid Builder можно ожидать следующих функций:
- Плавная интеграция с WooCommerce, Easy Digital Downloads, SearchWP, Relevanssi, Polylang, WPML, Расширенными пользовательскими полями и Гутенбергом
- 100% отзывчивость и мобильность с поддержкой касания для лайтбокса и карусели
- SEO дружественный: WP Grid Builder поддерживает W3C и использует лучшие практики SEO
- Сверхбыстрая производительность благодаря индивидуальным конечным точкам AJAX
- Усовершенствованная система фильтрации, которая позволяет эффективно сортировать содержимое WordPress по (настраиваемым) терминам таксономии, полям записей или настраиваемым полям.
- Более 15 типов фасетов, включая радиусы, флажки, ползунки, выборки, рейтинги, ползунки, рейтинги, дополнительные кнопки загрузки, кнопки сброса и многое другое, что позволяет пользователям ограничивать результаты поиска
- Функциональность импорта и экспорта, так что вы можете легко перенести настройки WP Grid Builder на другой сайт
- Встроенный световой короб
- Перетащите сетку строитель
- Более 20 карт готовы и легко персонализировать. Также вы можете создавать свои карты с нуля
- Более 900 Google шрифтов
- Более 250 иконок SVG, чтобы украсить ваши карты сетки, как вам нравится
- Поддержка совместного использования в социальных сетях, которая позволяет вам обмениваться контентом в социальных сетях непосредственно из ваших сетей
- Поддержка изображений, видео (включая встроенные сайты, такие как YouTube), галереи и аудио форматов публикации
- Более 3 макетов сетки, включая кладку, обоснование и метр
- Медленная загрузка, которая повышает скорость загрузки страницы
- Более 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 и перейдите к Плагины> Добавить новыйКак показано ниже.
Затем нажмите Загрузить плагин выберите загруженный ZIP-файл WP Grid Builder и нажмите Установить сейчас кнопка, чтобы заставить вещи двигаться. Вот скриншот, который описывает процесс:
Затем активируйте WP Grid Builder:
Активация плагина добавляет пункт Gridbuilder WP в ваше меню администратора WordPress. Затем перейдите к Gridbuilder WP> Панель управления, как подробно описано ниже.
После этого введите свой адрес электронной почты и лицензионный ключ и нажмите Активизировать Подключите кнопка:
Чтобы воспользоваться автоматическими обновлениями, вы можете активировать свою лицензию, которая доступна в электронном письме с подтверждением заказа или на странице вашей учетной записи:
Теперь, когда мы установили и активировали WP Grid Builder, мы можем создать наш первый макет сетки.
Как настроить Gridbuilder WP
В следующем разделе вы узнаете, как создать функциональную сетку. Я сделаю все возможное, чтобы охватить большинство (если не все) настроек. Отличная новость заключается в том, что функции WP Grid Builder имеют четкие описания в интерфейсе администратора. Мы должны начать с именования нашей новой сетки для дальнейшего использования.
Назовите новую сетку
Чтобы создать новый макет сетки, перейдите к Gridbuilder WP> Все сетки в вашем админ-меню WordPress:
Это приведет вас к Все сетки экран, который пока пуст Затем нажмите Создать сетку кнопка:
Кроме того, вы можете импортировать демонстрации с wpgridbuilder.com. Тем не менее, обратите внимание, что демонстрационные версии предназначены только для настройки дизайна. Содержимое, отображаемое в ваших сетках, зависит от ваших сообщений, медиа, продуктов и т. Д.
Для наших целей тестирования я выбрал первый вариант – создать новую сетку с нуля. Создать сетку кнопка переводит вас на следующую страницу:
На предыдущем экране вы можете:
- Назовите свою сетку. Я использую «Тест Галерея» для нашего примера
- Добавляйте и генерируйте пользовательские классы CSS, чтобы вы могли добавлять собственные стили в свою сетку, если хотите
- Определите сообщения об ошибках, которые пользователи будут видеть, если они не найдут никаких результатов
Выберите медиа для отображения в вашей сетке
Пришло время выбрать медиа, которое вы хотите отобразить в вашей сетке. Для этого перейдите к следующему разделу, т.е. Настройки сетки> Исходный контентКак показано ниже.
Как показано выше, у вас есть три типа шрифтов в Тип шрифта:
- Тип сообщения – Вы можете извлекать контент из своих публикаций, страниц, мультимедийной библиотеки или любого другого типа персонализированной публикации.
- срок – Вы можете получить материал на основе категорий, ярлыков или любого другого пользовательского термина таксономии.
- пользователь – Эта опция позволяет вам получать контент от определенных пользователей WordPress.
Ниже вы можете установить количество элементов на странице. Используйте значение «-1» для отображения всех сообщений. Значение по умолчанию ноль (0) – это количество сообщений на странице в настройках WordPress.
Раздел справочных публикаций
Под этим у вас есть Консультируемые публикации раздел:
На предыдущем экране вы можете сделать несколько вещей следующим образом:
- Выберите тип публикации в Тип (ы) публикации как отмечено на изображении. Если вы хотите создать сетку для своих сообщений в блоге, выберите публикации, Если вы создаете сетку для медиа (например, если вы хотите создать визуальное портфолио), выберите СМИ, как в нашем предыдущем примере. Доступен другой тип публикации: страницы,
- Под типами постов вы можете выбрать статус поста контента, который вы хотите отображать в вашей сетке. У вас есть несколько вариантов, но я бы рекомендовал придерживаться опубликованный, Кроме того, вы можете выбрать авторов постов, типы пантомимы и включить / исключить конкретный контент из вашей сетки.
- Как показано в пункте номер три (3) на изображении выше, вы можете напрямую включить другие средства, которые могут сэкономить вам много времени, особенно если вы хотите быстро внедрить сетку.
Прокручивая внизу экрана, вы увидите опции, которые помогут вам отсортировать содержимое сетки по пользовательским значениям, меткам и полям. Эти параметры вам понадобятся только при настройке сетки:
в сторону: Чтобы случайно не потерять свой прогресс, нажмите Сохранить изменения кнопка, как вы создаете свою сетку. Мы собираемся настроить медиа форматы.
Медиа форматы
Перейдите к Настройки сетки> Форматы медиа:
Вы можете выбрать медиа форматы, которые вы хотите использовать в своих сетках. WP Grid Builder поддерживает галереи, видео и аудио. В нижней части экрана вы можете установить миниатюру по умолчанию на каждой сетке (или плитке) на случай, если содержимое отсутствует.
На том же экране вы можете выбрать автоматическую запись первого медиафайла в ваших сообщениях (в случае, если контент отсутствует). Кроме того, вы можете включить слайд-шоу галереи на карточках сетки, использовать встроенные видеопостеры и открывать видео в лайтбоксе вместо карточки сетки.
Стиль сетки
идти Настройки сетки> Стиль сетки настроить вашу сетку, как показано выше. По умолчанию у вас есть три стиля сетки: кладка, метр и выравнивание. Я использую масонство в иллюстративных целях. Кроме того, я ранее разместил фотографии в моей медиатеке. WP Grid Builder автоматически добавляет фотографии в сетку.
Помимо этого, вы можете управлять другими параметрами, такими как поведение сетки, переопределять размер карты и контролировать скорость отклика. За исключением выбора стиля сетки и переопределения размеров карт, вы вряд ли коснетесь настроек. Выберите свой стиль сетки и давайте перейдем к следующему разделу.
Расположение сетки
Не так много, чтобы увидеть здесь. У вас есть два типа макетов для ваших сеток; Стандартная вертикальная планировка и расположение каруселей. В дополнение к этому вы можете сделать ваши сетки полной ширины. Я работаю со стандартным макетом, и моя сетка имеет полную ширину.
Мы движемся вперед
Композитор сетки
Grid Composer полезен, когда вы настраиваете свои граненые сетки, например, фильтр, рейтинг, поиск, флажки, загружайте больше, разбивку на страницы и многое другое.
В нижней части экрана вы найдете генератор макетов сетки перетаскивания. Например, см. Мой трехсторонний пример ниже: Фильтровать по дате, Поиск, и Загрузить больше кнопка.
Если я опубликую свою сетку на этом этапе, я увижу следующую сетку с тремя (3) полностью функциональными аспектами:
Неплохо 🙂 Совсем не плохо. Я надеюсь, что вы понимаете суть вещей, за исключением того, что мы не сделали. Вернемся к области администрирования WP Grid Builder.
Стили карт
Раздел «Стиль карты», показанный выше, позволяет вам настроить ваши карты сетки. Карты сетки – это просто прямоугольные или квадратные плитки, которые составляют сетку. Когда вы начинаете использовать WP Grid Builder, вам может потребоваться импортировать демонстрационные версии, как показано на рисунке выше. Тем не менее, вы можете создавать свои карты с нуля, что открывает бесконечные возможности,
Поэтому я пошел дальше и импортировал все карты и назначил карту по умолчанию для своих сеток. После этого я выбрал карточку для каждого типа поста, включая мои медиа. Я использую берилл как моя карта по умолчанию Вот моя тестовая сетка в действии:
Кажется довольно надежным, этот генератор сетки WordPress впечатляет меня. Далее у нас есть анимация.
анимации
Опять же, здесь мало что можно увидеть; просто пара анимаций, чтобы показать карты в сетке, когда пользователь прокручивает или нажимает на нее Загрузить больше кнопка. Эта функция невероятно проста в использовании и создает красивые эффекты, которые увеличивают вовлеченность пользователей.
загрузка
Далее у вас есть варианты загрузки, как описано выше. На экране вы можете переключать отложенную загрузку, чтобы значительно увеличить скорость ваших сеток. Ленивая загрузка загружает медиа, только когда оно находится в окне пользовательской графики, что может сократить время, необходимое для загрузки сеток.
С другой стороны, панель загрузки или значок сокращают время загрузки, воспринимаемое пользователями. Загрузчик появляется, когда пользователь загружает набор сообщений. Появляется при загрузке страницы сетки и когда пользователь фильтрует или сортирует сетку. Это удобный и простой способ держать пользователей на вашем сайте.
воплощение
Помните пользовательский класс CSS, который мы добавили в нашу сетку ранее? Ну, вы используете класс для изменения стилей плагинов CSS в Настройки сетки> Персонализация окно. Если вы плохо знаете CSS, вам лучше нанять стороннюю помощь, если это необходимо.
Gridbuilder WP плагины
Плагины позволяют расширить функциональность плагина WordPress. WP Grid Builder поставляется с парой плагинов, которые вы можете легко установить, перейдя в Gridbuilder WP> Плагины. В настоящее время WP Grid Builder поставляется с четырьмя плагинами, а именно:
- Фасет карты: позволяет добавлять карты из Google Maps, Mapbox или Leaflet и показывать маркеры
- Кэширование – для ускорения сетки путем кэширования содержимого и аспектов
- LearnDash – Показать информацию о курсе на карточках
- Многоязычность: интегрирует WP Grid Builder с Polylang и WPML
Другие настройки Gridbuilder WP
Чтобы получить доступ к общим настройкам WP Grid Builder, перейдите на Gridbuilder WP> Конфигурация. На экране вы найдете такие параметры, как:
- Разрешить WP Grid Builder для рендеринга блоков в Гутенберге
- Включить поддержку форматов записей
- Показать параметры сообщений и терминов (форматы сообщений и цвета терминов)
- Очистить кэш и очистить таблицы стилей
- Изменить глобальные цвета
- Установите дополнительные размеры изображения
- Настройте свой плагин Lightbox
- Сбросить глобальные настройки плагина
заключение
WP Grid Builder – великолепный плагин для WordPress для работы с сетками и фильтрами, который подойдет как начинающим, так и разработчикам. Он поставляется с обширным списком удивительных функций, которые делают создание адаптивных макетов сетки на одном дыхании. Кроме того, они предлагают вам гибкую ценовую структуру и быструю поддержку.
Что вы думаете о Gridbuilder WP? Мы что-то пропустили? Пожалуйста, дайте нам знать в разделе комментариев ниже.
