оформляем группу вконтакте

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

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

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

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

Ну что-же приступим =)

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

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

Для начала необходимо порезать его на отдельные кусочки. В Photoshop делается это с помощью инструмента Slice Tool. Требуется это для того, чтобы выставить нужные нам ссылки на отдельные картинки с надписями. В моем оформлении, я решил разместить 5 ссылок и две картинки(верхнюю и нижнюю) оставить без ссылок.

как сделать дизайн группы вконткте

Сохраняем наше оформление с помощью File -> Save for Web… После этого в указанном месте автоматически создастся папка images, в которой и будет находится дизайн в виде отдельно порезанных картинок.

дизайн группы вконтакте

Далее, заходим на страничку группы Вконтакте и создаем там отдельный фотоальбом. Назовем его ” Оформление группы” и загрузим туда все картинки из папки images. В моем случае мне пришлось загрузить 7 картинок.

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

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

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

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

Пример:

[[photo-880171_215099744 370x37px;noborder;nopadding; http://artslab.info]]

В деталях:

“photo-880171_215099744” – id фотографий, найти его можно в строке браузера при просмотре необходимой картинки

“370x37px” – размер картинки в пикселях

“noborder” – отсутствие рамки вокруг изображения

“nopadding” – отсутствие каких-либо отступов от картинки

“http://artslab.info” – ссылка на нужную страницу

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

Вот что получилось у меня:

1
2
3
4
5
6
7
  [[photo-880171_215099743|370x61px;nolink;noborder;nopadding|Группа ArtsLab.info]]
  [[photo-880171_215099744|370x37px;noborder;nopadding;|http://artslab.info]]
  [[photo-880171_215099745|370x34px;noborder;nopadding|http://vk.com/page-880171_44194106]]
  [[photo-880171_215099797|370x38px;noborder;nopadding|http://vk.com/album-880171_8008249]]
  [[photo-880171_215099798|370x38px;noborder;nopadding|http://artslab.info/feedback/]]
  [[photo-880171_215099799|370x32px;noborder;nopadding|http://vk.com/write749075]]
  [[photo-880171_215099914|370x84px;noborder;nopadding|Группа ArtsLab.info]]

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


ОБНОВЛЕНИЕ:</p>

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

Начнем, пожалуй, с самого интересного вопроса:

Как создать несколько меню и связать их между собою

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

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

Далее, предлагаю вместе рассмотреть пример с такой структурой меню:

структура вложенных меню вк

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

дизайн главного меню вк

Для него мы используем следующий код:

1
2
3
4
5
6
7
  [[photo-880171_288584927|370x179px;noborder;nolink;nopadding|Группа ArtsLab.info]]
  [[photo-880171_288584928|370x50px;noborder;nopadding|http://artslab.info]]
  [[photo-35539675_292485703|370x50px;noborder;nopadding|http://vk.com/page-880171_44194106]]
  [[photo-880171_288584931|370x50px;noborder;nopadding|http://vk.com/album-880171_154583751]]
  [[photo-880171_288584933|370x50px;noborder;nopadding|http://artslab.info/feedback/]]
  [[photo-880171_288584935|370x50px;noborder;nopadding|http://artslab.info/contact/]]
  [[photo-880171_288584936|370x54px;noborder;nolink;nopadding|Группа сайта Artslab.info]]

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

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

[[Новая страница|Название страницы]]

Для того чтобы узнать ID новой страницы, нужно перейти на нее, кликнув по ссылке в предпросмотре и нажать на кнопку редактирования. Теперь ID-страницы можно скопировать из адресной строки браузера (например, page-880171_44194001)

Итак, страница с категориями имеет следующий вид:

вложенное меню вконтакте

Код страницы: (ссылки на новые страницы, я не стал прописывать)

1
2
3
4
5
  [[photo-35539675_292485563|370x179px;noborder;nolink;nopadding|Группа ArtsLab.info]]
  [[photo-35539675_292485558|370x50px;noborder;nopadding|http://vk.com/#]]
  [[photo-35539675_292485559|370x50px;noborder;nopadding|http://vk.com/#]]
  [[photo-35539675_292485560|370x50px;noborder;nopadding|http://vk.com/#]]
  [[photo-35539675_292485562|370x50px;noborder;nolink;nopadding|группа сайта artslab.info]]

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

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

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

меню группы вконтакте в новом окне

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

  http://vk.com/artslabinfo?w=page-880171_44194001

Не забудьте изменить id-страницы и группы из примера на собственные.

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

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

Создание спойлера в меню

vk_spoiler

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

  {{Hider|Заголовок спойлера
    Содержание спойлера
  }}

Как создать раскрытое меню и закрепить его в верней части группы/сообщества

Видеоверсия описания:

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

  1. Допустим, у нас есть готовое меню вынесенное на отдельную страницу, например: http://vk.com/artslabinfo?w=page-880171_44194106

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

    [[Новая страница|Название страницы]]

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

    http://vk.com/**моягруппа**?w=page-**айди-страницы**
  
создаем новую страницу вк
  1. Создадим новую запись в группе и вставим в нее нашу ссылку из предыдущего шага. В качестве картинки прикрепим небольшой скриншот, кликнув по которому и будет открываться наше меню. Публикуем!
закрепить меню сверху в группе
  1. Кликаем по дате публикаций нашей записи и затем нажимаем по ссылке “Закрепить”. Обновляем страницу группы. Наслаждаемся результатом.
закрепить запись VK
menu vkontakte

Готовые меню с кодом

Здесь будут появляться готовые бесплатные меню для Ваших групп с кодом и PSD-исходниками.

  1. Деревянная полочка – меню в стиле iBooks
бесплатное меню для VK
  1. Выпадающее меню
дизайн меню для VK
  1. Плоское меню в стиле Metro
меню в стиле metro ui
  1. Dark Style Menu
темное меню для вконтакте
  1. Меню для групп о спорте
меню для группы вконтакте меню vk
Обновлено
Подробнее

ArtsLab

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

4gray artslab artslabinfo