Как сделать меню в группе ВК. Что это такое и зачем оно нужно

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

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

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

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

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

Строительная тематика

Что важно:

– показывать варианты квартир и домов, их преимущества;

– вызывать доверие к застройщику, компании.

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

При клике на иконку «Подобрать квартиру» попадаем на конструктор квизов Marquiz.

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

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

Ещё один пример оформления меню у строительной :

Кликаем на «Отзывы» и попадаем в раздел «Видео». Это отличный способ вызвать доверие к компании, так как мы можем не почитать, а посмотреть отзывы клиентов.

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

А для удобной навигации по группе компания использует хештеги. Нажимаем на «Портфолио» и попадаем на страницу со всеми постами этой категории.

Интересное оформление у строительного .

Захотели почитать полезные статьи о ремонте – пожалуйста.

А тест не хотите ли?

Что сказать, ребята постарались.

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

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

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

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

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

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

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

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

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

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

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

Вот так: [[photo37602118_351733570|400x90px;noborder| ссылка]]

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

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

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

[[photo37602118_351733570|options|text/link]]

.

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

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

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

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

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

  • {|
    символ начала таблицы, без него таблицы быть не может. Используется всегда;
  • |+
    отвечает за расположение названия таблицы по центру. Ставят после символов начала таблицы. Используется по желанию;
  • |
    обозначает начало новой строки и ячейки;
  • |
    символ, делающий ячейку прозрачной;
  • !
    делает ячейку темным цветом. При его отсутствии обязательно нужно применять предыдущий знак;
  • |}
    означает конец таблицы. Необязательный символ, однако, используется, чтоб предотвратить возникновение ошибки.

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

Особенности разметки

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

С целью избегания основных ошибок следует ознакомиться с основными из них:

  1. необходимо быть внимательными, при изменении размера картинки – если она менее 131 пикселя, ее качество значительно ухудшится;
  2. ширина картинки не должна превышать 610px;
  3. на одной wiki-странице запрещено размещать больше 17 незакрытых тегов;
  4. при изменении ширины картинки, ее высота изменяется автоматически и пропорционально;
  5. список внутри таблицы следует создавать с помощью тега ;
  6. в одной строке разметки должно быть не больше 8 элементов списка.

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

Важно! Проверяйте закрытие всех тегов. Сохраняйте последовательность.

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

Общепит (кафе, рестораны)

Что важно:

– показывать атмосферу заведения;

– рассказывать о меню;

– анонсировать акции и скидки;

– делиться настроением и отзывами посетителей.

Сеть ресторанов и кафе SUN Project предлагает не только широкий ассортимент напитков и блюд, но и шоу-программы.

Меню яркое, «солнечное». Сочетает в себе сразу два формата: меню старое и новое.

Кликаем на «Меню», выбираем ресторан:

И вот перед нами вся необходимая информация:

А ещё SUN Project мотивирует оставить отзыв в форме «Анкеты»:

Сеть городских кафе под названием «Самурай» сразу привлекает внимание своим ярким красным цветом:

Меню «Самурай» расположил в альбоме:

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

Кликаем на «Винную карту» и в браузере открывается pdf-файл. Не уверены, что это удобно с телефона, но с компьютера более чем.

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

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

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

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

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

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

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

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

  • установите и запустите программу «Фотошоп»;
  • в пункте «Файл» выберете «Создать»;
  • в появившемся окне задайте:
  1. ширину – 630 пикс;
  2. высоту – 725 пикс;
  3. содержимое фона – белый.

Далее нужно разделить рабочую область на 2 окна. Они то и будут привлекать внимание посетителей и обязательно заставят передвигаться по группе.

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

  • кликните на значок правой кнопкой мышки;

  • выберите инструмент «Прямоугольник»;
  • используя вертикальную и горизонтальную линейки как ориентир, выделите прямоугольник размером 200х710 пикс, зажав левую кнопку мыши;
  • Внимание! Убедитесь, что линейка измеряет в пикселях, а не в других единицах.

  • после, нажмите кнопку Delete;

  • в появившемся окне установите использование 50% серого;
  • нажмите ОК;
  • аналогично создайте прямоугольник размером 382х442 пикс, как на рисунке:

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

  1. под этим слоем расположите свое оформление:

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

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

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

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

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

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

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

  • возьмите инструмент Slice Tool;

  • вверху есть кнопка «Фрагменты по направляющим»;

  • должно получиться вот так:

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

  1. нажмите Файл – Сохранить для web;

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

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

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

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

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

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

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

  1. зайдите в группу;
  2. включите новостную ленту;

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

  5. через кнопку в виде фотоаппарата добавьте картинки;

  6. результат будет приблизительно таким:

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

Перейдя по ссылке, посетитель быстро попадет на необходимую информацию.

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

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

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

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

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

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

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

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

Салоны красоты, парикмахерские

Что важно:

– продемонстрировать спектр услуг;

– показать качество сервиса;

– дать возможность записаться онлайн;

– показать атмосферу салона.

Меню салона красоты «Версайс» выглядит просто и аккуратно.

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

Мужская парикмахерская Cutlers использует для меню живые фото с затемнением.

Запись к мастеру осуществляется через приложение YCLIENTS:

Сеть парикмахерских «Стрижка за Стрижкой» использует иконки на ярком оранжевом фоне с градиентом.

Иконка «Примеры работ» ведет на альбомы сообщества, где все услуги собраны по категориям:

Мужская парикмахерская «УСЫ» сделала крупные надписи с изображениями:

Свою аудиторию они собирают с помощью сервиса рассылок Senler:

Автосервисы, автомойки

Что важно:

– показать спектр услуг;

– убедить клиента в качестве сервиса.

Автосервис «СПБГАРАЖ» тоже использует иконки:

Интересная «фишка»: при клике на «Задать вопрос» мы сразу попадаем в диалог:

Автотех выбирает приглушенный красный цвет с крупными иконками:

«Фишка»: в меню есть «Поисковик запчастей» (так называется и само приложение):

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

Автомагазин «МаслоМаркет» сделал иконки тематическими:

Записаться на СTO можно через приложение YCLIENTS:

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

Студии творчества

Что важно:

– показать разнообразие занятий;

– снять возражения («не получится», «у меня нет опыта» и т.д.);

– продемонстрировать атмосферу в студии.

Гончарная студия №1 из Санкт-Петербурга использует для обложек меню одинаковую подложку, сверху – помещает иконки.

При клике на «Мастер-классы» мы попадаем в товары:

Студия «Колибри» использует только живые фото:

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

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

Для этого использует специальный сервис для детских :

Услуги по оформлению, дизайну, декору

Что важно:

– показать красоту, эстетичность, вкус, необычный взгляд на вещи;

– продемонстрировать ассортимент;

– сделать заказ онлайн удобным.

Компания Ga-den изготавливает интерьерные карты мира и стран. Отсюда такое меню:

При клике на иконку «О нас» открывается лонгрид (статья Вконтакте), где компания представляет свою команду:

DECORANTOS занимается оформлением свадеб. Меню выполнено в нежных пастельных тонах:

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

PR-реклама – клиент нашего агентства. Занимается размещением наружной рекламы в Иваново.

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

При клике на категорию читатель сможет прочитать ее последние новости:

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

Заказать оформление у специалиста

Для чего делать меню в группе ВКонтакте? Будь то продающая страница или информационный паблик, через какое-то время найти нужный пост в нем становится практически невозможно. Особенно если вы следуете советам по продвижению и делаете 2-3 публикации в день. Чтобы пользователям было удобнее находить интересующие сведения и существует меню. Его наличие существенно повышает эффективность группы, количество просмотров и, как следствие, продажи.

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

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

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

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

Сообщества маркетинговой тематики, интернет-агентства

Что важно:

– показать, что вы круто упакованы, и готовы предложить свои ;

– продемонстрировать свою экспертность (с помощью кейсов, полезных статей).

Сервис анализа и автоматизации поиска целевой аудитории для таргетированной рекламы ВКонтакте TargetHunter использует благородный темно-синий цвет:

Раздел «Поддержка» ведет на другое сообщество, где пользователи могут задать вопросы по теме и получить обратную связь. Таким образом, сервис собирает свою ЦА.

Совсем недавно иконки появились и у Spark, которые ведут на их Instagram и Telegram.

В своей группе Вконтакте мы делимся полезными материалами для застройщиков, интернет-магазинов, компаний в сфере B2B, собственников, которые предоставляют услуги для населения.

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

При клике на нужный раздел вы попадаете в лонгрид (статью Вконтакте), где можете посмотреть различные

Ограничиваем материалы сообщества

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

  • Информационные группы хранят в себе тонны информации на определенную тематику. В таких группах очень важен сам контент, ведь именно благодаря различным интересным фактам, познавательным статьям, человеку не захочется покидать такое сообщество.
  • Развлекательные группы аналогичны информационным, разница лишь в контенте. Если вы планируете создавать группы таких видов, то стоит создавать меню, которое будет отображать главные темы (самое главное, последние публикации и др.). Подробнее о создании развлекательного контента читайте в нашем блоге.
  • Если у страницы цель – продавать, то нужно создать условия для удобного поиска товаров покупателям. Лучше всего поместить в продающее меню разделы, которые будут направлять посетителя в каталог (контакты, компания, доставка). Необходимо сделать страницу контактов, хорошо проработать систему с отзывами и настроить бота, который будет отвечать на вопросы клиентов.

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

Рейтинг
( 2 оценки, среднее 4 из 5 )
Понравилась статья? Поделиться с друзьями:
Для любых предложений по сайту: [email protected]