С каждым годом спрос на интерактивные меню растет, и все больше публичных владельцев хотят знать, как сделать меню в группе ВКонтакте. В этой статье мы более подробно рассмотрим процесс создания меню, а также поговорим о том, как этот инструмент влияет на конверсии.
Для каких целей можно использовать меню
- Может выступать в роли навигатора. Если вы управляете интернет-магазином ВКонтакте, этот инструмент можно считать необходимым. Это позволяет быстро направить пользователя к нужной информации или продукту, чтобы он как можно скорее превратился из посетителя в покупателя.
- Добавляет обращение к аудитории. Чем симпатичнее выглядит ваше сообщество, тем больше пользователей заинтересуется. Конечно, идея дизайна не должна ограничиваться только этим инструментом. Вам необходимо разработать последовательную концепцию аватара, обложки, баннера и закрепленного сообщения, чтобы ваше сообщество получило уникальный и запоминающийся вид.
- Действует как мотиватор. Красивое и эффективное меню может побудить заинтересованных пользователей щелкнуть по нему, чтобы просмотреть определенную информацию. Важно, чтобы меню было интерактивным и хорошо продуманным, чтобы привлечь внимание дополнительной аудитории и пробудить ее интерес, побуждая совершить какие-либо действия (например, сделать репост, оставить комментарий или даже совершить покупку).
Есть два типа меню: текстовое и графическое. Рассмотрим оба метода создания шапки ВКонтакте в следующих разделах.
Создаем текстовое меню
Существует специальная вики-разметка, которая предоставляет пользователям дополнительные возможности форматирования текста. Для некоторых пользователей социальной сети она стала незаменимым инструментом для создания привлекательных страниц с текстами, включая навигационные заголовки. Рассмотрим подробно, как создать текстовое меню в группе ВКонтакте:
Как сделать меню для группы Вконтакте? Вики-разметка VK.
- Прежде всего, вам нужно включить материалы, сделав их ограниченными, чтобы только вы имели доступ к редактированию. Для этого нужно зайти в свою группу, под аватаркой нажать на вкладку «Управление». Справа нужно выбрать пункт «Разделы» и присвоить функции «Материалы» значение «Ограничено».
- Сохраняем изменения и переходим на страницу вашего сообщества. Обратите внимание, что после выполнения предыдущего шага на главной странице появился блок «Свежие новости». Нажмите здесь.
- Нажмите на опцию «Редактировать».
- Вы увидите поле для вставки заголовка и поле для вставки основной части.
- Обратите внимание на правый угол поля ввода текста: там значок «<>». Щелкните по нему, чтобы включить «Режим разметки вики».
- Теперь в поле ввода текста пишем названия разделов, которые должны отображаться в шапке. Каждая строка должна быть заключена в квадратные скобки.
- Теперь перед каждым заголовком (после скобок) необходимо вставить вертикальную черту и перед ней ссылку, которая приведет пользователя на соответствующую страницу. Вставьте звездочку «*» перед открывающей скобкой.
- Щелкните «Предварительный просмотр». Если вас все устраивает, нажмите кнопку «Сохранить страницу».
Как сделать вики страницу и меню в паблике ВКонтакте
Теперь ваше сообщество было преобразовано с новым текстовым заголовком. Теперь, нажав на конкретное предложение, пользователь будет сразу перенаправлен в интересующий раздел. Есть одно большое «НО»: пользователи могут просто не заметить это меню, поэтому необходимо выполнить несколько дополнительных шагов:
- Скопируйте ссылку в только что созданный заголовок.
- Создайте сообщение на стене, вставив эту ссылку и сопроводительную фотографию.
- Опубликуйте сообщение и закрепите его.
Таким образом, вы сможете привлечь к меню все внимание пользователя. Стоит отметить, что текстовые меню редко используются опытными пользователями, которые предпочитают более продвинутый, интерактивный вариант, о котором мы поговорим позже.
Создаем графическое меню
Если в предыдущем разделе мы говорили о текстовом заголовке, который мы взяли за основу текста, то в этом меню основную роль будут играть изображения. То есть, кнопки будут не текстовыми со ссылкой, а изображениями в формате PNG. Поэтому для создания шапки такого типа необходимо иметь хоть какие-то навыки в области обработки фотографий в графических редакторах. Конечно, Photoshop, содержащий все необходимые инструменты, идеально подходит для создания графического заголовка
Для начала нужно создать изображения в виде кнопок, нажав на которые пользователь перейдет на нужную ему страницу. Для этого нам нужно выбрать фон, который можно скачать в Интернете, выбрать шрифт и произвести в графическом редакторе несложные манипуляции:
- Вставляем фон, накладываем текст.
- Разделите общее изображение на такое количество частей, которое планируется для создания кнопок.
- Обрежьте и сохраните каждое изображение отдельно в папке, чтобы облегчить поиск изображений в дальнейшем.
Теперь мы готовы создать графический заголовок. Сделать это не так сложно, как кажется на первый взгляд:
- Мы включаем материалы, как описано в предыдущем разделе. Откройте вкладку «Свежие новости».
- Выбираем пункт «Редактировать».
- Переместите курсор к значку «<>». Если появится текст «Режим визуального редактирования», оставьте его как есть, не щелкая этот значок. Кстати, на этом этапе нам не нужно переходить в «режим разметки wiki».
- Теперь вам нужно добавить изображения, созданные в Photoshop. На верхней панели для ввода текста выберите значок камеры. Найдите нужную папку и добавьте все изображения.
- После того, как изображения были загружены и отображены в поле ввода, щелкните каждое, чтобы установить их размер. Рекомендуется использовать ширину 610 пикселей, длина будет регулироваться автоматически.
- Каждый раз нажимайте «Сохранить». Коснитесь значка «<>» и перейдите в «Режим разметки вики».
- Будет отображен адрес фотографии и ее размер. После информации о размере вам нужно ввести значение «; nopadding» так, чтобы оно было в круглых скобках и закрывалось вертикальной полосой. Эта функция удаляет все промежутки между изображениями, чтобы изображение выглядело сплошным. По умолчанию будут отображаться пробелы.
- После вертикальной полосы нужно вставить ссылку на страницу, на которую пользователь перейдет, нажав ту или иную кнопку.
- Сохраните изменения и будьте довольны результатом.
Если у вас есть хорошее представление о том, как создать индивидуальный и эффектный дизайн, вы можете создать отличную концепцию дизайна для своего сообщества. Но что, если у вас нет даже минимальных навыков Photoshop? В этом случае нужно перейти к следующему разделу.
Шаблоны меню. Эффективность данного инструмента
Если у вас нет возможности профинансировать разработку вики-меню специалистами, но вы хотите установить привлекательную обложку с качественным дизайном, воспользуйтесь бесплатными шаблонами, которые вы можете найти среди огромного количества сервисов, которые предоставляют этот вид услуг.
Конечно, чтобы получить нестандартный дизайн, придется использовать платные шаблоны, но среди бесплатных заголовков есть и хорошие варианты: достаточно просто направить запрос в строке поиска и открыть соответствующий сайт. После загрузки шаблона вам необходимо будет установить его в соответствии с инструкциями, приведенными в предыдущем разделе.
Время, потраченное на разработку и установку меню, не пропадет даром: по статистике 90% пользователей, которые посещают группы в ВК, первыми заходят в меню или, по крайней мере, сначала обращают на него внимание. Эффективно спроектированный заголовок позволяет потенциальному клиенту сосредоточиться на интересующих вещах, направляя их и предлагая, где и что щелкнуть и посмотреть. С психологической точки зрения пользователь будет положительно настроен к вашей аудитории и будет двигаться по определенному пути, а это, в свою очередь, очень важно в маркетинге и управлении вашим онлайн-бизнесом.
Новое меню для группы ВКонтакте
С 2019 года в социальной сети ВКонтакте появилось новое интерактивное меню, не требующее дополнительных знаний — нужны только изображения и ссылки. Чтобы добавить новое меню в свое сообщество ВКонтакте, вам нужно выполнить несколько простых шагов:
- По умолчанию у вас уже установлена панель «Меню», которая находится под краткой информацией о вашей группе. Вам следует нажать на кнопку «Настроить».
- Щелкните «Новая ссылка».
- Загрузите фото, введите название ссылки и саму ссылку. Стоит отметить, что оставлять линк можно только на внутренние страницы ВКонтакте.
- Добавьте столько ссылок, сколько вам нужно. После этого зайдите на страницу своей группы и будьте довольны новыми изменениями.
Новое меню лучше старого? Это риторический вопрос, и каждый пользователь должен отвечать самостоятельно. Скорее всего, это будет напрямую зависеть от его навыков редактирования фотографий и желания создавать ссылки с помощью вики-разметки. По крайней мере, вам никто не запрещает добавлять одновременно 2 шапки.
Заключение
Благодаря современным технологиям и вики-разметке каждый может создать меню для своего сообщества и тем самым значительно повысить в нем конверсию. Эффективность, конечно же, напрямую будет зависеть от его навыков и умений работать в графических редакторах.
Источник: vkshka.ru
Как сделать меню для группы в контакте с помощью вики разметки
Самым эффективным и удобным способом оформления группы в контакте является использование wiki-разметки. Данная разметка схожа по принципу действия с html кодом, но является более простой и понятной.
Своим названием она обязана Википедии, благодаря которой многие пользователи и успели познакомиться с основными особенностями wiki-разметки.
Wiki-разметка позволяет легко и быстро оформить внешний вид группы, создавая графические таблицы и спойлеры, форматируя текст и работая с изображениями, ссылками и якорями. Вам больше не придется сутками изучать книги по html, ведь изучению wiki-разметки достаточно уделить не более часа своего времени.
Существует несколько способов, как сделать меню для группы в контакте при помощи wiki-разметки, и то, какой из этих способов выберите Вы – зависит от направленности и цели группы. Если это социально направленная группа, то лучше всего подойдет текстовое меню, т.к. оно выглядит куда более серьезно, чем графическое. Использовать изображения в своём меню лучше всего для групп развлекательного или коммерческого характера.
Работа с изображениями
Вставить картинку или фотографию в контакте при помощи wiki-разметки можно только в том случае, если это изображение есть в альбомах на сайте.
Итак, для вставки картинки заходим в альбом, копируем адрес фотографии, например photo11111_11111, и обрамляем его двойными квадратными скобочками таким образом:
[[photo11111_11111]]
Если Вам нужно прикрепить текст или ссылку к изображению, а также немного изменить его внешний вид, то разметка будет выглядеть таким образом:
[[photo11111_11111|options|text/link]], где на месте options может находиться одно из таких значений:
plain — ссылка на фотографию оформляется в виде текста, без картинки;
noborder — убирает рамку вокруг фото;
box — открывает изображение в окне;
nolink — убирает ссылку на фото;
nopadding — убирает пробелы между фото;
NNNpx или NNNxYYYpx — указывает размер фотографии в пикселях (только ширину или ширину на высоту соответственно).
Создание таблиц с помощью wiki-разметки
Не важно, графическое или текстовое меню Вы хотите создать для своей группы в контакте, без использования таблиц Вам вряд ли удастся обойтись. Таблицы в wiki-разметке создаются при помощи определенного набора символов, каждый из которых отвечает за определенную часть таблицы:
<| знак начала таблицы, является обязательным атрибутом любой таблицы;
|+ знак расположения названия таблицы по центру, ставится сразу после знака начала таблицы и не является обязательным атрибутом;
|- знак начала новой строки, в т.ч. и строки ячеек;
| знак, отвечающий за прозрачность ячейки;
! знак, отвечающий за темный цвет ячейки; если отсутствует – обязательно применение предыдущего знака;
|> знак конца таблицы, необязательный атрибут, используется для предотвращения возникновения ошибок.
Заполняя таблицу, данные каждой ячейки следует помещать после знака |, а разделяя ячейки, необходимо просто продублировать типы строки таким образом: || или .
Пример создания меню:
<|
|-
|»‘Новости»‘||»‘Основное»‘||»‘Все серии»‘
|-
![[photo708176_168310200|nolink;noborder;90x80px| ]]!![[photo-4489985_130746672|nolink;noborder;90x80px| ]]!![[photo708176_168309890|nolink;noborder;90x80px| ]]
|-
|[[Новости из жизни актеров сериала|Новости]]
[[Биографии]]
|Сезоны:
[[1 сезон|1]] | [[2 сезон|2]] | [[3 сезон|3]] | [[4 сезон|4]]
[[5 сезон|5]] | [[6 сезон|6]] | [[7 сезон|7]] | [[8 сезон|8]]
Как мы видим в примере, изображения наделены такими опциями, как nolink и noborder, которые убирают ссылку и рамку картинки. Также были изменены размеры изображений.
Вторая строка ячеек таблицы создавалась с атрибутом !, поэтому и имеет темный цвет заливки.
При переходе на новую строку внутри третей ячейки был использован тег, а для центрирования текста в ячейках – тег .
Оформление ссылок при помощи wiki-разметки
При оформлении коммерческих групп очень важно уметь преподнести пользователям ссылку на тот или иной товар. В wiki-разметке существует три способа оформления внешних ссылок:
Оформление ссылки как ссылки:
[http://www.kontaktlife.ru]
Оформление ссылки как текста:
[http://www.kontaktlife.ru|Всё о контакте]
Оформление ссылки как изображения:
[[photo40778045_189420249|40px|http://www.kontaktlife.ru]]
Как сделать графическое меню в группе?
Наверняка вы видели красивые графические меню и кнопки в группах и хотели бы сделать такое меню у себя? Вот алгоритм действий.
Для создания красивого меню нужно немного знать фотошоп и немного вики-разметку:
1. Нарезаем картинку в фотошопе и жмём «Сохранить для веб»
2. Загружаем картинки через Стандартный загрузчик т.к. флеш-загрузчик может ухудшить качество
3. Собираем меню тегом nopadding
4. Прописываем ссылки
По итогу получится что-то типа:
[[photo-177777777_18888888|noborder;370px;nopadding|club11111111]]
[[photo-177777777_18888888|noborder;370px;nopadding|Новости]]
[[photo-177777777_18888888|noborder;370px;nopadding|Программы]]
[[photo-177777777_18888888|noborder;370px;nopadding|http://vk.com]]
[[photo-177777777_18888888|noborder;370px;nopadding|Правила]]
[[photo-177777777_18888888|noborder;370px;nopadding|club11111111]]
[[photo-177777777_18888888|noborder;370px;nopadding|Магазин]]
[[photo-177777777_18888888|noborder;370px;nopadding|Полезное]]
[[photo-177777777_18888888|noborder;370px;nopadding|Админы]]
[[photo-177777777_18888888|noborder;370px;nopadding|F.A.Q.]]
Особенности и секреты wiki-разметки
Большинство особенностей wiki-разметки познаются только опытным путем и недоступны для начинающих wiki-программистов. Но для того, чтобы избежать ошибок при оформлении групп, всё-таки желательно заранее ознакомиться с некоторыми из них.
Следует быть осторожными, изменяя размер изображения – если он будет меньше 131 пикселя, качество картинки значительно ухудшится;
Максимальный размер ширины изображения – 610px;
На одной wiki-странице не может размещаться более 17 незакрытых тегов;
Указывая ширину изображения, его высота изменится автоматически в соответствии с пропорциями;
Список внутри таблицы или спойлера создается при помощи тега
;
Одна строка разметки может содержать в себе не более 8 элементов списка.
Источник: smm-blogs.ru
Игровые форумы
В этой статье поговорим о том, как установить меню вконтакте. В прошлых статьях я рассказывал Вам о том, как создать группу в вконтакте, и как правильно сделать меню в фотошопе, а теперь настало время его интеграции в нашу группу.
Но для того, чтобы нам начать процесс внедрения нашей менюшки в контакт для начала нужно разрезать ее на составные части. Для этого используем инструмент “Раскройка”.
Выбираем данный инструмент и начинаем «резать». У меня получилось 7 частей.
Далее заходим в “Файл” – “Сохранить под Web” – выбираем расширение jpeg и качество 100%, жмем “Сохранить”. У нас должно появиться 7 файлов. Все! С фотошопом покончено! Все необходимые работы по созданию меню выполнены.
Приступим к установке меню вконтакте. Для этого:
1) Заходим в свою созданную группу. Там находим “Альбомы” – “Добавить” (выделено красным прямоугольником на рисунке
Добавление фото в альбом группы вконтакте
2) Внимание! У кого не включены «Свежие новости», а по умолчанию они не включены, нужно выбрать «Управление сообществом», найти «Материалы» и включить их (Рисунок 2).
3. Наводим мышкой на “Свежие новости” и правее появляется ссылка “Редактировать”, нажимаем на неё (Рисунок 3).
4. Появляется окошко как на рисунке 4. Нас интересует кнопка «Режим wiki разметки» (выделено красным прямоугольником». Нажимаем на нее.
После этого в пустую область ниже вводим wiki — код, который и отобразит наше будущее меню. У меня он получился следующим (Рисунок 5):
Wiki — код нужно ввести точно так и в такой последовательности, как указано на рисунке 5. Дальше Вы уже можете сами поэкспериментировать.
Пример синтаксиса добавления картинки следующий:
[[photo-41875814_286789280|nopadding;370px|http://www.seowind.ru]], где
photo-41875814_286789280 – ID загруженной картинки, который можно посмотреть в адресной строке в браузере (рисунок 6).
Тег “nopadding” – убирает пробелы между картинками, то есть помогает «состыковать» их вплотную к друг другу.
370px – ширина картинки, смотрим это значение в свойствах файла.
http://www.seowind.ru – внешняя ссылка. То есть по нажатию по данной кнопке, пользователь перейдет из группы в контакте на данный сайт.
Для того, чтобы сделать картинку некликабельной я использовал тег nolink:
[[photo-41875814_286789289|nolink;nopadding;370px| ]].
Вот собственно и все! Мое первое меню создано! Вот так оно выглядит в группе (рисунок 7).
Теперь по нажатию по нужным кнопкам пользователи смогут переходить либо на страницы внутри группы либо на внешние ресурсы. Пока я поставил ссылки на свой блог. Потом возможно сделаю внутренние страницы в группе, что-то наподобие мини-сайта. Это работа не одного дня, но фундамент уже заложен.
Форум закрыт. Создание новых тем невозможно.
Источник: irongamers.ru