Необычный плагин-конструктор для картинок UberGrid — новые возможности для блога

Здравствуйте, уважаемые читатели и гости LediSeo! Создать блог на wordpress  дело не сложное – берешь набор обязательных плагинов и вот оно твое детище, но вот чтобы сделать что – то более привлекательное и отличительное от массы подобных проектов, то придется не мало потрудиться. Дело не только в индивидуальном шаблоне, дело в функционале ресурса и его реализации. Среди массы всевозможных расширений, позволяющих создать галерею на wordpress, вывести подобные статьи или создать голосование необходимо выбрать, то что необходимо именно Вам. Так сегодня хочу представить Вашему вниманию новый плагин для картинок wordpress UberGrid, который позволяет создать сетку из картинок в различных вариантах отражения. Это и некое подобие галереи и стена из изображений и при необходимости каталог продуктов с указанием цены. Первоначально может сложиться впечатление, что данное расширение wordpress может найти применение только на узкотематических ресурсах, но это ошибочное мнение. Плагин UberGrid можно использовать при создание блога абсолютно на любую тематику, он идеально подойдет и seo блогам, развлекательным сайтам,  на страницах каталогов с инфопродуктами. Его гибкие настройки позволят сделать блог более ярким и функциональным, главное – творчески подойти к работе с данным расширением, а чтобы Вам в этом процессе немного помочь я расскажу об основных настройках плагина для картинок UberGrid.

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

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

Первый пункт находится в панели Параметры

Нажав по данному пункту мы попадем на страницу настроек плагина UberGrid.

Так если Вы поставите галочку в пункте  Disable inline styles, то мы включим режим загрузки css отдельными файлами. Это позволит не захломлять html  лишними кодами.

Галочка в пункте Enable caching позволяет включить режим кеширования, то есть Вы создали определенную сетку из изображений и в дальнейшем при запросе демонстрации будет осуществляться запрос через кеш.

Поставив галочку в пункте Use shortcode hack мы сможем активировать несколько дополнительных хаков, которые позволят исправить некоторые глюки при несовместимости темы с плагином UberGrid.

Произведя необходимые настройки нажимаем на кнопку “Сохранить изменения”.

Теперь можно обратиться ко второму пункту UberGrid

с помощью которого мы и будем создавать сетку из картинок. Нажав по данному пункту, у нас откроется два подпункта – UberGrid и Add new Grid

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

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

Нажав по пункту Add new Grid мы попадаем на страницу добавления сетки изображения. Первым делом прописываем в строке “Заголовок” название нашей сетки, в рамках которой будут отражаться те или иные изображения.

Далее начинаем добавлять изображения в сетку, нажимаем по пункту Add new cell и перед нами откроется окно с большим набором настроек. При чем настройки расположены как по центру страницы, так и с правой боковой колонки. Первоначально нам необходимо проработать настройки в центре страницы.

Первым делом загружаем картинку в нашу сетку изображений, нажав по кнопке Select image и выбираем изображение из уже имеющихся фото или загружаем новое.

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

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

Теперь установим расположение нашего Заголовка относительно изображения, нам предлагается несколько вариантов.

С данным пунктом настроек плагина UberGrid мы завершили, переходим в блок Layout

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

Следующим пунктом настроек идет Title background, с помощью которого мы устанавливаем фон нашего текста и описания.

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

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

При этом нам предлагается на выбор в пункте Link mode  установить каким образом будет происходить отражение перехода по ссылке:

• Url – выбрав данный пункт, переход будет осуществляться на указанную нами страницу
• Lightbox – указав в настройках плагина UberGrid этот пункт по нажатию на картинку будет открываться слайтбокс, настройки которого открываются сразу же при выборе данного пункта. Здесь мы можем прописать заголовок, дать краткую информацию, разместить фото и указать некоторое свои данные – страницу в твиттере, скайп, гугл плюс, адрес нашего сайта. Посмотреть демо версию можно пройдя по адресу http://codecanyon.net/item/ubergrid-responsive-grid-builder-for-wordpress/full_screen_preview/4851992

Следующим пунктом в настройке идет блок On-hover,

активировав который (ставим галочку) мы тем самым придаем картинкам в сетке изображений некоторый эффект динамики. Просмотреть это можно вот на этой странице http://codecanyon.net/item/ubergrid-responsive-grid-builder-for-wordpress/full_screen_preview/4851992 в разделе PORTFOLIO

Эффекты переходов настраиваются отдельно в боковой колонке в блоке Effects

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

И последним пунктом в длинном ряду настроек плагина UberGrid следует настройка Label below, с помощью которого мы можем на блоге создать каталог с продуктами и ценами.

Загрузив картинку в самом первом пункте настроек мы можем с помощью этого блока продолжить настройки, указав наименование товара, его краткое описание и цену.

При этом мы также можем задать для каждого пункта отдельный цвет фона и цвет шрифта.

Просмотреть это можно вот на этой странице http://codecanyon.net/item/ubergrid-responsive-grid-builder-for-wordpress/full_screen_preview/4851992 в разделе products

Завершив все необходимые настройки нажимаем по Cancel

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

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

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

Про эффекты я уже упоминала, остался блок Fonts, благодаря которому можно изменить начертания и размер шрифта. Здесь тоже все понятно и просто.

После произведенных настроек обязательно нажимаем на Save.

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

Посмотрите, как мне удалось с помощью данного плагина преобразить страницу одного из моих ресурсов Pan-salat.ru. Также и Вы сможете преобразить свой ресурс с помощью сетки изображений, созданной при помощи плагина UberGrid . За разработку и создание данного расширения благодарю его автора Николая Карева.

С уважением, Отчаянная

Вам понравилась статья? Расскажите о ней друзьям!