Сейчас группы и паблики Вконтакте используют визуальные средства оформления. Благодаря данной возможности внешний вид и дизайн группы становится более эстетичным. В этом материале будет подробно описано как сделать меню в группе Вконтакте.
Зачем нужно меню группы
В первую очередь, меню — это полезный элемент для коммерческих групп. С его помощью у пользователей не возникнет проблем с навигацией. Вся необходимая информация будет размещена в данном блоке. В социальной сети Вконтакте, ведение групп устроено таким образом, что весь ранее опубликованный материал содержится в ленте. Единственной возможностью для сортировки является создание тем, в разделе «Обсуждения». Но это также не совсем удобно, ведь тема не ограничивается одним постом, где собрана вся информация, и чтобы отыскать необходимый пост, нужно долго пролистывать страницы.
Гораздо более удобнее построить четкую структуру, где будет собрана вся полезная информация и разделена на отдельные тематические блоки. На данном скриншоте неплохой пример графического интерактивного меню, где все полезные посты размещены в отдельном блоке. Это удобно и не требует от пользователя совершения дополнительных действий на странице.
Подведя итог можно сделать вывод, что меню — это необходимость для развивающегося сообщества. Это удобное средство навигации, которое позволяет пользователям найти необходимую информацию не листая ленту и быстро получить доступ к нужному разделу группы. Предпочтительней использовать кликабельное меню для групп осуществляющих продажу товаров и услуг.
Закрытое и открытое меню
На данный момент, меню Вконтакте можно разделить на несколько типов и видов, далее рассмотрим подробнее каждое из них.
Типы:
- текстовые (структура представляет собой текстовые ссылки);
- графические (используется мультимедия, активные кнопки и т.д.).
Виды:
- открытые (пользователь видит всю основную структуру на главном баннере);
- закрытые (в данном случае, пользователь не видит основной структуры, чтобы открыть дополнительные разделы, необходимо перейти в главное меню).
Далее рассмотрим подробно, как создать текстовое и графическое меню, принципы и особенности.
Создаем текстовое меню
Данный вид меню не требует каких-либо знаний и дополнительных инструментов. Сделать текстовое меню в группе в ВК достаточно просто, для этого воспользуемся функционалом социальной сети. Он не использует кнопок, стилей и т.д. Текстовое меню представляет собой список, который состоит из анкорных ссылок.
Пошаговая инструкция:
- для начала необходимо выполнить первоначальную настройку группы. Для этого необходимо перейти на страницу паблика и нажать по вкладке «Управление»;
- после этого переходим во вкладку «Разделы», находим параметр «Материалы» и выставляем «Ограниченные». Сохраняем изменения;
- далее в главном блоке выбираем «Свежие новости» и «Редактировать»;
- откроется блок с текстовым редактором. В верхней части, изменяем название меню, к примеру, на «Главное»;
- для примера будем использовать следующие структуру: «link|text». Где «link» – ссылка, а «text» – видимый текст. Чтобы создать заголовок, необходимо использовать символ «==». С помощью него можно задать уровень заголовка;
- теперь попробуем создать небольшую структуру для нашего заголовка. У нас получился следующий код:
- после этого щелкаем «Сохранить страницу» и мы получаем следующий результат с использованием wiki-разметки;
Процедура создания текстового меню не потребует специальных знаний и умений. Поэтому этот вариант наиболее приемлем для неопытных пользователей. Перед тем, как выносить раздел на главную страницу, обязательно протестируйте его и оптимизируйте, чтобы навигация работала без сбоев.
Графическое меню
Переходим к одному из более сложных способов создания. Для этого нам понадобится использовать дополнительные инструменты – графический редактор Photoshop. Далее мы дадим подробное описание пошагового процесса создания графического меню с применением дополнительного софта.
Пошаговая инструкция:
- для начала потребуется запустить графический редактор Photoshop;
- далее щелкаем «Файл» и «Создать». Указываем следующие параметры: «Ширина» (Wight) 610 пикселей, «Высота» (Height) 450 пикселей и «Разрешение» (Resolution) 100 пикселей на дюйм;
- после этого появится новый документ, куда требуется перетащить фоновое изображение;
- затем потребуется растянуть изображение, чтобы закрыть белую область;
- далее в панели «Слои» кликаем правой кнопкой мыши по изображению и в контекстном окне выбираем «Merge Visible» (объединить видимые);
- на панели инструментов выбираем «Прямоугольник» и создаем кнопки, перемещая курсор на картинку и проводя границы фигуры;
- в верхней части рабочей области, можно выбрать заливку для кнопки, параметр «Fill»;
- после этого, вновь переходим на панель инструментов и выбираем «Текст»;
- затем кликаем по кнопке, чтобы добавить поле для текстового ввода и вписываем название для кнопки. На ваше усмотрение можно выбрать шрифт, его размер и цвет, чтобы раздел смотрелся более стильно;
- чтобы центрировать текст по картинке, выделите слой с текстом и нужным изображением, зажав клавишу «Ctrl», и поочередно нажмите кнопки выравнивания на верхней панели инструментов;
- после этого нам понадобиться выполнить раскройку получившегося изображения;
- на панели инструментов выбираем «Кадрирование» (Crop) и «Раскройка»;
- выделяем каждую кнопку и открываем «Файл», «Экспортировать», «Сохранить для Web». Устанавливаем формат сохраненного файла «PNG24»;
На этом работа в графическом редакторе полностью завершена. Возвращаемся в текстовый редактор социальной сети, где мы настраивали текстовое меню, в предыдущем разделе.
Инструкция по работе с графическим меню Вконтакте:
- переходим в раздел «Редактирования»;
- щелкаем по иконке «Добавить фотографию» и выбираем созданные в фотошопе файлы;
- процесс загрузки может занять некоторое время. Это необходимо для добавления кода элемента;
- далее переключаемся в режим редактирования кода, кликнув по значку в виде скобок «<>»;
- кликаем по изображению и выставляем максимальные параметры «ширина» (первая клетка). Не забываем отметить чекбокс «Сохранить пропорции»;
- затем переключаемся в режим редактирования и в коде ставим символ «;», пропимываем дополнительный параметр «nopadding;». Это необходимо сделать, чтобы между изображениями не было разрывов (проблемов);
- затем прописываем прямую ссылку на страницу, куда будет переходить пользователь, между первой закрывающей квадратной скобкой и вертикальной чертой без пробелов;
- и в заключении проверяем результат. У нас получилось следующее.
Закрепляется созданное меню, как обычная запись. По нажатию кнопки Закрепить.
Основы Wiki-разметки
Далее рассмотрим основы использования Wiki-разметки в разработке меню для группы в социальной сети. Вики-разметка Вконтакте представляет собой язык, который используется для оформления текста на веб-сайтах и позволяет упростить доступ к возможностям языка HTML. Далее рассмотрим основные команды, которые доступны для применения в социальной сети.
Оформление меню с помощью мультимедиа
Текстовая команда для мультимедийных файлов имеет следующий вид: «[[mediaXXXX_YYYY|options|link]]. Разберем подробнее: «mediaXXXX_YYYY» (сам файл), «options» (заданные параметры), «link» (представляет собой всплывающую надпись, которая будет отображаться при наведении курсора на объект).
Параметры (options) для мультимедиа представлены на скриншоте:
Параметры для видео выглядят так:
Заголовки (H1, H2, H3)
Для того, чтобы добавить заголовок необходимо в начале и конце текста поставить следующие знаки «==». Пример смотрим на скриншоте:
Оформляем текст
Для оформления текста, Вконтакте предлагает следующие параметры: жирный шрифт, курсив, выровнять по правому и левому краю, выравнивание по середине, маркированный список, заголовки, верхний и нижний индекс, подчеркивание и зачеркивание. Более детальные настройки представлены на скриншоте.
Пример:
Цитаты
Для привлечения внимания аудитории, можно воспользоваться цитатами, тег для данного параметра выглядит так: «<blockquote></blockquote>».
Пример использования в текстовом редакторе Вконтакте:
Списки
Пользователи могут использовать, как маркированные, так и нумерованные списки. Нумерованный список обозначается знаком «#», маркированный «*».
Пример нумерованного списка:
Пример маркированного списка:
Как делать отступы
Здесь все достаточно просто, перед нужным словом необходимо дописать знак «:». Чем больше знаков будет поставлено, тем больше будет отступ.
Внутренние ссылки
Внутренние ссылки представляют собой переходы на другие элементы социальной сети: профиль пользователя, стороннее сообщество, чат, фотографию, видео, статью и т.д. Добавление внутренней ссылки осуществляется с помощью тега «[[link|text]]. Разберем подробнее: «link» – это ссылка, «text» – это отображаемый текст.
Пример:
Внешние ссылки
Если требуется разместить ссылку на внешний ресурс, например, интернет магазин то можно воспользоваться конструкцией для внешних ссылок: «[link|text]». В отличие от внутренних, скобки здесь одинарные.
Пример:
Как создать таблицу
При помощи разметки вики, пользователи могут создать табличный объект, для этого используются следующие команды:
Добавляем спойлер
Данный элемент, может скрыть информацию, которая будет раскрываться с помощью соответствующего нажатия по специальной кнопке. Этот вариант размещения информации, отлично подойдет для раздела группы «Правила», «Часто задаваемые вопросы» и т.д.
Для создания объекта используется следующая конструкция:
{{Hider|Название
Текст
}}
Пример спойлера:
Как удалить меню
Удаление происходит следующим образом:
- переходим на страницу сообщества и щелкаем «Управление»;
- далее переходим к параметру «Материалы» и выставляем значение «Выключено»;
- после проделанных действий, раздел будет отключен, также пропадет вкладка «Свежие новости». Если вы захотите восстановить, проделываем те же самые действия, только в параметры «Материалы» выбираем «Включено». Раздел будет полностью восстановлен.
Удаление через форматирование страницы:
- переходим к разделу «Свежие новости» в сообществе;
- затем «Редактирование»;
- ставим курсор в любое место и нажимаем комбинацию клавиш «CTRL + A» и Del;
- произойдет удаление, для восстановления необходимо обратиться к разделу «История»;
- затем нажать «Просмотр» и «Применить данную версию».
