Більше результатів...

Загальні селектори
Тільки точні збіги
Шукати у заголовках
Шукати у контенті
Вибір типів постів
Фільтрувати за категоріями
FAQ
Hostenko
Натхнення
Відео уроки
Новини
Плагіни
теми
Уроки
Хакі

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

Як створити адаптивні галереї у вигляді сітки за допомогою плагіна Final Tiles Grid Gallery

inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!

Опис | демо | Купити за $19

У міру того, як ви додаватимете нові зображення, сітка змінюватиметься і підлаштовуватиметься під розмір кожного з них, і таким чином створюватиме макет ідеальної сітки. До того ж, у цьому плагіні ви знайдете кілька таких корисних функцій як ефекти при наведенні курсору, підпис зображення, підтримка відео, інтеграція із соціальними мережами, лайтбокс і так далі.

Дивіться також:

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

Як створити адаптивні галереї у вигляді сітки за допомогою плагіна 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

Якщо ви натиснете кнопку “Редагувати”, ви зможете перейти до вашої галереї і в цьому вікні побачите набагато більше важливих налаштувань:

  • Загальні
  • Посилання та Лайтбокс
  • Підписи
  • Ефекти при наведенні
  • Ефекти для зображень
  • Стиль
  • Кастомізація
  • Зображення

Як створити адаптивні галереї у вигляді сітки за допомогою плагіна 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

Якщо ви встановили один з лайтбоксів, то після натискання зображення перед вами буде відкриватися повноекранна галерея з усією необхідною навігацією. У нашому прикладі ми вибрали варіант “Досить фото"

Як створити адаптивні галереї у вигляді сітки за допомогою плагіна Final Tiles Grid Gallery

інші приклади

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

Як створити адаптивні галереї у вигляді сітки за допомогою плагіна Final Tiles Grid Gallery

Як створити адаптивні галереї у вигляді сітки за допомогою плагіна Final Tiles Grid Gallery

Висновок

Це чудовий плагін, який допоможе вам створювати акуратні та красиві галереї. Він надає набагато більше можливостей, ніж вбудована галерея Wordpress, ідеально підходить і для створення професійних портфоліо, і просто для домашньої галереї. Вартість складає $19.

Джерело: wplift.com
inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!
Олексій Шевченко
редактор wpcafe
Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/

Коментарі до запису: 6

Микола:

Якщо у людини є можливість купувати плагіни/теми, то вона сама вибере, що їй підходить. До того ж, у статті немає порівняння ні недоліків плагіна. У результаті - публікація заради публікації.

Ліда:

Насправді це тупа реклама плагіна, таких статей тут не мало! (на жаль)

Олександр:

Миколо, покажіть ваш сайт із хорошими матеріалами без реклами. Ліда, і ваш сайт хотілося б побачити:)

Євгенія:

А мені цей запис виявився дуже корисним! Як і інші!
Дякую авторам, часто заходжу на ваш сайт за чимось цікавим для свого блогу))

Юрій:

А може цей плагін виводити випадкове фото із вибраних галерей?

Марія:

А хто підкаже які ще є плагіни?

Додати коментар або відгук