Створюйте приголомшливі галереї за допомогою найкращого менеджера галерей для DIVI

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

У таких випадках ми зазвичай використовуємо DIVI, оскільки це відомий конструктор сторінок з ідеальними інструментами, але він може мати обмеження під час додавання зображень, і саме тут вам допоможе
WP Media Folder

WP Media Folder та його менеджер галерей дозволяють керувати галереями та додавати їх безпосередньо з DIVI. У цьому посібнику ми побачимо, наскільки це просто ;)

Для цієї публікації ми будемо використовувати DIVI , WP Media Folder , доповнення WP Media Folder та WP Media Folder Gallery .

Підключіть WordPress та альбоми Google Фото, щоб створювати приголомшливі галереї

Одна з тем цієї публікації — створення цих галерей за допомогою зображень, імпортованих безпосередньо з вашого облікового запису Google Фото, щоб ви могли легко завантажувати зображення зі свого телефону до Google Фото та використовувати їх на своєму сайті WordPress.

Отже, почнемо зі зв'язку.

Перш за все, нам потрібен додаток Google Dev, перейдіть сюди: https://console.developers.google.com/project та створіть новий проект.

Додайте назву до проекту, ви можете додати будь-яку, яка вам подобається.

Тепер зачекайте кілька хвилин, поки проект буде створено.

Якщо ви вперше використовуєте цей API бібліотеки фотографій , вам потрібно буде його активувати. Для цього перейдіть до MarketPlace у меню ліворуч.

Тепер у полі пошуку введіть API бібліотеки фотографій і знайдіть його.

Натисніть на нього, а потім на «Увімкнути» .

Тепер, коли це ввімкнено, натисніть «API та служби» в лівому меню, на цій панелі перейдіть до розділу «Облікові дані» .

Тепер, коли ви тут, на верхній панелі перейдіть до + Створити облікові дані > Ідентифікатор клієнта OAuth , якщо буде запропоновано, додайте ім’я на екран згоди OAuth.

Тепер налаштуйте облікові дані, як показано нижче:

• Виберіть «Веб-застосунок» і додайте назву на ваш вибір.
• Авторизоване джерело JavaScript: https://your-domain.com (замініть на ім'я вашого домену без косої риски).
  
• Авторизовані URI переадресації: https://your-domain.com/wp-admin/options-general.php?page=option-folder&task=wpmf&function=wpmf_google_photo_authenticated
  

Майте на увазі, що Google змінив свою політику, тому вам потрібно заповнити поля «Авторизовані домени» на вкладці екрана згоди OAuth > «Редагувати додаток» .

У розділі «Авторизовані домени» натисніть «+Додати домен» і додайте свій домен.

Додайте його також до «Перевірка домену» .

І готово! Ви отримаєте свій ID та секретний ключ, які потрібно додати в конфігурацію WP Media Folder:)

Тепер давайте підключимо ваш обліковий запис Google Фото до вашого сайту WordPress, для цього перейдіть до Налаштування > WP Media Folder > Хмара > вкладка Google Фото .

Ви можете скористатися автоматичним режимом, який є найпростішим, оскільки вам потрібно лише увійти до свого облікового запису Google. Для цього виберіть Автоматичний у розділі «Режим підключення», а потім Підключити Google Фото .

З’явиться спливаюче вікно, натисніть «Погоджуюся» .

Останнім кроком буде вхід до вашого облікового запису Google, надання дозволів та завершення підключення.

Ось і все, справді легко та швидко, чи не так? :)

Від Google Фото до галереї Divi на WordPress

Як випливає з назви, з Google Фото до галереї Divi на WordPress, тепер, коли Google Фото підключено, ми можемо перейти до створення наших галерей з альбомів у нашому обліковому записі.

Перш за все, ми створимо нову галерею з менеджера.

Перейдіть до Медіа > Галереї медіапапок .

Тут ми зможемо створювати багато різних галерей для зображень з нашого сайту WordPress, нашого комп’ютера або (у цьому випадку) з Google Фото.

Натисніть кнопку +Додати нову галерею .

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

Виберіть усі параметри, але не хвилюйтеся, ви можете редагувати це після створення галереї, тож це не те, що ми не зможемо змінити ;)

На цьому екрані у вас є 3 варіанти додавання зображень до вашої галереї: ви можете додавати їх з WordPress (вашої медіатеки), з вашого комп’ютера та з Google Фото.

Для цього посібника ми оберемо Google Фото але ви можете вибрати те, що вам потрібно.

Якщо ви оберете Google Фото , ви побачите всі альбоми та зображення з облікового запису, який ви раніше підключили до свого сайту.

Ви можете імпортувати весь альбом, натиснувши «Імпортувати альбом» , або ж вибрати кілька зображень і натиснути «Імпортувати вибране» .

Наприклад, тут ми виберемо 5 зображень та імпортуємо лише ці.

Це так само просто, як клацнути на потрібних зображеннях, а потім, як пояснювалося раніше, натиснути «Імпортувати вибране» .

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

Ви помітите ще одну вкладку під назвою «Налаштування дисплея» та «Шорткод» .

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

Також є шорткод для цієї галереї, якщо ви хочете її використати ;)

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

Тепер, коли ви завершили створення галереї, натисніть кнопку «Зберегти» та перейдіть на сторінку/публікацію, яку ви хочете редагувати, і натисніть « Використовувати конструктор Divi» . Ви можете використовувати його як у фронтенді, так і в бекенді без проблем ;)

Виберіть стовпець, як ви зазвичай це робите, а потім знайдіть WPMF Gallery Addon .

У наступному спливаючому вікні ви побачите опцію додавання вже створеної галереї, а також усі інші опції, які ви бачили на вкладці «Відображення» в Менеджері галерей, щоб ви могли легко редагувати галерею.

Ми збираємося вибрати галерею, яку ми створили раніше.

Галерея буде відображена, і ви зможете редагувати всі налаштування відображення за допомогою попереднього перегляду, щоб кожна зміна відображалася автоматично.

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

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

Дійсно чудовий інструмент, чи не так?

Створюйте галереї з хмари безпосередньо в Divi

Тож, можливо, ви думали, що це все, але відповідь – ні! Ви також можете створювати галереї із зображеннями, розміщеними в хмарі, ви зможете заощадити місце для зберігання, а також використовувати Divi для розміщення галереї ;)

Ми використовуватимемо для цього папку Google Диска, але майте на увазі, що інші хмарні інтеграції доступні за допомогою WP Media Folder та доповнення (Dropbox, AWS, OneDrive).

Щоб підключити Google Диск до свого сайту WordPress, ви можете скористатися детальним посібником тут. Процес схожий на процес Google Фото, тому у вас не повинно виникнути проблем.

Після створення/синхронізації папок Google Диска ви можете перейти на сторінку/допис, який хочете редагувати, і натиснути « Використовувати Divi Builder» , додати свій стовпець і в модулях знайти той, що називається «WPMF Gallery» .

Цей модуль дозволить вам створити галерею безпосередньо в Divi Builder, спочатку додамо зображення, натиснувши « Додати зображення галереї» в «Зображення» .

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

У цьому випадку ми будемо використовувати папку Google Диска.

Тепер у правій частині виберіть усі зображення, які ви хочете додати, натиснувши на них, а потім натисніть кнопку « Вибрати» .

Це завантажить усі зображення в модулі Divi, і ви побачите всі доступні опції для галереї, такі як тема, колонки, розмір, дія при кліку, межі, тіні, радіус межі та опція додавання розмиття до зображення.

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

Як бачите, ці плагіни – просто ідеальне поєднання ;)

Отримайте найпрофесійніший веб-сайт WordPress з найкращим поєднанням

Ми показали лише кілька функцій з усіх доступних у WP Media Folder , є й інші, такі як повне завантаження медіафайлів до AWS, PDF Embedded та інші хмарні з’єднання, такі як OneDrive та Dropbox, тож чого ви чекаєте, щоб почати користуватися всіма цими чудовими функціями? Перейдіть сюди та отримайте власну підписку :)