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

Содержание:

ФОРМЫ
Как нарезать картинку для меню?
Разделы в группе ВК
ИЗОБРАЖЕНИЯ
Создаем графическое меню
А теперь вертикально. Я сказал вертикально!
Обложка
Создаем по этапам
- Работаем с фотошопом
- Техническая часть
Основные правила и ошибки
Поговорим об идеологии
- Меню для привлечения посетителей
- Меню для продаж
Создание графического меню в ВК
Как сделать меню сайта
Как сделать меню в группе ВК
- Текстовое
- Графическое меню

ФОРМЫ

Форма входаФорма регистрацииФорма оформления заказаКонтактная формаФорма входа в соц сетиРегистрацияФорма с иконкамиРассылка по почтеСложенная формаАдаптивная формаФорма всплывающаяФорма линейнаяОчистить поле вводаКопирование текста в буфер обменаАнимированный поискКнопка поискаПолноэкранный поискПоле ввода в менюФорма входа в менюПользовательский флажок/радиоПользовательский выборТумблер перключательУстановить флажокОпределить Caps LockКнопка запуска на EnterПроверка пароляПереключение видимости пароляМногоступенчатая формаФункция автозаполнения

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

Оформление группы в вконтакте: меню, анимированные обложки, размеры изображений и прочие тонкости

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

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

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

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

На этом этапе необходимо сохранить полученный результат. В меню «Файл» нужно выбрать «Сохранить для Web». В появившемся окне нажать кнопку «Сохранить» и выбрать папку, в которую загрузятся части изображения.

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

Разделы в группе ВК

Про группы в вк в 2021: как создать сообщество, закрыть группу, создать меню и т.д

Под разделами в сообществе в данном случае я подразумеваю маркировку постов с помощью внутренних хэштегов (#). Хэштеги значительно упрощают поиск необходимой информации в сообществе, особенно, когда группа развивается давно, и материалов уже много.

Одна из основных задач хэштегов – группировать посты по тематикам. Самый простой пример возьмем из кулинарии. Логично, что посты, как варить суп, готовить каши на молоке или печь торты, лучше разделить по темам. Читатель, которого интересуют торты, быстро найдет рецепты по ранее присвоенному хэштегу (#торты). И ему не понадобится пересматривать все посты с кашами, супами и компотом.

Для новичков подскажу, как выглядят хэштеги ВКонтакте – это решетка с набором символов (слова, цифры, сокращенная аббревиатура). Например:

#супы

#астрология

#Koko_Shanel

#Queen

Или вот пример из моей группы ВК: #dr_dzen, #dr_link, #dr_justclick.

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

Хэштеги внутри сообщества работают только в рамках группы. Как это проверить? Достаточно кликнуть по любому хэштегу в посте. Если открывается лента постов из разных групп, то хэштег общий. Если в выдаче только ваша группа – значит, такого хэштега больше нигде нет. Я бы рекомендовала в посты добавлять те и те хэштеги. Но то, что работает только внутри группы – обязательно! Они понадобятся для создания ссылок в меню.

ИЗОБРАЖЕНИЯ

Как из группы вконтакте сделать публичную страницу

Слайд шоуГалерея слайд шоуМодальное изображениеЛайтбоксОтзывчивая сетка изображенийСетка изображенийГалерея вкладокЭффект наведения на изображениеНаложение слайда на изображениеНаложение на изображениеНаложение заголовка на изображениеНаложение иконки на изображениеЭффект к изображениюЧерно-белое изображениеТекст на изображенииИзображение с текстовым блокомИзображение c прозрачным текстомИзображение на всю страницуФорма на изображенииИзображение герояРазмытое фоновое изображениеФоновое изображениеВыравненные изображенияОкругленные изображенияИзображение аватарОтзывчивое изображениеИзображение по центруМинитюрное изображениеЗнакомство с командойЛипкое изображениеЗеркальное изображениеДрожание изображенияГалерея портфолиоПортфолио фильтрЗум изображенияЛупа изображенияПолзунок сравнения

Создаем графическое меню

В появившемся окне указать следующие размеры: высота — 450 пикселей, ширина — 610 пикселей, разрешение 100 пикселей на дюйм. Разумеется, при желании Вы можете ввести другие параметры, но помните о том, что при создании wiki-странички каждая сторона изображения не может быть больше 610 пикселей.

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

На панели инструментов найти иконку «Прямоугольник». С её помощью создать кнопку меню.
В меню «Просмотр» включить режим «Вспомогательные элементы». Здесь можно моделировать кнопку, придав ей желаемый вид.

Размножить кнопку нужное число раз, удерживая клавишу «Alt» и перетаскивая изображение в нужное место будущего меню.
Активизировать инструмент «Текст», нажав клавишу «Т» или с помощью специальной иконки на панели инструментов.
Кликнуть в любом месте рабочей области и ввести текст первой кнопки. Перетащить текст в нужную область.
Центрировать текст по картинке, выделив слой с картинкой и текстом с помощью клавиши «Ctrl» и нажимая иконки выравнивания на панели инструментов.
Оформить все остальные кнопки.
Активизировать инструмент раскройки или нажать клавишу «С» на клавиатуре, выделить каждую кнопку.

Открыть раздел меню «Файл» и кликнуть пункт «Сохранить для Web».
Выбрать формат PNG-24, нажать кнопку «Сохранить». В папке появится соответствующее количество файлов.

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

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

Вернуться в режим редактирования wiki-разметки.
После разрешения в коде поставить символ «;» и указать параметр «nopadding;». Это нужно для того, чтобы избежать разрывов между картинками.
Теперь в каждую строчку между первой квадратной скобкой и вертикальной чертой нужно добавить прямую ссылку, куда будет осуществляться переадресация. Нажать кнопку «Сохранить».
Войти во вкладку «Просмотр», чтобы убедиться в нормальном функционировании меню.

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

IT-специалист и продвинутый пользователь ВК. Зарегистрировался в соцсети в 2007 году.

А теперь вертикально. Я сказал вертикально!

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

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Вертикальная панель</title>
  <style>
   li{
    display: block; 
    margin: 13px;
    padding: 13px;
    background: #FF8C00;  
    width:20%;
    text-align:center;
    font-size:20px;
    border-radius:10px;
   }
   a {
    color: #fff;  
   }
   li:hover {
    background: #1C1C1C; 
   }
  </style>
 </head>
 <body>
  <menu>
    <li>Главная</li>
    <li>О компании</li>
    <li><a href="3.html">Продукция</a></li>
    <li><a href="4.html">Контакты</a></li>
  </menu>
 </body>
</html>

Как вы уже заметили, главное изменение в этом коде – это отсутствие объявления display: inline-block, который собственно и отвечал за горизонтальное расположение пунктов навигации.

Обложка

Размеры: 1590×400 px, видимая зона для мобильной версии 1196×400 px.

Это вытянутая горизонтальная картинка в шапке сообщества, она некликабельна.

Обложка нашей группы vk.com/prcyru

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

Группа без обложки

Общие рекомендации к обложке

Чтобы качество обложки не портилось, администрация Вконтакте советует загружать изображение размером 1590×400 px. Но в мобильной версии вся обложка не умещается в экран, края справа и слева обрезается на 197рх, поэтому все данные, тексты и изображения, которые нельзя резать, лучше помещать в видимой зоне, это 1196×400 px. А сверху примерно 83 рх занимает полоска с индикаторами связи, уровня заряда и прочих.

Схема обложки с разметкой

Чтобы вам не размечать области самостоятельно, мы сделали шаблон в формате psd с направляющими, разграничивающими области. Его можно скачать.

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

Обрезалось часть названия на обложке

Многие советуют делать на обложке стрелки, побуждающие нажать на подписку или написать сообщение.

Стрелка указывает на кнопку подачи заявки

Стрелка показывает на кнопку с сообщением

Мы советуем сначала посмотреть, преимущественно с каких устройств аудитория смотрит группу. Такая информация есть в статистике сообщества:

Скриншот статистики группы PR-CY

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

Стрелка указывает на аватарку

Стрелка указывает на пустое поле

Динамическая обложка

Размеры: такие же, как у обычной обложки.

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

Пример с выводом аватарок активных участников на обложку

Аватарка нового подписчика на обложке

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

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

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

Анимационная обложка на мобильных

Размеры: вертикальные фото и видео 1080×1920 px или другие в пропорции 9:16.

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

Обложка группы в мобильном просмотре

Обложка группы по клику в мобильном просмотре

Включается эта возможность в Настройках сообщества:

Настройки группы

Дальше появится окно с добавлением фотографий в слайд-шоу для анимированной мобильной обложки:

Добавление фотографий

Какой размер материалов выбрать:

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

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

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

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

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

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

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

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

ширину – 630 пикс;
высоту – 725 пикс;
содержимое фона – белый.

Далее нужно разделить рабочую область на 2 окна

Они то и будут привлекать внимание посетителей и обязательно заставят передвигаться по группе

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

кликните на значок правой кнопкой мышки;
выберите инструмент «Прямоугольник»;
используя вертикальную и горизонтальную линейки как ориентир, выделите прямоугольник размером 200х710 пикс, зажав левую кнопку мыши;
после, нажмите кнопку Delete;
в появившемся окне установите использование 50% серого;
нажмите ОК;
аналогично создайте прямоугольник размером 382х442 пикс, как на рисунке:

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

под этим слоем расположите свое оформление:
далее напишите желаемый текст;
с помощью инструментов рисования фигур, нарисуйте кнопки:

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

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

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

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

комбинацией клавиш «CTR+R» включите линейку;
наведите курсор на верхнюю линейку;
зажав левую кнопку мыши, потяните вниз, к нижней границе кнопки;
повторите по каждой кнопке.

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

возьмите инструмент Slice Tool;
вверху есть кнопка «Фрагменты по направляющим»;
должно получиться вот так:

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

нажмите Файл – Сохранить для web;
введите название;
укажите формат JPEG;
ставьте наилучшее качество;
отметьте галочки у «Прогрессивный и Встроенный профиль»;
последняя кнопка «Сохранить».

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

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

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

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

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

зайдите в группу;
включите новостную ленту;
возле полосы «Свежие новости» нажмите «Редактировать»;
поменяйте название на меню или что-то подобное;
через кнопку в виде фотоаппарата добавьте картинки;
результат будет приблизительно таким:

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

Отдельной картинке необходимо присвоить «свою» ссылку.

Если вы хотите вставить ссылку на запись со стены:

найдите необходимую запись;
кликните по ней левой кнопкой мыши;
скопируйте URL в адресной строке.

Для вставки ссылки на другой сайт, группу, одностраничник и прочего:

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

Далее просто вставьте ссылку на соответствующую картинку. Вот код картинки, который появился в окне загрузки картинки: ].

После символа «|» просто вставьте свою ссылку. Выглядеть это будет вот так: ]

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

Основные правила и ошибки

Меню должно быть заметным. Это может быть выделение оформлением или цветом. Ссылки, иконки должны контрастировать с фоном настолько, чтобы при считывании не возникло проблем. Откажитесь от скрытого или недостаточно контрастного меню, даже если очень хочется воплотить оригинальную дизайнерскую мысль. Если реализовали, оцените по счетчикам аналитики показатель отказов, просмотрите по вебвизору, как люди ведут себя на сайте. И расставьте приоритеты: супер-креатив или понятный дружелюбный интерфейс.
Дизайн. Разные средства: цвет, шрифты, тени— помогают добиться удобства восприятия. При этом помните, что нужно сделать элемент заметным, а не пестрым и аляповатым.
Единство оформления. На всех страницах ресурса стиль меню должен оставаться неизменным. Разные варианты будут сбивать пользователя, ухудшать восприятие информации.
Стандарты верстки. Располагайте меню в общепринятых местах: вверху, справа, слева. Внизу в футере могут быть дублирующие ссылки, но никак не единственный элемент навигации. Пользователи не будут его искать, они просто уйдут. Был пример размещения элемента Корзина на сайте не в стандартном правом верхнем углу, а в левом нижнем. Результат — ее просто не находили.
Тестирование. Если на старте трудно оценить, какой вариант будет оптимальным, подсмотрите у лидеров в топе. При вводе серьезных многоуровневых веб-проектов полезно проводить тесты на предмет доступности, удобства и т.д.
Индикация. Настройка отображения меню таким образом, чтобы посетитель ориентировался, в каком разделе находится. Для этого используют выделение активного пункта графикой или цветом.

Четкие ориентиры. Люди приходят не всегда сразу на главную, могут начинать с любого подраздела. Грамотное навигационное меню должно показать, где они сейчас и как попасть в раздел любого уровня. Размещение ссылки/иконки на главную страницу на каждом URL в заметном месте обязательно.
Меню должно быть понятным. Не пишите неизвестные аббревиатуры, сокращения, иностранные аналоги только потому, что они короче и оригинальнее смотрятся. Посетитель не должен догадываться, что скрывается в разделе Print: печатная продукция или размещение в прессе. Если рассчитываете таким образом заинтриговать, чтобы человек перешел и посмотрел, получите процент отказов под 100.
Удобство. Если ваше меню многоуровневое с выпадайками, позаботьтесь о настройке, приемлемой скорости отображения вспомогательных секций. Иногда очень сложно со скоростью света уловить всю цепочку из 4 подразделов. Ставьте себя на место ваших клиентов. Даже если пунктов много, оставьте только основные.
Не мельчите, шрифт должен быть хорошо читаемым, высота и ширина плашек достаточной для комфортного попадания по ним курсором. Выпадающий список должен уместиться в высоту одного экрана. В противном случае не все будут напрягаться, пытаясь одновременно удерживать его открытым и осуществлять прокрутку.
Сегодня правило хорошего тона – верстать сайты с учетом адаптивных версий под мобильные устройства с отличными разрешениями.
Статичное меню. Если настройки и дизайн позволяют это реализовать, закрепите панель на странице неподвижно относительно остального контента. Так навигация всегда будет перед глазами пользователя и избавит от необходимости возвращаться каждый раз наверх, чтобы перейти в другой раздел. Или как минимум используйте заметные значки, при нажатии на которые автоматом можно перейти на первый экран.

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

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

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

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

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

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

Создание графического меню в ВК

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

Итак, вот инструкция, которая поможет сделать красивое и функциональное графическое меню, способное украсить любое сообщество:

Открыть программу Photoshop и создать в ней новый файл.

Указать следующие размеры: ширина 610 пикселей, высота 450 пикселей, разрешение 100 пикселей на дюйм.
Нажать на кнопку «Создать».

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

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

Обратить внимание на соотношение сторон и их параллельность друг другу.
Придать кнопке желаемый вид при помощи всех доступных инструментов программы.

Зажимая клавишу ALT, клонировать кнопку по количеству пунктов меню. Расставить кнопки по своим местам.
Используя инструмент «Текст», кликнуть в любом месте изображения и набрать текст первой кнопки. Далее разместить его в нужной области.
Зажимая клавишу CTRL и нажимая кнопки выравнивания, которые располагаются в верхней панели инструментов, центрировать текст по картинке.
Аналогичным образом добавить текст для каждой кнопки.
На клавиатуре нажать клавишу С (или активировать инструмент «Раскройка»). Выделить каждую кнопку по ее границе.

Открыть раздел «Файл» в верхней панели и кликнуть «Сохранить для Web».
Выбрать формат файла «PNG-24». Нажать на кнопку «Сохранить».
Указать папку для сохранения файла.

На этом работа в программе Photoshop завершена. Осталось загрузить полученные файлы в сообщество ВК. Для этого:

Войти в раздел редактирования меню. Кликнуть значок «Добавить фотографию».
Загрузить все изображения, сформированные в фоторедакторе.

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

Вернуться в режим wiki-разметки.
После разрешения, написанного в коде, поставить «;», а также прописать значение «nopadding». Это исключит разрывы между изображениями.
Поставить прямую ссылку на страницу, куда будет попадать пользователь после клика по пункту меню.
Нажать кнопку «Сохранить».
Проверить работоспособность меню в режиме «Просмотр».

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

IT-специалист и продвинутый пользователь ВК. Зарегистрировался в соцсети в 2007 году.

Как сделать меню сайта

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

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

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

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

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

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

Текстовое

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

Откройте режим редактирования ранее созданного списка разделов.
Напишите в столбик нужные разделы. Например, «Главная»;, «Чат»; или «Правила»;. При этом каждый раздел должен быть заключен в квадратные скобки.

Перед каждым словом перед скобкой поставьте звездочку *.

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

В итоге каждый раздел должен выглядеть аналогично этому примеру: *[https://vk.com/glavnaya|Главная]. После этого нажмите на кнопку «Сохранить страницу»; чтобы она в группе в ВК отображалась на главной странице.

Графическое меню

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

ширина заставки должна быть не более 610 пикселей, а высота около 450 пикселей;
сохранять файл нужно для Web, если работа происходит в Фотошопе;
формат картинок рекомендуется определять, как PNG-24.

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

Откройте редактор и нажмите в панели инструментов на иконку в виде фотоаппарата, чтобы добавить картинку.
Загрузите изображения, которые вы создали в графическом редакторе.
После загрузки в окно редактора добавятся строчки с названием файлов и их разрешением.
Нажмите на иконку в виде скобок, чтобы перейти в режим визуального редактирования.
В каждой строчке после цифр, указывающих разрешение поставьте точку с запятой ; и допишите nopadding. Причем пробелов между символами не должно быть.
После слова nopadding поставьте разделительную черту | и вставьте ссылку на страницу группы.
Внизу щелкните по кнопку «Сохранить страницу»;.

После этого красивое меню появится в соответствующей вкладке. Удалить меню в группе Вконтакте можно, просто удалив все строки из редактора.