Не пропусти
Главная 20 Интернет 20 Как легко создать адаптивную галерею для WordPress сайта с помощью плагина Envira

Как легко создать адаптивную галерею для WordPress сайта с помощью плагина Envira

В вордпрессе есть встроенные функции по созданию галерей, вот только у них ограниченные возможности, так что со стандартным набором инструментов не удастся создать эффектную адаптивную галерею. Да, существует множество плагинов по созданию галерей, но большинство из них достаточно сложные, а главное очень сильно перегружают сайт. Однако не стоит метаться в поисках лучшего плагина, т.к. лидер известен – это Envira Gallery.

В этой статье я расскажу, как легко создать адаптивную галерею для сайта с помощью плагина Envira Gallery.

Почему Envira Gallery лучше других?

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

Однако обо всех этих проблемах можно было забыть, как о страшном сне, когда Томас Гриффин,  хорошо известный разработчик WordPress, создал Envira Gallery.

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

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

После установки плагина Envira давайте теперь перейдем непосредственно к созданию адаптивных красивых галерей для сайта.

Создание адаптивных галерей с помощью Envira Gallery

Первое, что вам придется сделать – это купить плагин (да, он платный). Предлагается несколько пакетов услуг, поэтому выбирайте тот, что больше всего подходит под ваши потребности и соответствует кошельку. Установите и активируйте плагин. Если у вас возникнут с этим сложности, то читайте мое руководство, как устанавливать плагины в WordPress.

После активации у вас в боковой панели админки должно появиться меню Envira Gallery. Для создания адаптивной галереи для сайта перейдите по маршруту Envira Gallery » Add New.

Добавляем новую галерею с помощью Envira Gallery

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

Выбор и импорт новых изображений для создания адаптивной галереи для сайта

Вы можете поменять порядок изображений, как хотите, просто перетаскивая их. Вы также можете прописать к каждому изображению мета данные (заголовки, alt-теги), просто щелкнув по значку «информация» около каждого изображения. Плагин позволяет добавлять в заголовки изображений HTML, а также добавлять в поле «Image Hyperlink » ссылки на любую страницу сайта.

Прописываем метаданные для изображений галереи

Советую почитать статью как оптимизировать изображения на сайте.

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

Конфигурация галереи (размер колонок, отступы, позиционирование)

Во вкладке Lightbox, вы можете настроить различные параметры для лайтбокса, который используется для отображения фото в полноэкранном режиме по щелчку по ним. Именно здесь можно решить нужны ли и как настроить заголовок изображений, стрелки, спрятать/показать панель инструментов лайтбокс галереи.

Настройка всплывающего модального окна Lightbox эффект

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

Настройка размеров миниатюр изображений адаптивной галереи

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

Готовый шорткод для вставки галереи на сайт

Создание галереи непосредственно в записи, на странице или в пользовательском типе записи

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

Вставка адаптивной галереи через редактирование записи

В зависимости от выбранного пакета услуг Envira Gallery поставляется с дополнительными аддонами, которые можно установить для расширения функционала плагина. На момент написания статьи доступно 9 аддонов.

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

Самые читаемые:

Gear. Club в мире мощных моторов и скоростных трасс [Free]
Gear.Club – го...
Антирадар для iphone испытание лучших приложений
Появление на д...
Adobe Spark Post делаем креативные обложки для соц. сетей [Free]
Продолжаем сер...
Заканчиваем создание «Книги рецептов» для iOS Видеоурок
Сегодня четвер...
Продажи Apple Watch за год упали почти на 72%
Продажи Apple ...
Apple выпустила watchOS 3.1 beta 3 для разработчиков
Сейчас компани...
Creative представляет Woof 3
Компания Creat...
Network Tools by KeepSolid информация о Wi-Fi сети [Free]
Привет! Частен...
FaceTime на iPhone как подключить и пользоваться
Здравствуйте, ...
Как создать загрузочную флешку с Windows 8
Наверное все вы...
Обзор процессора Intel Core i7-4800MQ
Intel Core i7-4...
Активация Windows 7 по телефону
Добрый день, до...
Опыт по выходу из Google Penguin
Ещё один очень...
Стоит ли возраждать финстрипы?
Вопрос к читат...
Итоги конкурса от BINPARTNER “У кого больше”!
Конкурс от BIN...
Как провел этим летом или Хайпы
Статья для сам...
Посещалка на блоге
На скрине посе...
Proflinks. ru Реальный Отзыв или остерегайтесь подделок!!!
Уё*ный дизайн ...
Как оптимизировать картинки?
Оптимизировать...
Парсинг на заказ
ВЫПОЛНЯЮ Парси...
Как найти малоконкурентные трафиковые ключевые слова?
Сегодня статья ...
Как один западный блог увеличил число подписчиков на 600% с помощью плагина OptinMonster
Каждый успешный...
Запрет обновления отдельных плагинов WordPress
Мы уже расска...
Продвижение сайта в блогах livejournal
Продвижение сай...
Подтвердить авторство в google
Подтвердить авт...
SEO блог для новичков принят в gogetlinks
SEO блог для но...
Как правильно вести статистику на сервисе рассылок Smartresponder?
Сегодняшняя тем...
Как написать хорошую статью 22 способами
Добрый день дор...

О admin

Оставить комментарий

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

*

x

Check Also

Про тег div замолвим мы слово

Добрый день друзья! Как то в своих нескольких уроках по html я говорил и употреблял такое понятие как div верстка. У вас наверняка возникли вопросы, особенно если вы новички, что же это такое? В сегодняшней ...

Что такое html тег address и как он работает?

Всем хорошего и бодрого утра! На линии обучения азам сайтостроительства Макс Метелев и сегодня мы рассмотрим такой интересный тег, который применяется в html 5 версии – address. В него можно включить информацию об авторе и ...

Как правильно подключить шрифты в CSS на сайте?

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

Как выбрать бесплатный конструктор сайта?

Всем привет дорогие друзья и читатели моего блога! Средства, облегчающие процесс создания веб-сайтов создаются постоянно, с тех пор как к Интернету получил доступ обычный обыватель. Но тенденции и технологии быстро меняются, есть множество различных методов ...

Идея для бизнеса: разработка иконок для сайта

Основной принцип. Когда человек первый раз попадает на веб сайт, то первое на что он обращает свое внимание – это иконки для заголовков. Именно по ним, а не по материалу идет выбор документа для чтения. ...

Как скруглить углы и края в фотошопе

Рад снова и снова видеть вас мои дорогие читатели! Сегодня очередной урок по фотошопу и расскажу сегодня как скруглить края (углы) у фото или картинки в фотошопе. На самом деле сложного здесь ничего нет. Все ...

Как скруглить края или углы у картинки онлайн

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

Оптимизация картинок на сайте с помощью полезных сервисов и программ

Всем привет друзья! В этой статье я расскажу про важность оптимизации изображений и картинок на вашем сайте, без разницы используете ли вы CMS WordPress, Joomla или же у вас просто статический сайт. Оптимизация каждой картинки ...

Как подобрать цвета для своего сайта? Обзор 4 сервисов

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

Разработка качественного и продающего дизайна сайта

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

Скликивание рекламы

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

Promo-soft AddStudio

Promo-soft AddStudio Всем привет! На данном блоге давно не было обзоров SEO софта и поэтому сейчас постараюсь исправиться. На этот раз виновником торжества; стала программа AddStudio от Promo-soft. Что примечательно это полностью отечественный продукт, так ...

Promo-soft Add2Board

Promo-soft Add2Board Всем привет! Я продолжаю обзор SEO софта от компании Promo-soft и на этот раз речь пойдет про Add2Board. Основное предназначение программы  автоматическая рассылка на доски объявлений. До этого чтобы ингда разослать объявления я пользовался ...

Promo-soft AddSite

Promo-soft AddSite Всем привет! Как вы уже, наверное, заметили я делаю обзор всей линейки программ от Promo-soft  и сегодня на очереди AddSite . До этого мне приходилось работать лишь с allsubmitter и так не доведенной ...

Xrumer 7.0.12 Elite and Hrefer 3.85 взломан

Xrumer 7.0.12 Elite and Hrefer 3.85 взломан Всем привет! Собственно новость не первой свежести, но до этого многие полагали что это фейк и что взломанного хрумера 7 версии не существует в природе. Еще давно не ...

Key collector

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

Рейтинг@Mail.ru