Сайт о телевидении

Сайт о телевидении

» » Кнопка в группе вконтакте. Как создать меню для группы вконтакте

Кнопка в группе вконтакте. Как создать меню для группы вконтакте

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

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

Итак, вот три пути создания меню:

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

Кстати, для тех, кто предпочитает получать информацию через видеоролики, а не читать длинные тексты, есть видео:

Путь #1. Заказать создание меню у дизайнера-специалиста

Плюсы этого способа - относительная быстрота и минимальное участие с вашей стороны. Минусы - самая высокая цена и шанс получить красивое, но неправильное меню (об основных ошибках при создании меню мы подготовили ). Кроме того, нужно еще найти исполнителя. Тут мы можем рекомендовать искать его на сервисе kwork.ru , в разделе «Дизайн групп в соцсетях».

Путь #2. Использование онлайн-конструктора

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

Путь #3. Сделать все самостоятельно

Плюсы этого пути очевидны: он бесплатен, а вы преобретаете новые умения. Минусы такие: вам необходимы некоторые умения и довольно много времени (в первый раз). Вот, что вам необходимо:

  • Уметь уверенно пользоваться графическим редактором. Например, PhotoShop. При изготовлении меню вам нужно будет сначала сделать изображение правильных размеров (до пикселя, никаких «примерно»!), а затем правильно его нарезать (разбить на фрагменты)
  • Уметь вникать в инструкции и читать их внимательно
  • Не сдаваться и не отчаиваться, если что-то не получается с первого раза

Если вы считаете, что вам все это по плечу, то давайте приступим.

Шаг #0. Общие сведения о том, как устроены меню групп ВК

Меню для группы делают из wiki-страниц, создание которых поддерживает ВК. Вики-страницы - это специальные страницы, которые можно создавать только в пабликах. От обычных постов они отличаются тем, что в них можно применять так называемую wiki-разметку. Эта разметка - специальный код, который преобразовывается в объекты дополнительного форматирования. Чтобы было понятнее, поясним. Например, в обычных постах вы можете использовать только простой текст, а вики-разметка позволяет выделять части текста жирным или курсивом. То есть, она вводит дополнительные возможности оформления. В частности - возможность размещать изображения, при нажатии на которые пользователь будет перенаправлен по ссылке. Именно эти дополнительные возможности форматирования и используются для того, чтобы делать меню пабликов ВК. Как именно это делать мы расскажем ниже.

Шаг #1. Подготовительный этап

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

Итак, вы создали новую группу. Давайте теперь узнаем идентификатор (ID) вашей группы. ID группы - это ее уникальный номер ВКонтакте. Зайдите в свою группу и нажмите на «Записи сообщества» (если записей в группе нет, то вместо «Записей сообщества» будет «Нет записей»). В Вы перейдете на новую страницу с адресом такого вида:

https://vk.com/wall-XXX ?own=1

Вместо XXX у вас будет набор цифр (и только цифр!). Это и есть ID вашего сообщества. Например в нашей тестовой группе это 154457305.

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

http://vk.com/pages?oid=-ID_группы &p=Нaзвание_страницы

http://vk.com/pages?oid=-154457305 &p=Меню

Откройте получившуюся у вас ссылку в браузере (скопируйте ее в адресную строку браузера и перейдите по адресу). Все, вы создали вики-страницу с названием «Меню» (если, конечно, указали «Меню» в качестве названия страницы в ссылке). Вы должны видеть такой текст: «Страница Меню пуста. Наполнить содержанием». В правом верхнем углу есть иконка-«карандаш» (). Нажмите на нее, чтобы перейти к редактированию страницы.

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

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

http://vk.com/page- ID_группы _XXX ?act=edit§ion=edit

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

Шаг #2. Делаем простое меню для группы ВКонтакте

Итак, у нас есть созданная вики-страница «Меню». Перейдите в режим разметки редактора и добавьте следующий код:

Нажмите на кнопку «Предпросмотр», которая находится снизу редактора. Вы должны увидеть список из трех ссылок. Первые две - внешние и ведут на главные страницы «Яндекса» и Google соответственно. Третья ссылка - внутренняя. Она ведет на паблик ВК с ID «1» (это официальная группа ВК для разработчиков). Если у вас в предпросмотре отображается вас код, а не ссылки (на которые можно нажимать) - значит вы ввели код в режиме визуального редактирования , а не в режиме разметки. Будьте внимательны!

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

clubID_группы

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

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

А сейчас давайте разберемся как и где можно использовать вики-страницы.

Шаг #3. Где можно размещать вики-страницы ВКонтакте

Основных мест два: вы можете создать пост со ссылкой на вики-страницу или разместить ее в разделе «Материалы» вашего сообщества.

Начнем с первого варианта. Начните добавлять новую запись на стене своей группы. Сначала прикрепите к ней любую фотографию. Лучше взять достаточно большую фотографию у которой ширина больше высоты. Затем вставьте в текст создаваемой записи ссылку на созданную вами вики-страницу с простейшим меню. Именно ее мы просили вас записать чуть раньше. Напомним, что ссылка имеет такой вид (у вас будут другие цифры ):

http://vk.com/page-121237693_72827423

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

Нажмите на фотографию в закрепленном посте: должна появится ваша вики-страница с простейшим меню группы.

Итак, мы узнали, что вики-страницы можно прикреплять к постам. В частности - к закрепленному посту. Второе место, где можно использовать вики-разметку это раздел «Материалы».

Перейдите в настройки сообщества и найдите там управление разделами (сервисами) сообщества. Отметьте «Материалы» как «Ограниченные». Теперь в верхней части главной страницы вашего сообщества появится новый пункт. Он располагается справа от пункта «Информация». При первом включении материалов в группе этот пункт по умолчанию называется «Свежие новости». Вот как это выглядит:

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

"""Вариант меню для раздела «Материалы»"""


[]

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

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

Мы узнали, что меню можно размещать в двух местах. Предпочтительнее сделать его и в виде закрепленной записи и в разделе «Материалы». Помните о двух нюансах:

  • Закрепленную запись увидят 98% ваших посетителей, а в раздел материалы попадут только 25-40% самых любопытных, а также преданные старые пользователи вашей группы, которые знают, что там находится что-то полезное.
  • Закрепленную запись с картинкой для вызова меню можно дополнить текстом. Таким образом вы не потеряете эту возможность закрепленной записи. Но переусердствовать тоже не стоит: чем больше текста, тем ниже будет ссылка на открытие вашего меню.

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

Кстати. Вы можете делать ссылки с одних вики-страниц на другие. Работает это примерно так: пользователь открывает (например, с помощью изображения-ссылки в посте) первую вики-страницу. А в ней есть ссылки на другие вики-страницы. При нажатии на эти ссылки будет открыта соответствующая вики-страница. Таким способом можно создавать довольно сложные и многоуровневые меню и, например, инструкции. Однако мы не советуем вам слишком увлекаться этим без лишней надобности.

Шаг #4. Как сделать меню в группе ВКонтакте. Графическое

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

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

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

Наше тестовое меню будет выглядеть так:

Всего две кнопки. Первая будет вести на главную страницу «Яндекса», а вторая - на группу ВК «Команда ВКонтакте».

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

Изготовление вертикального графического меню для группы ВК сводится к следующей последовательности действий:

  • Первым делом нужно нарисовать меню. Шириной оно должно быть строго 600px (пикселей). По высоте рекомендуем делать меню не более 900px. Результат лучше всего сохранять в формате PNG, в крайнем случае -JPG. Воспользуйтесь знакомыми и удобными вам инструментами для рисования (например Photoshop или GIMP). Результат тут на 95% зависит от ваших творческих и технических умений. Даже если вы совсем не умеете пользоваться графическими редакторами - не отчаивайтесь. Умения, которых будет достаточно приобретаются за максимум пару часов. В интернете есть огромное количество справочной и обучающей информации. Кроме того, умение хотя бы немного пользоваться графическим редактором очень и очень полезно для администраторов пабликов. Вы не потратите время зря.
  • Далее рисунок с меню нарезается на горизонтальные полосы. Делать это можно любым удобным для вас способом: от привычного многим Photoshop до различных онлайн-сервисов. Если у вас нет идей, как это делается - просто задайте вопрос любимому поисковику. Мы не будем подробно описывать техническую часть процесса нарезания: способов десятки, некоторые подходят одним пользователям, но не подходят другим. При нарезке необходимо соблюдать одно простое правило: высота одной полосы не должна быть менее 60px . Иначе у вас могут возникнуть проблемы с отображением меню в приложении и в мобильных браузерах: появятся т.н. «белые полосы» между изображениями.
  • Нарезанные «полосы» загружаются в альбом группы или альбом на странице администратора группы. Мы рекомендуем второй вариант. В любом случае, альбом с нарезанными частями меню должен быть в открытом доступе . Иначе, те пользователи для которых изображения альбома недоступны не увидят ваше меню!
  • Составляется код вики-разметки, который вставляется в нужную вики-страницу.
  • В группе размещается закрепленный пост с изображением-ссылкой на вики-страницу с меню. О том, как делается такой пост мы подробно писали выше. Кроме того, код (с небольшими изменениями) может быть добавлен в корневую вики-страницу (пункт справа от пункта «Информация», появляется при разрешении раздела «Материалы». Подробнее - см. выше).

А теперь разберемся с загрузкой частей меню и wiki-кодом подробнее. Мы подготовили для вас . В нем два каталога: «1» и «2». В первом содержатся части самого примитивного и простого варианта нарезки для нашего меню - на две части. Скачайте архив, загрузите изображения (1.png и 2.png) из каталога «1» в новый альбом (у себя на странице или в группе).

У нас две «полосы»: верхняя (с кнопкой «Яндекс») и нижняя (с кнопкой «Команда ВК»). Обе будут изображениями-ссылками. В вики-разметке это делается кодом такого вида:

«ССЫЛКА» - это целевая ссылка. Например, https://yandex.ru/. Кроме обычной внешней ссылки это может быть указание на объект ВКонтакте: пост, страницу пользователя или группу. Например, чтобы после нажатия кнопки происходил переход на сообщество «Команда ВКонтакте» можно указать как его адрес (https://vk.com/team), так и указатель на него (club22822305). В принципе, разницы не будет. Внешние ссылки (те, которые ведут не на ресурсы ВК) мы рекомендуем сокращать с помощью

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

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

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

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

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

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

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

Основные команды и возможности wiki-меню

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

К сожалению, абсолютно все команды мы не сможем уместить в нашем материале, поэтому расскажем лишь о некоторых.

Делаем меню с помощью медиа файлов

Осуществляется при помощи специальных кнопок.

В текстовом виде медиа файлы представляют собой: [​].

Где media XXXX_YYYY – сам медиа-файл, options – различные настройки (для фото и видео), link–надпись, которая будет отображена при наведении курсора на фото/видео.

Для фото options бывают:

Для видео:

Заголовки различного уровня создаем с помощью знаков ==

Добавьте знаки «==» в начале и конце заголовка. Пример смотрите на скриншоте:

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

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

Используем цитаты для привлечения внимания

Использование тега позволит красиво оформить чью-нибудь цитату.

Списки можно использовать как нумерованные, так и маркированные

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

Для маркированного списка аналогично предыдущему, только со знаком «*».

Работаем с отступами

Для того, чтобы сделать отступ допишите перед словом знак «:». В зависимости от количества знаков отступ будет увеличиваться или уменьшаться.

Внутренние ссылки в меню группы

Это ссылки на внутренние ресурсы соц. сети «ВКонтакте» (ссылку на человека, сообщество, обсуждение, приложение, страницу, видео и изображение). Их добавление осуществляется при помощи следующей конструкции: [].

Внешние ссылки в создании меню ВКонтакте.

Wiki-разметка создаёт табличное меню

С помощью вики страницы и разметки можно также создать и таблицу. Смотрите скриншот:

Информативный спойлер

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

Создается спойлер при помощи конструкции:

{{Hider|Названиеспойлера
Текст
}}

И будет иметь следующий вид:

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

Виды меню: какие бывают?

Вики страницы во ВКонтакте можно разделить по разным критериям:

  • Текстовое (только текст);
  • Графическое (использование изображений кнопок, фона и т.д.) .

По отображению (зависят от используемой картинки):

  • Закрытое (не видно самой структуры);

  • Открытое (видны сразу все пункты);

  • Со смежным или общим баннером (может быть, как открытым, так и закрытым).

Не зависимо от выбранного Вами типа, работают они все по одному принципу.

Также не бойтесь комбинировать эти типы. Например, можно сначала сделать графическую часть с кнопками (фон, стиль, дизайн), а после дополнить ее различной текстовой информацией (например, «Часто задаваемые вопросы», использовав спойлеры).

Как создать текстовое меню

Менее популярным и простым является текстовый список на вики странице. Оно не содержит каких-либо изображений и кнопок. Это просто список анкорных ссылок.

Ниже представлена пошаговая инструкция, как сделать текстовый список для группы ВК:

  1. Для начала необходимо настроить сообщество. Для этого перейдите в «Управление сообществом» и выберите раздел «Разделы». Найдите строку «Материалы», выберите пункт «Ограниченные» и сохраните настройки.

  1. Далее на главной странице паблика появятся «Свежие новости». Перейдите в них и нажмите «Редактировать».

  1. Впишите название.
  2. Ниже находится текстовый редактор ВК. Здесь мы и будем создавать наш список.
  3. Используйте следующую конструкцию:

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

Для примера мы напишем простую и небольшую конструкцию:

  1. Нажимаем сохранить.

Здесь мы использовали знаки «==» для выделения заголовка и знаки «*», чтобы выделить подпункты. В результате мы получили следующее:

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

Вы же сможете добавить что угодно, на что хватит фантазиии возможностей wiki-разметки.

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

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

Здесь же мы поговорим о том, как создать меню вики страницы самостоятельно. Ниже приведена пошаговая инструкция:

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

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

  1. Загружаем изображения в текстовый редактор ВКонтакте.

  1. Нажав на каждую картинку, можно выбрать параметры и указать ссылку.

  1. Справа есть переключатель между визуальным и текстовым режимами редактирования.

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

  1. Меняем надпись «noborder» на «nopadding», чтобы убрать расстояние между картинками и сомкнуть их. А после знака «|» добавляем ссылку.

  1. Нажимаем «Сохранить страницу».

В итоге мы получили вот такое меню:

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

Как закрепить

Чтобы созданное wiki-меню отображалось на главной странице сообщества, необходимо проделать следующие шаги:

  1. Создайте новый пост.
  2. Скопируйте ссылку Вашего меню. Для этого снова перейдите в редактирование и скопируйте URL из адресной строки браузера.

Сначала добавьте изображение, смотри картинку ниже.

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

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

Как удалить

Удаление wiki-меню не является сложной задачей. Достаточно просто перейти в «Управление сообществом», раздел «Разделы» и выключить материалы.

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

Готовые шаблоны

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

  • You-ps.ru – это сервис с готовыми шаблонами wiki-меню и другими готовыми элементами оформления сообщества.

  • Vkmenu.com – это онлайн-конструктор. Он позволяет легко и быстро делать стильные меню.


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

Итог

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

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

Не бойтесь экспериментировать и будьте оригинальны!

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

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

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

Примеров для создания навигации в группе можно приводить много. Ну а теперь давайте перейдем к практике.

Создаем меню

Необходимые настройки в группе

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

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

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

Подготовка изображений для меню и аватарки в Photoshop

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

Меню может быть продолжением изображения, которое стоит на аватарке;

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

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

Открываем Photoshop и создаем в нем новый файл – Ctrl+N. Значение ширины установите 760, высоты – 500 пикселей.

Теперь, используя инструмент Slice Tool, нужно разрезать лист на несколько областей. Выделите инструментом область справа и кликните по ней два раза, чтобы открыть окно с меню. Установите значение ширины – 200, высоты – 500. Это будет аватарка нашей группы.

Тем же инструментом, выделяем еще одну область, слева от предыдущей. Для нее ширина 50, высота – 500. Это расстояние между будущими пунктами и аватаркой, нам эта часть изображения будет не нужна.

Выделяем область слева вверху. Для нее ширина 510, высота 182. Эта область нашего изображения соответствует в группе той области, в которой написано название группы, статус, показаны некоторые вкладки. То есть, она нам тоже не нужна.

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

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

Дальше откройте в Photoshop изображение, которое Вы выбрали для аватарки и меню. Используя инструмент Move Tool, перетащите картинку на разрезанный ранее лист. Можете подвигать картинку, чтобы была видна нужная область.

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

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

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

На этом все готово. Справа наша аватарка, слева внизу – пункты навигации. Две остальные части изображения будут не нужны.

На данном этапе, можете на область справа (аватарка), добавить еще и логотип компании, или красиво написать ее название.

Сохраняем сделанное изображение: File – Save for Web & Devices, или используете сочетание клавиш Alt+Shift+Ctrl+S.

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

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

Затем вернитесь на главную страницу группы и выберите аватарку – «Загрузить фотографию». Это одно из тех изображений, которые мы только что сделали в Photoshop.

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

Создание меню с помощью wiki-разметки

Приступим к созданию самого меню. Заходим в группу и переходим на вкладку «Свежие новости». Затем нажмите на кнопочку «Редактировать».

Можете переименовать название самой вкладки. Я так и напишу «МЕНЮ». Теперь сюда нужно добавить изображения, которые соответствуют пунктам. Для этого, нажмите на значок фотоаппарата.

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

После этого, оно появится на странице редактирования.

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

Когда все пункты будут добавлены, кликните по двум стрелочкам в правом верхнем углу, чтобы перейти в режим wiki-разметки.

Здесь удалите все ненужные теги, вроде

, и уберите пробелы между всеми строками. Теперь посмотрите на верхний скриншот – у нас есть пробелы между добавленными изображениями. Чтобы их убрать, перед размером картинки пишем nopadding и ставим «;».

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

Вот так будет выглядеть код, после того, как Вы добавите «nopadding;» и ссылку.

В результате должно быть так: изменено название вкладки (МЕНЮ), убраны пробелы между строками, убраны пробелы между изображениями (nopadding;), добавлены ссылки. Нажимайте «Сохранить страницу» и возвращайтесь на главную страницу в группе.

На этом процесс создания навигации для группы Вконтакте завершен. У меня получилось так. Изображение аватарки и меню – одно целое. Перейдя на вкладку «МЕНЮ» пользователь может выбрать то, что его интересует, и перейти по указанной мной ссылке.

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

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

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

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

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

Для этого берётся обычный лист бумаги и на нём рисуется (прописывается) макет вашего меню. А именно, названия ваших «кнопок», которые будут вести на страницы, наполненные каким-либо содержанием. Имея перед глазами данный эскиз, вам проще будет идти к намеченной цели.
В прошлой статье в видео уроке я наглядно показала, как создавать текстовое меню. А в этой статье я расскажу и покажу ещё раз на своём примере. Итак, приступим. Моя тестовая группа имеет название «Здоровье».

Моё меню будет состоять из трёх кнопок:

  1. Секреты здоровья (переход на страницу с рекомендациями и советами по здоровью)
  2. Здоровая шея (переход на страницу, где будет описание и ссылка на платный лечебный курс по лечению остеохондроза шеи)
  3. Здоровая спина (переход на страницу, где будет описание и ссылка на бесплатный лечебный курс по лечению спины).

Создание меню

  • Для создания меню заходим в «Управление сообществом» во вкладку «Информация», находим «Материалы» ставим «Ограниченные» и сохраняем.
  • Далее возвращаемся на главную страницу группы и сверху видим надпись «Свежие новости», переходим в данный раздел через «Редактировать».

  • В открывшемся окне меняем надпись «Свежие новости» на «Меню», например. В пустом поле вписываем названия наших страниц — кнопок, слова обязательно закрываем двойными квадратными скобками без пробелов. Каждое название в новой строке.

  • Внизу страницы нажимаем на «Предпросмотр» и видим названия «кнопок», которые стали кликабельны.
  • Сразу же в разделе «Доступ к странице» откорректируйте настройки. Просматривать страницу могут все пользователи, редактировать – только администраторы, иначе завалят спамом. Сохраните изменения.

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

  • Следующий наш шаг, это узнать адреса наших страниц – «кнопок». Нажимаем в меню на «Здоровая спина» и на странице «Здоровая спина» нажимаем на «Редактирование»

  • Далее, в окне браузера мы видим вот такой адрес и берём из него только то, что выделено синим цветом. Наш адрес страницы «Здоровая спина» должен выглядеть так: page-116040065_52123446 , а не так: https://vk.com/page-116040065_52123446?act=edit

  • Открываем все три страницы через «редактирование» и копируем у себя в текстовый блокнот три адреса. В моём случае, это выглядит так:
    page-116040065_52123446
    page-116040065_52123461
    page-116040065_52123485
  • Далее, нам нужны адреса наших картинок, которые будут выполнять функцию кнопок. Для этого загружаем приготовленные картинки в альбом своего личного аккаунта и в настройках закрываем его от просмотра, что бы эти нарезанные картинки никто кроме вас не увидел. Если же вы загрузите их в альбом группы, то видеть их будут все, что на мой взгляд не совсем эстетично.
  • Когда загрузите все картинки в альбом, предварительно придумав ему название и отредактировав на предмет приватности, то нажмите по очереди на все картинки и перепишите адреса этих фото.

  • Для этого смотрим в адресную строку браузера. Копируем нужную нам часть и вставляем в свой рабочий текстовый блокнот. Адреса картинок должны иметь вот такой вид:


    В моём случае адрес верхней картинки имеет вот такой вид:
    photo189052615_337249677
  • Заходим в меню через «Редактирование», спускаем вниз текстовое меню и вверху прописываем адреса наших страниц – кнопок. Это выглядеть будет так, пример моей страницы:
    []
    Для наглядности смотрим фото:


    Я указала цифрами, что за что отвечает и обозначает:
    1 – это адрес нашей картинки;
    2 – это ширина картинки, а значит ширина нашего меню, эту цифру можно менять, но идеальный размер 388 пикселей. Эта цифра должна быть во всех трёх строках одинакова;
    3 — этот текст « noborder;nopadding » отвечает за то, что бы между картинками не было промежутков, что бы меню было сплошной картинкой;
    4 – это адрес нашей страницы меню
    Для того что бы не ошибиться, можно скопировать мой образец и вписать туда адреса своих картинок и страниц.
  • Нижнее текстовое меню под цифрой 5 убираем (стираем) и нажимаем внизу на «Предпросмотр». Видим своё красивое меню — сохраняем страницу.

  • Переходим на главную страницу группы, обновляем её и нажимаем на «Меню». Всё! Наше меню готово! Нажимая на надписи, мы будем попадать на страницы. Пока они пустые, но всему своё время.

Полезная информация на тему группы Вконтакте:

Оставайтесь на связи и подписывайтесь на свежие новости.
Успехов и Удачи!

ВАЖНОЕ ОБНОВЛЕНИЕ : эта статья сильно устарела, поскольку появился специальный сервис MenuMake , который позволяет создать меню для группы автоматически. В ручном подходе больше нет необходимости. Однако, оставляю эту статью для истории.

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

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

Поговорим об идеологии

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

Меню для привлечения посетителей

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

Меню для продаж

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

Первый этап – работаем в фотошоп

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

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

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

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