Содержание

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

Самым эффективным и удобным способом оформления группы в контакте является использование 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-разметке создаются при помощи определенного набора символов, каждый из которых отвечает за определенную часть таблицы:

{| знак начала таблицы, является обязательным атрибутом любой таблицы;
|+ знак расположения названия таблицы по центру, ставится сразу после знака начала таблицы и не является обязательным атрибутом;
|- знак начала новой строки, в т.ч. и строки ячеек;
| знак, отвечающий за прозрачность ячейки;
! знак, отвечающий за темный цвет ячейки; если отсутствует – обязательно применение предыдущего знака;
|} знак конца таблицы, необязательный атрибут, используется для предотвращения возникновения ошибок.

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

Приведем пример оформления меню группы с помощью wiki-разметки.

wiki-разметка

загрузка…

Это меню было создано применением следующего кода:

{|
|-
|<center>»’Новости»'</center>||<center>»’Основное»'</center>||<center>»’Все серии»'</center>
|-
!<center>[[photo708176_168310200|nolink;noborder;90x80px| ]]</center>!!<center>[[photo-4489985_130746672|nolink;noborder;90x80px| ]]</center>!!<center>[[photo708176_168309890|nolink;noborder;90x80px| ]]</center>
|-
|<center>
[[Новости из жизни актеров сериала|Новости]]<br/>
[[Биографии]]<br/></center>
|<center>
[[Аудио]] <br/>
[[Видео]]<br/>
[[Книги]]<br/>
[[Обсуждения]]<br/></center>
|<center>
Сезоны:<br/>
[[1 сезон|1]] | [[2 сезон|2]] | [[3 сезон|3]] | [[4 сезон|4]]<br/>
[[5 сезон|5]] | [[6 сезон|6]] | [[7 сезон|7]] | [[8 сезон|8]]<br/></center>
|-
|}
Как мы видим в примере, изображения наделены такими опциями, как nolink и noborder, которые убирают ссылку и рамку картинки. Также были изменены размеры изображений.
Вторая строка ячеек таблицы создавалась с атрибутом !, поэтому и имеет темный цвет заливки.
При переходе на новую строку внутри третей ячейки был использован тег <br />, а для центрирования текста в ячейках – тег <center>.

Оформление ссылок при помощи wiki-разметки

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

    1. Оформление ссылки как ссылки:
      [http://www.kontaktlife.ru]
    1. Оформление ссылки как текста:
      [http://www.kontaktlife.ru|Всё о контакте]
    1. Оформление ссылки как изображения:
      [[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|https://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 незакрытых тегов;
  • Указывая ширину изображения, его высота изменится автоматически в соответствии с пропорциями;
  • Список внутри таблицы или спойлера создается при помощи тега <br />;
  • Одна строка разметки может содержать в себе не более 8 элементов списка.

Приложения в контакте для wiki-разметки

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

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

Узнать больше про wiki-разметку и пройти наглядные видео-уроки по оформлению групп в контакте можно, воспользовавшись путеводителем по видео-урокам от официальной группы Wiki-разметки в контакте по ссылке https://vk.com/app1755280.

Если вам нужна раскрутка группы, то читайте наш пост.

Узнаем как изготовить меню в группе в ВК: вики-разметка

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

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

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

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

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

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

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

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

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

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

Как сделать меню в группе в ВК, которое было бы красивым? В социальной сети «ВКонтакте» вставить фотографию или картинку при помощи вики-разметки предоставляется возможным только в тех случаях, когда они загружены в фотоальбомы сайта. Итак, заходим в него, выбираем нужную фотографию и копируем её адрес. К примеру, пускай он будет такой: photo12345_67890. Теперь необходимо его взять в двойные квадратные скобки. Должен получиться такой результат: [[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. Они уберут рамку картинки и ссылку. Также у изображений будет изменён размер, а вторая строка ячеек таблицы будет иметь тёмную заливку, благодаря использованию атрибута !. А вот и сам пример:

{|
|-
|<center>”’Новое в науке”’</center>||
|-
!<center>[[photo12345_67890|nolink;noborder;150x70px| ]]</center>!!
|-
|<center>
[[Новости науки|Новости]]<br/>
[[Открытия]]<br/>
|<center>
[[Конференции]] <br/>
[[Разработки]]<br/>
[[Книги]]<br/>
[[Симпозиумы]]<br/>
|<center>
Разделы:<br/>
[[Медицина|1]] | [[Физика|2]] | [[Математика|3]] | [[Экономика|4]]<br/>
[[Химия|5]] | [[Биология|6]] | [[Программирование|7]] | [[Электротехника|8]]<br/>
|-
|}

Как видите, ответ на вопрос: «Как сделать меню в группе в ВК?» весьма лёгок.

Важность Wiki-разметки при продвижении своего проекта

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

Заключение

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

Как создать группу ВК и как сделать меню для Вконтакте?

Создание меню и группы Вконтакте

Желание создать сообщество ВК для известности или бизнеса встречается часто. А вот как создать группу и тем более правильно ее оформить, знают не все.

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

Ниже даны ответы на частые вопросы, как создать группу Вк:

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

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

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

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

Не забывайте о том, что внешний вид группы важен. Тщательно подберите название группы и аватарку, публикуйте ценный контент.

Еще одно большое подспорье в работе с группой и ее оформлении — меню Вконтакте.

Меню Вконтакте

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

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

Если у вашей группы есть меню, вы достигаете сразу трех целей:

  1. солидный вид группы;
  2. ее красивый дизайн;
  3. упрощение навигации по сообществу.

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

Еще немного о первых шагах в заполнении группы

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

У соцсети Вконтакте есть ограничения на количество приглашений в группу пользователей в сутки. Вы можете за один день пригласить до 40 человек с одной страницы.

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

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

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

Некоторые примечания:

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

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

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

вики-меню, смм, ведение группы вк

Как создать Вики ВКонтакте: вики-меню, смм

20.01.2019| Quetzal|

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

Где расположено вики-меню

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

Код в Вики разметке

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

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

Структура моего вики-меню ВКонтакте

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

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

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

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

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

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

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

Вертикальное меню

В группе «Взгляни на Минск» меню простое и создано в виде вертикальной картинки. Если интересует такой Вариант, то его тоже увидите в коде.

В файле также присутствует некоторое описание основных функций Вики разметки и другие примеры.

Можно просто взять это, скопировать, заменить ссылки на картинки и на рубрики, и у вас получится примерно такое же меню. Что-то удалите, поменяете, выбросите, добавите. Это готовый образец. Скачайте мой код с яндекс-диска:https://yadi.sk/d/wHioBN0GlkAd7Q

Цель вики меню

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

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

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

Следующей статьей будет установка сертификата ssl (https протокола). Посмотрим мою ошибку и ее решение. На этом сайте я буду рассказывать различные компьютерные новости показывать интересные места для туризма, немного медицины психологии и творчество. Навигация – по рубрикам. Желаю вам создать красивое вики-меню.

Шаблоны оформление групп вконтакте – Дизайн группы ВКонтакте — работаем с обложкой, аватаром и меню

Оформление группы Вконтакте шаблоны бесплатно

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

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

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

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

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

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

beatlive.ru – здесь довольно простые, но строгие и локаничные меню для группы Вконтакте.

all-for-vkontakte.ru — интересный ресурс, где появляются довольно достойные и прикольные шаблоны.

wikidiz.ru — просто множество самых удивительных и бесплатных шаблонов для Вконтакте.

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

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

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

Если Вы хотите, чтоб ваша группы выглядела примерно вот так,

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

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

Давайте перейдем к практике и на простом примере рассмотрим,
как сделать оформление группы в Вконтакте
самостоятельно, потратив 20-30 минут времени.

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

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

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

Код выглядит примерно так:

[[photo-100941444_376601882|75px;noborder;nolink;nopadding|albums-100941444]]

photo-100941444_376601882 – это ссылка на картинку, которая предварительно загружена у вас в группе. Ссылку можно указать и внешнюю на картинку, находящуюся не в Вконтакте.

75px – размер картинки. Можно указывать также двойной размер, типа 75x65px

noborder – убирается рамка вокруг картинки.

 nolink – картинка не будет кликабельной, даже если стоит ссылка для перехода, как в примере. Если убрать этот атрибут, то кликнув по ссылке перейдете по ссылке в альбом группы albums-100941444.

 nopadding – отменяет всякие отступы вокруг картинки.

             После вставки и редактирования кода можно нажать на кнопку «Предпросмотр» (3) и увидеть как будет выглядеть наше меню. Если не нравится, то продолжить редактирование, если все подходит – жмем сохранить (4). Переходим на главную страницу нашего сообщества и видим такой результат.

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

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

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

socprka.ru

проработка обложки, баннера и фото

Home » ВКонтакте » Оформление группы Вконтакте: цели и способы

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

Почему так важно красиво оформить сообщество?

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

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

Итак, первые два плюса – это внешний вид и привлечение людей. Но это еще не все.

Пример красиво оформленной группы ВК

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

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

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

Обложка группы ВК – как оформить

Элемент оформления, который бросается в глаза одним из первых.

При установке обложки необходимо знать рекомендуемые размеры – 1590 х 400 пикселей. Обложки можно создать, как самому, так и прибегнуть к помощи специалистов/сервисов или скачать готовые.

Для установки необходимо:

  1. Зайти в «Управление сообществом».
  1. Убедиться, что вы находитесь в разделе «Настройки» (справа) и найти пункт «Обложка сообщества».
  2. Далее нажать кнопку «Загрузить».
  1. Выбрать изображение на устройстве, а также выбрать отображаемую часть (при соблюдении рекомендуемых размеров – вся картинка будет видна).
  1. Сохранить изменения.

После всего сделанного на главной странице появится горизонтальная шапка (обложка). Все довольно просто.

Главное подобрать качественное изображение: с рекламой, с другой полезной информацией или только фотография – исходите уже из своих потребностей.

Аватар/миниатюра

Рекомендуемые размеры миниатюры – 200 х 200 пикселей, а аватара – 200 х 500 (200 х 200 – квадратный).

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

Перед тем, как начать установку, убедитесь, что в вашем паблике не установлена обложка. Если она есть, тогда используя инструкцию выше, зайдите в настройки и удалите ее (рядом с кнопкой «Загрузить» будет кнопка «Удалить»).

Далее приступайте к инструкции ниже:

  1. Нажмите «Загрузить фотографию» либо «Обновить фотографию» (если она есть).
  1. Нажмите «Выбрать файл» и выберите его на вашем устройстве.
  1. Выберите отображаемую часть.
  1. Выберите миниатюру.
  1. Сохраните изменения.

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

Баннер группы ВК – как установить

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

В качестве баннера чаще всего используют закрепленный пост.

Ширина такой записи – 510 пикселей, а высота зависит от того, как вы планируете ее использовать. Например, при использовании аватара размерами 200 х 500 пикселей, который заканчивается на одном уровне с баннером, высота последнего – 308 пикселей (если группа без статуса, а пост без текста).

Итак, установка:

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

После проделанных действий запись встанет над всей лентой новостей на место описания (если оно было).

Проработка меню, делаем лэндинг

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

Чаще всего руководители групп ВКонтактеиспользуют графическое меню. Для создания такого меню необходимо обладать знаниями wiki-разметки, а также иметь заготовки (изображения с кнопками), либо создать их самостоятельно в графических редакторах.

Итак, первое, что нам необходимо – включить данную функцию:

  1. Зайдите в «Управление сообществом».
  2. Справа выберите «Разделы».
  3. Найдите строку «Материалы» и сделайте их ограниченными.
  1. Сохраните изменения. После проделанных действий на главной странице появится раздел «Свежие новости».

Теперь можно переходить к установке самого меню:

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

 

  1. Далее переключитесь на текстовый режим редактирования.
  1. Все изображения станут иметь вид команд (как на скриншоте).
  1. Чтобы избавиться от пробелов между изображениями замените «noborder» на «nopadding».
  2. Далее необходимо сделать все картинки кликабельными. Для этого добавьте ссылку (на которую будет попадать пользователь после нажатия)после знака «|».
  1. Сохраните изменения.

В итоге у вас должно получиться что-то похожее на это:

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

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

Пример лэндинга (он очень длинный, поэтому показана лишь его часть):

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

Товары ВКонтакте

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

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

Чтобы добавить товар, необходимо:

  1. Зайти в «Управление сообществом».
  2. Справа выбрать «Разделы».
  3. Найти строку «Товары» и включить.
  1. Далее появятся настройки. Необходимо выбрать регион, валюту, контакты для связи и т.д.
  1. Выберите главный блок – «Товары».
  2. Сохраните изменения, после чего на главной странице группы появится новый раздел.
  3. Нажмите «Добавить товар».
  1. Выберите категорию, укажите название, добавьте описание, фото и стоимость.
  1. Нажмите «Создать товар».

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

Альбомы ВКонтакте

В каждом созданном сообществе по умолчанию включены фотоальбомы.

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

  1. Зайдите в «Управление сообществом».
  2. Справа выберите «Разделы».
  3. Найдите строку «Фотографии» и включите. «Открытые» – добавлять могут все участники, «Ограниченные» – добавлять могут только руководители и редакторы.
  4. Нажмите кнопку «Сохранить».

Теперь раздел включен.

Чтобы добавить новый альбом необходимо:

  1. Нажать «Добавить фотографии».

Далее вас перенесет в основной альбом. Можете добавить фото сюда (переходите к пункту 6). Но мы также рассмотрим, как создать новый альбом.

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

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

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

Оформленные шаблоны для постов ВК

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

Шаблоны можно скачать в интернете или заказать. Шаблоны представляют собой файл PSDформата (файлы для работы в фотошопе). Поэтому, для их использования необходимо владеть хотя бы базовыми навыками работы в AdobePhtoshop.

Шаблоны нельзя добавить на сам сайт «ВКонтакте», поэтому алгоритм работы следующий:

  1. Необходимо скачать PSD-файл на ПК.
  2. Обработать его в графическом редакторе.
  3. А затем добавлять полученную картинку в пост.

Ниже пример шаблона для цитат:

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

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

Итог

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

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

Оцените текст:

[Всего голосов: 2    Средний: 5/5]

softolet.ru

Разметка шаблонов для оформления групп в социальных сетях (Вконтакте, Facebook, Youtube)

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

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

В архиве три шаблона: для ВК, Фейсбука и Ютуба. Файлы в формате PSD (Photoshop). Они имеют рекомендованный размер и уже расставленные направляющие под разные размеры экранов (настольные компьютеры и мобильные девайсы).

Разметка для шапки группы/паблика Вконтакте

Социальная сеть Вконтакте дает рекомендуемые размеры обложки 795×200 px или 1590×400 px для экранов повышенной чёткости. Макет сделан для экранов высокой четкости.

Хочу сразу предупредить, что на мобильных устройствах шапка обрезается по краям и немного сверху. Об этом ВК ничего не пишут при загрузке обложки. Методом научного тыка я определил ширину безопасной области в 1200 px (внутренние направляющие макета). Если окажется, что я все же промахнулся, сообщите мне в комментариях. Поправлю.

Разметка обложки группы/паблика Facebook

У Фейсбука с рекомендациями вообще интересно. В разделе поддержки указаны следующие размеры для обложек:

  • 820×312 px для настольных компьютеров,
  • 640×360 px для мобильных устройств,
  • 851х315 px а вот этот размер считается у них оптимальным и самым быстрозагружаемым.

Почему-то для мобильных размер больше, чем рекомендуемый размер обложки для ПК. В макете сделал размер 851х360.

Разметка обложки канала Youtube

С Youtube все достаточно удобно. Рекомендуемые размеры обложки канала следующие:

  • 2560х1440 px для телевизоров,
  • 2560х423 px для настольных компьютеров и ноутбуков,
  • 1855×423 px для планшетов,
  • 1546×423 px для мобильных.

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

На этом все. Надеюсь, вам пригодится. Спрашивайте в комментариях, если что-то неясно. Успехов вам в творчестве!

Скачать макеты

tiil.ru

Оформление группы Вконтакте, готовые шаблоны psd

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

Начнем с более простого. На сайте vkprofi.ru можно создать красивый шаблон и без знаний Фотошоп или так называемой wiki-разметки. Просто заходите на данный ресурс через свой профиль ВК, загружаете картинки, делаете меню Вашей группы, красивое оформление, а потом или сохраняете, или экспортируете этот шаблон, как видно из верхнего рисунка. Есть еще очень качественный и полезный ресурс, где можно скачать уже готовые темы и шаблоны psd – это all-for-vkontakte.ru. Там есть все, что нужно и не только оформление, а и всевозможные программы и утилиты для облегчения работы с VK.

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

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

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

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

Psd оформление групп Вконтакте

Psd оформление групп Вконтакте очень подробно и просто излагается в коротком видеоуроке Дмитрия Семенова на Youtube. Но чтобы не заморачиваться в поиске приведем ссылку на это видео – https://www.youtube.com/watch?v=1gpHPt3zvvk. Автор доходчиво объясняет, как в Фотошопе правильно раскроить холст, сделать меню для группы и еще много различных нюансов. Но мы не будем подробно на этом останавливаться, посмотрите видео и Вы с легкостью сможете сами делать великолепное оформление своих сообществ. Чтобы фотография (баннер) не скрывалась под надписью последние новости, а постоянно была раскрыта, нужно просто зайти в свою группу и опубликовать пост со вставленной фотографией от имени сообщества. Далее кликаем по времени публикации и в открывшемся окне жмем закрепить, чтобы получилось так красиво, как на нижней картинке.

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

socprka.ru

Как сделать меню группы вконтакте за 8 шагов [шаблон PSD в подарок]

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

 

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

 

Сегодня я подробно расскажу, как сделать меню для группы вконтакте. По моему опыту меню в группе в контакте увеличивает количество звонков и заявок на 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.

Теперь вставьте ссылку из шага 4 на стену группы и прикрепите картинку (центральную картинку из шаблона).

 

 

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

 

Шаг 6.

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

 

Шаг 7.

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

 

 

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

 

 

Шаг 8.

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

 

 

ИТОГ.

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

 

 

 

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

 

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

 

 

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

 

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

 

Кстати, если вас интересует пошаговый алгоритм продвижения в ВКонтакте от А до Я, то можете приобрести мою книгу . 

Посмотрите видеоверсию данного вопроса:

 

Статьи по теме

Комментарии

stasbykov.ru

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

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

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

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

  • Обложка страницы показывается вверху, на всю ширину паблика, размер 1590 х 400 пикселей;
  • Большой аватар — вертикальный баннер 200х500 px (соотношение сторон 2:5), показывается справа вверху;
  • Маленькая аватарка, круглая картинка, показывается в каждом сообщении группы, размер 200х200 пикселей.
  • Изображение меню для группы Вконтакте, ширина 510 пикселей, высота — 307 (чтобы нижний край меню красиво совпадал с низом большой аватары справа).

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

Как сделать шапку для группы Вконтакте самостоятельно

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

Открой картинку в графическом редакторе. Обрежь или масштабирую до размера: длина 1590 px, высота 400 px.

Далее можно нанести необходимые надписи (название группы, слоган, призыв вступать в сообщество). Теперь нужно загрузить обложку в сообщество, для этого зайди в пункт меню «Управление сообществом»:

Кликни по надписи «Загрузить» в поле «Обложка сообщества».

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

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

Рекомендации по выбору изображения для шапки:

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

Размеры шапки в паблике Вконтакте в новом дизайне

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

ПодробнееПерейтиХочу узнать

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

Процесс оформления меню группы Вконтакте состоит из следующих этапов:

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

Фоновая картинка должна быть шириной 510 пикселей, а высота зависит от количества и размещения пунктов меню. Для работы с изображениями понадобится растровый графический редактор, ниже показаны примеры с использованием бесплатного и легкого Paint.Net.

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

Вертикальное меню сообщества ВК с пунктами в один столбик

Открой картинку в редакторе. Инструментом редактора «Текст» напиши пункты меню поверх фона. Чтобы надписи меню были заметны, их можно выделить несколькими способами:

  • Обвести рамкой;
  • Изменить цвет фона под буквами;
  • Добавить буквам тень.

Ниже на скриншоте каждый пункт выделен одним из способов.

Следующий шаг — нарезка изображения на части:

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

Процесс нарезки изображения также можно выполнить с помощью удобного онлайн-инструмента www.imgonline.com.ua/cut-photo-into-pieces.php.

Далее в меню «Управление сообществом» зайди в пункт «Разделы» и в пункте «Материалы» выбери «Ограниченные» (это значит, что страницы создавать и редактировать сможет только администратор группы).

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

Перейди в этот раздел и нажми редактировать. Измени заголовок на «Меню» а потом нажми на пиктограмму фотоаппарата, чтобы добавить изображение.

Щелкни по добавленной картинке и в окне свойств укажи ссылку на нужный раздел.

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

Каждый тэг изображения начинается «[[» и заканчивается «]]», состоит из трех частей, разделенных знаком «|»: ID изображения, свойства и ссылка. Нужно откорректировать размеры картинок и вставить в их свойства тег «nopadding». Свойства картинок перечисляются через «;».

После сохранения изменений создание меню завершено.

Меню с горизонтальным или многострочным расположением пунктов

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

Правила оформления таблицы:

  • Начало обозначается символом «{|», конец таблицы — «|}».
  • Дополнительные свойства указываются после «|~»
  • Новая строка начинается с «|-».
  • Каждая ячейка отделена «|».

Для исключения лишних пробелов нужно указать параметры таблицы «fixed nopadding noborder». Разметка графического меню из 2 столбцов и 2 строк выглядит так:

А само меню в группе:

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

В сообществах Вконтакте используется два варианта аватарки:

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

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

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

Вы используете паблики ВК для добычи трафика?

10 голосов

 

partnerkin.com

Оформление группы Вконтакте: как сделать вики разметку

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

Вот несколько примеров, чтобы все понимали, о чем речь.

Такие группы позволяют выделиться среди своих конкурентов и привлекать больше пользователей. Особенно, если еще и контент интересный 🙂
В рамках данной статьи мы поговорим о том, как это всё делается. Чтобы более подробно всё разобрать и вникнуть во все тонкости, возьмем конкретный пример. Будет небольшой мастер-класс по оформлению групп.

Идея и выбор формата сообщества

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

Объясняю на пальцах. Паблик — это что-то сравни блогу. Лента новостей. Иными словами, мы рассказываем своим подписчикам о каких-то вещах и они не смогут писать на стене нашего сообщества. Максимум — комментировать.

Группа позволяет создать более открытое к беседе и обсуждениям сообщество, где люди смогут от своего имени делать посты в ленте. В неё также можно добавлять друзей из своего списка. В паблике такой возможности нет. Кроме того, в группе немного больше возможностей по интегрированию вики-разметки (здесь есть раздел «Новости», в который можно интегрировать меню).

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

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

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

Контента море, начинаем воплощать идею в жизнь!

Создание группы

Чтобы создать группу, переходим в «Мои группы» в правом меню аккаунта Вконтакте и нажимаем на синюю кнопку вверху «Создать сообщество».

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

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

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

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

Всё. Группа создана!

Теперь можно начинать ее оформлять.

Оформление группы Вконтакте

Этот этап можно разбить на 2 составляющие: графическая и техническая. Для работы нам потребуется шаблон для создания аватарки группы и меню, а также немного воображения и базовые знания фотошопа (он же Adobe Photoshop).

Шаблон разметки

Что представляет из себя шаблон и что это вообще такое? Шаблон — это своего рода заготовка. В данном случае, в *.psd формате у нас размечены области для картинки под меню и аватарки группы.

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

Чтобы стало понятнее, вот пример.

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

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

Мы же тем временем приступаем непосредственно к графическому оформлению своей новой группы. Здесь я выбираю путь наименьшего сопротивления и для поиска частей дизайна отправляюсь в Google Картинки. Можно использовать и Яндекс. Кому что больше нравится.

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

На левом фрагменте (где надпись «Меню») можно также добавить несколько триггеров. В данном случае я решил делать без них. Всё. Дизайн аватарки готов. Жмем в фотошопе сочитание горячих клавиш Shift+Ctrl+Alt+S и сохраняем наши фрагменты в папку на жесткий диск.

Первый этап работы с графикой завершен. Возвращаемся в контакт.

Установка аватара и меню для группы

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

Добавляем картинку. Указываем поля и выбираем миниатюру. Здесь всё просто и проблем быть не должно.

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

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

Эти цифры после «?gid=» и есть искомое id группы. Вставляем полученное значение в форму скрипта и пишем название для той страницы, которую хотим создать. В данном случае, я вбиваю «Меню».

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

Если всё сделано правильно, откроется вот такая страница.

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

Я у себя написал «Меню» и моя страница после сохранения стала выглядеть следующим образом.

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

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

Нажимаем отправить. После чего щелкаем по времени отправки сообщения и выбираем там среди всех вариантов пункт «Закрепить». Обновляем страничку (клавиша F5 на клавиатуре) и, если всё сделано правильно, получаем первый результат: группа обрела аватарку и ссылку для перехода в раздел меню.

Wiki-разметка меню группы Вконтакте

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

Не буду сейчас останавливаться подробно на том, как именно я собирал меню. Вот, что у меня получилось.

Минимум полей. Вертикальная раскладка. Идеальный формат для адаптивного меню. То есть, на мобилах ничего никуда не поедет. Всё будет в точности, как на экранах компьютеров и планшетов. Ширину беру 500 px, чтобы потом ничего не ужалось и не потерять в качестве изображения дважды. Высота не принципиальна.

Разрезаем изображение на фрагменты и сохраняем их.

Всё. Настало время заключительного аккорда — собираем меню уже в самой группе.

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

Если вы администратор или создатель группы (в нашем случае это так и есть), то в верху страницы будет ссылка «Редактировать». Щелкаем по ней.

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

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

Я хочу расположить меню по центру и чтобы между фрагментами не было никаких зазоров. Поэтому каждый из элементов обертываем в тег <center></center> и к уже вложенному параметру «noborder» дописываю второй параметр «nopadding». Первый отключает обводку фрагментов и границы у ячеек таблиц. Второй убирает отступы от края.

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

В моем случае код меню выглядит следующим образом.

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

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

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

После чего вставляем в вики-код менюшки ссылки на новые страницы в виде page-102302049_51013384, где первое число — это id группы, а второе — номер страницы. Хотя, это в общем-то и не важно. Ведь нам нужно всего лишь скопировать этот фрагмент URL и вставить в разметку.

В итоге код меню принимает следующий вид.

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

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

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

Ссылки по теме статьи:

  1. Группа, которая создавалась на абзацах этой статьи.
  2. Техническая сторона вики-разметки (группа вконтакте). Всё о коде, параметрах и возможных проблемах.
  3. Инструмент для поиска картинок.
  4. Скрипт для создания вики страниц.
  5. Шаблон оформления аватарки и ссылки-картинки для меню в PSD-формате.

zavstas.ru

создание шапки, аватара, меню и вики-разметки — Digital-агентство S1

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

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

1.Размер аватара ВК

  • Минимальный размер аватара – 200 на 200 пикселей.
  • Максимальный размер аватара – 200 на 500 пикселей. Но, в принципе, можно загружать изображения и большего размера – до 7000 пикселей с каждой стороны. Главное, чтобы соотношение их сторон не превышало 2 к 5.

2. Обложка

  • Размер обложки для полной версии сайта — 1590 на 400 пикселей.
  • Обратите внимание: в мобильной версии и приложениях отображается не полная версия обложки, а только ее часть размером 1196 на 400 пикселей, поэтому располагайте основные элементы вашей обложки в пределах 1196 на 400 пикселей.

3. Прикрепленные изображения

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

4. Изображения к постам со ссылкой

  • Изображения к постам со ссылкой – это изображения, которые автоматически «подтягиваются» к посту, когда вы вставляете в него ссылку.
  • Минимальный размер изображения, которое вы можете использовать в качестве анонса к вашей статье, – 537 на 240 пикселей. Однако вы можете загружать и более крупные изображения, если будет соблюдена пропорция.

5. Картинка для статьи, созданной в редакторе

Размер изображения для обложки статьи, созданной в редакторе, — 510 на 286 пикселей. Лучше, если она будет темного цвета и более или менее однотонная, т. к. на светлом фоне теряется название статьи.

6. Размер фото и видео для историй

Размер для фотографий — 1080 на 1920 пикселей. Размер для видео — 720 на 1280 пикселей.

Технические характеристики для видеозаписей:

  • до 15 секунд;
  • не больше 5 МБ;
  • кодек h.264;
  • звук AAC.

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

7.Размер обложки для фотоальбома

Рекомендуемый размер изображения для обложки альбома — 1200 на 800 пикселей. Учитывайте, что в мобильной версии нижняя часть обложки будет отображаться меньше на 200 пикселей.

8. Размер картинки для видео

Размер картинки для видео составляет 1280 на 720 пикселей.

9. Вики-страница

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

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

1.Обложка

Не так давно «ВКонтакте» ввели обновление – теперь на страницы можно загружать большие и красивые обложки (1590 на 400 пикселей). Чтобы сделать это, перейдите в настройки и нажмите кнопку «Загрузить».

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

2. Живые обложки «ВКонтакте»

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

Как добавить? Зайдите через браузер сообщество, нажимаете «Упаравление», выбираете «Добавить обложку» и загружаете до 5 видео/картинок. Если не хотите, чтобы во время показа слайдов обложки масштабировались, то отключите опцию «Показывать фотографии в движении». Рекомендуемое разрешение 1080×1920, вес видео до 20 МБ, длительность – до 30 секунд.

3. Обложка + описание сообщества + ссылка на сайт

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

4. Описание с хэштегами

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

5. Закрепленный пост, рассказывающий, о чем страница

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

6. Новое меню ссылок

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

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

7. Меню группы открытое

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

8. Меню группы закрытое

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

9. Слитное меню для группы

Слитное меню – это когда картинка на анонсе вашего меню составляет с аватаром одно изображение. 

10. Гифка и аватар одним изображением

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

11. Скрытое меню

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

12. Автоматически воспроизводимое видео

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

Как добавить такое видео в шапку своей страницы?

Для этого нужно выполнить три условия:

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

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

Миниатюра аватара

  1. Текст на миниатюре аватара должен быть достаточно крупным, чтобы его можно было прочитать.
  2. Текст не должен выходить за пределы миниатюры.
  3. Пользователям должно быть понятно, что изображено на аватарке.
  4. По возможности лучше не использовать стоковые изображение, т. к. они часто понижают доверие к компании.
  5. Нежелательно, чтобы миниатюра аватара была слишком блеклой и скучной, иначе она будет теряться на фоне более ярких аватарок конкурентов.
  6. Если вы хотите, чтобы ваша аватарка выглядела современно, сделайте ее в стиле минимализм: поменьше текста, теней, градиентов и не несущих никакой смысловой нагрузки элементов. Ваша аватарка должна быть максимально простой и аккуратной. Этот стиль сейчас в тренде.
  7. Если перед вами стоит цель привлечь внимание пользователей и выделиться на фоне других аватарок в ленте, придется включить фантазию. Подумайте, на что вы сами обращаете внимание, когда ищете интересные сообщества?

Каким должен быть сам аватар?

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

  1. Аватар должен быть качественным. О том, как этого добиться, я писала чуть выше. Для тех, кто пропустил эту часть, скажу вкратце – размер аватара должен быть в 2–3 раза больше того, что вы запланировали.
  2. Желательно, чтобы аватар сочетался с меню: был такой же цветовой гаммы, имел те же самые шрифты, элементы и т. д. Благодаря этому шапка вашей страницы будет выглядеть более аккуратно и профессионально.
  3. Сам аватар и миниатюра аватара могут быть разными. Например, вы можете нарисовать на аватаре круг, оформить его так, как вам нравится, выбрать эту область в качестве миниатюры, а остальную часть аватара выполнить в другом стиле.
  4. Для того чтобы побудить пользователей подписаться на вашу страницу или написать сообщение представителю компании, вы можете разместить в самом низу аватарки соответствующий призыв к действию и сопроводить его указывающей на кнопку стрелочкой.
  5. Старайтесь не размещать на аватаре слишком много информации, иначе он будет смотреться перегруженным и неопрятным. Добавьте на него только самые важные пункты и обязательно убедитесь, что между ними есть «воздух».

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

Точно также как у WordPress (или любой другой CMS) есть HTML-редактор, с помощью которого вы создаете статьи, так и у «Контакта» есть свой редактор для создания и редактирования вики-страниц.

Вот так выглядит вики-разметка

Как создать вики-страницу

Для того чтобы создать новую вики-страницу, вам необходимо:

  1. Скопировать в адресную строку своего браузера вот такую ссылку: http://vk.com/pages?oid=-XXX&p=Нaзвание_страницы
  2. Вместо ХХХ вписать ID своей страницы, а вместо фразы «Название_страницы» – заголовок статьи (на русском или на английском, разделяя слова нижним подчеркиванием).

Как закрыть доступ к редактированию страницы

У каждой вики-страницы есть настройки доступа. Находятся они в нижнем левом углу редактора.

Как перейти в режим кода

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

Как отформатировать текст

Текст вики-страницы, в основном, форматируется с помощью редактора. Интерфейс практически такой же, как в ворде, поэтому, думаю, объяснять здесь почти нечего. Единственное, что стоит сказать, – на вики-странице нельзя изменить размер шрифта. Вместо этого необходимо использовать теги h2, h3, h4, выделение жирным или курсивом.

Ну а если такого форматирования вам не хватает, вы можете перейти в режим кода и вручную отформатировать нужный вам текст с помощью следующих тегов:

Как вставить ссылку в текст

Чтобы вставить ссылку в текст, нужно перейти в режим вики-разметки и воспользоваться следующим шаблоном: [ссылка на статью|текст ссылки].

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

Так как же сделать так, чтобы ссылка открывалась в новом окне?

Есть очень простой способ – «сокращатель ссылок вк». Получите короткий вариант вашей ссылки и вставьте в вики-пост. После этого она будет всегда открываться в новом окне.

Как добавить изображение

Чтобы добавить изображение, необходимо воспользоваться иконкой в виде фотоаппарата. Я рекомендую вам это делать сразу в режиме кода, т. к. при загрузке изображений «Контакт» почему-то всегда выравнивает их посередине и делает размером 400 пикселей в ширину (хотя оригинал может быть больше), и в любом случае приходится лезть в код и прописывать нужные размеры. А так можно сэкономить время.

Как добавить видео

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

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

  1. Вставить после второго знака | ссылку на ваше видео: либо на YouTube или другой сторонний видеохостинг, либо на видео из самого «Контакта». Но лучше, конечно, чтобы пользователь не покидал социальной сети. Так ему будет удобней.
  2. Сделать выравнивание (посередине, слева или справа).
  3. Указать реальный размер картинки (помните: ее ширина не должна превышать 610 пикселей).

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

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

По какому принципу создаются меню

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

Как закрепить меню в шапке страницы

Порядок действий таков:

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

Простое меню в один столбец

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

Простое меню в два столбца

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

Мобильная верстка

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

  1. Использовать табличную верстку с фиксированной шириной ячеек.
  2. Разрезать меню на одинаковые квадраты или прямоугольники шириной не более 190 пикселей (если 3 столбца), 150 пикселей (если 4 столбца) и 110 пикселей (если 5 столбцов). Больше столбцов, как мне кажется, смысла делать нет, т. к. на мобильных они будут смотреться очень и очень мелко.

Что такое табличная верстка

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

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

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

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

Анна Борисенко
Маркетолог S1

Как делать вики меню в вк

ВК Часть 2: Как сделать wiki меню для группы Вконтакте?

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

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

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

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

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

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

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

Итак, давайте приступим…

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

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

1. Графическое меню для продаж

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

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

2. Графическое меню для переходов на основной сайт

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

НО! Тут есть интересный момент. Многие SMM’щики с помощью меню перенаправляют посетителей группы на основной сайт и следует отметить, что это приносит хороший результат. Разумеется, данный метод получения клиентов не всегда работает. Все зависит от тематики, оформления сайта, навигации и т.д., а это совсем другая сфера, в которой проблем намного больше, чем в SMM.

3. Графическое меню для привлечения подписчиков

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

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

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

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

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

1. Меню должно сочетаться с цветовой гаммой аватарки 2. Меню должно быть простым в плане навигации

3. В идеале размеры меню должны  сочетаться с аватаркой, как это сделано на скриншоте выше

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

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

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

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

На данном этапе вместо меню закреплена одна из записей, поэтому начинаем с самого начала.

1. Переходим в Управление сообществом → Материалы → Подключить

Сохраняем и возвращаемся в группу. Под описанием группы появится вкладка Свежие новости

2. Наводим курсор мыши на вкладку и нажимаем Редактировать

3. Меняем название вкладки. Например, на >

Дальше можно пойти по двум путям:

1) создаем меню в виде статистических ссылок 2) создаем меню в виде изображения

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

Создание простого меню для группы Вконтакте

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

1. Переходим в редактирование и создаем меню, используя возможности визуального редактора

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

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

Я не стал заморачиваться над форматированием текста и созданием внутренних страниц, так как впереди меня ждет создание графического меню с использованием wiki разметки.

Создание wiki меню для группы Вконтакте

Здесь нам потребуются навыки работы в графическом редакторе Photoshop и знания wiki разметки. Итак, начнем…

1. Открываем графический редактор и создаем новое изображение (Файл → Новое изображение)

2. Указываем размеры (500px на 500px) и название нового изображения

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

Несмотря на то, что я делал меню на скорую руку, оно получилось довольно-таки милым и красивым

3. С помощью инструмента Slice Tool делим наше изображение на части

4. Сохраняем изображение для Веб-сайта (Файл → Сохранить для Web-Sites)

5. Переходим в группу и открываем редактор меню

6. Добавляем с помощью специальной кнопки все изображения

7. Сохраняем и возвращаемся в группу

Уже на этом этапе наше меню выглядит очень привлекательно.

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

Редактируем исходный код каждого изображения.

1) Добавляем стиль nopadding после стиля noborder (до слеша!) 2) Добавляем ссылку после слеша

Вот пример правильно оформленного изображения:

[[photo123162574_321612375|400x51px;noborder;nopadding|http://smm-life.ru/o-sebe-i-bloge]]

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

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

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

Дополнительная информация:

1. На создание изображения я потратил около получаса 2. На правку исходного кода и коррекцию изображений ушло около 15 минут

И еще кое-что: при создании меню можно использовать готовые шаблоны различных кнопок. Благо в интернете их предостаточно.

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

Автор: Тимур   Рубрика: SMM продвижение   Метки: группа вконтакте, оформление, создание меню

Также рекомендую прочитать следующие статьи блога:

Оформление группы Вконтакте: как сделать вики разметку

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

Вот несколько примеров, чтобы все понимали, о чем речь.

Такие группы позволяют выделиться среди своих конкурентов и привлекать больше пользователей. Особенно, если еще и контент интересный 🙂 В рамках данной статьи мы поговорим о том, как это всё делается. Чтобы более подробно всё разобрать и вникнуть во все тонкости, возьмем конкретный пример. Будет небольшой мастер-класс по оформлению групп.

Идея и выбор формата сообщества

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

Объясняю на пальцах. Паблик — это что-то сравни блогу. Лента новостей. Иными словами, мы рассказываем своим подписчикам о каких-то вещах и они не смогут писать на стене нашего сообщества. Максимум — комментировать.

Группа позволяет создать более открытое к беседе и обсуждениям сообщество, где люди смогут от своего имени делать посты в ленте. В неё также можно добавлять друзей из своего списка. В паблике такой возможности нет. Кроме того, в группе немного больше возможностей по интегрированию вики-разметки (здесь есть раздел «Новости», в который можно интегрировать меню).

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

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

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

Контента море, начинаем воплощать идею в жизнь!

Создание группы

Чтобы создать группу, переходим в «Мои группы» в правом меню аккаунта Вконтакте и нажимаем на синюю кнопку вверху «Создать сообщество».

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

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

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

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

Всё. Группа создана!

Теперь можно начинать ее оформлять.

Оформление группы Вконтакте

Этот этап можно разбить на 2 составляющие: графическая и техническая. Для работы нам потребуется шаблон для создания аватарки группы и меню, а также немного воображения и базовые знания фотошопа (он же Adobe Photoshop).

Шаблон разметки

Что представляет из себя шаблон и что это вообще такое? Шаблон — это своего рода заготовка. В данном случае, в *.psd формате у нас размечены области для картинки под меню и аватарки группы.

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

Чтобы стало понятнее, вот пример.

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

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

Мы же тем временем приступаем непосредственно к графическому оформлению своей новой группы. Здесь я выбираю путь наименьшего сопротивления и для поиска частей дизайна отправляюсь в Google Картинки. Можно использовать и Яндекс. Кому что больше нравится.

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

На левом фрагменте (где надпись «Меню») можно также добавить несколько триггеров. В данном случае я решил делать без них. Всё. Дизайн аватарки готов. Жмем в фотошопе сочитание горячих клавиш Shift+Ctrl+Alt+S и сохраняем наши фрагменты в папку на жесткий диск.

Первый этап работы с графикой завершен. Возвращаемся в контакт.

Установка аватара и меню для группы

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

Добавляем картинку. Указываем поля и выбираем миниатюру. Здесь всё просто и проблем быть не должно.

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

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

Эти цифры после «?gid=» и есть искомое id группы. Вставляем полученное значение в форму скрипта и пишем название для той страницы, которую хотим создать. В данном случае, я вбиваю «Меню».

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

Если всё сделано правильно, откроется вот такая страница.

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

Я у себя написал «Меню» и моя страница после сохранения стала выглядеть следующим образом.

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

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

Нажимаем отправить. После чего щелкаем по времени отправки сообщения и выбираем там среди всех вариантов пункт «Закрепить». Обновляем страничку (клавиша F5 на клавиатуре) и, если всё сделано правильно, получаем первый результат: группа обрела аватарку и ссылку для перехода в раздел меню.

Wiki-разметка меню группы Вконтакте

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

Не буду сейчас останавливаться подробно на том, как именно я собирал меню. Вот, что у меня получилось.

Минимум полей. Вертикальная раскладка. Идеальный формат для адаптивного меню. То есть, на мобилах ничего никуда не поедет. Всё будет в точности, как на экранах компьютеров и планшетов. Ширину беру 500 px, чтобы потом ничего не ужалось и не потерять в качестве изображения дважды. Высота не принципиальна.

Разрезаем изображение на фрагменты и сохраняем их.

Всё. Настало время заключительного аккорда — собираем меню уже в самой группе.

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

Если вы администратор или создатель группы (в нашем случае это так и есть), то в верху страницы будет ссылка «Редактировать». Щелкаем по ней.

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

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

Я хочу расположить меню по центру и чтобы между фрагментами не было никаких зазоров. Поэтому каждый из элементов обертываем в тег и к уже вложенному параметру «noborder» дописываю второй параметр «nopadding». Первый отключает обводку фрагментов и границы у ячеек таблиц. Второй убирает отступы от края.

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

В моем случае код меню выглядит следующим образом.

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

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

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

После чего вставляем в вики-код менюшки ссылки на новые страницы в виде page-102302049_51013384, где первое число — это id группы, а второе — номер страницы. Хотя, это в общем-то и не важно. Ведь нам нужно всего лишь скопировать этот фрагмент URL и вставить в разметку.

В итоге код меню принимает следующий вид.

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

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

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

Ссылки по теме статьи:

Как сделать меню в группе в ВК: вики-разметка

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

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

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

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

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

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

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

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

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

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

Как сделать меню в группе в ВК, которое было бы красивым? В социальной сети «ВКонтакте» вставить фотографию или картинку при помощи вики-разметки предоставляется возможным только в тех случаях, когда они загружены в фотоальбомы сайта. Итак, заходим в него, выбираем нужную фотографию и копируем её адрес. К примеру, пускай он будет такой: photo12345_67890. Теперь необходимо его взять в двойные квадратные скобки. Должен получиться такой результат: [[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. Они уберут рамку картинки и ссылку. Также у изображений будет изменён размер, а вторая строка ячеек таблицы будет иметь тёмную заливку, благодаря использованию атрибута !. А вот и сам пример:

{| |- |”’Новое в науке”’|| |- ![[photo12345_67890|nolink;noborder;150x70px| ]]!! |- | [[Новости науки|Новости]] [[Открытия]] | [[Конференции]] [[Разработки]] [[Книги]] [[Симпозиумы]] | Разделы: [[Медицина|1]] | [[Физика|2]] | [[Математика|3]] | [[Экономика|4]] [[Химия|5]] | [[Биология|6]] | [[Программирование|7]] | [[Электротехника|8]] |-

|}

Как видите, ответ на вопрос: «Как сделать меню в группе в ВК?» весьма лёгок.

Важность Wiki-разметки при продвижении своего проекта

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

Заключение

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

Создание группы меню ВКонтакте. Как создать внутреннюю страницу для группового меню Вконтакте? Что нужно помнить о вики-разметке

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

Какой размер группового меню Вконтакте?

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

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

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

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

Как вставить картинку в описание группы Вконтакте?

Элементарно. Все, что вам нужно сделать, это взять подходящее изображение нужного размера и добавить его на стену группы от имени сообщества.

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

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

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

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

  1. Первое, что нам нужно сделать, это зайти в настройки группы и активировать раздел «Материалы». Значение должно быть установлено на «ограничено» или «открыто».
  2. Далее готовим картинку для группового меню Вконтакте. Если не хотите возиться, вы можете оформить меню в текстовом виде, но оно будет менее привлекательным.В качестве примера возьмем следующую картинку, которую можно увидеть ниже.
  3. Кстати, этот снимок был создан в фотошопе менее чем за полчаса. В другом редакторе сделать это будет сложнее. Поэтому рекомендую вам ознакомиться с курсом, о котором я писал выше. После того, как рисунок выделен, его нужно разрезать на части и сохранить на компьютере.
  4. Изображение было вырезано с помощью инструмента Photoshop «Вырезать», а затем сохранено. Каждая из выделенных частей стала отдельным изображением.

  5. Затем нужно создать альбом для фотографий на личной странице Вконтакте. Этот альбом даже можно сделать полностью закрытым. После создания альбома заполните его всеми частями нашего изображения.
  6. Затем перейдите в свою группу и в разделе последних новостей нажмите кнопку «Редактировать».
  7. После этого откроется страница, которой можно дать произвольное имя и написать следующий текст в квадратных скобках. Затем нажмите кнопку «Сохранить страницу».
  8. Затем вернитесь на страницу своей группы или обновите ее (если она уже открыта).Щелкните ссылку «Открыть меню». После этого появится дополнительная ссылка на созданную нами страницу. Нажмите здесь.
  9. Далее откроется эта страница. Поскольку он только что был создан, в нем ничего нет и нам нужно его заполнить. Щелкните ссылку «Наполнить содержанием».
  10. Далее мы пишем следующий код, как на картинке ниже. В нем вам нужно указать номер фотографии (для этого вы можете открыть фотографию, загруженную в свой альбом, и скопировать ее адрес типа «photo15535684_427525646»), размер фотографии (вы можете найти его в свойствах фото), а также указать ссылку, на которую ведет данное фото.
  11. Чтобы убедиться, что мы все сделали правильно, нажмите кнопку «Предварительный просмотр». Под кодом появится сформированное меню группы Вконтакте. Если все отображается правильно, то нажимаем на кнопку «Сохранить», а если нет, то ищем и исправляем ошибки.
  12. Теперь нам нужна картинка, которая станет заставкой нашего меню и будет в описании нашей группы. Размеры картинки для описания группы Вконтакте мы писали выше, но если кто забыл — в ширину от 510 пикселей, а в высоту равную ширине или меньше.Можно использовать большие размеры, но в тех же пропорциях.
  13. Затем открываем нашу созданную страницу с составленным меню группы Вконтакте и копируем ссылку на нее. Чтобы правильно скопировать ссылку, нужно нажать «Редактировать страницу». После этого появится написанный ранее код, и вы сможете скопировать адрес из строки браузера, которая должна выглядеть так: «https://vk.com/page-119301077_51764020».
  14. Далее заходим в нашу группу и вставляем скопированный адрес меню в форму для отправки сообщений.А потом фото, которое будет заставкой. После этого нажмите кнопку «Отправить».
  15. Теперь остается закрепить эту запись. Сделайте это так же, как я сделал на картинке ниже.
  16. Вот так будет выглядеть наше меню для группы Вконтакте. Если хотите посмотреть лично, то тут

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

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

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

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

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

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

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

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

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

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

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

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

Итак, у нас в группе ВКонтакте появилась новая (внутренняя) страничка. Теперь нам нужно заполнить его:

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

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

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

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

    С уважением и любовью, !


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

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

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

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

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

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

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

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

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

Путь № 3. Делай все сам

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

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

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

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

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

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

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

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

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

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

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

http://vk.com/pages?oid=- Group_id & p = Имя_страницы

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

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

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

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

http://vk.com/page- Group_id _ XXX ? act = edit & section = edit

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

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

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

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

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

club Group_id

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

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

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

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

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

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

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

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

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

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

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

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

«» «Пункт меню для раздела» Материалы «» «»

[]

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

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

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

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

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

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

Шаг №4. Как сделать меню в группе ВКонтакте. Graphic

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

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

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

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

Всего две кнопки. Первый будет вести на главную страницу «Яндекса», а второй — в группу VK Team ВКонтакте.

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

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

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

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

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

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

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

Как работает вики-разметка

Разметка

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

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

Вся разметка вики помечена тегами, как и HTML. Есть одиночные теги (например,
— разрыв строки) и парные (например, thumbnail ).

Как теги для текста работают в разметке вики

В некоторых случаях в вики-разметке используется упрощенный синтаксис (теги заменены типографскими символами). Например, чтобы создать маркированный список, используйте звездочки «*», а для нумерованного списка используйте решетки «#».

Как типографские знаки работают в вики-разметке

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

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

Так выглядит активный режим разметки вики.

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

Как создать вики-страницу

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

Стандартный

Для группы. Перейдите в «Управление сообществом» → «Разделы» → «Контент» и выберите «Общедоступный» или «Ограниченный».

Как включить «Контент» в группе

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

Как создать новую страницу через «Свежие новости»

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

https://vk.com/stats?gid= 123456789

Требуемый идентификатор группы состоит из цифр после «gid =».

Теперь вам нужно ввести в адресную строку браузера следующий код:

https://vk.com/pages?oid=-ХХХ&p=Page_name

Вместо XXX подставляем id паблика, вместо «Page_name» — имя, которое вы придумали.В названии можно использовать кириллицу, латиницу и цифры. Специальные символы использовать не запрещено, но лучше не рисковать: из-за них вы можете потерять возможность редактирования страницы. Вставляем все данные в нужные места, нажимаем Enter, и браузер откроет созданную страницу.

Через приложение

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

В этом руководстве мы возьмем приложение Mobivic в качестве примера.В ноябре 2017 года занял второе место в программе VKontakte Start Fellows. Работает без установки и дополнительной регистрации в десктопной, мобильной версии ВКонтакте и в приложении для телефона (разработчик рекомендует использовать версии не ранее Android 5.1, iOS 9 и Windows Phone 8.1).

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

Как создать новую страницу с помощью приложения Mobivic

Ссылки на новую вики-страницу в приложении Mobivic

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

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

Слева — страница меню сообщества LIVE, открытая на мобильном телефоне,
справа — она ​​же, но открывается через «Мобивик»

Как получить ссылку на вики-страницу

Как мне найти страницу, созданную мной ранее? Самый простой и надежный способ — заранее скопировать все адреса вики-страниц в отдельный файл, например, в Google Таблицы.Другой способ — через любое вики-приложение. Например, зайдите в «Мобивик», выберите название сообщества и нужную страницу, нажмите «Получить ссылку» и скопируйте адрес из пункта «Ссылка на вики-страницу».

Как получить ссылку на ранее созданную вики-страницу

Как сделать сообщение со ссылкой на вики-страницу

Скопируйте ссылку на вики-страницу и вставьте ее в новое сообщение на своей стене или стене сообщества. Если все сделано правильно, сайт сгенерирует блок ссылок под текстовым полем сообщения.Теперь удалите сам текст ссылки, прикрепите баннер и нажмите «Отправить». В настольной версии баннер также станет ссылкой на вики-страницу, а в мобильной версии он будет открываться как обычная картинка.

Изображение, прикрепленное к сообщению, станет частью ссылки на вики-страницу в настольной версии

Текст

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

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

На одной странице можно разместить около 16 тысяч знаков.

Ссылки

Чтобы вместо адреса отображался текст, добавьте название ссылки:

[]
— в профиль пользователя

[]
— на главную страницу сообщества

[]
— на другую вики-страницу

[]
— для встречи ВКонтакте

Фотографии

Максимальная ширина изображения, которое можно использовать в разметке вики, составляет 607 пикселей, что соответствует ширине самой страницы вики.Высота практически не ограничена (помните, что высота самой страницы — 16 000 знаков). Изображения можно загружать двумя способами.

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

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

https://vk.com/club12345678?z= фото-12345_12345 % 2Falbum-12345678_12345678

Скопируйте с него id картинки (жирным шрифтом).Затем мы заключаем его в двойные квадратные скобки и вставляем в нужные места на странице. Получается примерно так:

[]

Что дальше? Отредактируйте выравнивание, обтекание текстом, размер, ссылку привязки. Для этого укажите желаемые параметры после вертикальной черты и разделите их точкой с запятой. Например, в этом коде мы устанавливаем размер изображения 300×100 пикселей и обтекание текста вправо:

Видео

Во-первых, вам нужно загрузить свое видео в Community Videos.После загрузки откройте видео и скопируйте его идентификатор из адресной строки (выделен жирным шрифтом).

https://vk.com/videos-12345678?z= видео-12345_12345 % 2Fclub12345678% 2Fpl_-12345678_-2.

Заключим его в квадратные скобки и получим следующий код:

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

Но здесь мы получаем непропорциональную черную рамку вокруг видео:

Чтобы его убрать, нужно изменить размер плеера под размер самого видео.Например, в нашем случае подошли следующие параметры:

У нас получилось видео без черных рамок, будет воспроизводиться прямо на странице

Таблицы

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

При работе с таблицами можно использовать 4 тега: noborder (делает границы таблицы невидимыми), nomargin (делает таблицу во всю ширину вики-страницы) nopadding (удаляет отступы в ячейках) и fixed (позволяет создавать таблицу из фиксированные размеры).Сколько ячеек вы укажете в строке, сколько столбцов будет в таблице.

Вот пример таблицы 2 × 2 без полей вверху и внизу текста внутри ячеек:

Первый столбец имеет ширину 200 пикселей, а второй — 300 пикселей.

Вот что из этого вышло:

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

Как сделать вики-меню

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

  1. Готовим обложку для меню. Вы можете сделать любую подходящую картинку и нанести на нее текст. Или вы можете нанять дизайнера, который нарисует вам красивые блоки и пуговицы. У нас будет 6-кнопочное меню. Для этого нам понадобится картинка, на которой будут обозначаться эти кнопки. Определимся с его размером.

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

  1. Разрежьте это изображение на 6 частей (часть для каждой кнопки). Это удобно сделать в Adobe Photoshop с помощью инструмента «Вырезка». Если не хотите заморачиваться, воспользуйтесь, например, онлайн-сервисом IMGonline (разрезает картинки на равные части). Все сделали в фотошопе.

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

Как вырезать картинку в фотошопе

Наше меню будет представлено в виде таблицы из 6 ячеек: трех строк и двух столбцов. Для этого мы разрезали картинку для меню на 6 равных частей размером 255 × 100 пикселей. Для каждой ячейки необходимо установить одинаковый размер.

  1. Создайте каркас для таблицы. Заходим в режим редактирования новой страницы и составляем таблицу. Открываем его тегом (| и сразу устанавливаем три важных параметра:
  • nopadding — разрешит касаться картинок
  • noborder — скрыть видимые границы таблицы
  • fixed — позволяет установить точный размер ячеек.

Устанавливаем фиксированную ширину ячеек — 255px 255px (дважды, потому что там тоже два столбца). Далее мы устанавливаем места для начала новых строк с помощью | — теги и новые ячейки (столбцы) с | … Закрываем таблицу тегом |) и получаем следующий скелет:

  1. Помещаем картинки в ячейки и ставим на них ссылки … По очереди открываем нужные части картинки в альбоме сообщества, копируем их id (photo-12345_12345), заключаем в двойные квадратные скобки, прописываем размеры 255x100px и тег nopadding для склейки картинок.После вертикальной полосы назначьте ссылку каждой кнопке. Получаем следующий код.

(| фиксированное отсутствие границ
| ~ 255px 255px
| —

| []
| —
| []
| []
| —
| []
| []
|}

  1. Готово! Нажимаем «Сохранить страницу» — и мы получаем удобное для сообщества меню.

Готовое групповое меню в настольной версии

Готовое групповое меню в мобильной версии

Если вы сделали меню для группы , то оно будет легко доступно, нажав на «Свежие новости» (кстати, эту страницу можно переименовать в «Меню» в режиме редактирования).

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

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

Как сделать пост со ссылкой на меню в паблик

Как закрепить меню сообщества

Новый редактор статей ВКонтакте и вики-разметки

Администрация ВКонтакте объявила о запуске редактора статей 22 декабря 2017 года и позиционирует его как инструмент для публикации лонгридов.

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

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

Так выглядит интерфейс нового редактора статей ВКонтакте

Что нужно помнить о вики-разметке

  • Стандартный метод создания вики-страниц кропотлив и не очень удобен для пользователя. Самый простой способ создать страницу — использовать приложение Mobivic, исходный код или Wiki Poster.
  • Меню сообщества нужно оформить в виде таблицы, чтобы оно выглядело аккуратно на мобильных устройствах.
  • При редактировании вики-страницы в стандартном интерфейсе не следует переключаться между режимом визуального редактирования и режимом разметки вики. Из-за этого может пойти расклад.

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

Шаг 1
Для начала заходим в нашу группу и в блоке «Свежие новости» (в данном случае я переименовал его в «Меню») нажимаем ссылку «Редактировать», которая появляется при наведении. Важный! Во-первых, у вас должна быть открытая группа, а не страница.Так как на Странице такого пункта просто нет. Во-вторых, в меню «Управление сообществом»> «Информация»> «Контент» должен быть выбран пункт «Публичный».

Шаг 2
На вкладке «Редактирование» напишите фразу [[теория веб-дизайна]], заключенную в двойные квадратные скобки. Затем нажимаем на кнопку «Сохранить страницу».

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

Step 4
Щелкните по этой ссылке и перейдите на созданную страницу с заголовком «Теория веб-дизайна». Затем нажмите ссылку «Наполнить содержанием». Далее редактируем текст как в обычном текстовом редакторе — вставляем картинки, тексты, видео и другие объекты. В этом случае наша созданная страница будет иметь URL-адрес вида https://vk.com/page-15865937_43819846.

Альтернативный способ создания внутренней страницы
Есть альтернативный способ создания страницы. В основном он подходит для публичных страниц (публичных страниц), так как описанный выше метод для них не подходит.Для этого мы будем использовать следующий код
http://vk.com/pages?oid=-XXX&p=Page_name
где вместо XXX подставим идентификатор нашей группы, а вместо текста «Page имя »напишем Меню. Теперь нам нужно узнать идентификатор группы. Как это сделать? Заходим на главную страницу группы и смотрим наши посты на стене — прямо под блоком «Добавить пост» будет написано «Все посты» — нажимаем на эту ссылку.

Заходим на страничку и видим урл такого типа https: // vk.com / wall-78320145? own = 1 , где в этом примере числа 78320145 и идентификатор группы. Подставляем наши данные в исходный код и получаем такую ​​запись: http://vk.com/pages?oid=-78320145&p=Menu (с вашими номерами!). Вставляем эту строку в адресную строку браузера и нажимаем Enter. Итак, мы создали новую страницу Вконтакте.

Групповое меню в контакте. Как создать динамическое меню ВКонтакте с эффектом навигации

5 голосов

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

В итоге получается что-то вроде этого сообщества. При нажатии на кнопку перехода действительно открывается дополнительная стильная страница.

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

1. Подготовка к работе. Основные инструменты

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

1.1. Photoshop

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

Если вам нужна нормальная группа, то у вас нет выбора, кроме как изучить Photoshop. Без качественных снимков никуда не уехать. Могу порекомендовать курс Зинаиды Лукьяновой.
… Быстро и не скучно, вы освоите новую профессию и даже сможете зарабатывать деньги, используя навыки дизайнера. Знаний хватит!

Итак, давайте продолжим. У тебя есть все необходимое? Тогда вы готовы двигаться дальше.

2.Работа в фотошопе или меню своими руками

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

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

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

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

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

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

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

Сделать больше категорий или расположить их в две колонки — не проблема. Если вы понимаете основную информацию, вы справитесь со всем остальным.

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

Убедитесь, что изображения сохранены в формате jpeg (самая верхняя категория справа). Затем нажмите «Сохранить».

Вот и все.

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

3. Макет в ВК для чайников

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

Ну осталось немного, верстка. Откройте «Список вики-страниц».

И добавить новый.

Дайте ему имя. В нашем случае меню.

И переходим в редактирование.

Первый шаг — добавить все части нашей картинки.

Погрузка.

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

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

Метки «center» указывают на то, что фотография и ее фрагменты расположены по центру. Я удалю их, чтобы вам было легче воспринимать информацию.

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

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

Чтобы снова объединить изображение, после размера поставьте точку с запятой и напишите тег nopadding (; nopadding).

Это будет выглядеть так.

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

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

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

Чтобы этого не случилось, вам понадобится еще один тег. Нет ссылки. Не забывайте точку с запятой.

Переход будет не только на первом изображении, но вы можете подставить свои URL-адреса для остальных.

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

Так выглядит наше меню.

А вот и заветная ссылка.

4. Завершающий этап регистрации

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

Если не знаете, что у вас есть, то перейдите в раздел управления из категории «Мои группы».

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

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

5. Видеоинструкция

Смотрите видео, все основные работы мы уже сделали, осталось немного.

6. Альтернативный метод для чайников за 100 руб.

Если у вас возникли трудности с созданием меню самостоятельно, смело переходите на этот сервис — VkMenu.RU

, где по скромной цене 100 руб. (сегодня такие), меню можно сделать через онлайн конструктор.

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

На этом прощаюсь, но ненадолго. Отдохните и переходите к следующей части.

Подписаться на мою группу Вконтакте

… Приятной работы и до скорой встречи!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример показан на скриншоте.
Щелкните «Сохранить страницу».

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

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

Какой размер группового меню Вконтакте?

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

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

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

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

Как вставить картинку в описание группы Вконтакте?

Элементарно. Все, что вам нужно сделать, это взять подходящее изображение нужного размера и добавить его на стену группы от имени сообщества.

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

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

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

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

  1. Первое, что нам нужно сделать, это зайти в настройки группы и активировать раздел «Материалы». Значение должно быть установлено на «ограничено» или «открыто».
  2. Далее готовим картинку для группового меню Вконтакте. Если не хотите возиться, вы можете оформить меню в текстовом виде, но оно будет менее привлекательным.В качестве примера возьмем следующую картинку, которую можно увидеть ниже.
  3. Кстати, этот снимок был создан в фотошопе менее чем за полчаса. В другом редакторе сделать это будет сложнее. Поэтому рекомендую вам ознакомиться с курсом, о котором я писал выше. После того, как рисунок выделен, его нужно разрезать на части и сохранить на компьютере.
  4. Изображение было вырезано с помощью инструмента Photoshop «Вырезать», а затем сохранено. Каждая из выделенных частей стала отдельным изображением.

  5. Затем нужно создать альбом для фотографий на личной странице Вконтакте. Этот альбом даже можно сделать полностью закрытым. После создания альбома заполните его всеми частями нашего изображения.
  6. Затем перейдите в свою группу и в разделе последних новостей нажмите кнопку «Редактировать».
  7. После этого откроется страница, которой вы можете дать произвольное имя и написать следующий текст в квадратных скобках. Затем нажмите кнопку «Сохранить страницу».
  8. Затем вернитесь на страницу своей группы или обновите ее (если она уже открыта).Щелкните ссылку «Открыть меню». После этого появится дополнительная ссылка на созданную нами страницу. Нажмите здесь.
  9. Далее откроется эта страница. Поскольку он только что был создан, в нем ничего нет и нам нужно его заполнить. Щелкните ссылку «Наполнить содержанием».
  10. Далее мы пишем следующий код, как на картинке ниже. В нем вам нужно указать номер фотографии (для этого вы можете открыть фотографию, загруженную в свой альбом, и скопировать ее адрес типа «photo15535684_427525646»), размер фотографии (вы можете найти его в свойствах фото), а также указать ссылку, на которую ведет данное фото.
  11. Чтобы убедиться, что мы все сделали правильно, нажмите кнопку «Предварительный просмотр». Под кодом появится сформированное меню группы Вконтакте. Если все отображается правильно, то нажимаем на кнопку «Сохранить», а если нет, то ищем и исправляем ошибки.
  12. Теперь нам нужна картинка, которая станет заставкой нашего меню и будет в описании нашей группы. Размеры картинки для описания группы Вконтакте мы писали выше, но если кто забыл — в ширину от 510 пикселей, а в высоту равную ширине или меньше.Можно использовать большие размеры, но в тех же пропорциях.
  13. Затем открываем нашу созданную страницу с составленным меню группы Вконтакте и копируем ссылку на нее. Чтобы правильно скопировать ссылку, нужно нажать «Редактировать страницу». После этого появится написанный ранее код, и вы сможете скопировать адрес из строки браузера, которая должна выглядеть так: «https://vk.com/page-119301077_51764020».
  14. Далее заходим в нашу группу и вставляем скопированный адрес меню в форму для отправки сообщений.А потом фото, которое будет заставкой. После этого нажмите кнопку «Отправить».
  15. Теперь остается закрепить эту запись. Сделайте это так же, как я сделал на картинке ниже.
  16. Вот так будет выглядеть наше меню для группы Вконтакте. Если хотите посмотреть лично, то вот

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

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

Итак, все начинается в фотошопе, мы создаем картинку того меню, которое вам нужно. По сути, это какой-то фон с названиями заголовков. Друг просто попросил меня сделать красивую группу для его компании aero-Stomadent, он занимается промышленной вентиляцией, так что я этим займусь.

Нашла чудесный фон природы Аляски, собственно говоря, все сделаю на нем.

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

Справа сделайте в этой части аватарку группы в будущем.

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

Желательно нарезать примерно так.

После нарезки сохраните файл, не только через «Сохранить для Интернета и устройств …» (или Alt + Shift + Ctrl + S), он создаст папочку со всеми уже нарезанными файлами.

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

Как создать вики-страницу Вконтакте?

Откройте новую вкладку браузера и вставьте туда следующую ссылку: http: // vk.ru / pages? oid = -XXX & p = Page_name, где XXX — идентификатор вашей группы. Например, у меня было так.
http://vk.com/pages?oid=-

  • 542&p=menu

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

    Но между картинками есть пробелы, чтобы убрать пробелы — мы входим в режим вики-разметки (это кавычка вверху в правом углу) вводим следующий тег «option; nopadding;» перед размерами фото.Например []

    И все вместе получилось.

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

    Нажмите «Сохранить», посмотрите, что произошло, у меня все сошлось, если щелкнуть по ссылкам «https://vk.com/page-

  • 542_49969122″

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

    А я вобще пост. Вставляю ссылку в меню и добавляю только что сделанное фото.

    Учитывая, что это меню не в группе, а на странице ВКонтакте (паблик), я решил показать вам, как все это делается! Уже давно меня теребят вопросами: как сделать меню публичным, как сделать меню открытым, как исправить и т.д. Вот вам инструкция!

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

    Открытое меню? Проще простого!

    Просмотрите статьи еще раз: и теперь эти знания нам пригодятся!

    3 шага к красивому публичному меню!

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

    Шаг 1: создайте внутреннюю страницу меню

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

    Вариант 1: (нормальный)

    http: // vk.ru / pages? oid = — XXX & p = Имя_страницы

    , где XXX — идентификатор вашей публичной страницы,

    , а «Имя_страницы» — любое слово, которое будет использоваться для наименования страницы

    Вариант 2: (облегченный, но)

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

    Это вики-код меню

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

    А это уже готовая страница меню

    Шаг 2: создайте пост на стене

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

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

    Итак, теперь мы должны удалить ссылку из «тела» поста (прикрепленная страница останется) и добавить к посту изображение , которое увидят подписчики. Хитрость в том, что если ссылка и изображение присутствуют в одной записи, то при нажатии на изображение по ссылке ! Все гениальное просто!
    Картинка может частично или полностью повторять само меню, здесь вам решать.Если вы заказываете меню для паблика, то вам также понадобится баннер, то есть картинка, которая будет висеть в клипе. Вот что мы получаем, когда публикуем пост:

    Картинка повторяет меню и привлекает внимание посетителей страницы

    Шаг # 3: исправить пост

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

    Нажмите на эту кнопку и обновите страницу. Вуаля, готово! Наслаждаемся красивым меню!

    vk.com/frilkacom

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

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

    У меня все есть! Делитесь статьей с друзьями, добавляйте в избранное и следите за обновлениями блога, чтобы не пропустить новые интересные статьи!

    Как создать красивую группу в вк.Дизайн группы ВКонтакте: полное руководство по дизайну

    Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: как привлечь внимание подписчиков и полюбить их бренд».

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

    Размеры товара

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

    Разбираем каждый элемент индивидуально:

    Изготовление шапки

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

    Вот несколько вариантов, которые можно разместить в шапке:

    Аватар

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

    Хорошая миниатюра аватара соответствует следующим критериям:

    1. Текст на нем крупный и хорошо виден, легко читаемый.
    2. Изображение и текст понятные, не пытайтесь в аватарку слишком много впихнуть.
    3. Лучше использовать оригинальный образ, сделанный вами, но не скачанный.
    4. Используйте яркие цвета, чтобы выделиться на фоне остальных изображений, умело используйте контраст.
    5. Аватарки, выполненные в стиле минимализм, смотрятся эффектно: минимум текста и лишних деталей, максимум красоты и простоты.
    6. Включите воображение, чтобы привлечь и заинтересовать пользователя — черный квадрат, горящий значок сообщения и т. Д.

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

    Требования к аватарам:

    1. Качество.Для этого используйте изображения в 2-3 раза больше необходимого размера.
    2. Единый стиль. Все элементы должны сочетаться по цветовой гамме и общему стилю.
    3. Разнообразие. Лучше, если эскиз и сам аватар будут разными изображениями.

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

    Виджеты

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

    Картинки для постов

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

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

    Для создания качественных и привлекательных картинок, которые помогут сделать красивый дизайн для группы Kkontakte, рекомендуется использовать Photoshop. Если вы являетесь владельцем данной программы, воспользуйтесь одним из упрощенных аналогов программы: Fotor.com или Canva.com.

    Редактирование статей

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

    О том, как работать с редактором статей в ВК, мы писали в другой статье.

    Разметка вики

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

    Давайте разберемся, как создать вики-страницу: откройте браузер и вставьте ее в адресную строку: http: // vk.com / pages? oid = 111 & p = Created_page, где «111» — это идентификатор группы, а «Created_page» — это название статьи со словами, написанными через символы подчеркивания. Часто мы переключаемся в режим кода, поэтому сразу же посмотрим, как это сделать:

    Текст форматируется в простом и понятном редакторе, похожем на слово. Но в нем нет возможности менять шрифты, вместо них используются теги: h2, h3, h4, жирный и курсив.

    При необходимости вы можете вставить ссылку в текст через шаблон: [ссылка на статью | текст ссылки].

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

    Есть более сложные версии:

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

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

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

    Осталось только прикрутить столб.

    Вместо вывода

    Несколько советов по созданию группы ВКонтакте:

    1. Когда вы разрабатываете дизайн (неважно, используете ли вы старую версию или думаете, как оформить группу Вконтакте в новом дизайне), всегда думайте, как он будет выглядеть в мобильной версии, будь то все понятно и удобно.
    2. Не бойтесь экспериментировать и разрабатывать решения, которые не используют конкуренты. Это только плюс.
    3. Абсолютно ровное и симметричное меню иногда выглядит утомительно, поэтому не зацикливайтесь на идеальных формах.

    Надеемся, этот материал о том, как сделать дизайн группы Вконтакте, будет вам полезен. Спасибо, подписчики!

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

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

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

    Step 1
    Создайте новый документ в Photoshop размером примерно 900×700 пикселей, залейте его белым цветом. Теперь нам нужно вырезать в слое два окна, через которые будет просматриваться сам графический дизайн. Сначала выделите прямоугольник размером 200×500 пикселей (аватар) и нажмите Del. Затем выберите прямоугольник размером 510×352 (совместите его с нижней линией аватара и сделайте расстояние между фигурами 50 пикселей), а также нажмите Del.
    После очередного обновления дизайна ВКонтакте (31.10.2016) размеры баннера стали 510×307 (а не 510×352).

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

    Step 3
    После этого дополняем картинку различными элементами — логотипом, текстовыми надписями и кнопкой, предлагающей щелкнуть по меню. Затем сохраняем на компьютер две отдельные картинки — одну аватарку (справа), второе меню с кнопкой клика (слева).

    Step 4
    Также в Photoshop мы создаем графическое меню, состоящее из нескольких пунктов.Ширина этого меню должна составлять 600 пикселей, высота — по вашему желанию, в зависимости от количества пунктов. В помощь воспользуйтесь уроком «».

    Step 5
    Разрезаем наше меню на несколько горизонтальных полос в соответствии с количеством пунктов меню. Сохранить как отдельные файлы.

    Step 6
    Заходим в нашу группу Вконтакте, нажимаем на «Управление сообществом» (при нажатии на три точки под аватаркой открывается выпадающее меню) и проверяем правильность настроек. Группа должна быть открытой, и материалы тоже открытыми.

    Шаг 7
    Теперь загрузите новый аватар. Переместите мышь на место аватара и выберите «Обновить фото» во всплывающем меню. Мы загружаем правую фотографию из шага 3, растягиваем область выделения вверх и вниз до краев изображения, нажимаем «Сохранить» и затем выбираем область для круглой миниатюры.

    Шаг 8
    Теперь вам нужно создать внутреннюю страницу. Как это сделать, подробно рассказано в уроке. Другой альтернативный способ создания внутренней страницы описан в уроке «» на шагах 5 и 6.

    Шаг 9
    После того, как мы создали внутреннюю страницу, можно переходить к ней. Для этого щелкните раскрывающееся меню группы (по умолчанию этот пункт называется «Свежие новости» — я переименовал его в «Меню») и щелкните там ссылку «Меню». После этого мы перейдем на только что созданную пустую страницу.

    Step 10
    Теперь нам нужно создать графическое меню из пяти пунктов. Для этого мы загружаем наши пять фотографий из Шага 5 в групповой альбом. Щелкаем по иконке камеры и скачиваем нарезанные картинки с компьютера.Картинки будут где-то храниться на серверах ВКонтакте со ссылкой на группу, поэтому создавать отдельный альбом для нарезанных картинок не нужно. Вам необходимо загрузить изображения в вики-макеты.

    Шаг 11
    Теперь в макете вики создадим графическое меню. Очень важно создать его в макете вики (значок в правом верхнем углу двух треугольных скобок), а не в режиме визуального редактирования. См. Шаг 4 и Шаг 5 урока «» для получения дополнительной информации о создании кода в вики-разметке.Также есть шаблон кода для вставки. Если все сделано правильно, у вас должно получиться готовое графическое меню, как на рисунке ниже.

    Шаг 12
    Теперь возвращаемся на главную страницу группы, берем url-адрес нашей внутренней страницы (он должен быть такого типа https://vk.com/page-78320145_49821289) и вставляем в окно, где находится новость. создано. Окно должно автоматически присоединиться со ссылкой на эту самую внутреннюю страницу. После этого перемещаем курсор на метку «Прикрепить» и прикрепляем к записи фотографию, а именно нашу картинку слева из шага 3.После этого стираем строчку из URL внутренней страницы, оставляя пустое место. Важный! На этом шаге установите флажок (если такие права есть, в основном для групп с открытой стеной) в чекбоксе «От имени группы». Если этот флажок не установлен, запись не может быть исправлена. В конце нажмите «Отправить».

    Шаг 13
    Наведите курсор на три точки рядом с заголовком сообщения и выберите пункт «Закрепить» в раскрывающемся списке. Соответственно, при необходимости новости тоже откладываются.

    Step 14
    Есть один нюанс. Иногда после того, как вы открепите новость, она уходит далеко вниз по ленте в соответствии с датой создания, и ее бывает сложно найти снова. Поэтому лучше сразу записать где-нибудь url закрепленной новости. Для этого наведите курсор на время создания новости и нажмите на ссылку.

    Step 15
    Сейчас обновляем главную страницу группы. Наше графическое меню будет вверху рядом с аватаркой.И когда вы нажимаете на картинку, мы попадаем на внутреннюю страницу с меню из пяти пунктов.

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

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

    С чего начать работу над дизайном?

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

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

    Определите сильные и слабые стороны вашего предложения по сравнению с предложениями на рынке. Запишите 3-5 преимуществ вашего бизнеса. Это может быть: бесплатная доставка, гарантия 5 лет, опытные специалисты, широкий ассортимент и т. Д.

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

    Люди не хотят покупать товар / услугу — они хотят решение своих проблем.

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

    Важные элементы в дизайне групп ВКонтакте

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

    Аватар

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

    Используйте только высококачественные изображения и забудьте о картинках из бесплатных фотостоков. Искать изображения для эффективного оформления группы ВКонтакте нужно на сайтах pinterest.com, freepik.com, flaticon.com или, на крайний случай, google.ru. Но лучше выбирать изображения на платных фотостоках. Вводите поисковые запросы только на английском языке. Если у вас возникли трудности с английским, то смело используйте переводчик Google.

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

    Тема данной статьи — новый дизайн ВКонтакте. Снова изменилось, теперь в группе можно установить горизонтальное покрытие. Оформлять свое сообщество ВК с такой шапкой намного интереснее. Откровенно говоря, знания фотошопа здесь не требуются. А сделать красивую картинку без специальных навыков можно даже в PowerPoint, Fotor, Canva, Pixlr Editor.

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

    Скачать новую обложку

    А теперь разберемся, как включить возможность установки горизонтального заголовка. Нажимаем на кнопку «Управление».

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

    .

    Чем интересен новый дизайн ВКонтакте?

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

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

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

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

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

    Как сделать обложку группы ВКонтакте онлайн

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

    П.С. Надеюсь, эта информация будет вам полезна.

    P.S.S. Включайте свое творчество и удачи во все ваши начинания!


    В этой статье мы пошагово рассмотрим, как правильно создать, настроить и эффективно спроектировать сообщество ВКонтакте

    Здание сообщества

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

    Представление и тема сообщества

    Для начала вам необходимо определить тип сообщества в зависимости от ваших целей и выбрать тему сообщества.

    Групповой дизайн

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

    На обложке можно разместить:

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

    Обложка в сообществе МТС

    Обложка в сообществе Тинькофф Банка

    Обложка в сообществе HeadShot
    Размеры изображений для дизайнерского сообщества ВКонтакте.
    Размер обложки для группы ВКонтакте 1590x400px
    Размер эскиза аватара — 200 пикселей по кругу

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

    Сообщество Описание

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

    Lifehack: Для того, чтобы описание сообщества было более подробным (с фотографиями, ссылками и красивым макетом), нужно поместить вики-пост в фиксированную запись, в которой будет яркая картинка и призыв к действию.

    Примеры сообщений вики:

    Групповой аватар

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

      1. Текст
        Если вы размещаете текст на эскизе аватара, важно, чтобы он был большим и не выходил за пределы аватара.
      2. Понимание
        На аватаре нужно разместить изображение, на котором будет понятно, что изображено.
      3. Minimalism
        Чтобы ваш аватар выглядел актуальным, вы можете сделать его в стиле минимализма: меньше слов и лишних элементов, которые практически не имеют смысла.Миниатюра аватара должна быть максимально простой и удобочитаемой.
      4. Чтобы привлечь внимание
        Чтобы эскиз аватара привлек внимание. Расставить его нужно так, чтобы он не был слишком белым и скучным, иначе он потеряется на фоне более красочных аватарок конкурентов.

    Что разместить на миниатюре аватара?

    Рассмотрите возможность использования миниатюрного изображения аватара как способа привлечь последователей в сообщество.

    Настройки сообщества

    Перейдя на вкладку «Управление сообществом», вы можете найти короткий адрес страницы и предоставить дополнительную информацию.

    Далее во вкладке «ссылки» укажите ссылки на вашу страницу в других социальных сетях и ссылку на ваш сайт.

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

    Включите продукты, если ваше сообщество продает товары или услуги.

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

    Вики-меню — красивое и информативное

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

    Примеры вики-меню:

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

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

    Многочисленные просьбы моих постоянных читателей и просто любознательных пользователей возымели действие. Наконец-то создал урок, на котором мы научимся делать динамическое меню Вконтакте с эффектом нажатых кнопок! По аналогии с обычными интернет-сайтами, когда посещаемая ссылка помечается особым образом (нажатая кнопка, подчеркивание и т. Д.) — мы создадим такую ​​же структуру Вконтакте, используя созданные страницы и графический дизайн.Для начала сделаем графические шаблоны в Photoshop — создадим заголовок меню и кнопки двух типов. Затем мы создадим несколько страниц Вконтакте, согласно пунктам нашего меню. И напоследок сделаем хитрый трюк, который, по сути, создаст иллюзию перехода по ссылке. Урок достаточно сложный и подходит для тех, кто чувствует себя уверенно в функционале Вконтакте. Все манипуляции буду проделывать на примере вашей группы Вконтакте, где этот эффект реализован вживую.Итак, приступим!

    Шаг 1. Создайте заголовок меню в Photoshop.
    Создайте документ шириной 600 пикселей в Photoshop. Высота может быть разной, на ваше усмотрение. В шапке можно разместить фото любого типа, коллаж, информационный баннер и другие графические изображения. В данном случае я использовал этот рекламный баннер размером 600×172 пикселей.

    Шаг 2. Создайте панель навигации в Photoshop
    Теперь нам нужно создать панель навигации. В этом примере я использовал только текст в качестве кнопок.Но на свое усмотрение вы можете создать цветные кнопки и написать на них текст. Мы делаем это — создаем в фотошопе прямоугольник 600х56 пикселей и в данном случае заливаем его белым цветом. Затем пишем пункты меню в строку — где-то порядка 5-6 пунктов, не более. Больше очков будет выглядеть сжатым.

    Шаг 3. Создайте панель навигации в нажатом состоянии в Photoshop
    Теперь нам нужно создать активные ссылки, как если бы они были нажаты. Я использовал обычное подчеркивание, но вы можете использовать другой текст или цвет фона, чтобы отметить посещенную ссылку.

    Шаг 4. Вырежьте готовые изображения.
    На этом этапе нам нужно вырезать изображения из Шага 2 и Шага 3. У нас должно быть два набора из пяти кнопок — один без подчеркивания, другой с подчеркнутым. Кнопки для каждого отдельного элемента (с подчеркиванием и без него) должны быть одного размера. На картинке ниже показан весь наш графический дизайн — десять кнопок и один заголовок меню.

    Шаг 5. Создайте страницу меню Вконтакте
    Теперь зайдите во ВКонтакте. Наша задача — создать отдельную страницу под названием «Меню».Для этого мы будем использовать следующий код
    http://vk.com/pages?oid=-XXX&p=Page_name
    где вместо XXX мы подставим идентификатор нашей группы, а вместо текста «Page имя »напишем Меню. Теперь нам нужно узнать идентификатор группы. Как это сделать? Заходим на главную страницу группы и смотрим наши посты на стене — прямо под блоком «Добавить пост» будет написано «Все посты» — нажимаем на эту ссылку.

    Шаг 6. Определяем id группы и редактируем код
    Переходим на страницу и видим url этого типа https: // vk.com / wall-78320145? own = 1 , где числа 78320145 в этом примере — это идентификатор группы. Подставляем свои данные в исходный код и получаем запись такого рода:
    http://vk.com/pages?oid=-78320145&p=Menu (с вашими номерами!). Вставляем эту строку в адресную строку браузера и нажимаем Enter. Итак, мы создали новую страницу Вконтакте и изначально она выглядит так.

    Шаг 7. Создаем Вконтакте остальные навигационные страницы
    Аналогичным образом создаем еще четыре навигационные страницы: Цены, Как заказать, Техническое задание и Вопросы.То есть еще четыре раза копируем соответствующий код в адресную строку браузера (с вашими номерами id в примере под моими номерами):

    http://vk.com/pages?oid=-78320145&p=Prices

    http://vk.com/pages?oid=-78320145&p=How_order

    http://vk.com/pages?oid=-78320145&p= Условия обращения

    http: // vk.com/pages?oid=-78320145&p=Questions
    Обратите внимание, что в заголовке страницы из двух слов (Как заказать) пробел между словами заменяется подчеркиванием How_order.Теперь у нас есть пять готовых страниц для каждого пункта меню. Мы не создали страницу портфолио, потому что она находится на странице меню

    Шаг 8. Загрузите фотографии на первую страницу меню.
    На все еще пустой странице (см. Шаг 6) Menu щелкните ссылку Edit или ссылку Fill with content. После этого видим панель редактирования. Здесь нам нужно нажать на значок камеры с функцией Загрузить фото. Важный! Убедитесь, что у вас есть режим разметки вики. Переключение режимов контролируется значком у правого края страницы.

    Шаг 9. Результат после загрузки изображений
    Мы загружаем наши изображения, которые мы создали на шагах 1 и 2. После загрузки мы видим код, как на картинке ниже, а само меню выглядит так. После каждого изменения кода не забывайте нажимать кнопку «Сохранить страницу», а затем щелкать предварительный просмотр, чтобы просмотреть результат.

    Шаг 10. Редактирование кода изображения
    Теперь наша задача заменить все свойства noborder на свойство nopadding. И проставьте реальные размеры для первой картинки, так как Вконтакте при загрузке сжал картинку до 400 пикселей.После всех изменений у нас должен получиться такой код и такое меню.

    Шаг 11. Размещение ссылок на картинки
    Теперь нам нужно добавить ссылки для каждого изображения. Ссылка должна быть вставлена ​​после nopadding | вместо пробела перед закрывающими круглыми скобками. Для первого изображения (заголовок меню из шага 1) вы можете указать ссылку на главную страницу группы или использовать свойство nolink (поставить после; после отсутствия заполнения без пробелов). Для второго изображения вставьте адрес страницы формата page-78320145_49821289 … То есть полный url картинки https://vk.com/page-78320145_49821289 , можно первую часть с доменом опустить. Но для ссылок на внешние сайты url-ссылки должны быть указаны полностью.

    Шаг 12. Скопируйте код на остальные страницы навигации.
    На этом довольно простом шаге мы копируем последний код с предыдущего шага и вставляем его на остальные созданные страницы — Цены, Как сделать заказ, Техническое задание. и вопросы. Мы находимся на странице, нажимаем Edit или Fill with content (мы находимся в режиме wiki-разметки), вставляем код и нажимаем Save.А потом тоже на следующей странице. То есть теперь у нас есть пять страниц, на каждой из которых меню выглядит точно так же. Но с другой стороны, вы уже можете перемещаться по меню — когда вы нажимаете ссылку, например, Цены, мы переходим на страницу Цены и т. Д.

    Шаг 13. Создание эффекта нажатой кнопки
    Теперь нам нужно изменить по одному рисунку на каждой из пяти страниц (вместо кнопки без подчеркивания мы будем использовать кнопку с подчеркиванием). Например, на первой странице меню мы загружаем новое изображение, а затем заменяем адрес старого изображения в коде новым (подчеркнуто красным).Затем перейдите на страницу «Цены», загрузите картинку с подчеркнутыми ценами и измените ее в коде на адрес новой картинки. Затем мы переходим на страницы Как заказать, Техническое задание и Вопросы и проделываем ту же операцию таким же образом.

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

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

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

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

    Факторы ухода гостей:

    • аватар;
    • описание;
    • титул;
    • красивое и практичное меню;
    • красочности;
    • содержания.

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

    Какое должно быть меню

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

    Три основные цели групп:

      продажи

    1. ;
    2. увеличен трафик;
    3. рост активных посетителей.

    Для продаж групповая навигация заменяет витрину магазина.

    Здесь должны быть самые важные кнопки:

    Каталог

    1. ;
    2. Цена

    3. ;
    4. доставка;
    5. рекламных предложений;
    6. отзывов.

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

    Примерный вариант набора кнопок:

    видео: меню для публики

    Работаем с фотошопом

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

    Алгоритм действий:

    Это делается с помощью инструмента «Прямоугольная область»:

    Работа с графикой:

    Должно получиться примерно так:

    Сохраните прямоугольник справа как отдельное изображение, установив размер 200×500 пикселей. Это готовый аватар, загружаемый через кнопку «Загрузить фото» в группе ВК.

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

    Сначала нужно сделать разметку:

    Создать фрагменты:

    Сохранение изображений:

    Техническая часть

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

    Важно! Заполнение меню отличается от обычной загрузки фотографий или картинок.

    Все в порядке:

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

    1. найдите нужную запись;
    2. щелкните по нему левой кнопкой мыши;
    3. скопируйте URL-адрес в адресную строку.
    • перейти к источнику, куда нужно отправить посетителя;
    • скопируйте требуемый адрес.

    Сохраните изменения, нажав соответствующую кнопку внизу окна.

    Внимание! Изменения могут появиться не сразу. Рекомендуется выйти из своего основного профиля, а затем снова войти в группу.

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

    Разметка

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


    Этот инструмент позволяет создавать:

    • эффектов;
    • необычных меню;
    • тарелок;
    • элементов навигации;
    • Текст в формате

    • .

    Одним словом, такая разметка позволяет создать мини-сайт ВКонтакте. Это здорово, особенно для продаж и набора подписчиков.

    Этот дизайн интуитивно заставляет посетителя остаться, нажав на кнопку. То есть затягивает и побуждает к действию — а это как раз то, что нужно.

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

    Видео: меню с поиском по категории

    Нюансы создания

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

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

    Как это: []

    Основные теги представлены в таблице ниже:

    Фото: теги, используемые для разметки

    Работа с картинками

    Где опции заменены на:

    • noborder — удаление рамки вокруг изображения;
    • nopadding — удаление пробелов между изображениями;
    • plain — вставить ссылку на картинку.Оформляется в виде текста, без графики;
    • nolink — удаление ссылки на картинку;
    • поле — открытие изображения в окне;
    • NNNxYYYpx или NNNpx — устанавливает размер фотографии в пикселях.

    Создание таблицы

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

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

    • {|
      символ начала таблицы, без него не может быть таблицы. Всегда использовал;
    • | +
      отвечает за центрирование имени таблицы. Ставится после символов начала таблицы. Используется по желанию;
    • |
      обозначает начало новой строки и ячейки;
    • |
      символ, делающий ячейку прозрачной;
    • !
      делает ячейку темнее.При его отсутствии в обязательном порядке применять предыдущий знак;
    • |}
      означает конец таблицы. Однако необязательный символ используется для предотвращения возникновения ошибки.

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

    Особенности разметки

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

    Во избежание основных ошибок следует ознакомиться с основными:

    1. нужно быть осторожным при изменении размера картинки — если он будет меньше 131 пикселя, его качество значительно ухудшится;
    2. ширина изображения не должна превышать 610 пикселей;
    3. запрещается размещать более 17 незакрытых тегов на одной вики-странице;
    4. при изменении ширины картинки ее высота изменяется автоматически и пропорционально;
    5. список внутри таблицы должен быть создан с использованием тега
      ;
    6. в одной строке разметки должно быть не более 8 пунктов списка.

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

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

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

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

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

    Типы меню навигации:

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

    Одностраничное меню подходит для небольших интернет-магазинов, фотографов, тренеров и мастеров красоты.

    Многостраничное меню

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

    Многостраничное меню — главная страница вики

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

    Многостраничное меню — дополнительная страница вики

    Вики-лендинг ВКонтакте

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

    • Описание компании и ее деятельности
    • Категории услуг или товаров
    • Отзывы клиентов посредством графического дизайна
    • Видеозаписи и промо-ролики
    • Преимущества работы с вами
    • Акции и специальные предложения
    • Описание услуги или товары
    • Популярные статьи в группе
    • Контакты для связи
    • Активная карта с адресом компании
    • Ответы на часто задаваемые вопросы

    Вики-лендинг — лучший выбор для крупных сервисных компаний, узконаправленных интернет-магазинов и автобусов

    Мы отвечаем на часто задаваемые вопросы о вики-меню:

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

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

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

    Для этого вам потребуются навыки работы с графическими редакторами, такими как Adobe Photoshop (формат psd), Adobe Illustrator (формат ai или eps) или CorelDRAW (формат cdr).Каждая из этих программ отлично справится с этой задачей. Создайте новый документ с размерами 607 пикселей (мы рекомендуем создать документ 608 пикселей) и шириной и установите необходимую длину меню (высоту документа). Теперь можно приступить к проектированию. В Интернете вы найдете множество видеороликов о том, как самому создать меню ВКонтакте, а если вы хотите сделать красивый, профессиональный дизайн, лучше обратиться к опытному дизайнеру.

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

    Чем отличается меню для паблика от группы ВКонтакте?

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

    Для опытного дизайнера создать меню ВКонтакте не проблема!

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

    Примеры красивого оформления меню

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

    Заказать дизайн группы ВКонтакте — дизайнер Ирина Филипенко

    Заказать дизайн меню для группы ВК

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

    И снова рад вас приветствовать!

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

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

    Вот что я сделал.

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

    Итак. Вот основные шаги:

    • Продумайте главное меню
    • Выбрать изображение
    • Фотошоп (без фотошопа как всегда никуда)
    • Резка изображения
    • Залить изображение в альбом контактов

    Для активации Recent Entries (для вашего будущего меню) нужно зайти в управление сообществом и включить пункт — «Материалы»

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

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

    В моем примере я использовал фон девушки и расположил 3 кнопки слева от нее. У каждой кнопки было собственное название.

    Мое меню состояло из следующих пунктов:

    Чтобы встроить готовое изображение в контакт, необходимо сначала его вырезать.Для этого воспользуйтесь инструментом «Вырезание» в Photoshop. Думаю, с этим не возникнет сложностей. Там все просто … На всякий случай сделал фото

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

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

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

    Тег «nopadding» удаляет пробелы между изображениями, то есть помогает «закрепить» их близко друг к другу.

    В результате добавления тега мы получили:

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

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

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

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

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

    И на сегодня все.До скорого!

      Здравствуйте, мои любимые!

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

      Начнем с того, что сегодня есть два пункта меню:

      Вариант 1: Меню закрытой группы

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

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

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

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

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

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

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

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

      PSD шаблон группового меню

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

      Размеры аватара: 200 x 332 пикселей

      Размеры центрального изображения: 395 x 282 пикселей

      Шаг 1.

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

      Шаг 2.

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

      Шаг 3.

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

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

      Шаг 4.

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

      Первые цифры 42211349 — это идентификатор вашей группы

      Вторые цифры 47355854 — это идентификатор страницы

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

      https://vk.com/pages?oid=-хххххххх&p=pagename
      где
      xxxxxxxxx — id вашей группы
      pagename — имя вашей страницы

      Шаг 5.

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

      Шаг 6.

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

      Шаг 7.

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

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

      Шаг 8.

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

      ИТОГО.

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

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

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

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

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

    Mail.ru Group переименовалась в

    ВКонтакте

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

    «А аналитики рынка и профессионалы знают нас как Mail.ru Group, связь между нашими проектами не всегда была очевидна для пользователей », — объясняет группа, и« пора это изменить ».

    В отличие от Mail.ru Group, этот новый единый бренд «будет использоваться не только на корпоративном уровне, но и в наших продуктах».

    «Мы провели множество исследований и экспериментов и увидели, что бренд VK положительно влияет на желание людей использовать практически любой новый продукт: например, после того, как мы переименовали Worki в VK Jobs, узнаваемость сервиса выросла на 37%, и намерение использовать его на 50% », — отметила Анна Артамонова, вице-президент по экосистемным продуктам.

    Постепенный переход

    В рамках перехода, который «займет время», некоторые услуги группы уже получили или получат префикс VK — например, «Boom» переименован в «VK Music», «Lovina» — на «VK Dating», или «Юла» в «Объявления ВКонтакте».

    Эта служба C2C «будет представлена ​​как отдельное приложение и веб-сайт, а также как раздел во ВКонтакте, [что] расширит аудиторию Youla и полностью интегрирует социальную коммерцию в продукт.”

    Даже некоторые сервисы B2B будут переименованы «в ближайшем будущем», например, VK Cloud Solutions.

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

    Однако в этом ребрендинге есть заметные исключения:

    • Сама социальная сеть «ВКонтакте» (которая до сих пор называлась «ВК») сохранит свой товарный бренд.
    • Почтовый сервис Mail.ru и социальная сеть Одноклассники (ОК), которые являются лидерами в своих сегментах, сохранят свои узнаваемые бренды, хотя они также «станут неотъемлемой частью экосистемы ВКонтакте и будут связаны с ней через единые технологии, коммуникации и HR-бренд.»
    • Международный игровой бренд группы My.Games не изменится; однако есть «планы по созданию платформы« VK Games », тесно интегрированной с социальными сетями и ориентированной на российскую аудиторию».
    • Не изменятся и бренды СП O2O (совладельцем Сбер), включая CitiMobil и Delivery Club.

    Что касается потенциального переименования активов, приобретенных группой в будущем, решения будут «принимать бренд-команда на основе аналитики и исследований.”

    От «трэш-холдинга» к ВК-центрической компании

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

    «Было бы стратегически правильным для нас взять под свой контроль социальную сеть или, что еще лучше, приобрести все ее акции», — заявил тогда генеральный директор группы Дмитрий Гришин.

    Ему отказал основатель Вконтакте Павел Дуров, который сказал: «Мы исключаем и считаем утопией полную интеграцию Вконтакте в Mail.ru Group».

    Enfantrible русского Интернета дошел до того, что обвинил Mail.ru Group в «массовом взяточничестве» и назвал его «мусорным холдингом».

    Дуров покинул Россию в 2014 году вскоре после того, как Mail.ru Group окончательно взяла под свой контроль его детище.

    «ВКонтакте» (российский Facebook) запускает встроенную службу потоковой передачи музыки — Billboard

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

    Встроенный музыкальный сервис позволяет пользователям выбирать между моделями на основе подписки и с рекламой, предоставляя им доступ к трекам, лицензированным Universal Music Group, Warner Music Group, Sony Music Entertainment, Merlin Network и местными лейблами.

    «Музыка — важная часть жизни пользователей ВКонтакте», — сказал Андрей Рогозов, , управляющий директор ВКонтакте, в пресс-релизе. «ВКонтакте объединяет людей с разными музыкальными вкусами, давая им возможность общаться, создавать тематические группы и без ограничений распространять любимую музыку.«

    Ежемесячная абонентская плата в размере 149 рублей (2,6 доллара США) дает пользователям право на неограниченную потоковую передачу треков на свои настольные компьютеры и мобильные устройства. Чтобы иметь возможность сохранять треки и слушать их в автономном режиме, им необходимо установить отдельное мобильное приложение Boom.

    Новый потоковый сервис также позволяет пользователям создавать свои собственные списки воспроизведения и делиться ими, следить за музыкальными коллекциями, созданными друзьями, сообществами, знаменитостями и музыкальными редакторами ВКонтакте, сообщила социальная сеть, добавив, что также была установлена ​​«умная система рекомендаций».

    В

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

    Несколько лет подряд ВКонтакте входил в список самых известных пиратских рынков мира, составленный торговым представителем США, а правообладатели подали несколько исков к социальной сети за нарушение авторских прав.

    Самый крупный иск был подан в 2014 году Universal Music Group, Sony Music и Warner Music Group и привел к лицензионным соглашениям между ВКонтакте и тремя крупными лейблами, подписанными в 2015-2016 годах. Последовали новые аналогичные соглашения с иностранными и местными правообладателями.

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

    Как составить группу «в контакте»

    Наверное, нет смысла говорить о такой социальной сети «ВКонтакте»: почти у каждого первого человека есть страничка в ней.Многие очень активно этим пользуются и создают всевозможные тематические группы, объединяющие единомышленников. Как оформить группу ВКонтакте, чтобы она была красивой, чтобы было удобнее ориентироваться в предлагаемых материалах и просто поднимать настроение посетителей? Для этого вам потребуются навыки работы с графическими редакторами (например, Adobe Photoshop) и собственно наличие этих редакторов на вашем компьютере, помимо компьютера, Интернета и учетной записи в этой социальной сети.

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

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

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

    Перед тем, как оформить группу «ВКонтакте» создайте аватарку в графическом редакторе.Для него можно составить абсолютно любую композицию, но по высоте она должна быть менее 800 пикселей (пикселей), а по ширине — не более 200 пикселей. Если вы загрузите изображение большего размера, «ВКонтакте» все равно уменьшит его.

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

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

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

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

    Как дальше оформить группу «ВКонтакте»? Следующим шагом является ввод кода разметки вики для каждого из фрагментов меню, используя следующий шаблон:

    [[фото- | x px; без границ; nopadding | http: // vk.com / pages? oid = — & p =]]

    Все элементы, заключенные в, заменяются реальными значениями для вашего меню, где:

    — это ID (идентификатор) изображения, его можно увидеть в адресе панель при нажатии на нужный фрагмент меню в альбоме;

    и

    — ширина и высота изображения-фрагмента;

    — ID группы, которую вы регистрируете. Его также можно увидеть в адресной строке страницы редактирования меню;

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

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