Меню группы в ВК - как сделать красивый дизайн

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

Подготовительные работы

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

Инструкция по активации разделов:

Перейти в список Групп. Затем переключится на вкладку «Управление» и выбрать сообщество, в котором у пользователя есть права администратора.

Под аватаркой группы нажать по ссылке «Управление».

В блоке справа кликнуть по строке «Разделы».
Напротив каждого раздела нажать по надписи «Выключены» и выбрать режим доступа: ограниченные или открытые. В первом случае добавлять материалы сможет только администратор или редактор, во втором – любой участник группы.

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

Создание текстового меню

Простое текстовое меню создается с помощью специального кода. Времени на это уйдет не более 5 минут. Последовательность действий:

На главной странице группы, сразу под названием, перейти на вкладку «Свежие новости».
Открыть режим редактирования wiki-страницы, нажатием на соответствующую кнопку.

В первой строке сменить название вкладки. В нашем случае это будет «Меню».
Используя значок <> в правой части панели инструментов, переключиться на режим wiki-разметки.

В нижнее поле вставить код: *[http://vk.com/|Пункт меню].
Повторить вставку с новой строки в количестве разделов будущего меню.
Заменить ссылки и текст в соответствии со своими разделами и их названиями. Для перехода в визуальный режим редактирования следует повторно нажать значок <>.
Кликнуть по кнопке «Сохранить страницу».

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

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

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

Как сделать дизайн графического меню:

Через поисковую систему отыскать изображение, которое послужит фоном для текста. Его размеры не должны быть меньше, чем 610х450 px.
Запустить PhotoShop.
Открыть меню «Файл» и кликнуть по строке «Создать».

Указать размеры холста (610х450 px) и разрешение (100px). Остальные параметры оставить прежними. Кликнуть «Создать».

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

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

В списке отображения слоев, выбрать слой с прямоугольником. Нажать ПКМ и кликнуть по строке «Параметры наложения». Затем изменить внешний вид слоя, используя представленные в открывшемся списке инструменты.

Когда все прямоугольники настроены, следует активировать инструмент «Текст». После включения потребуется отчертить область текста и вписать туда название пункта меню. Операция повторяется для остальных строк. Размер текста и его стиль выбирается исходя из личных предпочтений. Главное – чтобы надпись помещалась в отмеченное место.

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

Теперь осталось сохранить элементы будущего меню. Для этого: открыть «Файл» и выбрать «Сохранить для web».

Указать место на диске компьютера.

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

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

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

Отредактировать код следующим образом:
- Установить ширину картинки 600px.
- После размеров изображения добавить «;» и вставить параметр «nopadding|». Благодаря нему будут удалены разрывы между картинками, что создать видимость цельного изображения.
- После вертикальной черточки «|» вставить ссылки на разделы группы.
Сохранить созданные изменения. Также перед переходом на другую страницу рекомендуется сохранить код в текстовый документ на компьютере. Это позволит восстановить меню при возможном сбое сохранения.

Справка. Непосредственно на панели инструментов находится значок «i», который открывает инструкцию по разметке wiki-страницы. Там можно найти пояснения по созданию различных эффектов текста и списков, вставке цитат и т.д.

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