Создание красивого меню для группы ВК
Всем привет!
так сказать срочно в номер, пишу скорее даже для себя, чтобы закрепить знания, чем для вас. Но, ИМХО, кому-то может и понадобиться, т.к. я полной информации о самом процессе не нашел (пришлось собирать по кускам). Речь пойдет о таком оформлении, как, к примеру, http://vk.com/lazerboy150 вот тут.
В любом случае, если что-то будет непонятно, или вы не захотите разбираться самостоятельно, а просто перепоручить это дело - пишите мне в вк http://vk.com/ckutep
собственно процесс:
1) Подготовка: фотошопная работа. Ну или кореловская, кому в чем удобнее.
Нам нужно изготовить: аватарку; баннер, при клике на который посетителя будет перекидывать в меню (см. пример выше) и само меню.
В аву обязательно нужно поместить перечень услуг и контактные данные. Размер аватара - 200х500
В левый баннер, который будет в дальнейшем переводить на меню группы можно так же указать перечень услуг и контакты, но это уже не так критично. Главное - дать понять пользователю, что при клике он попадет не на увеличенную картинку, а именно в меню, удобное и понятное.
2) С авой все просто - заливаем картинку - профит!
3) С самим меню возникают сложности, разобьем их на этапы:
а) картинку, которую мы готовили для меню режем на отдельные элементы, т.е. пункты, при клике на которые посетитель попадает на разные страницы уже самого меню. В фотошопе делается это инструментом "Раскройка", после чего сохраняется как Web. Обратите внимание, что минимальная высота каждого пункта (по сути каждой картинки) должна быть не меньше 31 пикселя, иначе картинка не загрузится в вк.
б) заливаем картинки в вк. Для этого можно использовать новый личный фотоальбом и даже скрыть его настройками приватности (меню все равно будет работать).
в) в группе вк в настройках (управление сообществом) ставим напротив Материалы значение Ограниченные.
г) теперь под информацией о группе появился пункт "свежие новости", наведя на который справа появится кнопка редактировать. Туда и жмем
д) в появившемся окне прописываем строки
[[услуги|услуги]]
[[доставка|доставка]]
[[рассрочка|рассрочка]]
и т.д. т.е. пункты, которые будут у вас в вашем меню.
е) жмем кнопку "сохранить страницу", возвращаемся на главную страницу группы, обновляем ее (F5 клавиша) и видим, что при нажатии на свежие новости появляются ссылки, которые мы и создавали, в моем случае это:
услуги
доставка
рассрочка
ж) создаем файл блокнота, и открываем все эти ссылки (услуга, доставка), после чего заносим ссылки в блокнот. Они нам понадобятся.
з) Опять переходим в редактирование "свежей новости". Удаляем все, что до этого там было и вставляем следующее:
[[photo5052454_302089721|nopadding;noborder;370x150px|topic-16374458_28274933]]
[[photo5052454_302089723|nopadding;noborder;370x150px|topic-16374458_28274889]]
[[photo5052454_302089725|nopadding;noborder;370x150px|topic-16374458_28274900]]
[[photo5052454_302089726|nopadding;noborder;370x150px|http://buhtaufa.ru/]]
Давайте рассмотрим все по отдельности:
[[photo5052454_302089721|nopadding;noborder;370x150px|topic-16374458_28274933]]
photo5052454_302089721 - ссылка на картинку меню, которую мы до этого в пункте а залили к себе в альбом. Если полная ссылка выглядит так http://vk.com/photo5052454_302089721, то нам нужно только часть после vk.com/, т.е. photo5052454_302089721
nopadding;noborder; - убирает все отступы и рамки с картинки
370x150px - размер нашей картинки - чтобы узнать на ПК жмите правой кнопкой на картинки, свойства, далее подробно, там в поле размер будет нужный вам размер (сори за тавтологию)
topic-16374458_28274933 - куда попадает человек после нажатия на эту картинку (пункт меню). В пункте ж мы сохранили все ссылки, сейчас мы берем их и вставляем сюда (как и с картинкой, берем только то, что расположено правее vk.com/). Сюда можно вставить как ссылки на контакт, так и на сайт (ссылка вставляется полностью).
З.Ы. если хотите, чтобы при нажатии на определенный пункт меню (к примеру, "связаться с нами") посетителя кидало на такую страницу http://vk.com/write5052454 вам нужно узнать свой id (делается это в моих настройках, там есть пункт Номер страницы и справа от него заветные цифры), далее берется ссылка http://vk.com/write и после пишутся цифры вашего id (без пробелов, тире и прочего, как на примере) и далее вставляется полностью.
и) меню создано, поздравляю! к сожалению до окончания работ еще далеко. Мы создали страницы, привели к ним наши ссылки из меню, но еще не заполнили. Для того, чтобы их заполнить переходим в нужную и нажимаем редактировать. Сюда так же можно вставлять картинки через конструкцию [[photo5052454_302089721|nopadding;noborder;370x150px|topic-16374458_28274933]]
а так же просто текст и таблицы.
к) мы сделали меню, заполнили все страницы, но оно выходит только при нажатии, а хотелось бы, чтобы оно было сразу на странице, в самом верху. Делается это просто. Нажимаем на редактирование нашего меню, потом сразу сохраняем его и нажимаем на "вернуться к странице". Ссылку копируем. После чего заходим на главную страницу нашей группы и на стене сообщества создаем запись. Добавляем в нее фотографию нашего банера, как только он загрузится вставляем ранее скопированную ссылку в поле для сообщения. Жмем отправить. Теперь при клике на баннер будет выходить наше меню.
л) В сообщении со стены жмем на время добавления. Открывается окно в котором в самом низу будет кнопка прикрепить. Жмем ее. Профит! У вас готовое меню для группы вк.
Для чего это нужно:
а) это современно;
б) это красиво;
в) это удобно для посетителей вашей группы;
г) это повышает конверсию, т.к. если вы ответственно подошли к вопросу о наполнении, то у вас в меню раскрыто большинство вопросов, которые могут задать вам пользователи. Если они раскрыты и пользователь с ними ознакомился, то и писать он будет сразу по делу. И вопросов на стене будет меньше - меньше вопросов - меньше шанс, что вы их случайно пропустите или, к примеру, что конкуренты раньше вас ответят на них и переманят к себе вашего потенциального заказчика.
Собственно все. Появились вопросы? пишите мне http://vk.com/ckutep. Не хотите заморачиваться и просто заказать хорошее и удобное меню? пишите мне http://vk.com/ckutep. Вам грустно и одиноко? пишите мне http://vk.com/ckutep
Мир вам!
так сказать срочно в номер, пишу скорее даже для себя, чтобы закрепить знания, чем для вас. Но, ИМХО, кому-то может и понадобиться, т.к. я полной информации о самом процессе не нашел (пришлось собирать по кускам). Речь пойдет о таком оформлении, как, к примеру, http://vk.com/lazerboy150 вот тут.
В любом случае, если что-то будет непонятно, или вы не захотите разбираться самостоятельно, а просто перепоручить это дело - пишите мне в вк http://vk.com/ckutep
собственно процесс:
1) Подготовка: фотошопная работа. Ну или кореловская, кому в чем удобнее.
Нам нужно изготовить: аватарку; баннер, при клике на который посетителя будет перекидывать в меню (см. пример выше) и само меню.
В аву обязательно нужно поместить перечень услуг и контактные данные. Размер аватара - 200х500
В левый баннер, который будет в дальнейшем переводить на меню группы можно так же указать перечень услуг и контакты, но это уже не так критично. Главное - дать понять пользователю, что при клике он попадет не на увеличенную картинку, а именно в меню, удобное и понятное.
2) С авой все просто - заливаем картинку - профит!
3) С самим меню возникают сложности, разобьем их на этапы:
а) картинку, которую мы готовили для меню режем на отдельные элементы, т.е. пункты, при клике на которые посетитель попадает на разные страницы уже самого меню. В фотошопе делается это инструментом "Раскройка", после чего сохраняется как Web. Обратите внимание, что минимальная высота каждого пункта (по сути каждой картинки) должна быть не меньше 31 пикселя, иначе картинка не загрузится в вк.
б) заливаем картинки в вк. Для этого можно использовать новый личный фотоальбом и даже скрыть его настройками приватности (меню все равно будет работать).
в) в группе вк в настройках (управление сообществом) ставим напротив Материалы значение Ограниченные.
г) теперь под информацией о группе появился пункт "свежие новости", наведя на который справа появится кнопка редактировать. Туда и жмем
д) в появившемся окне прописываем строки
[[услуги|услуги]]
[[доставка|доставка]]
[[рассрочка|рассрочка]]
и т.д. т.е. пункты, которые будут у вас в вашем меню.
е) жмем кнопку "сохранить страницу", возвращаемся на главную страницу группы, обновляем ее (F5 клавиша) и видим, что при нажатии на свежие новости появляются ссылки, которые мы и создавали, в моем случае это:
услуги
доставка
рассрочка
ж) создаем файл блокнота, и открываем все эти ссылки (услуга, доставка), после чего заносим ссылки в блокнот. Они нам понадобятся.
з) Опять переходим в редактирование "свежей новости". Удаляем все, что до этого там было и вставляем следующее:
[[photo5052454_302089721|nopadding;noborder;370x150px|topic-16374458_28274933]]
[[photo5052454_302089723|nopadding;noborder;370x150px|topic-16374458_28274889]]
[[photo5052454_302089725|nopadding;noborder;370x150px|topic-16374458_28274900]]
[[photo5052454_302089726|nopadding;noborder;370x150px|http://buhtaufa.ru/]]
Давайте рассмотрим все по отдельности:
[[photo5052454_302089721|nopadding;noborder;370x150px|topic-16374458_28274933]]
photo5052454_302089721 - ссылка на картинку меню, которую мы до этого в пункте а залили к себе в альбом. Если полная ссылка выглядит так http://vk.com/photo5052454_302089721, то нам нужно только часть после vk.com/, т.е. photo5052454_302089721
nopadding;noborder; - убирает все отступы и рамки с картинки
370x150px - размер нашей картинки - чтобы узнать на ПК жмите правой кнопкой на картинки, свойства, далее подробно, там в поле размер будет нужный вам размер (сори за тавтологию)
topic-16374458_28274933 - куда попадает человек после нажатия на эту картинку (пункт меню). В пункте ж мы сохранили все ссылки, сейчас мы берем их и вставляем сюда (как и с картинкой, берем только то, что расположено правее vk.com/). Сюда можно вставить как ссылки на контакт, так и на сайт (ссылка вставляется полностью).
З.Ы. если хотите, чтобы при нажатии на определенный пункт меню (к примеру, "связаться с нами") посетителя кидало на такую страницу http://vk.com/write5052454 вам нужно узнать свой id (делается это в моих настройках, там есть пункт Номер страницы и справа от него заветные цифры), далее берется ссылка http://vk.com/write и после пишутся цифры вашего id (без пробелов, тире и прочего, как на примере) и далее вставляется полностью.
и) меню создано, поздравляю! к сожалению до окончания работ еще далеко. Мы создали страницы, привели к ним наши ссылки из меню, но еще не заполнили. Для того, чтобы их заполнить переходим в нужную и нажимаем редактировать. Сюда так же можно вставлять картинки через конструкцию [[photo5052454_302089721|nopadding;noborder;370x150px|topic-16374458_28274933]]
а так же просто текст и таблицы.
к) мы сделали меню, заполнили все страницы, но оно выходит только при нажатии, а хотелось бы, чтобы оно было сразу на странице, в самом верху. Делается это просто. Нажимаем на редактирование нашего меню, потом сразу сохраняем его и нажимаем на "вернуться к странице". Ссылку копируем. После чего заходим на главную страницу нашей группы и на стене сообщества создаем запись. Добавляем в нее фотографию нашего банера, как только он загрузится вставляем ранее скопированную ссылку в поле для сообщения. Жмем отправить. Теперь при клике на баннер будет выходить наше меню.
л) В сообщении со стены жмем на время добавления. Открывается окно в котором в самом низу будет кнопка прикрепить. Жмем ее. Профит! У вас готовое меню для группы вк.
Для чего это нужно:
а) это современно;
б) это красиво;
в) это удобно для посетителей вашей группы;
г) это повышает конверсию, т.к. если вы ответственно подошли к вопросу о наполнении, то у вас в меню раскрыто большинство вопросов, которые могут задать вам пользователи. Если они раскрыты и пользователь с ними ознакомился, то и писать он будет сразу по делу. И вопросов на стене будет меньше - меньше вопросов - меньше шанс, что вы их случайно пропустите или, к примеру, что конкуренты раньше вас ответят на них и переманят к себе вашего потенциального заказчика.
Собственно все. Появились вопросы? пишите мне http://vk.com/ckutep. Не хотите заморачиваться и просто заказать хорошее и удобное меню? пишите мне http://vk.com/ckutep. Вам грустно и одиноко? пишите мне http://vk.com/ckutep
Мир вам!