Цель создателя группы в соц. сети привлечь больше посетителей. Важно чтоб гость захотел вступить, подписать, почитать информацию, оставить комментарий или заказать товар. Потребность в конечном результате отличается от направления деятельности.
Первые секунды пребывания формируют дальнейшие действия гостя. Именно поэтому интерфейс играет большую роль.
Факторы оставляющие гостя:
- аватарка;
- описание;
- название;
- красивое и практичное меню;
- красочность;
- контент.
Создать практичное меню, побуждающее не только к действию легко. Но для начала следует разобраться, каким оно должно быть.
Строительная тематика
Что важно:
– показывать варианты квартир и домов, их преимущества;
– вызывать доверие к застройщику, компании.
Вот пример оформления меню строительной . С помощью него можно посмотреть не только варианты квартир, но и отдельные ЖК.
При клике на иконку «Подобрать квартиру» попадаем на конструктор квизов Marquiz.
Вы собираете базу клиентов, а посетители вашей группы радуются удобству выбора.
Окошко «Выбрать квартиру» ведет на оформленные товары группы, где сразу можно посмотреть планировки.
Ещё один пример оформления меню у строительной :
Кликаем на «Отзывы» и попадаем в раздел «Видео». Это отличный способ вызвать доверие к компании, так как мы можем не почитать, а посмотреть отзывы клиентов.
Компания по изготовлению металлоконструкций (заборов, ворот, лестниц) тоже выбрала конструктор квизов Marquiz, чтобы рассчитать стоимость конструкции.
А для удобной навигации по группе компания использует хештеги. Нажимаем на «Портфолио» и попадаем на страницу со всеми постами этой категории.
Интересное оформление у строительного .
Захотели почитать полезные статьи о ремонте – пожалуйста.
А тест не хотите ли?
Что сказать, ребята постарались.
Как создать меню в группе Вконтакте вики разметка
Вики-разметка – это специальный язык, используемый для оформления веб-страничек в группах социальной сети.
Данный инструмент позволяет создавать:
- эффекты;
- необычные меню;
- таблички;
- элементы навигации;
- форматировать текст.
Словом, данная разметка позволяет создать мини сайт ВКонтакте. Это очень удобно, особенно для продаж и набора подписчиков.
Такое оформление интуитивно заставляет посетителя остаться, кликнуть по кнопке. То есть задерживает и стимулирует к действию – а это как раз то, что и нужно.
Визуально такая система очень схожа с HTML-версткой. Но она не требует длительного обучения и специального склада ума.
Видео: меню с поиском по рубрикам
Нюансы создания
Собственно, то, что было сделано выше (разделение и загрузка картинки) это уже элементы разметки. В этом и преимущество данного инструмента. Автоматическое превращение в теги, при простой загрузке картинок.
Тем не менее, важно знать отдельные теги, помогающие сделать еще больше функций и красоты. Например, при нашей заливке отдельных частей изображения между ними могут образовываться белые полосы. Убрать их можно, просто добавив тег noborder.
Вот так: [[photo37602118_351733570|400x90px;noborder| ссылка]]
Основные теги представлены в таблице ниже:
Работа с картинками
Для того чтоб прикрепить ссылку или текст к изображению, с возможностью слегка видоизменить его, следует ввести код следующего вида:
[[photo37602118_351733570|options|text/link]]
.
Где options заменяется на:
- noborder
— снятие рамки вокруг изображения; - nopadding
— снятие пробелов между изображением; - plain
— вставка ссылки на картинку. Оформляется в виде текста, без графики; - nolink
— снятие ссылки на картинку; - box
— открытие изображения в окне; - NNNxYYYpx или NNNpx — задает размер фото в пикселях.
Создание таблицы
Независимо от того, какое меню (текстовое или графическое) вы создаете, без вставки таблицы вы вряд ли обойдетесь. Иначе можно просто вставить текст в поле новости и не форматировать его, затратив так много времени.
Таблицу создают, используя специальный набор символов, где каждый из них отвечает за определенную часть таблицы:
- {|
символ начала таблицы, без него таблицы быть не может. Используется всегда; - |+
отвечает за расположение названия таблицы по центру. Ставят после символов начала таблицы. Используется по желанию; - |
обозначает начало новой строки и ячейки; - |
символ, делающий ячейку прозрачной; - !
делает ячейку темным цветом. При его отсутствии обязательно нужно применять предыдущий знак; - |}
означает конец таблицы. Необязательный символ, однако, используется, чтоб предотвратить возникновение ошибки.
При заполнении таблицы, содержание каждой ячейки необходимо ставить после знака |, а при разделении ячеек, нужно продублировать типы строки вот так: || или !!.
Особенности разметки
Существует много неписанных правил, это и доставляет много хлопот начинающим программистам. Как правило, все познается в практике. Каждый находит для себя свои лазейки, каждый сталкивается со своими трудностями.
С целью избегания основных ошибок следует ознакомиться с основными из них:
- необходимо быть внимательными, при изменении размера картинки – если она менее 131 пикселя, ее качество значительно ухудшится;
- ширина картинки не должна превышать 610px;
- на одной wiki-странице запрещено размещать больше 17 незакрытых тегов;
- при изменении ширины картинки, ее высота изменяется автоматически и пропорционально;
- список внутри таблицы следует создавать с помощью тега ;
- в одной строке разметки должно быть не больше 8 элементов списка.
Для создания красивой и функциональной навигации необходимо знать основы фотошопа и вики-разметки. Однако последняя содержит свои нюансы, столкнувшись с которыми новичок, может надолго застрять и запутаться.
Важно! Проверяйте закрытие всех тегов. Сохраняйте последовательность.
Основной помощник в данном деле это внимательность и четкое следование инструкции. В помощь всегда может прийти официальная страница вк, которая так и называется вики-разметка.
Общепит (кафе, рестораны)
Что важно:
– показывать атмосферу заведения;
– рассказывать о меню;
– анонсировать акции и скидки;
– делиться настроением и отзывами посетителей.
Сеть ресторанов и кафе SUN Project предлагает не только широкий ассортимент напитков и блюд, но и шоу-программы.
Меню яркое, «солнечное». Сочетает в себе сразу два формата: меню старое и новое.
Кликаем на «Меню», выбираем ресторан:
И вот перед нами вся необходимая информация:
А ещё SUN Project мотивирует оставить отзыв в форме «Анкеты»:
Сеть городских кафе под названием «Самурай» сразу привлекает внимание своим ярким красным цветом:
Меню «Самурай» расположил в альбоме:
Кафе «Розмарин» выбрал другой подход. Он решили отказаться от обложек с иконками. Ставку сделали на живые сочные фото.
Кликаем на «Винную карту» и в браузере открывается pdf-файл. Не уверены, что это удобно с телефона, но с компьютера более чем.
Создаем по этапам
Создание навигации – процесс интересный, сложный и длительный. Но результат того стоит.
Весь процесс условно делиться на 2 этапа:
- работа с фотошопом;
- техническое добавление.
видео: меню для паблика
Работаем с фотошопом
Прежде чем приступить, необходимо визуально представить дизайн или общий вид, а также его составляющие. Специальных знаний не требуется, достаточно просто выполнять шаги инструкции.
Алгоритм действий:
- установите и запустите программу «Фотошоп»;
- в пункте «Файл» выберете «Создать»;
- в появившемся окне задайте:
- ширину – 630 пикс;
- высоту – 725 пикс;
- содержимое фона – белый.
Далее нужно разделить рабочую область на 2 окна. Они то и будут привлекать внимание посетителей и обязательно заставят передвигаться по группе.
Делается это с помощью инструмента «Прямоугольная область»:
- кликните на значок правой кнопкой мышки;
- выберите инструмент «Прямоугольник»;
- используя вертикальную и горизонтальную линейки как ориентир, выделите прямоугольник размером 200х710 пикс, зажав левую кнопку мыши;
Внимание! Убедитесь, что линейка измеряет в пикселях, а не в других единицах.
- после, нажмите кнопку Delete;
- в появившемся окне установите использование 50% серого;
- нажмите ОК;
- аналогично создайте прямоугольник размером 382х442 пикс, как на рисунке:
Работа с графикой:
- под этим слоем расположите свое оформление:
- далее напишите желаемый текст;
- с помощью инструментов рисования фигур, нарисуйте кнопки:
Приблизительно должно получиться вот так:
Сохраните прямоугольник, расположенный справа отдельной картинкой, задав размер 200х500 пикс. Это готовая аватарка, загружается через кнопку «Загрузить фотографию» в группе вк.
Вторую картинку нужно еще разделить по количеству пунктов. Это делается для того, чтоб каждой кнопке присвоить ссылку.
Для начала следует сделать разметку:
- комбинацией клавиш «CTR+R» включите линейку;
- наведите курсор на верхнюю линейку;
- зажав левую кнопку мыши, потяните вниз, к нижней границе кнопки;
- повторите по каждой кнопке.
Создаем фрагменты:
- возьмите инструмент Slice Tool;
- вверху есть кнопка «Фрагменты по направляющим»;
- должно получиться вот так:
Сохранение изображений:
- нажмите Файл – Сохранить для web;
- введите название;
- укажите формат JPEG;
- ставьте наилучшее качество;
- отметьте галочки у «Прогрессивный и Встроенный профиль»;
- последняя кнопка «Сохранить».
Как очистить компьютер от ненужных программ? Инструкция тут.
Далее приступайте к технической части. Необходимо загрузить созданные шедевры в группу.
Техническая часть
Готовые изображения необходимо перенести в группу. Выполняя указанные ниже шаги с этой задачей можно легко справиться.
Важно! Заливка меню отличается от обычно загрузки фото или картинок.
Все по порядку:
- зайдите в группу;
- включите новостную ленту;
- возле полосы «Свежие новости» нажмите «Редактировать»;
- поменяйте название на меню или что-то подобное;
- через кнопку в виде фотоаппарата добавьте картинки;
- результат будет приблизительно таким:
Теперь самое важное, собственно для чего все это и делалось. Добавить функциональности меню. Отдельной картинке необходимо присвоить «свою» ссылку.
Перейдя по ссылке, посетитель быстро попадет на необходимую информацию.
Если вы хотите вставить ссылку на запись со стены:
- найдите необходимую запись;
- кликните по ней левой кнопкой мыши;
- скопируйте 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-разметка. Аватар сделать несложно, достаточно немного повозиться с размерами и фильтрами, а остальное дело вкуса, ведь каждый человек визуализирует свой бизнес по-разному. Помните: ваша группа – ваше выражение мыслей, поэтому попытайтесь делать все сами или доверять проверенным специалистам. Как правильно оформить другие аспекты группы ВКонтакте и повысить конверсию читайте в нашем блоге.
