Андрей Смирнов
Время чтения: ~12 мин.
Просмотров: 0

ВКонтакте добавил раздел «Статьи» в настройки сообществ

Кроме создания сайта, часто заказывают комплексное оформление аккаунтов соцсетей в едином стиле. Самое популярное – это создание меню в вк (для группы в контакте), оформление канала на ютубе и инстаграмма.

В этой статье я расскажу как сделать адаптивное меню для сообщества вк.

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

Я делаю в фотошопе.

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

1-kartinki-710x289.png
Картинки для оформления группы вк

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

  1. аватарка
  2. шапка группы
  3. кнопка вызова меню
  4. меню

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

Аватарка для группы вк

Ава обычно это логотип компании. Если логотипа нет, то вы можете скачать подходящий по теме файл на том же фотостоке и изменить его под себя.

Я так и сделал – скачал подходящий логотип и немного его доработал.

Basketbolnaya-shkola-logotip-710x355.jpg

Размер аватарки рекомендую делать 200 x 200 px  (учтите что картинка будет обрезаться окружностью)

Oblast-miniatyuryi-710x486.png
Выбор области для миниатюры (аватарки)

Шапка для группы вк

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

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

Размер шапки вк для ПК

Основной размер шапки 1590 x 400 px 

Razmer-shapki-dlya-PK-710x231.png
Размер шапки в VK для компьютера

Размер шапки вк в мобильном приложении

В мобильном приложении шапка обрезается. 83 px срежется сверху и по 197 px по бокам.

Видимая часть в приложении 1196 x 317 px (сюда должна поместится вся важная информация)

Razmer-shapki-vk-v-prilozhenii-710x223.png
Размер шапки в ВК в приложении

Но в приложениях по бокам располагаются дополнительные элементы. Они тоже перекроют часть изображения. Ещё по 140 px слева и справа.

E`lementyi-perekryivayushhie-shapku-po-bokam-710x245.png
Элементы перекрывающие шапку группы ВК по бокам

Кстати! Вот тут можно посмотреть все размеры вк.

И так, у меня получилась вот такая шапка (обложка)

Basketbolnaya-shkola-shapka-710x179.jpg
Готовая шапка для группы вконтакте

Заходим в Управление

upravlenie-gruppoy-v-vk-710x122.png

Обложка сообщества → Загрузить. И выбираем нашу картинку.

Zagruzit-oblozhku.png

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

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

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

Скопируйте и вставьте в адресную строку такой код (с вашими данными)

http://vk.com/pages?oid=-123456789&p=МЕНЮ

Где 123456789 это порядковый номер (ID) вашей группы.

Взять его можно в адресной строке.

AyDi-gruppyi-710x42.png
ID группы ВК

а МЕНЮ – это название страницы.

В результате у вас появится вот такая новая страница.

Viki-stranitsa-710x215.png
Новая вики-страница с названием МЕНЮ

Нажимаем “Наполнить содержанием”. И мы попадаем в редактор страницы.

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

rezhim-viki-razmetki-710x135.png
режим вики-разметки

Если скобки синие без рамки, то вы в визуальном редакторе.

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

Но перед написанием кода, посмотрите в адресную строку.Скопируйте все символы до знака вопроса (?) – это адрес вашего меню.Запишите его!

Меню для группы ВК

С начала его нужно сделать (в графическом редакторе).

Я сделал такое меню:

Basketbolnaya-shkola-MENYU.jpg
картинка меню группы вк

Теперь в фотошопе (инструментом “Раскройка”) я разрезаю меню на равные части.

rezhim-menyu.png
весь макет режим на равные части

Там же в фотошопе нажимаем Файл → Сохранить для Web…

Выделяю все части и сохраняю в формате Png-24.

В итоге у меня получилось 12 частей.

chasti-menyu-vk.png

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

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

Я для этого создаю отдельный альбом с названием “Технический”. Туда я переношу и аватарку и картинку шапки.

Что-бы вновь перейти к режиму редактирования – нужно нажать значок Карандаша в верхнем углу.

Нажми для редактирования

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

В общем пишем так (но со своими значениями):

{|noborder;nopadding |- | [[photo-176307581_456239020|300x100px;nopadding;nolink| ]] | [[photo-176307581_456239021|300x100px;nopadding;nolink| ]] |- | [[photo-176307581_456239022|300x100px;nopadding|https://vk.com/topic-176307581_39164350]] | [[photo-176307581_456239023|300x100px;nopadding|https://vk.com/topic-176307581_39164350]] |- | [[photo-176307581_456239024|300x100px;nopadding|https://vk.com/topic-176307581_39164350]] | [[photo-176307581_456239025|300x100px;nopadding|https://vk.com/topic-176307581_39164350]] |- | [[photo-176307581_456239026|300x100px;nopadding|https://vk.com/topic-176307581_39164350]] | [[photo-176307581_456239027|300x100px;nopadding|https://vk.com/topic-176307581_39164350]] |- | [[photo-176307581_456239028|300x100px;nopadding|https://vk.com/topic-176307581_39164350]] | [[photo-176307581_456239029|300x100px;nopadding|https://vk.com/topic-176307581_39164350]] |- | [[photo-176307581_456239030|300x100px;nopadding;nolink| ]] | [[photo-176307581_456239031|300x100px;nopadding;nolink| ]] |} 

Вместо photo-176307581_456239020 и подобных – заменяем на номера своих картинок.

Узнать их можно так:

  1. Переходим в альбом группы “Технический”
  2. Открываем первое фото куска меню
  3. В адресной строке копируем часть с номером этой картинки (там много цифр, перед нужной нам написано photo-)
адрес картинки для меню в vk

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

А вместо https://vk.com/topic-176307581_39164350 пишем ссылку на нужную нам страницу. Эти страницы я обычно создаю как Обсуждения (для этого их нужно активировать через настройки Управления)

Так проделываем с каждой кнопкой.

У тех картинок которые не являются кнопкой стоит значение [[photo-176307581_456239030|300x100px;nopadding;nolink| ]]. При нажатии на такую картинку – ничего не произойдет.

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

Просмотр покажет ваш текущий результат

Кнопка меню вк

Подготавливаем картинку с надписью “Открыть меню” или просто “Меню”.

Это будет кнопка вызова меню группы.

Вот моя кнопка вызова меню

Теперь переходим в нашу группу и создаём Новую запись.

В качестве фотографии выбираем нашу картинку-кнопку.

А в названии вставляем адрес с нашим Меню (тот который надо было записать). Вы увидите, что после картинки (ниже) появится надпись МЕНЮ. Теперь просто стираете название-ссылку.

И нажмите на Шестеренку и добавьте галочки “От имени сообщества” (что-бы можно было закрепить запись) и галочку “Выключить комментарии”

Настройка кнопки вызова меню

Теперь нажимая на эту картинку – будет открываться наше меню в вк.

Не забудьте закрепить эту запись, что-бы Меню всегда было вверху ленты постов.

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

Обязательно добавьте статью в закладки. Я так сделал) Не раз ещё пригодится.

И подписывайтесь на новые и только полезные статьи!

Если вам понравилось как я оформляю группу вк, то заказывайте оформление у меня (стоимость услуг)

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

Новое меню ВКонтакте

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

По умолчанию Меню отображается сразу под шапкой сообщества и блоком с информацией.

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

Обратите внимание, что Меню ВКонтакте включает в себя 3 категории:

  • Новая ссылка;
  • Подписаться;
  • Открыть приложение.

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

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

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

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

Разделы в группе ВК

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

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

Для новичков подскажу, как выглядят хэштеги ВКонтакте – это решетка с набором символов (слова, цифры, сокращенная аббревиатура). Например:

#супы

#астрология

#Koko_Shanel

#Queen

Или вот пример из моей группы ВК: #dr_dzen, #dr_link, #dr_justclick.

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

Хэштеги внутри сообщества работают только в рамках группы. Как это проверить? Достаточно кликнуть по любому хэштегу в посте. Если открывается лента постов из разных групп, то хэштег общий. Если  в выдаче только ваша группа – значит, такого хэштега больше нигде нет. Я бы рекомендовала в посты добавлять те и те хэштеги. Но то, что работает только внутри группы – обязательно! Они понадобятся для создания ссылок в меню.

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

Прежде, чем приступить к созданию ссылок, необходимо подготовить картинки. Каждая картинка должна отвечать тематике ссылки. Опять же вернемся к теме кулинарии: если это ссылка на раздел с супами, значит, на картинке должна стоять тарелка с каким-нибудь борщом, на раздел с тортами – с тортом, на раздел с салатами – «Цезарь» или «Оливье». Я думаю, вы поняли основную мысль! Минимальный размер изображения для меню ВКонтакте  – 376х256рх.

И теперь, самое главное! Для настройки меню вам понадобится следующая ссылка (если она не копируется, введите руками):

https://vk.com/wall-159969206?q=%23dr_link

В ссылке необходимо заменить 2 показателя: id группы и хэштег раздела.

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

Если вы поторопились это сделать, то id можно найти через исходный код страницы.

Например, в этой части кода:

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

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

Теперь можно приступить к наполнению Меню. Управление – Меню – Новая ссылка. Необходимо загрузить заранее подготовленное изображение, сделать подпись и вставить ссылку. Смотрите на скриншоте:

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

Я только сейчас поняла, насколько это удобно! И всем владельцам сообществ рекомендую оформить такую навигацию.

Автор статьи Ольга Абрамова, блог Денежные ручейки

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

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

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

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

Текстовое

Начнём с текстового решения. Чтобы добавить меню в группу Вконтакте:

  • Заходим в «Управление сообществом»

vk-menu1.jpg

  • Из открывшихся пунктов выбираем «Разделы»
  • Включаем «Материалы»
  • Делаем доступ ограниченным, чтобы публикациями могли заниматься только Вы или назначенные Вами лица.

vk-menu2.jpg

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

vk-menu3.jpg

  • Наводим курсор на кнопку ltgt в правом верхнем углу.
  • Включаем «Режим wiki-разметки».

vk-menu4.jpg

  • Появляется надпись «Визуальный режим редактирования».
  • Теперь можно приступить к оформлению.
  • Прописываем названия рубрик с новой строки. Например:Услуги Цены Контакты Отзывы

vk-menu4.jpg

  • Заключаем названия в квадратные скобки и добавляем перед каждым вертикальную черту: [|Услуги][|Цены] [|Контакты] [|Отзывы]
  • Перед чертой прописываем ссылки на страницы, куда попадут посетители после того, как кликнут интересующий блок [https://vk/com/salonkrasoti.ru|Цены]
  • Перед скобками ставим звёздочку *[https://vk/com/salonkrasoti.ru|Цены] Нажимаем «Сохранить».

vk-menu6.jpg

  • Обязательно воспользуйтесь клавишей «Предпросмотр», чтобы убедиться, что всё сделано правильно.

vk-menu7.jpg

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

vk-menu8.jpg

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

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

Конструкторы

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

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

Для примера ниже Вы найдете ссылки на несколько подобных сервисов.

Бесплатный конструктор Вы найдёте на https://вкменю.рф.

Платные: https://vkmenu.ru, https://www.vkprofi.ru. Создать неповторимый стиль без специальных знаний вики разметки поможет сервис http://wikiposter.net. Приложения отличаются между собой, но имеют подробную инструкцию, так что запутаться практически нереально, даже новичку.

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

vk-menu9.jpg

Photoshop

  • Открываем нужное изображение в программе.
  • Размер миниатюры не должен превышать 600 пикселей по ширине.
  • Проверяем, исправляем, если нужно.
  • Инструментом «Раскройка» нарезаем фото на кнопки
  • Сохраняем для WEB
  • Переходим VK, включаем «Материалы», ограничиваем доступ, сохраняем, меняем название — всё, как в варианте без графики.
  • Далее добавляем нарезанные фрагменты, нажимая значок фотокамеры
  • Перед нами появляется код, он потребует доработки.
  • Переносим ссылки в столбик и добавляем в каждую строчку тег nopadding (через точку с запятой), чтобы убрать пробелы. Пример: [photo31165052_426031462|204x141pxnobordernopadding|topic-35158179_34009350]][[
  • Если на данном этапе всё корректно (убеждаемся в Предпросмотре), сохраняем и возвращаемся на страницу.

Закрепляем меню

В завершении статьи мы расскажем как закрепить меню в группе Вконтакте. Снова несколько простых шагов:

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

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

Если нужно удалить меню

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

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

vk-menu10.jpg

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

  • 5.1.png&w=50&h=50&zc=1Как поменять пароль от страницы на компьютере
  • 1.31-e1536142076308.jpg&w=50&h=50&zc=1Как изменить ID
  • koty9-e1538744703835.jpg&w=50&h=50&zc=1Как увеличить или уменьшить масштаб страницы
  • 3.16.png&w=50&h=50&zc=1Как удалить все сохраненные фотографии сразу
  • 1.1.jpg&w=50&h=50&zc=1Социальная акция «Блокада Ленинграда» в честь героев войны

By BlogsdnaИспользуемые источники:

  • https://1akm.ru/socseti/kak-sdelat-menu-dlya-groups-vk/
  • https://denezhnye-ruchejki.ru/kak-oformit-menyu-vk-v-vide-kartinok-so-ssylkoy/
  • https://faqkontakt.ru/kak-sdelat-menyu-v-gruppe-vk/

Рейтинг автора
5
Подборку подготовил
Андрей Ульянов
Наш эксперт
Написано статей
168
Ссылка на основную публикацию
Похожие публикации