Как создать адаптивные галереи в виде сетки с помощью плагина Final Tiles Grid Gallery

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

Как создать адаптивные галереи в виде сетки при помощи плагина Final Tiles Grid Gallery

Описание | Просмотр | Купить за $19

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

Смотрите также:

  • Лучшие плагины для создания галереи в WordPress
  • NextGEN Gallery — самый популярный WordPress плагин для фото
  • 7 плагинов для фотогалереи на WordPress
  • Как вставить фотогалерею WordPress в произвольном месте темы
  • 8 бесплатных WordPress плагинов для фотогалерей Instagram

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

Как создать адаптивные галереи в виде сетки при помощи плагина Final Tiles Grid Gallery

Функции плагина

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

  • Эффекты при наведении
  • Функция изменения эффектов
  • Иконки в подписи картинок
  • Фиксированные подписи
  • Полоса процесса загрузки
  • Не обрезает картинки: в отличие от многих иных подобных галерей, в данном варианте нет автоматической обрезки картинки(если вы не решите использовать привязку к сетке с точными настройками)
  • Адаптивность
  • Добавление нескольких картинок: вы сможете легко выбрать и добавить большое число картинок с панели WordPress за один раз
  • Задание настроек ширины галереи
  • Добавление пользовательских CSS
  • Пользовательские скрипты: вы можете легко добавить скрипты, которые запустятся после инициализации галереи
  • Портфолио: идеальный инструмент для создания портфолио и фотогалереи
  • Изменение размера картинки: установите собственный размер картинки после добавления в галерею
  • Интеграция с социальными сетями: каждым изображением можно легко поделиться на вашей странице в Twitter, Google+, Facebook, Pinterest и т.д.
  • Пару галерей: вы можете без проблем добавлять любое число галерей в записи
  • Пользовательские подписи: параметр прозрачности подписи, цвета, анимации и ее продолжительности
  • Расширенный UI администратора
  • 5 Лайтбоксов: подберите необходимый лайтбокс среди 5 предложенных вариантов(Magnific, ColorBox, FancyBox, PrettyPhoto, Swipebox)
  • Виджет: вы можете без труда вставить галереи в текстовые виджеты
  • Контроль размера картинок: переустанавливайте настройки всех картинок одновременно
  • Дефолтный размер картинки: используется при добавлении картинки в галерею
  • Управление галереями: каждая галерея будет сохранена в базе данных WordPress, поэтому вы в любое время сможете без проблем редактировать их
  • Кастомные линки: каждое изображение может быть связано с кастомным URL
  • Зум: каждое изображение может быть отображено в большем формате
  • Фильтры: задание собственных фильтров для каждой галереи
  • Стиль границы: задавайте необходимые настройки границы(цвета, размер и радиус)
  • Тень: настраивайте размер и цвет тени
  • Отключение увеличения картинки: вы можете запретить автоматическое увеличение картинки
  • Перемешивание: есть функция включения/выключения возможности выведения картинок в случайном порядке
  • Оформление: у вас есть контроль над полями ввода и привязками сетки
  • CSS3 анимация / JS fallback: скрипт будет обнаруживать, поддерживает ли браузер нативную анимацию CSS и, если да, то использует ее для аппаратного ускорения, в противном случае, будут использованы анимации JavaScript
  • Мобильные устройства: скрипт прекрасно работает на всех устройствах, даже мобильных телефонах, которые работают со стандартным браузером
  • Гарантированная поддержка

Использование плагина

После того, как вы загрузили и активировали плагин, он добавит новое меню в панель администратора WordPress под названием “ Final Tiles Gallery ”. Нажав на первую ссылку, вы перейдете на главный экран плагина, где увидите предложение добавить первую галерею.

Как создать адаптивные галереи в виде сетки при помощи плагина Final Tiles Grid Gallery

После перехода на следующую страницу, вы увидите окно, в котором сможете задать имя галереи и ее описание:

Как создать адаптивные галереи в виде сетки при помощи плагина Final Tiles Grid Gallery

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

Как создать адаптивные галереи в виде сетки при помощи плагина Final Tiles Grid Gallery

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

Как создать адаптивные галереи в виде сетки при помощи плагина Final Tiles Grid Gallery

В следующем окне вы сможете без проблем выбрать нужный размер картинок и начать загрузку(позже вы также сможете настроить данные настройки).

Как создать адаптивные галереи в виде сетки при помощи плагина Final Tiles Grid Gallery

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

Как создать адаптивные галереи в виде сетки при помощи плагина Final Tiles Grid Gallery

Если вы нажмете на кнопку “ Edit ”, вы сможете без проблем перейти в галерею и в этом окне увидите намного больше важных параметров:

  • Общие
  • Ссылки и Лайтбокс
  • Подписи
  • Эффекты при наведении
  • Эффекты для картинок
  • Стиль
  • Кастомизация
  • Картинки
Как создать адаптивные галереи в виде сетки при помощи плагина Final Tiles Grid Gallery

Обязательно посмотрите каждый из данных пунктов и вы найдете много интересных параметров. Например, во вкладке “ Links & Lightbox ” вы сможете без труда изменить настройки и предоставить функция делиться картинками из галереи в Twitter, Facebook, Pinterest и Google+.

Как создать адаптивные галереи в виде сетки при помощи плагина Final Tiles Grid Gallery

Во вкладке “ Hover Effects ” вы сможете добавить возможность поворота или увеличения, когда пользователи веб-сайта буду наводить курсор мышки на изображение:

Как создать адаптивные галереи в виде сетки при помощи плагина Final Tiles Grid Gallery

Тестирование галереи

Как только вы сделаете все необходимые параметра, можете легко размещать галерею на веб-сайте. Для этого перейдите на начальную страницу, где будет список доступных галерей, нажмите кнопку “ Show Shortcode ”, копируйте программный код и вставьте его на страницу или пост.

Как создать адаптивные галереи в виде сетки при помощи плагина Final Tiles Grid Gallery

Вот как наша галерея выглядит в стандартной теме WordPress. Мы добавили кнопки для социальных сетей и зум 150% при наведении курсора.

Как создать адаптивные галереи в виде сетки при помощи плагина Final Tiles Grid Gallery

Если вы установили один из лайтбоксов, то после клика на изображение перед вами будет открываться полноэкранная галерея со всей необходимой навигацией. В нашем примере мы выбрали вариант “ Pretty Photo ”:

Как создать адаптивные галереи в виде сетки при помощи плагина Final Tiles Grid Gallery

Иные примеры

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

Как создать адаптивные галереи в виде сетки при помощи плагина Final Tiles Grid Gallery Как создать адаптивные галереи в виде сетки при помощи плагина Final Tiles Grid Gallery

Заключение

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

Источник: wplift.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *