VK – Перезагрузка №3: Как сделать меню в группе в контакте?

Привет всем читателям  блога JonyIT! МЫ рады приветствовать вас в очередном выпуске серии статей «VK – перезагрузка» в которой сегодня поговорим о том как сделать меню в группе в контакте”. Кто мы? Ой, забыл представиться. Меня зовут Константин Белан и сегодняшний пост для вас пишу я, ну и конечно Антон помогает мне немного, так сказать наставляет на путь истинный.)

Как сделать меню в группе в контакте

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

В социальной сети Вконтакте много, даже очень много групп (как создать группу, Антон писал здесь), и все они имеют разный посыл, и разное оформление. т.к. у всех своя фантазия и свои интересы. Но, мало кто догадывается, что в меню содержится её скрытый смысл…

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

Обзор различных меню групп в контакте


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

№ 1 Свадебное агентство «La Perfecto»

Свадебное агентство «La Perfecto»

Как вы понимаете это группа представляет одно из свадебных агентств в Санкт-Петербурге, да дизайн меню бесподобен, но нас он не интересует, мы проводим анализ структуры.   Побеседовав с администратором группы, я выяснил, что 20% своих клиентов они получают благодаря этой группе. Если вы планируете предлагать свои услуги, то я рекомендую вам позаимствовать структуру меню этого свадебного агентства. И прошу вас не нужно придумывать велосипед, он уже придуман.

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

№ 2 Общественная организация «Экострана»

Общественная организация Экострана

Ещё одна грамотно оформленная группа, которая уже не относиться к какой-то коммерческой тематике это группа общественной организации «Экострана». Согласно описанию организация борется за сохранение природы, какими способами я честно не знаю, но нас это и не интересует=)


Пункты меню я считаю не очень чётко подобранны, так как первой ссылкой должна быть страница «О нас», чтобы попав в группу, посетитель первым делом мог познакомиться с тем, чем занимаются эти люди и вступить в их ряды по желанию=) А всё остальное я считаю в порядке, фото, видео, статьи и контакты, это то, что как раз и нужно юному приверженцу идей группы для вступления.

№ 3 Йога с Дарьей Каширской

йога с Дарьей Каширской

Ну и, наконец, последняя группа по «Йоге» экспертом выступает Дарья Каширская. Я сам время от времени занимаюсь «Хатха йогой» и поэтому включил такой пример. Обратите внимание не на очередной дизайн, а на какие страницы хочет завлечь автор своих посетителей.

  • Расписание
  • Информация о преподаватели
  • Новости
  • Описания занятий
  • Семинары
  • Индивидуальные занятия

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

Какие цели преследует создание меню в VK?


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

Что я подразумеваю под основной информацией? Ну, конечно же, это ваш прайс – лист товаров или услуг, контактные данные телефон или email, вопросы – ответы и всё это вы закрепляете отзывами о товаре.

Меню, конечно, может служить и для других целей всё зависит от тематике группы, но в основном группы создают коммерческой направленности.

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

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

Рисуем  графическое меню для группы вконтакте в Photoshop

Создавать меню мы будем с помощью Photoshop’а. Практически все обладают начальными навыками этого графического редактора, так что я думаю, проблем не у кого не возникнете

Так вот заходим в Photoshop. Если у Вас, его нет, скачиваете и устанавливаете.

Шаг 1. – Создаем новый документ, размерами примерно: 400×500 (высота будет зависеть от количества пунктов меню).

готовое меню для группы вконтакте

Если вы умеете рисовать, то можете предварительно нарисовать эскиз на тетрадном листе, но так как этого делать я не умею, то возьму простенький шаблон, который в последующем и превращу в меню. К сожалению «Репин» из меня никакой)


Шаблонов в Интернете вагон, да не то что шаблонов, а изображений на которых можно просто написать текст и превратить его в навигационное меню в vk. Можно сделать, какой-нибудь телевизор с надписями, сотовый телефон с надписями, плакат с надписями, да что угодно, главное чтобы с надписями 🙂   Я к примеру выбрал изображение плазменного телевизора на который нанесу текст и в будущем с помощью wiki разметки сделаю из него Гиперссылки.

Шаг 2. – Берём тот самый телевизор и  Photoshop’e прописываем небольшое меню, которое состоит из рубрик и пары страниц моего блога.

готовое меню для группы в vk

Я уже говорил что не «Репин», поэтому в данном уроке обойдусь таким вот аскетичным меню, но вам я предлагаю не останавливаться на достигнутом и пририсовать что-нибудь ещё интересненькое, ну а если у вас другой шаблон, то это сам бог велел сделать.)

Далее нам необходим разрезать изображение по частям . Для чего? – спросите вы. Для того, чтобы сделать части изображений с текстом, активными ссылками.

Шаг 3. – Выбираем инструмент «Раскройка», для этого нажимаем C, и выбираем из меню «Раскройка». Переводы меню могут отличаться от вашей версии фотошопа, поэтому ориентируйтесь на иконки в меню.

kak sozsdat menju v gruppe v kontakte

Включим линейку нажатием комбинации клавиш «CTR+R» с помощью нею вам будет легче ориентироваться при разрезании изображения. Как разрезать? Да не могу, но если в техническом плане, то это нужно делать как то так…

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

каркас

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


Шаг 4. – Для создания фрагментов по направляющим, нужно нажать на специальную кнопку в области параметров, которая называется «Фрагменты по направляющим»

Ух ты, у нас все отлично получается. Что же делать теперь? А теперь, сохраняем части изображения по отдельности. Для этого нажимаем Файл –>Сохранить для Web и устройств…

kak sdelat menju v gruppe v kontakte (2)

Шаг 5. – Далее вводим название файла, выбираем формат JPEG, качество ставим наилучшее и ставим галочки напротив Прогрессивный и Встроенный профиль. Нажимаем сохранить и ура, изображение разделено на несколько частей.

Теперь наша задача, загрузить эти изображения Вконтакт и сделать из них – Меню!

Техническая реализация меню для группы в vk.com

Теперь, после того как готово изображение меню, можно приступать к адаптации его Вконтакт. Для этого переходим в группу, в которой будете создавать меню и нажимаем кнопку «редактировать» возле заголовка свежие новости.

vk menu sozdat

После этого переименовываем заголовок, как Вам нужно, например: Меню, Свежак тут или Самое интересное тут.


Теперь начинаем адаптацию изображения в меню. Для этого используем специальную разметку текста, придуманную разработчиками вконтакте, которая называется wiki-разметка. Этот язык разметки текста с каждым днём становиться всё больше и больше так как разработчики постоянно его совершенствует. Если web мастеру для создания сайтов необходимо знать HTML, то SMM специалисту на сегодняшний день необходимо знать язык WIKI. Но вернёмся к делу…

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

То что, доктор прописал:

[­[photo***_***|Описание]] с помощью данного кода, будем размещать изображение в меню

[­[photo***_***|httр://ссылка.соm/]]  с помощью данного кода, будем размещать ссылку на сайт в виде изображения

[­[photo***_***|id***]] с помощью данного кода, будем размещать ссылку на страницу профиля в виде изображения

[­[photo***_***|club***]] с помощью данного кода, будем размещать ссылку на группу вконтакте в виде изображения

[­[photo***_***|page***_***]] с помощью данного кода, будем размещать ссылку на вики страницу в виде изображения
[­[photo***_***|nolink|Описание]] данный код мы будем использовать, если нам нужно вставить не кликабельное изображение. т.е. чтобы при нажатие на него, ничего не происходило.
[[photo***_***|400x105px;noborder| ]] так мы будем менять размеры изображений в меню, т.е. вместо 400×105 вписываете свои размеры. А код noborder используется, чтобы в изображении не было рамки вокруг него.

В принципе это все, что нам пригодится. Только осталось самое главное! После загрузки изображений на сервер Вконтакте, после установки их в меню, мы видим отступы (пробелы) между ними! А нам ведь нужно полноценное меню, как мы планировали. Для этого существует специальный код в вики-разметке, это – nopadding:

[[photo***_***|400x105px;nopadding| ]]

как сделать меню для группы вконтакте

Сейчас собираем нужные коды, написанные выше, для нашего меню и получаем что-то вроде:

[[photo35930750_292124836|380x130px;noborder;nolink;nopadding| ]]

[[photo35930750_292124840|380x26px;noborder;nopadding|http://ссылка.ru]]

[[photo35930750_292124841|380x20px;noborder;nopadding|http://ссылка.ru/creation-of-sites]]

[[photo35930750_292124843|380x24px;noborder;nopadding|http://ссылка.ru/raskrutka-sajta-bloga]]

[[photo35930750_292124846|380x28px;noborder;nopadding|http://ссылка.ru/earnings-on-the-site]]

[[photo35930750_292124848|380x26px;noborder;nopadding|http://ссылка.ru/konkursy]]

[[photo35930750_292124849|380x25px;noborder;nopadding|http://ссылка.ru/obo-mne]]

[[photo35930750_292124851|380x96px;noborder;nolink;nopadding| ]]

В данном полноценном коде, мы написали, что меню состоит из 8 частей, 6 из которых имеют активную ссылку. Все изображения имеют ширину 380, а высоту разную. Абсолютно все изображения без рамок, и лишних пробелов!

Ура, ура, ура! Мы это сделали. Давайте же посмотрим что получилось?

меню в группе в контакте

Ну как, Вам? Конечно, может быть и лучше, но мне и так нравится:) Ведь главное для меня было дать вам знания, научить делать такое меню без помощи специалиста. Ведь, правда же, зачем платить деньги кому-то, если можно сделать самому, и за несколько минут?


Я сам совсем недавно начал изучать отрасль SMO и SMM, поэтому нужно было создать группу и сделать красивое меню. Сейчас же у меня несколько групп, и я хотел бы показать одну из моих лучших работ по выполнению меню:

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

На этом у меня всё. Всем спасибо, и до скорого! И запомните: Главное пробовать, и все получится.

С уважением, Белан Константин!
—————————-

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

Минуточку внимания друзья!

Я со своей командой занимаюсь грамотным оформлением групп и пабликов вконтакте. Мы рисуем умопомрачительный дизайн меню и делаем классные аватарки. Примеры наших работы вы можете посмотреть на странице «Услуги».

Заказать у нас дизайн для вашей группы можно написав мне в вк https://vk.com/jonyit или на почту сюда: jony20@nxt.ru

Разработка сайта
Мы не используем платные CMS и за счет этого мы привлекаем низкой ценой клиентов. Не используем шаблоны у нас только уникальный дизайн. В подарок мы делаем SEO оптимизацию сайта и настройку контекстной рекламы.
Заказать
Продвижение сайта
Частный оптимизатор выходит гораздо дешевле web-студии. Я помогу вам вывести cайт в ТОП-3 и настроить автоматические продажи. В стоимость услуг входит аудит, техническая и seo оптимизация сайта.
Заказать
БЛОГ под КЛЮЧ
Сэкономьте годы возни на созданием и продвижением своего блога. Отдайте это дело блоггеру с пятилетним стажем. В услугу уже входит SEO оптимизация блога. В подарок вы получаете видео-курс «Мой авторитетный блог»
Заказать




46 комментариев
  1. Спа-си-бо!!! Так понятно и доступно объяснили, обязательно сделаю себе, тем более, что Photoshop знаю хорошо.

    Ответить на комментарий →
    • Дайте пожалуйста ссылку где вы качали этот фотошоп

      Ответить на комментарий →
      • Можно получить по попе за распространение пиратского софта)

        Ответить на комментарий →
  2. Ого-го! Материал отличный! Беру себе в закладки. [:))]

    Ответить на комментарий →
  3. Томский школьник 11 декабря, 2012 в 04:54

    Статья и правда – супер ;-) ;-) [good] [:-))]

    Ответить на комментарий →
  4. Все замечательно(кроме обилия грамматических ошибок). Только вот вопрос, а почему на эту страницу ведет ссылка “+1000 за 4 месяца”?

    Ответить на комментарий →
  5. Антон Краморов 17 декабря, 2012 в 04:33

    Андрей, больше не ведет. Ошибочка вышла.
    А статью +1000 за 4 месяца ещё не написал пока.
    Время нет [:-|]

    Ответить на комментарий →
  6. а как сделать чтобы входя в группу участники сразу видели меню группы а не заголовок про это меню!?

    Ответить на комментарий →
  7. спасибо [:-))]

    Ответить на комментарий →
  8. Насколько красиво, настолько для меня и сложно, но разобраться необходимо, ведь соцсеть ВК рулит!

    Ответить на комментарий →
  9. Делаю меню для групп Вконтакте, качественно и недорого
    http://vk.com/oformleniye_vk

    Ответить на комментарий →
  10. вячеслав 04 мая, 2013 в 11:30

    спасибо пока не разобрался но обезательно вникнем

    Ответить на комментарий →
  11. С меню все понятно. А как сделать подменю, чтобы при нажатии на ссылку появлялось еще одно окошко с подробным меню?

    Ответить на комментарий →
  12. Спасибо!!! Очень помогло! Написано понятным и ясным языком! 5 баллов [good]

    Ответить на комментарий →
  13. А у меня не переименовывается “свежие новости” в “меню группы” (((( Почему?

    Ответить на комментарий →
  14. помогите плиз групу мне зделать а то я сам не смог вот сылка http://vk.com/njingeimer если вчто пишити мне в Лс

    Ответить на комментарий →
  15. подскажите что делаю не так? режу к примеру картинку четыре верхние строки, пятая поделена на две составляющих и шестая опять одна. Выставляю картинку в менюшку нажимаю предосмотор, все хорошо, все ровненько. Выхожу с редактирования, обновляю страницу, стоит все коряво (не на своих местах) Как исправить?

    Ответить на комментарий →
  16. У меня нельзя нажать на кнопку фрагменты по напрявляющим.что делать?

    Ответить на комментарий →
  17. Светлана 26 июля, 2013 в 05:47

    Здравствуйте! А не могли бы вы дать ссылку этого фотошопа?

    Ответить на комментарий →
  18. [good]

    Ответить на комментарий →
  19. Вот не первый раз сталкиваюсь с такой проблемой. Всегда так подробно описывается, как работать с фотошопом (и тут, и в уроках по веб-дизайну), хотя на таком уровне освоить его – минутное дело. Но блин… ПОЧЕМУ СЧИТАЕТСЯ, ЧТО ЛЮДИ ПО УМОЛЧАНИЮ ЗНАЮТ, ЧТО ТАКОЕ КОДЫ И КАК ИХ ВСТАВЛЯТЬ?

    Я просто не понимаю принципа этих кодов… В фотошопе все наглядно, а тут могли бы тоже пример сделать, чтоб от и до. А то “это самое главное что нам пригодится” и следующая строчка “после загрузки изображений видим пробелы”. Да ни хрена я не вижу, потому что для меня эти коды – все равно что иероглифы. Попробовал вставить – все вроде сделал, и режим вики-разметки включен, и ссылки в кодах ведут на загруженные в ВК картинки и созданные альбомы или обсуждения… Но картинок и ссылок в меню нет, вместо долбанные коды, как они есть, на главной странице группы… [:–_)]

    Ответить на комментарий →
  20. Ладно, извините за экспрессию… Кажется разобрался. Вместо кодов просто нажимал на кнопочку “добавить фотографию” в панели редактирования и в появившемся коде вставлял после палочки | ссылку куда нужно. Получилось)

    Ответить на комментарий →
  21. Спасибо очень понятно но хочется увидеть в статье [good] как сделать меню как в примерах 1-2-3, особенно третье понравилось или если есть такая статья скинь ссылочку Спасибо!!!!!!!

    Ответить на комментарий →
  22. Команда [­[photo***_***|page***_***]] с помощью данного кода, будем размещать ссылку на вики страницу в виде изображения не работает :(. фото в итоге заменяется на дословное текстовое изображение этой строки, по ссылке при этом перейти позволяет. Как сделать чтобы отображалось в виде картинки?

    Ответить на комментарий →
  23. огромное спасибо!
    Это самое лучшее объяснение! [good] [good] [good]

    Ответить на комментарий →
  24. плизззз помогите, понять не могу у кого получилось отпишитесь плизззз http://vk.com/zhabura

    Ответить на комментарий →
  25. Все эти менюхи – ерунда, что машина на колесах от детского электромобиля. Вот конкурсы могут привлечь внимание, а дальше – только личный контакт. только фотки не забудьте выложить. Ха-ха
    http://societykey.blogspot.com/2013/12/Kak-sdelat-konkurs-v-Kontakte.html

    Ответить на комментарий →
  26. Надеялся, что создание меню – дело попроще. Но все равно – спасибо за информацию. Придется доверится профессионалам. За деньги)

    Ответить на комментарий →
  27. Антон Краморов 10 января, 2014 в 04:53

    Андрей, сам дизайн лучше заказать, стоить он будет в пределах 300-500р, а вот сверстать его в ВК можно легко самому ;-)

    Ответить на комментарий →
  28. Не ответили на вопрос Дмитрия:
    “а как сделать чтобы входя в группу участники сразу видели меню группы а не заголовок про это меню!?”
    Для меня тоже актуально!
    Оно не закрепляется! В чем может быть причина?

    Ответить на комментарий →
  29. Любовь Хабарова 05 марта, 2014 в 02:38

    Большое спасибо ! Наконец то меню в моей группе прилично выглядит

    Ответить на комментарий →
  30. Сбербанк Онлайн 10 марта, 2014 в 03:18

    Я смог оформить свою группу. Очень клёво получилось.

    Ответить на комментарий →
  31. Ну спаасиибо!!! Написал тютелька в тютельку по этой статье меню для группы!

    Ответить на комментарий →
  32. Антон, добрый день!
    Очень понравилась статья, но одного не могу понять. Как сделать такую вот навигационную страницу? У них нет сносок “описание” и “местоположение”, а меню не прячется в выдвигушку. Уже весь мозг сломала [:-|]

    Ответить на комментарий →
  33. Антон, меня создала в разденле Свежие новости. А как его сделать, что бы оно не пряталось, а всегда было открыто

    Ответить на комментарий →
    • Антон, меню создала в разделе Свежие новости. А как его сделать, что бы оно не пряталось, а всегда было открытоЗаранее благодарю за ответ… [:-))]

      Ответить на комментарий →
  34. Скажите, пожалуйста, как делать меню, как в 3 примере?

    Ответить на комментарий →
  35. Спасибо за подробную инструкцию. Добавляю в закладочки, буду изучать.

    Ответить на комментарий →
  36. Какая это версия фотошопа?

    Ответить на комментарий →
  37. Огромное спасибо автору [good] [good] [good]
    Написано супер, результат супер

    Ответить на комментарий →
  38. Подскажите как сделать картинки в 3 столбца?

    Ответить на комментарий →
  39. Благодарю!!! Столько полезной информации в удобоваримой форме [good] [good]

    Ответить на комментарий →
  40. а можно в COREL DRAW сделать

    Ответить на комментарий →
Оставь свой первый комментарий и получи:
:) :-D ;-) :-| [star] [good] [present] [flower] [:-))] [:))] [:--_)] [:-|]