Как сделать графическое меню в вк. Создаем основное меню в контакте. Чем является Wiki-разметка

04.07.2019

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

Как создать меню группы вконтакте: технический этап

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

Сохраняем изменения и переходим в группу. Под описанием группы появится закладка «Свежие новости», приступим к её редактированию:

Переключаемся на закладку «Редактирование» (1), заменим название меню (2), введем свою информацию (3), сохраним её и вернемся к странице (4).

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

Если что-то пропало или вы хотите вернуться на несколько шагов назад, переходите в закладку «История» и возвращайтесь к нужному сохранению:

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

Как видите, я подготовила информацию в вордовском документе, сделала редактирование текста (выделения), добавила ссылки и просто вставила этот текст в «Редактирование» меню групп вконтакте.

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

Если перейдете в меню моей группы вконтатке, то увидите, что одни ссылки ведут на внутренние страницы (2), другие на внешние (1):

Добавлю в реальном времени, еще одну внутреннюю страницу:

Вот и появилась у нас новая (внутренняя) страница в нашей группе вконтакте. Теперь нам нужно её заполнить:

  1. Жмем кнопочку «Наполнить содержанием».
  2. Заполняем группу контентом. Редактируем его.
  3. Настраиваем «Доступ к странице». Если отметить «просматривать страницу могут только участники группы», то это будет мотивировать посетителей вступить в группу. Сохраняем страницу.
  4. Копируем нужные циферки в адресной строке страницы, которую только что сохранили. Для этого перейдите в режим «Просмотр» и скопируйте ID страницы – это и будут те циферки, которые нам нужны.
  5. Возвращаемся на страницу «Исходный код» меню группы вконтакте (рекомендую не закрывать его, пока создаете новую страницу… хотя она итак должна была бы быть у вас открыта) и вставляем цифры в правильную строчку. Между текстом ссылки (Марина Лазарева (видео)) и самой ссылкой (43820829), устанавливаем значок «|» (он находится на английской раскладке клавиатуры, сочетание клавиш Shift+\).
  6. оформление группы вконтакте , которое не требует дополнительных знаний редакторов типа фотошоп. В следующих статьях, я буду показывать, как создавать более красивые группы вконтакте. Сейчас же, для тех, кому не терпится создать красивое оформление группы вконтакте , рекомендую просмотреть это видео:

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

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

    Dropbox, читайте об этом на страницах DragonBlog.

    С Уважением и Любовью, !

Хотите узнать о том, как оформить группу в Контакте в 2018? И не просто оформить, а сделать это самому правильно и красиво! Если Ваш ответ «Да», то эта статья специально для Вас!

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

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

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

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

Закреплённый пост

Секреты оформления группы ВК

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

Бесплатные приложения. Зайдите в управление сообществом и перейдите в пункт «Приложения», чтобы редактировать настройки.

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

Другие полезные виджеты и приложения:

  • анкеты;
  • тесты;
  • запись на услуги;
  • рассылки сообщений;
  • магазин товаров;
  • и так далее.

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

Заключение

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

Сегодня я продолжу свой «Погружение в группы ВК». В третей части «сериала», я рассказывала и показывала, . Сегодня же, поговорим об оформлении меню группы вконтакте!

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

Вопрос 1: Первый и самый распространенный: «где код в меню?» или «если нет закладки при редактировании «Исходный код» как добавить внутреннюю страницу?» или «Я все равно не понимаю, что сделать, если не появляется код!»

Ответ 1: ВК изменил редактор, теперь для переключения между визуальным редактором и кодом всего один клик (правый верхний угол редактора):

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

Вопрос 2: Второй, реально проблематичный: «а как убрать пробелы между картинками?? »

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

Добавь тег nopadding; и все станет на свои места!

Между картинками вкрадывается пространство и меню выглядит битым. Для несведущих, может это и не нормально, а для , это как минимум не профессионально. Так в чем же тут дело? А, все очень просто! В ВК постоянно происходят какие-то обновления, вводятся новые алгоритмы… да еще и редактор кривоват… бывает ни с того, ни с сего из кода выпадают важные теги и тогда мы видим такую картину. Что бы исправить это, нужно заглянуть в код и внести необходимые коррективы. Формат кода, должен быть вот таким:

Шаблон: [] Пример: []

Обычно картинки меню раздвигаются потому, что из кода выпадает nopadding ; — вставляем его на место и все выравнивается. Перед тем как сохранять результат, жмите на кнопку «Предпросмотр», что бы убедиться в том, что все ровно стало.

Вопрос 3: Новость. В октябре 2012г., в принудительном порядке, Вконтакте обрезал автары групп и пабликов. Теперь их размер имеет общий стандарт 200х500 пикселей. Так, что если у вас в группе аватар был больше, то сделайте апдейт (обновите аватар).

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

Та-а-ак, с вопросами закончили… теперь переходим к самому созданию меню!

Шаг 1. Как создать меню в контакте и сделать вложенные страницы:

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

Как вам моя шпаргалка?

Вот такая шпаргалка у меня получилась! Для большей ясности, распишу каждую цифру:

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

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

Шаг 2. Как создать красивое графическое меню в контакте и поставить его:

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

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

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

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

Я покажу вам средний по сложности вариант установки меню. Разница в количестве элементов. Меню, которое разрезается просто на полоски, является самым простым его исполнением. Чем больше кликабельных кнопок в строке, тем более сложно его исполнение. Хотя, зная особенность, все просто! Дело только во времени. Итак, ширина картинки должна быть:

370 px – если в строке у вас будет два и более объектов, как у меня кнопочки соц сетей

И max 388 px – если разрезаем картинку по-простому, только на строки, не разделяя на мелкие объекты. Вот это та особенность, которую нужно знать, при нарезании меню на кнопки. У меня размер картинки всего меню получился 370х456 px.

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

Технический альбом ВК

После того как вы настроили конфиденциальность «Только Я». Переходим к установке самого меню. Дам вам пример кода, что бы был для вас шаблоном и разберем из чего он состоит:

[]

где, photo7632142_296911699 – это адрес картинки! Его мы смотрим в адресной строке картинки:

С первой картинки, начнем вставлять меню в группу вконтакте

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

Перейдите в сам альбом, что бы получить нужный адрес картинки!

…и начиная с первой картинки, переносите их в меню группы.

Добавляем размер картинки в код меню!

Итак, адрес картинки добавили, размер указали, теперь ставим, тег nopadding; - он нужен для того, что бы наши картинки плотно прилегали друг к другу. И последним этапом ставим ссылочку на страницу, куда будет попадать посетитель, после того как кликнет на картинку.

Здесь небольшое уточнение! Внешние ссылки, ссылки на альбомы ВК и обсуждения пишем полностью, а ссылки на внутренние страницы в формате page-32734125_44298120 . В начале и конце строки, не забываем ставить по две квадратные кавычки и без пробелов.

Уточнение 2: когда мы ссылаемся на внутренние страницы без картинок, то для обсуждений, альбомов и внешних ссылок ставим одинарные квадратные кавычки.

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

После того как вы перенесли все картинки в меню и оформили их (размер, ссылка), сохраняем результат и любуемся своей работой! Все! Готово!

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

После того, как мы подобрали изображение, которое будем использовать. При этом размер изображения может быть практически любой, который возможно загрузить в фотоальбом. (UPD: Это не совсем точная информация. Точнее о размерах можно прочитать в комментарии ниже. Для этого, просто нажмите на ссылку: /otkrytoe-menyu-gruppy-vkontakte/#comment-7633)

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

После этого, на странице с меню, нужно нажать на ссылку «Редактирование».

Но при этом не нужно изменять код. Просто нажимаем на ссылку «Вернуться к странице». Это нужно, для получения ссылки на страницу с меню.

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

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

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

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

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

Теперь нажимаем на дату новости.

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

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

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

Надеюсь, данная статья поможет Вам разобраться, как сделать открытое меню вконтакте. А у меня на этом все.

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

Создаю Меню в палбике Вконтакте своими руками

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

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

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

Http://vk.com/pages?oid=-XXX&p=Нaзвание_страницы

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

Http://vk.com/wall-46864771?own=1

Где цифры 46864771 и есть ID моего паблика Вконтакте, итак, я делаю ссылку для создания страницы Меню:

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

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

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

Http://vk.com/page-46864771_44676832

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

Вы можете посмотреть как завершить работу над созданием меню паблика Вконтакте в следующей статье —

Увидеть, какое меню паблика Вконтакте у меня получилось можно посетив

Похожие статьи