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

Как красиво оформить группу ВКонтакте: пошаговая инструкция

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

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

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

Рекомендуем: Click.ru – сервис контекстной рекламы для профессионалов

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

Размеры основных элементов для оформления

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

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

• название сообщества — любой текст на любым языке, не длиннее 48 символов, можно использовать эмодзи;
• описание группы — не более 4000 символов (при ранжировании группы в поисковых системах учитывается, как description);
• аватар — минимальный размер 200х200 пикселей, максимальный не более 7000 пикселей по каждой из сторон. Можно использовать изображения JPG, GIF или PNG;
• обложка — минимальные размер 200 пикселей по высоте и 795 по ширирне. Рекоменрекомендуемый размер изображений 400×1590 пикселей. Форматы — JPG, GIF или PNG;
• живая обложка сообщества (для мобильных) — видео или картинки с разрешением 1080×1920. Длительность не более 30 секунд, размер файла до 30 МБ.
• меню группы;
• кнопка действия;
• контактная информация;
• закреплённое сообщение — любой пост с видео, фото, опросом, гиф и прочее;
• прочие разделы и элементы по желанию;
• приложения и виджеты.

Описание сообщества

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

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

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

В боковом меню группы заходим в раздел «Управление».

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

Аватар

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

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

• АваМастер — загружаем фото (или логотип компании), выбираем из представленных вариантов.
• Vk Profi — позволяет создавать все основные графические элементы для дизайна сообществ и публичных страниц.

Как установить или изменить аватар

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

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

Обложка для группы ВКонтакте

Главная обложка сообщества

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

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

Выглядеть это может, например, так:

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

Живая обложка сообщества

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

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

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

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

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

Чтобы закрепить нужный материал, нажмите на три круглешочка в правом верхнем углу плашки с постом и выберите «Закрепить».

Меню группы

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

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

Чтобы настроить меню группы, зайдите в раздел управления, далее «Настройки — Меню» и добавьте необходимые ссылки.

Чтобы создать красивые иконки для меню, используйте бесплатный сервис VKmenu или SMMBullet.

Установка и настройка виджета приветствия

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

Далее выбираем сообщество к которому хотим подключить виджет.

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

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

• текстовый;
• персональный — с аватаркой;
• и на обложке сообщества.

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

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

Секреты оформления продающих сообществ в ВК

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

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

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

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

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

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

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

Дополнительные элементы оформления, которые можно использовать:

• Раздел статьи — блок, в котором показываются ваши последние статьи;
• Адрес и время работы — обязательно для коммерческих сообществ;
• QR-коды сообществ — можно использовать оффлайн;
• Подкасты, обсуждения, фотоальбомы, видео, мероприятия.

Заключение

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

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

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

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

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

Виды навигационного меню:

Одностраничное меню

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

Многостраничное меню

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

Wiki-лендинг ВКонтакте

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

Какую информацию можно разместить в wiki-лендинге:

• Описание компании и ее деятельности
• Категории услуг или товаров
• Отзывы клиентов через графическое оформление
• Видео-записи и промо-ролики
• Преимущества работы с Вами
• Акции и специальные предложения
• Описание услуг или товаров
• Популярные статьи в группе
• Контакты для связи с Вами
• Активную карту с адресом компании
• Ответы на часто задаваемые вопросы

Отвечаем на частые вопросы о вики меню:

Какой дизайн меню выбрать?

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

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

Когда меню группы уже нарисовано дизайнером и установлена на вики-страничку, Вы можете с легкостью привязать его к любому посту или баннеру в закрепленном посте. Для этого Вам нужно открыть ссылку на вики-меню в новой вкладке браузера, скопировать ее, вернуться в свою группу и вставить скопированную ссылку в новый пост. Когда прогрузится превью ссылки, ее текст из поста нужно удалить. Вы можете написать любую информацию в данной публикации, призыв к действию и контакты, после чего прикрепить картинку (фото) и нажать кнопку “Опубликовать”. Теперь нажимаете “Закрепить” и баннер с активной ссылкой на меню группы всегда будет на виду.

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

Для этого Вам понадобятся навыки работы в графических редакторах, таких как Adobe Photoshop (формат psd), Adobe Illustrator (формат ai или eps) или CorelDRAW (формат cdr). Каждая из этих программ отлично справится с данной задачей. Создаете новый документ с размерами 607 px (мы советуем создать документ 608 px) в ширину и задать необходимую длину меню (высоту документа). Теперь можете приступать к дизайну. В интернете Вы найдете множество видео как создать меню ВКонтакте самостоятельно, а если Вы хотите сделать красивый, профессиональный дизайн, лучше обратиться к опытному дизайнеру.

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

Чем отличается меню для паблика и группы ВКонтакте?

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

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

Вам надоело меню в группе ВКонтакте или Вы хотите его скрыть? Это можно сделать несколькими способами: отключить “Материалы” в настройках группы, удалить закрепленный пост с ссылкой на меню или удалить код меню на вики страничке. Самым быстрым и легким способом является отключение раздела “Материалы” – меню в группе перестанет быть видимым и при желании Вы всегда сможете его вернуть. Саму вики страничку ВКонтакте удалить нельзя.

Примеры красивого оформления меню

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

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

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

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

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

Существует на сегодня несколько видов создаваемого меню:

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

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

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

Закрытое меню группы ВК

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

Вид меню, будет следующим:

Открытое меню группы (закрепленный материал)

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

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

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

Я рекомендую использовать следующие размеры:

• Для аватарки 200х332 пикселя;
• Для основного баннера меню 395х282 пикселей.

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

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

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

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

Создадим новое полотно в фотошопе размерами 600х350 пикселей которое мы будем использовать в качестве трафарета вырезав в нем проемы для наших картинок. Для работы нам необходимо перевести размеры всех элементов и линеек в пикселе и делается это по следующему пути: «Редактировать-установка-основное» и тут уже выставляем пиксели.

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

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

Должно получиться следующее:

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

Отлично. После того как вы поместили картинку нашего дизайна нам остается выбрать «сохранить для Web» и на выходи мы получаем 2 наши картинки. Теперь идем снова в нашу группу и можем заливать главную аватарку (вертикальную). Баннер для меню мы будем использовать чуть позже при работе с кодом wiki-разметки.

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

Итак, переходим снова в фотошоп и создаем новый холст с размерами 400х300 пикселей. После чего выбираем в разделе: файл-поместить и выбираем картинку для фона меню.

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

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

Обратите внимание что у вас должно быть:

• Открыты материалы в режиме «ограниченные»;
• Включены обсуждения;
• Папка с фотографиями открыта для всех.

Теперь остается настроить нашу страницу где и будет отображаться на менюшка. Для этого переходим на главную страницу сообщества и выбираем свежие материалы и редактировать и называем «НАШЕ МЕНЮ».

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

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

Совет: Важным моментом после загрузки изображений является удаление отступов. Решается это вставкой «nopadding» перед размерами изображений.

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

[[photoxxxxx|nopadding;yyyyypx|ваша ссылка]]
где xxxxx – id вашей картинки
yyyyy – ширина в пикселях (не более 388)

Должно в итоге получиться вот так:

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

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

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

Переходим на главную страницу и делаем следующее:

Шаг №1.

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

Шаг №2.

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

Шаг №3.

Теперь после публикации записи нажимаем на время создания в нижней левой части записи и выбираем «ЗАКРЕПИТЬ».

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

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

В итоге работы мы получим вот такое меню.

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

ВАЖНО: После смены дизайна ВК в 2016 году внесены новые изменения при создании изображений и требования к картинкам о которых читаем вот тут .

Скачать шаблон меню группы ВК + все исходники урока

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

Прикладываю видеоролик для закрепления прочитанного -))).

Также советую почитать статьи:

С уважением, Галиулин Руслан.

Полезные материалы:

• Как создать место в инстаграме
  

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

“>Как создать место в инстаграме
Как найти человека по номеру телефона в соц.сетях

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

“>Как найти человека по номеру телефона в соц.сетях
Как восстановить аккаунт в инстаграме

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

“>Как восстановить аккаунт в инстаграме
Расширение для скачивания видео с любого сайта

Приветствуем мои дорогие читатели. Сегодня хочу поделиться методами для скачивания видео с видео хостинга YouTube с помощью классного плагина. Если.

“>Расширение для скачивания видео с любого сайта
Популярный список хэштегов в инстаграмм по категориям

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

“>Популярный список хэштегов в инстаграмм по категориям
Как снять видео на Ютуб: список идей для видео начинающим авторам

Приветствую, дорогие читатели блога firelinks.ru. Сегодня поговорим о том, как правильно снимать видео для своего или чужого канала и дам несколько.

“>Как снять видео на Ютуб: список идей для видео начинающим авторам
Как быстро накрутить живых подписчиков в инстаграме бесплатно: советы и способы + пример работы

Здравствуйте, дорогие читатели блога. Сегодня подготовил для Вас анализ полезных сервисов для привлечения подписной базы различными способами. А.

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

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

Подготовительные работы

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

Инструкция по активации разделов:

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

• Под аватаркой группы нажать по ссылке «Управление».

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

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

Создание текстового меню

Простое текстовое меню создается с помощью специального кода. Времени на это уйдет не более 5 минут. Последовательность действий:

• На главной странице группы, сразу под названием, перейти на вкладку «Свежие новости».
• Открыть режим редактирования wiki-страницы, нажатием на соответствующую кнопку.

• В первой строке сменить название вкладки. В нашем случае это будет «Меню».
• Используя значок <> в правой части панели инструментов, переключиться на режим wiki-разметки.

• В нижнее поле вставить код: *[http://vk.com/|Пункт меню].
• Повторить вставку с новой строки в количестве разделов будущего меню.
• Заменить ссылки и текст в соответствии со своими разделами и их названиями. Для перехода в визуальный режим редактирования следует повторно нажать значок <>.
• Кликнуть по кнопке «Сохранить страницу».

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

Создание графического меню

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

Как сделать дизайн графического меню:

• Через поисковую систему отыскать изображение, которое послужит фоном для текста. Его размеры не должны быть меньше, чем 610х450 px.
• Запустить PhotoShop.
• Открыть меню «Файл» и кликнуть по строке «Создать».

• Указать размеры холста (610х450 px) и разрешение (100px). Остальные параметры оставить прежними. Кликнуть «Создать».

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

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

• В списке отображения слоев, выбрать слой с прямоугольником. Нажать ПКМ и кликнуть по строке «Параметры наложения». Затем изменить внешний вид слоя, используя представленные в открывшемся списке инструменты.

• Когда все прямоугольники настроены, следует активировать инструмент «Текст». После включения потребуется отчертить область текста и вписать туда название пункта меню. Операция повторяется для остальных строк. Размер текста и его стиль выбирается исходя из личных предпочтений. Главное – чтобы надпись помещалась в отмеченное место.

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

• Теперь осталось сохранить элементы будущего меню. Для этого: открыть «Файл» и выбрать «Сохранить для web».

• Указать место на диске компьютера.

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

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

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

• Отредактировать код следующим образом:
  • Установить ширину картинки 600px.
  • После размеров изображения добавить «;» и вставить параметр «nopadding|». Благодаря нему будут удалены разрывы между картинками, что создать видимость цельного изображения.
  • После вертикальной черточки «|» вставить ссылки на разделы группы.
• Сохранить созданные изменения. Также перед переходом на другую страницу рекомендуется сохранить код в текстовый документ на компьютере. Это позволит восстановить меню при возможном сбое сохранения.

Справка. Непосредственно на панели инструментов находится значок «i», который открывает инструкцию по разметке wiki-страницы. Там можно найти пояснения по созданию различных эффектов текста и списков, вставке цитат и т.д.

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

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

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

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

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

Дизайн меню

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

Ширина аватара составляет 200 пикселей, высота – 500. Картинка основного меню – 510*308. В результате мы получим вот такую красивую «менюшку» в конце.

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

Данный исходник PSD-макета был реализован для примера. Скачать.

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

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

Заходим в раздел «Изображение» и выбираем операцию «Тримминг».

На выходе получаем:

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

При большом весе получившегося изображения, можно воспользоваться инструментом «Сохранить для Web». Команда также находится в разделе «Файл».

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

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

Затем воспользуемся инструментом «Раскройка», найти который можно в меню слева.

«Разрезаем» нашу картинку на соответствующие части. В нашем случае их будет три.

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

На этом подготовительная часть закончена. Приступаем к основному этапу.

Wiki-разметка готового меню в «Вконтакте».

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

Затем обязательно проделываем следующую последовательность действий. Заходим в «Управление сообществом» и в пункте «Разделы» напротив кнопки «Материалы» выбираем «Ограниченные».

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

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

Переходим в раздел «Свежие новости», выбираем «Редактировать» и попадаем в меню редактора.

Чтобы убыстрить процесс, воспользуемся клавишей «Фотоаппарат» и нажмем «Выбрать из фотографий сообщества».

После добавления снова попадаем в меню редактора и нажимаем клавишу «<>», в которой произведем дальнейшее редактирование. Также сразу переименовываем раздел и вместо «Свежие новости» пишем в нашем случае «МЕНЮ ГРУППЫ».

Общая структура каждой нарезанной части выглядит следующим образом в разметке – [[photo-id|XxYpx|www.site.ru ]], где:

id – идентификатор (номер) картинки, которую вы загрузили;

X и Y – размер изображения по горизонтали и вертикали в пикселях;

www.site.ru – ссылка, ведущая на необходимый блок группы (например, «Обсуждения») или прямо на нужный раздел вашего сайта иди другого веб-ресурса.

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

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

Так как тег, центрирующий изображение, мы уже оставили один, то, чтобы избавиться от «неприятных» расстояний между частями общего изображения, следует вставить тег «nopadding» следующим образом: [[photo454997239_456239045|400x86px; nopadding| ]]

Вот что получается в итоге.

Не забываем нажать кнопку «Сохранить».

Теперь следует нажать на вкладку «МЕНЮ ГРУППЫ», потом «редактировать».

!Важно! Чтобы скопировать необходимый адрес, нажимаем в нашем варианте на «МЕНЮ ГРУППЫ» и копируем оттуда «правильную ссылку».

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

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

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

Нажимаем на «многоточие» справа от записи и кликаем по вкладке «Закрепить».

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

При нажатии на «Открыть меню».

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

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