Подробное меню в контакте создать. Как сделать открытое меню группы вконтакте

ВАЖНОЕ ОБНОВЛЕНИЕ : эта статья сильно устарела, поскольку появился специальный сервис MenuMake , который позволяет создать меню для группы автоматически. В ручном подходе больше нет необходимости. Однако, оставляю эту статью для истории.

Группы в Контакте, это место наибольшего скопления их пользователей. Именно поэтом, многие стараются получше их оформить, дабы привлечь максимальное их количество. О графическом оформлении создателю лучше всего подумать еще перед непосредственным , одновременно с разработкой будущего .

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

Поговорим об идеологии

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

Меню для привлечения посетителей

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

Меню для продаж

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

Первый этап – работаем в фотошоп

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

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

Но чтобы эта картинка преобразовалась и легко сверсталась в ссылки ее надо порезать. Делается это в том же фотошопе с помощью инструмента «раскройка».

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

Здравствуйте, друзья. Все движется, все меняется. Социальная сеть Вконтакте тоже не стоит на месте. Вот и моя публикация о создании единого блока Вконтакте Аватар+Меню на сегодняшний день стала не актуальна. Теперь при создании группы блок Новости, который был необходим для такого меню, просто отсутствует.

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

Итак, давайте по порядку.

Как создать вики-страницу?

1. Создайте в адресной строке вашего браузера ссылку вида:

  • ххх – id вашей группы или публичной страницы;
  • Название_страницы – любое слово, которым вы назовете свою страницу.

Как узнать id вашего сообщества? Если id не содержится в ссылке, например, https://vk.com/make_community , его можно узнать следующим образом. Нажимаете на заголовок стены группы, где написано количество публикаций.

Откроется отдельно стена вашего сообщества. В адресной строке будут цифры. Это и есть id вашего сообщества.


2.
Перейдите по созданной вами ссылке и нажмите “Наполнить содержанием”.

3. Наполните вашу страницу содержанием. К примеру, нам необходимо графическое меню в виде отдельных кнопок. Сначала создаем всю картинку целиком.

Затем разрезаем ее на отдельные кнопки. В данном конкретном случае у нас должно получится четыре картинки-кнопки.

Возвращаемся к нашей странице и, используя встроенный редактор, загружаем наши картинки-кнопки.

После загрузки всех картинок должно получится вот так:

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

Создаем меню.

Должна получится вот такая запись на стене вашей группы Вконтакте:

Как закрепить меню?

Нам остается закрепить меню наверху группы. Для этого жмем на текст перед картинкой в записи. В открывшемся окне внизу справа нажимаем “Закрепить”.

Все. Теперь у нас должно получится вот так:

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

Во всех сообществах Вконтакте, в которых можно структурировать информацию, я рекомендую делать меню. Это безусловно повысит удобство пользованием вашим сообществом. А как закрепить меню Вконтакте мы с вами разобрали на конкретном примере. Остается пожелать вам удачи в развитии и продвижении ваших сообществ!

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

Первые секунды пребывания формируют дальнейшие действия гостя. Именно поэтому интерфейс играет большую роль.

Факторы оставляющие гостя:

  • аватарка;
  • описание;
  • название;
  • красивое и практичное меню;
  • красочность;
  • контент.

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

Каким должно быть меню

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

Три основные цели групп:

  1. продажи;
  2. увеличение трафика;
  3. увеличение активных посестителей.

Для продаж навигация в группе заменяет витрину в магазине.

Здесь должны быть самые важные кнопки:

  1. каталог;
  2. стоимость;
  3. доставка;
  4. акционные предложения;
  5. отзывы.

Для увеличения посещаемости акцент делается на контент и изюминку сайта или блога.

Приблизительный вариант набора кнопок:

  • интересные статьи;
  • полезная информация;
  • подписаться;
  • отзывы.

Для повышения активности участников следует стимулировать их акциями, опросами и интересным и необычным контентом.

Предлагаем такие кнопки:

  • подписаться на новости;
  • задать интересный тематический вопрос;
  • акции;
  • опросник;
  • голосование.

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

Создаем по этапам

Создание навигации – процесс интересный, сложный и длительный. Но результат того стоит .

Весь процесс условно делиться на 2 этапа:

  • работа с фотошопом;
  • техническое добавление.

видео: меню для паблика

Работаем с фотошопом

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

Алгоритм действий:

  • установите и запустите программу «Фотошоп»;

  • в пункте «Файл» выберете «Создать»;
  • в появившемся окне задайте:

  • Делается это с помощью инструмента «Прямоугольная область»:


    Работа с графикой:

    Приблизительно должно получиться вот так:

    Сохраните прямоугольник, расположенный справа отдельной картинкой, задав размер 200х500 пикс. Это готовая аватарка, загружается через кнопку «Загрузить фотографию» в группе вк.

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

    Для начала следует сделать разметку:


    Создаем фрагменты:


    Сохранение изображений:

    Как очистить компьютер от ненужных программ? Инструкция тут.

    Техническая часть

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

    Важно! Заливка меню отличается от обычно загрузки фото или картинок.

    Все по порядку:

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

  1. найдите необходимую запись;
  2. кликните по ней левой кнопкой мыши;
  3. скопируйте URL в адресной строке.
  • зайдите на источник, куда нужно переправлять посетителя;
  • скопируйте необходимый адрес.

Сохраните изменения соответствующей кнопкой внизу окна.

Внимание! Изменения могут не сразу отобразиться. Рекомендуется выйти на свой основной профиль, а затем снова зайти в группу.

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

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


Данный инструмент позволяет создавать:

  • эффекты;
  • необычные меню;
  • таблички;
  • элементы навигации;
  • форматировать текст.

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

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

Визуально такая система очень схожа с HTML-версткой. Но она не требует длительного обучения и специального склада ума.

Видео: меню с поиском по рубрикам

Нюансы создания

Собственно, то, что было сделано выше (разделение и загрузка картинки) это уже элементы разметки. В этом и преимущество данного инструмента. Автоматическое превращение в теги, при простой загрузке картинок.

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

Вот так: []

Основные теги представлены в таблице ниже:

Работа с картинками

[] .

Где options заменяется на:

  • noborder - снятие рамки вокруг изображения;
  • nopadding - снятие пробелов между изображением;
  • plain - вставка ссылки на картинку. Оформляется в виде текста, без графики;
  • nolink - снятие ссылки на картинку;
  • box - открытие изображения в окне;
  • NNNxYYYpx или NNNpx - задает размер фото в пикселях.

Создание таблицы

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

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


И снова рад Вас приветствовать!

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

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

Вот что у меня получилось.

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

И так. Вот основные шаги:

  • Продумать основное меню
  • Выбрать изображение
  • Фотошоп (без фотошопа как всегда никуда 🙂)
  • Раскройка изображения
  • Заливка изображения в альбом контакта

Чтобы активировать свежие записи (для Вашего будущего меню) , нужно зайти в управление сообщества и включить пункт — «Материалы»

После того, как материалы будут включены, в верхней части группы появится пункт «Свежие новости», в котором и нужно будет создавать меню. Также как и с любой страницей контакта, мы попадаем в редактор, в котором можно как вручную заливать изображения или кнопочки меню, так и через wiki-разметку (кнопочка в правом верхнем углу).

Как Вы догадались, проще всего сначала нарисовать необходимую картинку в фотошопе, и заранее поместить на нее кнопочки, в будущем они будут ссылками.

В своём примере я использовал фон девушки, и поместил слева от нее 3 кнопки. Каждая кнопка — имела своё название.

Мое меню состояло из следующих пунктов:

Для внедрение готового изображения в контакт, предварительно его нужно раскроить. Для этого в фотошопе используем инструмент «Раскройка «. Думаю с этим сложностей не возникнет. Там всё просто… На всякий случай, сделал фото 🙂

Выбираем данный инструмент и начинаем «резать». У меня получилось 4 части. (самое простое, что придумал:), хотя можно изрезать его на кусочки)

Все необходимые работы по созданию меню выполнены. Теперь можно приступить к созданию меню вконтакте. Для этого поочередно загружаем изображения в контакт. Вот что получилось в итоге:

Теперь нажимаем на каждую кнопку (или часть изображения), и присваиваем необходимый адрес (ссылку). Чтобы убрать лишние пробелы нужно использовать тег «nopadding» (в меню Wiki-разметки)

Тег «nopadding» – убирает пробелы между картинками, то есть помогает «состыковать» их вплотную к друг другу.

В результате добавления тега, получилось следующее:

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

У многих видел, что делают продолжение основного аватара. Получается как одно целое изображение. Красиво смотрится. Но для создания такого, нужно лучше разбираться в фотошопе 🙂 .

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

Ответ: Данную возможность насколько мне известно убрали администраторы Vkontakte. Раньше была отдельная кнопочка, чтобы меню было фиксированным — открытом. Затем эту функцию убрали, и теперь менюшки приходится открывать отдельно.

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

А на сегодня всё. До связи!

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

Что для этого нужно?

Как «В Контакте» в группе сделать меню? В "Фотошопе" необходимо создать две картинки, которые ранее были одним целым. Первая для аватарки, вторая - само меню, это изображение необходимо нерезать на несколько частей. «В Контакте» на страничке, предназначенной для меню, нужно вставить код со ссылками на части изображения и разделы. А если необходим открытый тип, понадобится третья картинка, которая закрепляется в верхней части сообщества.

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

Первый этап

Как сделать меню в группе «В Контакте»? Сначала нужно создать новый документ с размерами 700 на 800 пикселей. Проследить, чтобы фон был белым цветом. На верхнем слое необходимо вырезать два окошка 200 на 710 - для аватара и 382 на 442 - меню. Сделать это можно с помощью выделения прямоугольником или командой, которая вызывается клавишей «Del».

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

В нужных зонах изображения при помощи элементов "Фотошопа" необходимо разместить надписи и кнопки.

Прямоугольник, который получился справа (размером 200 на 710) можно скопировать и выгрузить в отдельный файл. Это готовая аватарка для группы. А вот левая часть картинки нуждается в дополнительной нарезке.

Количество элементов в меню допускается от двух частей. Но может быть и три, и четыре. Мы рассмотрим пример для двух.

Высота каждого нарезанного элемента должна быть не менее 50 пикселей.

Как нарезать картинку для меню?

Для этого нужно открыть изображение в отдельном файле. Понадобится инструмент «Раскройка». Он находится на панели программы в виде ножа.

Правой кнопкой мыши необходимо щелкнуть на картинку и выбрать из выпавшего списка пункт «Разделить фрагмент».

Откроется окошко, в котором нужно задать параметры раскройки. Рекомендуется поставить галочку возле надписи «Разделить по горизонтали на» и выбрать количество равных фрагментов.

После проделанных действий на экране появится сетка, которая делит картинку на участки.

Разрезанные файлы будут в пронумерованном виде.

Второй этап

Это урок о том, как сделать меню группы «В Контакте». Все нарезанные картинки необходимо загрузить в альбом группы.

Понадобится страница «Свежие новости». В ближайшее время работа будет проходить с ней.

Желательно выбрать в редакторе справа режим wiki-разметки и вставить туда следующий код:

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

В результате получится нечто похожее на:

Как получить номер изображения?

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

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

Чтобы совместить с ней аватар, необходимо немного поэкспериментировать с описанием. Приблизительно, по указанным размерам должно быть 12 строчек.

Это один из вариантов, как сделать меню в группе «В Контакте». Всего их два. Еще один способ - открытый. Их можно совместить.

Как сделать открытое меню?

В новом окне необходимо кликнуть правой кнопкой мыши на созданное меню и нажать на ссылку «Редактирование». Во вкладке «Вернуться к странице» в строке браузера можно получить ссылку на меню. Ее необходимо скопировать.

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

Как сделать меню в группе «В Контакте»? Теперь необходимо кликнуть правой кнопкой мыши на дату новости. Она должна открыться в новом окне. Там можно увидеть новую надпись «Закрепить». Как раз она и нужна.

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

Вот и все. Создавать меню в контакте не так уж сложно. Если действовать по инструкции, которая описана выше, справиться может каждый.