VK – Перезагрузка №3: Как сделать меню в группе в контакте?
Привет всем читателям блога JonyIT! МЫ рады приветствовать вас в очередном выпуске серии статей «VK – перезагрузка» в которой сегодня поговорим о том как сделать меню в группе в контакте”. Кто мы? Ой, забыл представиться. Меня зовут Константин Белан и сегодняшний пост для вас пишу я, ну и конечно Антон помогает мне немного, так сказать наставляет на путь истинный.)
Скажу сразу создание и оформление меню для групп вконтакте, это не такое уж и сложное дело главное знать последовательность действий, на чём сегодня мы и заострим внимание. Первым делом разберем, какую информацию должно нести в себе меню, какой язык разметки текста использовать и как это всё реализовать в техническом плане.
В социальной сети Вконтакте много, даже очень много групп (как создать группу, Антон писал здесь), и все они имеют разный посыл, и разное оформление. т.к. у всех своя фантазия и свои интересы. Но, мало кто догадывается, что в меню содержится её скрытый смысл…
Как я уже говорил группа, как и публичная страница в социальной сети является филиалом вашего бизнеса в Интернете, а филиал должен выглядеть не хуже своего головного офиса. Это относиться и к тому, что если вы имеете добротный сайт в интернете, то и ваша группа не должна уступать сайту не на йоту.
Обзор различных меню групп в контакте
Перед тем как начать, что-то создавать я хочу представить вам некоторые меню групп, которые, на мой взгляд, получились не только очень яркими и привлекательными, но и отразили суть деятельности стоящей за ней людьми это как раз то, что мы сегодня и попытаемся реализовать. И так поехали…
№ 1 Свадебное агентство «La Perfecto»
Как вы понимаете это группа представляет одно из свадебных агентств в Санкт-Петербурге, да дизайн меню бесподобен, но нас он не интересует, мы проводим анализ структуры. Побеседовав с администратором группы, я выяснил, что 20% своих клиентов они получают благодаря этой группе. Если вы планируете предлагать свои услуги, то я рекомендую вам позаимствовать структуру меню этого свадебного агентства. И прошу вас не нужно придумывать велосипед, он уже придуман.
Так же я советую разместить номер телефона и выделить его, а так же отразить возраст вашей фирмы, так как он всегда увеличивает доверие клиенту перед покупкой.
№ 2 Общественная организация «Экострана»
Ещё одна грамотно оформленная группа, которая уже не относиться к какой-то коммерческой тематике это группа общественной организации «Экострана». Согласно описанию организация борется за сохранение природы, какими способами я честно не знаю, но нас это и не интересует=)
Пункты меню я считаю не очень чётко подобранны, так как первой ссылкой должна быть страница «О нас», чтобы попав в группу, посетитель первым делом мог познакомиться с тем, чем занимаются эти люди и вступить в их ряды по желанию=) А всё остальное я считаю в порядке, фото, видео, статьи и контакты, это то, что как раз и нужно юному приверженцу идей группы для вступления.
№ 3 Йога с Дарьей Каширской
Ну и, наконец, последняя группа по «Йоге» экспертом выступает Дарья Каширская. Я сам время от времени занимаюсь «Хатха йогой» и поэтому включил такой пример. Обратите внимание не на очередной дизайн, а на какие страницы хочет завлечь автор своих посетителей.
- Расписание
- Информация о преподаватели
- Новости
- Описания занятий
- Семинары
- Индивидуальные занятия
Все страница подобраны в правильном ключе, посетитель, попав в группу, сразу же натыкается на интересующую его информацию, то есть он узнаёт, какое расписание, какие занятия, что за преподаватель и мн. др.
Какие цели преследует создание меню в VK?
Философствовать на эту тему можно очень долго, но как я уже говорил в меню для группы вконтакте должна содержаться основанная информация, в которой посетитель найдёт ответы на все свои вопросы и закажет услугу или купит ваш инфо-продукт вообщем не важно, что это будет.
Что я подразумеваю под основной информацией? Ну, конечно же, это ваш прайс – лист товаров или услуг, контактные данные телефон или email, вопросы – ответы и всё это вы закрепляете отзывами о товаре.
Меню, конечно, может служить и для других целей всё зависит от тематике группы, но в основном группы создают коммерческой направленности.
Если группа создана для новостей, то в меню должна быть сводка последних новостей. Если группу создали с целью привлечения посетителей на сайт, то меню должно содержать краткую карту сайта. Например, самые главные страницы, и популярные записи.
Некому не секрет, что социальные сети сейчас очень широко используются для продвижения сайтов. Например, на блоги ставят кнопки социальных сетей для того, чтобы повысить число посетителей, и поднять статью выше в поисковых системах. Так же можно поставить WordPress комментарии от Вконтакте, это послужит увеличению количества комментариев, а так же поведенческих факторов.
Рисуем графическое меню для группы вконтакте в Photoshop
Создавать меню мы будем с помощью Photoshop’а. Практически все обладают начальными навыками этого графического редактора, так что я думаю, проблем не у кого не возникнете
Так вот заходим в Photoshop. Если у Вас, его нет, скачиваете и устанавливаете.
Шаг 1. – Создаем новый документ, размерами примерно: 400×500 (высота будет зависеть от количества пунктов меню).
Если вы умеете рисовать, то можете предварительно нарисовать эскиз на тетрадном листе, но так как этого делать я не умею, то возьму простенький шаблон, который в последующем и превращу в меню. К сожалению «Репин» из меня никакой)
Шаблонов в Интернете вагон, да не то что шаблонов, а изображений на которых можно просто написать текст и превратить его в навигационное меню в vk. Можно сделать, какой-нибудь телевизор с надписями, сотовый телефон с надписями, плакат с надписями, да что угодно, главное чтобы с надписями 🙂 Я к примеру выбрал изображение плазменного телевизора на который нанесу текст и в будущем с помощью wiki разметки сделаю из него Гиперссылки.
Шаг 2. – Берём тот самый телевизор и Photoshop’e прописываем небольшое меню, которое состоит из рубрик и пары страниц моего блога.
Я уже говорил что не «Репин», поэтому в данном уроке обойдусь таким вот аскетичным меню, но вам я предлагаю не останавливаться на достигнутом и пририсовать что-нибудь ещё интересненькое, ну а если у вас другой шаблон, то это сам бог велел сделать.)
Далее нам необходим разрезать изображение по частям . Для чего? – спросите вы. Для того, чтобы сделать части изображений с текстом, активными ссылками.
Шаг 3. – Выбираем инструмент «Раскройка», для этого нажимаем C, и выбираем из меню «Раскройка». Переводы меню могут отличаться от вашей версии фотошопа, поэтому ориентируйтесь на иконки в меню.
Включим линейку нажатием комбинации клавиш «CTR+R» с помощью нею вам будет легче ориентироваться при разрезании изображения. Как разрезать? Да не могу, но если в техническом плане, то это нужно делать как то так…
Для этого подносим мышь к верхней линейке и оттягиваем её до того момента, от куда начинаются части изображений с ссылками. Потом так же оттягиваем до того момента, где заканчивается первое изображение с ссылкой. И так, повторяем пока не выделим все изображения, на которых будет ссылка. В итоге у нас должно получится следующее чудо:
Теперь нужно создать фрагменты по направляющим. Не буду говорить, что это, т.к. у нас не урок работы в Фотошопе. И наша задача лишь научиться создавать меню в контакте. Ну ладно, что-то я немного отвлекся.
Шаг 4. – Для создания фрагментов по направляющим, нужно нажать на специальную кнопку в области параметров, которая называется «Фрагменты по направляющим»
Ух ты, у нас все отлично получается. Что же делать теперь? А теперь, сохраняем части изображения по отдельности. Для этого нажимаем Файл –>Сохранить для Web и устройств…
Шаг 5. – Далее вводим название файла, выбираем формат JPEG, качество ставим наилучшее и ставим галочки напротив Прогрессивный и Встроенный профиль. Нажимаем сохранить и ура, изображение разделено на несколько частей.
Теперь наша задача, загрузить эти изображения Вконтакт и сделать из них – Меню!
Техническая реализация меню для группы в vk.com
Теперь, после того как готово изображение меню, можно приступать к адаптации его Вконтакт. Для этого переходим в группу, в которой будете создавать меню и нажимаем кнопку «редактировать» возле заголовка свежие новости.
После этого переименовываем заголовок, как Вам нужно, например: Меню, Свежак тут или Самое интересное тут.
Теперь начинаем адаптацию изображения в меню. Для этого используем специальную разметку текста, придуманную разработчиками вконтакте, которая называется 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
Спа-си-бо!!! Так понятно и доступно объяснили, обязательно сделаю себе, тем более, что Photoshop знаю хорошо.
Дайте пожалуйста ссылку где вы качали этот фотошоп
Можно получить по попе за распространение пиратского софта)
Ого-го! Материал отличный! Беру себе в закладки.
У вас красивый сайт Элен
Статья и правда – супер
Все замечательно(кроме обилия грамматических ошибок). Только вот вопрос, а почему на эту страницу ведет ссылка “+1000 за 4 месяца”?
Андрей, больше не ведет. Ошибочка вышла.
А статью +1000 за 4 месяца ещё не написал пока.
Время нет
а как сделать чтобы входя в группу участники сразу видели меню группы а не заголовок про это меню!?
спасибо
Насколько красиво, настолько для меня и сложно, но разобраться необходимо, ведь соцсеть ВК рулит!
Делаю меню для групп Вконтакте, качественно и недорого
http://vk.com/oformleniye_vk
спасибо пока не разобрался но обезательно вникнем
С меню все понятно. А как сделать подменю, чтобы при нажатии на ссылку появлялось еще одно окошко с подробным меню?
Спасибо!!! Очень помогло! Написано понятным и ясным языком! 5 баллов
А у меня не переименовывается “свежие новости” в “меню группы” (((( Почему?
помогите плиз групу мне зделать а то я сам не смог вот сылка http://vk.com/njingeimer если вчто пишити мне в Лс
подскажите что делаю не так? режу к примеру картинку четыре верхние строки, пятая поделена на две составляющих и шестая опять одна. Выставляю картинку в менюшку нажимаю предосмотор, все хорошо, все ровненько. Выхожу с редактирования, обновляю страницу, стоит все коряво (не на своих местах) Как исправить?
У меня нельзя нажать на кнопку фрагменты по напрявляющим.что делать?
Здравствуйте! А не могли бы вы дать ссылку этого фотошопа?
Вот не первый раз сталкиваюсь с такой проблемой. Всегда так подробно описывается, как работать с фотошопом (и тут, и в уроках по веб-дизайну), хотя на таком уровне освоить его – минутное дело. Но блин… ПОЧЕМУ СЧИТАЕТСЯ, ЧТО ЛЮДИ ПО УМОЛЧАНИЮ ЗНАЮТ, ЧТО ТАКОЕ КОДЫ И КАК ИХ ВСТАВЛЯТЬ?
Я просто не понимаю принципа этих кодов… В фотошопе все наглядно, а тут могли бы тоже пример сделать, чтоб от и до. А то “это самое главное что нам пригодится” и следующая строчка “после загрузки изображений видим пробелы”. Да ни хрена я не вижу, потому что для меня эти коды – все равно что иероглифы. Попробовал вставить – все вроде сделал, и режим вики-разметки включен, и ссылки в кодах ведут на загруженные в ВК картинки и созданные альбомы или обсуждения… Но картинок и ссылок в меню нет, вместо долбанные коды, как они есть, на главной странице группы… [:–_)]
Ладно, извините за экспрессию… Кажется разобрался. Вместо кодов просто нажимал на кнопочку “добавить фотографию” в панели редактирования и в появившемся коде вставлял после палочки | ссылку куда нужно. Получилось)
Спасибо очень понятно но хочется увидеть в статье как сделать меню как в примерах 1-2-3, особенно третье понравилось или если есть такая статья скинь ссылочку Спасибо!!!!!!!
Команда [[photo***_***|page***_***]] с помощью данного кода, будем размещать ссылку на вики страницу в виде изображения не работает :(. фото в итоге заменяется на дословное текстовое изображение этой строки, по ссылке при этом перейти позволяет. Как сделать чтобы отображалось в виде картинки?
огромное спасибо!
Это самое лучшее объяснение!
плизззз помогите, понять не могу у кого получилось отпишитесь плизззз http://vk.com/zhabura
Все эти менюхи – ерунда, что машина на колесах от детского электромобиля. Вот конкурсы могут привлечь внимание, а дальше – только личный контакт. только фотки не забудьте выложить. Ха-ха
http://societykey.blogspot.com/2013/12/Kak-sdelat-konkurs-v-Kontakte.html
Надеялся, что создание меню – дело попроще. Но все равно – спасибо за информацию. Придется доверится профессионалам. За деньги)
Андрей, сам дизайн лучше заказать, стоить он будет в пределах 300-500р, а вот сверстать его в ВК можно легко самому
Не ответили на вопрос Дмитрия:
“а как сделать чтобы входя в группу участники сразу видели меню группы а не заголовок про это меню!?”
Для меня тоже актуально!
Оно не закрепляется! В чем может быть причина?
Большое спасибо ! Наконец то меню в моей группе прилично выглядит
Я смог оформить свою группу. Очень клёво получилось.
Ну спаасиибо!!! Написал тютелька в тютельку по этой статье меню для группы!
Антон, добрый день!
Очень понравилась статья, но одного не могу понять. Как сделать такую вот навигационную страницу? У них нет сносок “описание” и “местоположение”, а меню не прячется в выдвигушку. Уже весь мозг сломала
Антон, меня создала в разденле Свежие новости. А как его сделать, что бы оно не пряталось, а всегда было открыто
Антон, меню создала в разделе Свежие новости. А как его сделать, что бы оно не пряталось, а всегда было открытоЗаранее благодарю за ответ…
Скажите, пожалуйста, как делать меню, как в 3 примере?
Напишите мне на почту jony20@nxt.ru или сюда https://vk.com/jonyit
Мы вам сделаем
Спасибо, но хотелось бы научиться делать самой.
Спасибо за подробную инструкцию. Добавляю в закладочки, буду изучать.
Какая это версия фотошопа?
Огромное спасибо автору
Написано супер, результат супер
Подскажите как сделать картинки в 3 столбца?
Благодарю!!! Столько полезной информации в удобоваримой форме
а можно в COREL DRAW сделать