Графическое меню в группе вконтакте. Чтобы клиент не заблудился: создаем меню группы ВК

Чтобы создать меню в группе Вконтакте, вам необходимо иметь у себя какой-нибудь графический редактор. Наиболее распространенный это adobe photoshop. С его помощью возможно сделать меню для группы Вконтакте.

В интернете есть множество шаблонов и заготовок, можете воспользоваться ими, если не можете создать сами.

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

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

Запускаем фотошоп, создаем новый документ (файл - создать или ctrl+N). Выставляем параметры создаваемого файла. Максимальная ширина 370 пикс., я сделал 200 пикс., высоту 250 пикс. Можно делать его намного меньше и компактней. Добавляем в созданный файл картинку, которая будет фоном. Теперь создаем текст. Пример у меня самый простой, вы сможете сделать намного красивее, компактнее.

Я создал такое меню. Выбрал инструмент Раскройка и вырезал им на картинке три части, обозначены цифрами 1,2,3 - будут кнопками. После того, как вы вырезали, сохраняем созданное меню. Нажимаем Файл — сохранить для web и устройств.

В появившемся окне ничего не меняем, нажимаем сохранить. Выбрать место сохранения и нажать сохранить.

Все, в фотошопе работу закончили.

Добавление меню в контакт

Теперь созданные изображения, после сохранения будут в папке images. Загружаем их в контакт с помощью стандартного загрузчика фотографий. Можно загрузить эти файлы в фотоальбом группы. Простыми словами – добавляется как обычная фотография, которые вы загружали в контакт. Теперь смотрите, чтобы у вас в настройках группы было включено следующее. Заходите в свою группу, нажимаете управление сообществом (находится под главной фотографией группы, с правой стороны). Затем внизу находим пункт материалы, там должно стоять подключены. После того, когда выбрали подключены, нажимаем сохранить. Если не нажмете сохранить, изменения не вступят в силу.

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

В появившемся окне вам необходимо указать код []. Можете его прямо из статьи скопировать и вставить себе. Теперь вам только останется изменить на свои данные.

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

Nopadding – эта команда убирает пробелы между картинками.

100px – ширина меню (если это отдельная кнопка, значит, такой будет ширина кнопки).

club40781312 — ссылка в тот раздел, куда будет переходить человек, нажав на эту кнопку (картинку). Также находится в адресной строке браузера, в тот момент, когда вы том разделе, куда должен будет попадать человек при нажатии на кнопку. Вам необходима только последняя часть кода, которая идет после последней наклонной линии / (называется еще слэш). У меня в данном случае, при нажатии кнопки (картинки) в моей группе будет происходить переход на главную страницу группы. Вы ставите свой код, который будет в вашем разделе.

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

Если вы не получили ответ на вопрос как сделать меню группы

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

• Видео по созданию меню группы

Привет, мои дорогие!

Сегодня я подробно расскажу, как сделать меню для группы вконтакте . По моему опыту меню в группе в контакте увеличивает количество звонков и заявок на 20%. Важно ответственно подойти к вопросу создания меню группы. Поэтому я подготовил для вас шаблон PSD меню, чтобы облегчить вам работу.

Начну с того, что на сегодняшний день существует два варианта меню:

Вариант 1: Закрытое меню группы

Закрытое меню, открывается при нажатии на ссылку. В примере ниже меню открывается при нажатии на ссылку «ОТКРОЙТЕ МЕНЮ ГРУППЫ!».



Вариант 2: Открытое меню группы (закрепленный пост)

Открытое меню, по сути это закрепленный пост с активной ссылкой.



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

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

Как сделать открытое меню вконтакте

Процесс создания меню будем разбирать на примере Варианта 2, т.е. открытое меню.

Чтобы вам было проще ориентироваться, я подготовил для вас PSD шаблон меню : [Внимание. Дизайн ВКонтакте изменился. Новый макет и другая актуальная информация в ]

Шаблон меню группы PSD

Для создания внешнего меню требуется 2 картинки: аватар (справа) и центральная (картинка-действие).

Размеры аватара: 200 x 332 px

Размеры центральной картинки: 395 x 282 px



Шаг 1.

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

Шаг 2.

Зайдите в вашей группе в «Управление сообществом» (справа под аватаром). Найдите пункт «Материалы» (на вкладке «Информация») и сделайте их «Ограниченные».



Шаг 3.

Теперь вернитесь на главную страницу своей группы и нажмите «Редактировать» в появившемся блоке «Материалы» (Я уже переименовал в Меню группы).



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



Шаг 4.



В моем примере https://vk.com/page-42211349_47355854,

Первые цифры 42211349 - это id вашей группы

Вторые цифры 47355854 – это id страницы

Фишка: создавать дополнительные страницы можно вручную. Для этого перейдите по ссылке вида:
https://vk.com/pages?oid=-хххххххх&p=pagename
где,
хххххххх – это id вашей группы
pagename – название вашей страницы

Шаг 5.



И опубликуйте запись.

Шаг 6.

Теперь загрузите аватар группы (картинка справа). На стене появится дубликат картинки аватара – удалите его.

Шаг 7.

Теперь внимание. Нажимаем на ВРЕМЯ ПУБЛИКАЦИИ ЗАПИСИ (левый нижний угол поста).



И нажимаем «Закрепить». Закрываем это окно и обновляем страницу вашей группы (F5).



Шаг 8.

Пишем статус группы (используйте только 1 строчку), чтобы выровнять картинки, если рисунок на аватарке у вас начинается не с самого верха (в моем шаблоне аватарка вариант 2). И вот что у нас получилось:



ИТОГ.

Меню готово! Теперь при нажатии на центральную картинку открывается ваше меню:



Здесь его можно редактировать, размешать фото, видео, создавать новые разделы, размещать ссылки.

Внутри основного меню тоже можно сделать графическое меню (подменю). Его ширина не должна превышать 600 px. В высоту размер неограничен. Что позволяет создавать отличные лендинги вконтакте.



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

Свои вопросы или мнения пишите в комментариях ниже.

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

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

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

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

• Не забывайте, что в группе и сообществе отображение меню будет происходить немного по-разному. Поэтому, если вы хотите перевести группу в сообщество, кликните по иконке трёх точек рядом с названием группы и выберете строку “Перевести в страницу”. Учтите, что обратно превратить сообщество в группу не получится.

• Теперь зайдите по ссылке “Управление сообществом” в том же меню.
  Вы увидите блок со всеми настройками вашей группы, здесь можно изменять имя, контактную информацию, приватность, управлять участниками. Перейдите в категорию “Разделы”.

• В строке “Материалы” поставьте значение “Выключены” или “Ограничены”, чтобы участники группы не смогли нечаянно навредить вашим файлам, которые нужны для оформления. Не забудьте сохранить свой выбор.

• Зайдите в группу и перейдите в окно “Свежие новости”, именно из него вы и будете создавать меню.

• Кликните “Редактировать”.

• Прежде всего, вам нужно изменить название “Свежие новости” на “Меню” либо любое другое, которое ясно даст понять участникам, что здесь они могут быстро перейти по нужным ссылкам.
  Переключите режим редактирования записи в “редактирование Wiki разметки” по небольшой стрелочке в правом углу.

Теперь создайте структуру:

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

На данном скриншоте, можно предположить, что в группе есть материал с названием “Раздел 1”, обсуждение “Раздел 2” и альбом “Раздел 3”. Нажмите “Предпросмотр” либо “Сохранить изменения”.

• Ваш раздел сменится на “Меню”, а в нем появятся активные ссылки на основные категории группы, аккуратно оформленные в список.

Как вставлять ссылки в меню группы Вконтакте

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

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

• Вот так выглядят все ссылки, которые вы можете вставить в меню своей группы.

Как создать меню Вконтакте с изображениями

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

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

• Загружайте изображения в формате jpeg не более 500 пикселей на 500.

• Скопируйте адрес загруженного изображения.

• Теперь скопируйте ссылку на обсуждение, материал или другой внешний сайт.

• [[Ссылка на изображение в вашем альбоме | размер в пикселях; nopadding | Ссылка на обсуждение или сайт]]

Пример показан на скриншоте.
Нажмите “Сохранить страницу”.

• Теперь аккуратная ссылка появится в вашем меню. Вы можете ставить значение пикселей такое, какое посчитаете нужным.
  Чтобы добавить несколько изображений, просто впишите новые ссылки с новой строки.

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

Разновидности меню для сообщества "ВКонтакте"

Сейчас существует два типа меню группы "ВКонтакте". Шаблоны их, конечно, есть на просторах Интернета, и можно делать все строго по ним. Однако результат не будет креативным и оригинальным, а значит, не будет привлекать большое количество подписчиков.

Итак, есть закрытое меню и открытое.

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

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

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

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

Этап первый

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

Первая картинка представляет из себя аватар. Вторая (центральная) - изображение-действие. Параметры аватара должны быть не менее 200 х 330 пикселей. Центральное изображение - не менее 390 х 280 пикселей.

Этап второй

Откройте страницу группы и найдите «Управление сообществом». Ссылка располагается под лицевой фотографией страницы справа. Пройдя по ссылке, отыщите раздел «Материалы» в информации, а затем нажмите «Ограниченные» в этом пункте.

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

Этап третий

Копируйте адрес страницы. Первый ряд чисел после слова “page” - это номер сообщества, второй - номер страницы группы. Это нужно обязательно знать, задумываясь, как создать меню в группе "ВКонтакте". Адрес необходимо вставить на стене вместе с центральным изображением. Чтобы прикрепить картинку, нажмите «прикрепить» и «фотографию». Далее выбирайте и вставляйте. После нажмите отправить - это опубликует пост.

Этап четвертый

Поставьте первую картинку на место основной фотографии сообщества. Запись об этом действии вместе с картинкой появится на стене. Она там ни к чему, поэтому ее нужно удалить.

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

Как создать таблицу в меню?

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

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

• {| означает начало;
• |+ расположение по центру;
• |- с новой строки;
• | прозрачность;
• ! темня заливка ячейки;
• |} обозначает конец.

Как оформить ссылки?

В вопросе о том, как сделать меню в группе "ВКонтакте", есть важный момент, касающийся ссылок. Оформить их можно по-разному:

• Оставить просто ссылкой. Для этого возьмите ссылку в квадратные скобки .
• Сделать ссылку словом или фразой. Откройте вставьте ссылку, после ссылки поставьте знак | и закройте квадратную скобку.
• Изображение-ссылка. Сделать это можно по такому примеру: [].

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

• Размер картинки не должен быть менее 130 пикселей. Это значительно ухудшит внешний вид меню.
• Ширина картинки - не более 610 пикселей.
• Вики-страница не способна содержать в себе больше 17 незакрытых тегов.
• Когда вы ставите показатель ширины, то высота автоматически изменяется согласно пропорциям.
• Внутри таблицы можно создать список, используя />.
• В одной строке можно разместить максимум 8 единиц списка.

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

К примеру, приложение «Интерактивный FAQ (beta)» позволяет проверить свои способности в вики-программировании.

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

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

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

Социальные сети давно вошли в жизнь большинства людей и являются важной составляющей в ней. Многие люди даже умудряются создавать свои виртуальные бизнесы в них: накрутка лайков, подписчиков, продажа товаров как из других стран, так и авторских. Почти все они имеют группу. А как пользователям донести быстрее всего, чем занимается человек или даже целая организация? Создать специальное меню, в котором будет содержаться самая необходимая информация. И именно здесь нам понадобится Wiki-разметка. Как сделать меню группы ВК? Что добавить в неё? В статье будут рассмотрены правила создания и примеры.

Чем является Wiki-разметка?

Как сделать меню группы ВК? Вики-разметка — вот хороший помощник! Это очень эффективный и удобный способ оформления группы в социальной сети «ВКонтакте». Эта разметка по принципу своего действия очень напоминает html код. Но для людей, не связанных с программированием, она будет более понятной благодаря простоте реализации. Своё название вики-разметка получила благодаря «Википедии», где многие пользователи впервые смогли ознакомиться с основными особенностями её функционирования. Вики-разметка позволяет людям без знаний в программировании быстро и легко оформлять внешний вид группы:

1. Создавать графические спойлеры и таблицы.
2. Форматировать текст и изображения.
3. Работать с якорями и ссылками.

Как сделать меню группе ВК? Рекомендации бывают так нужны, но в целом, можно разобраться и с помощью хорошего руководства. Если говорить о html, то для его изучения и работы с ним необходимо было посидеть несколько суток или даже неделю. Вики-разметка при хорошей памяти требует только совсем немного времени. Как же её можно создать? Какие есть подходы? Вот мы будет говорить о технологии, а кто её сделал? Мы разберемся, как сделать меню группе ВК. Уорд Каннингем же впервые ввёл понятие «вики» (в переводе с гавайского значит «быстрый»).

Способы создания вики-разметок

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

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

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

Работа с изображениями

Как сделать меню в группе в ВК, которое было бы красивым? В социальной сети «ВКонтакте» вставить фотографию или картинку при помощи вики-разметки предоставляется возможным только в тех случаях, когда они загружены в фотоальбомы сайта. Итак, заходим в него, выбираем нужную фотографию и копируем её адрес. К примеру, пускай он будет такой: photo12345_67890. Теперь необходимо его взять в двойные Должен получиться такой результат: []. А что, если к фотографии или картинке следует прикрепить текст или ссылку? А может, есть желание немного отредактировать внешний вид? Тогда с этим поможет следующее: необходимо, чтобы у файла был такой вид — [[ photo12345_67890|options|text/link]]. Вместо трех последних слов подставляется то, что надо. Text — пишем то, что нужно. Думается, особенных объяснений не надо. Link переводится с английского как «ссылка». Указывается для того, чтобы машина пользователя знала, куда ей необходимо идти. Options — здесь могут устанавливаться такие значения:

1. Plain — ссылка на изображение оформлена как текст, в ней отсутствует картинка.
2. Noborder — убирается рамка около фотографии.
3. Box — изображение открывается в окне.
4. Nolink — ссылка на фотографию убирается.
5. Nopadding — пробелы между изображениями не отображаются.
6. NNNxYYYpx или NNNpx — указывают, какой размер будет иметь картинка в пикселях. Первый вариант предусматривает ширину и высоту. При желании можно «сжать» картинку. И второй вариант предусматривает редактирования ширины.

Как создавать таблицы с использованием вики-разметки?

Обычно и графическому, и текстовому меню необходим элемент, который позволяет представить данные в удобном виде, а именно таблицы. Без них мало какая группа в «ВКонтакте» обходится. Чтобы создать таблицу в вики-разметке, необходимо использовать определённый набор символов. Предлагаем ознакомиться, за какой функционал они отвечают:

1. {| — так обозначается начало таблицы. Обойтись без него при создании данного элемента невозможно, он является обязательным атрибутом.
2. | — используется, чтобы давать ячейкам эффект прозрачности.
3. |+ — с помощью этого набора символов располагают название таблицы по центру. Это не обязательный атрибут, но он должен быть размещен сразу после знаков, что обозначают начало.
4. |- — так обозначают новые строки (в том числе и для ячеек).
5. ! — даёт тёмный цвет. При эго отсутствии необходимо использовать знак из пункта №2.
6. |} — набор символов, которые обозначает конец таблицы. Он является необязательным атрибутом. Но использовать его всё же рекомендуется, чтобы предотвратить возникновение ошибки.

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

Создание меню группы в социальной сети «ВКонтакте» с помощью вики-разметки: пример реализации

Здесь будут использованы опции noborder и nolink. Они уберут рамку картинки и ссылку. Также у изображений будет изменён размер, а вторая строка ячеек таблицы будет иметь тёмную заливку, благодаря использованию атрибута!. А вот и сам пример:

{|
|-
|