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

ВАЖНО! Для того, что бы сохранить статью в закладки, нажмите: CTRL + D

Задать вопрос ВРАЧУ, и получить БЕСПЛАТНЫЙ ОТВЕТ, Вы можете заполнив на НАШЕМ САЙТЕ специальную форму, по этой ссылке >>>

Поиск по сайту

Поделитесь этой статьей в своих социальных сетях:

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

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

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

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

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

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

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

Пример единого стиля оформления группы

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

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

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

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

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

2. На странице группы появится раздел Свежие новости, который мы в последствии переименуем в Меню.

  1. Я создам для нашего примера разделы: Товар, Как заказать, Как оплатить, Доставка. Нажимаем кнопку «Редактировать» рядом с разделом «Свежие новости» и переходим в поле для Wiki-разметки. Заключаем названия необходимых нам страниц в квадратные скобки вот так:

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

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

5. Слева располагаются кнопки для работы с графическим режимом редактирования. Что такое графический режим? Это наиболее понятный интерфейс неискушенному в программировании человеку. Все достаточно привычно. Смесь Word и иконок из Вконтакте. Вам не составит труда разобраться.

Немного о функциях кнопок слева направо:

  • Текст можно сделать жирным или курсивом;
  • Выровнять как Вам нужно, выделив фрагмент и выбрав способ выравнивания;
  • Оформить маркированный список;
  • Выделить текст в заголовок или подзаголовок; (кнопки H1, H2, H3);
  • Оформить часть текста, как цитату;
  • Добавить внешнюю ссылку или ссылку на одну из страниц Вашего меню;
  • Добавить фото и другие файлы.

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

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

А вот как выглядит код и получившаяся страница в «Предпросмотре». Видно, что в коде не так уж сложно разобраться, если сравнить оба варианта. Задумались, а не стать ли программистом?

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

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

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

Wiki-разметка и ее секреты.

Секрет №1. Чаще всего, для того чтобы человек оформил заказ, ему нужно связаться с администратором группы. Для этого на созданной странице посвященной условиям заказа, создайте внешнюю ссылку с вот таким адресом https://vk.com/write1776617 , который содержит команду write и номер id ответственного за прием заказов человека. При переходе по ней, клиент сразу попадет в окно для отправки сообщения нужному человеку. Очень удобно, не правда ли?

Секрет №2. При добавлении на ваши страницы любых фотографий, они будут отображаться в оригинальном размере (но не больше 607 пикселей). Если изображение слишком большое, его можно настроить, кликнув в режиме редактирования на фото. Появится соответствующее меню, в котором помимо размера можно сделать изображение ссылкой на внешний источник. В поле «Текст» создается подпись, которая будет всплывать при наведении мыши на изображение.

Любое фото, сохраненное на Ваших страницах, при нажатии будет открываться в дополнительном окне для просмотра, как любое фото из альбома. Эту функцию можно убрать в режиме wiki-разметки, дописав после размера фото команду nolink, как в этом примере :[[photo6214880_402375838|400x387px;nolink| ]]

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

Заключение:

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

Эти статьи тоже могут быть Вам интересны )

Источник: http://staff-online.ru/wiki-razmetka-vkontakte-kak-sdelat-oformleniye-menu-v-gruppe/

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

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

Красивое меню для группы — это не только поддержка имиджа, но и отличный способ удержать целевую аудиторию. Как правило, профессионалы в сфере 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) Добавляем ссылку после слеша

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

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

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

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

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

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

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

Источник: http://smm-life.ru/smm-prodvijenie/kak-sdelat-wiki-menyu-dlya-gruppy-vkontakte.html

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

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

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

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

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

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

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

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

В рамках данного мастер-класса я в качестве отправной точки возьму игру 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 и вставить в разметку.

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

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

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

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

ЧИТАЙТЕ ТАКЖЕ:  что можно сделать из мышки от компьютера

Источник: http://zavstas.ru/raskrutka/smm/oformlenie-gruppy-vkontakte-kak-sdelat-viki-razmetku.html

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

Посмотрите образец результата — http://vk.com/tattoo_21

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

Шаг 1. Подготовка

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

Под аватаром есть значек «многоточия»

В выпадающем меню жмите пункт «управление сообществом»

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

Далее загружаем в фотоальбом будущие элементы меню (изображения).

Шаг 2. Редактирование меню.

Под описанием вашей группы есть надпись «Свежие новости», если на неё навести мышку появится кнопка «Редактировать», нажимайте.

Откроется окно редактирования меню.

Заменяйте «Свежие новости» на слово МЕНЮ

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

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

Код кнопки в МЕНЮ в группе вк такой:

photo999_777 — это ссылка на фото вашей кнопки.
Чтоб узнать ссылку на изображение кнопки — откройте его, ссылка будет в адресной строке.

385x80px; — размер в котором ваша кнопка будет отображаться. Размер можно и не указывать, тогда кнопка будет в оригинальном размере.

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

nopadding; — тег отвечающий за отсутствие отступов. Без него вокруг каждой кнопки будут белые отступы по паре миллиметров.

http://ссылка/ — ссылка на абсолютно любую страницу. Это может как ссылка на страницу в вашей же группе, так и на внешний сайт.

Важно! Внимательно проверяйте — между элементами кода должен быть разделитель «|», после каждого тега должна быть «;» И всё это должно быть в двойных скобочках [[ ]]

Чтоб вставить несколько кнопок просто располагайте код в столбик

[[photo999_7771|385x80px;noborder;nopadding|http://faq-media.ru ]]
[[photo999_7772|385x80px;noborder;nopadding|http://vk.com/vk_faq_media/ ]]
[[photo999_7773|385x80px;noborder;nopadding|http://google.com/ ]]

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

Есть вопросы? Вы можете задать их на ФОРУМЕ.

Источник: http://faq-media.ru/index/kak_sozdat_menju_gruppy_vk/0-127

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

Что такое меню ВКонтакте и для чего оно нужно?

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

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

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

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

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

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

Как сделать привлекательное оформление?

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

  1. Для начала вам нужно установить программу Photoshop, если ранее на компьютере у вас не была установлена эта программа.
  2. Открываем Фотошоп и создаем два файла-шаблоны для аватара и для меню. Задаем нужные размеры. Например, для аватара – 200×500 пикселей, а меню 389×600 пикселей. Залейте их каким-нибудь одним цветом для того, чтобы их было отчетливо видно и сохраняем два созданных отдельных файла.
  3. Загружаем в группу шаблон на место аватара, выделяя всю область.
  4. Загрузка меню происходит немного сложнее. Для этого вам понадобится в «Управлении сообществом» включить материалы. После этого станет доступна возможность добавлять меню. Зайдите в появившуюся вкладку под описанием группы «Свежие новости» и нажмите в панели инструментов на кнопку в виде фотоаппарата и загружайте файл с компьютера. Получилось?
  5. Сразу после загрузки вам станет доступна ссылка, которую придется немного доработать. После слова «noborder» впишите знак «;» и слово«nopadding». Это функция не даст вашему меню опускаться при добавлении новостей в сообщество.
  6. Делаем Prnt Scrn основной страницы вашей группы. Для чего? Чтобы понять свои ошибки. Дело в том, что сейчас это черновой вариант – все не ровно и не так красиво. Ваша цель состоит в том, чтобы нижние границы меню и аватара идеально совпадали. Тогда возможно у вас появится вопрос «Почему я не даю вам точных размеров?». А дело в том, что каждый админ использует разное количество текста в описании группы, от чего меняется высота меню, а ширина меню — это дело вкуса и как мы знаем у всех он разный.
  7. Входим в Фотошоп, и создаем новый файл, вставляя туда скриншот.
  8. Теперь, работая с этим файлом, выделяем область аватара с помощью «прямоугольного выделения» — им можно максимально точно выделить конкретную область. Далее, кликаем правой клавишей мыши и выбираем «вырезать на новый слой».
  9. То же самое прорабатываем с картинкой меню, только при выделении нужно отсечь ненужное внизу. Сделать так, чтобы низ меню и аватара полностью совпадали.
  10. Теперь, зажав кнопку Ctrl, выбираем два, созданные нами слои. Кликаем правой клавишей мыши по ним и выбираем функцию «Объединить слои». Перед нами появляются два наших идеально подогнанных друг под друга шаблона на одной странице.
  11. Следующий этап – загружаем фото обложки. Оно появляется поверх наших шаблонов. Теперь справа в инструментах для слоев кликаем по файлу-обложке, зажав клавишу Alt. После данной процедуры, обложка будет видна только на шаблонах и станет невидимым за их границами. Но это не помешает вам передвигать обложку и подбирать нужную видимую ее часть.
  12. Теперь важный пункт создания меню – кнопки. К этому моменту вы должны уже знать точные названия будущих кнопок. Например, «Здоровье», «Дети», «Наши контакты». Для облегчения задачи создаем первую кнопку, следующие лишь дублируем и меняем текст.
  13. Добавляем логотип на аватарку или словесный призыв, или же и то, и другое. Это добавит вашей группе живости, а также отличительную черту.
  14. Сохраняем общий файл в качестве картинки на свой компьютер. Что дальше?
  15. Открываем в Фотошопе созданный только что нами файл. Далее создаем новый пустой файл с точными размерами нашего аватара, вставляем в него созданную нами картинку с логотипом и кнопками. Выбираем нужную нам область под аватар и идеально подгоняем под выбранные размеры. После чего сохраняем наше творение.
  16. То же самое делаем с меню. Но опять же здесь есть свое дополнение. Для начала нужно узнать высоту меню, так как она не совпадает с черновым вариантом. Используя линейку, измеряем высоту до единого пикселя (а лучше всего несколько раз измерить, чтобы не ошибиться). Создаем новый файл со старой шириной и новой высотой, подгоняем картинку под размер и нажимаем кнопку «Сохранить».
  17. Загружаем новый аватар, выделяя всю область и подбираем миниатюру.
  18. Закачиваем меню через кнопку «Свежие новости». Удаляем предыдущую ссылку, загружаем новое фото и добавляем «;nopadding».
  19. Теперь раскраиваем наш макет меню. Применяем инструмент Фотошопа «Раскройка» или «Нож». В разных версиях Фотошопа он называется по разному. Под каждой кнопкой проводим линию, чтобы сделать отдельные прямоугольники, наводя на которые пользователь сможет в будущем переходить на конкретные ссылки.
  20. Заходим в редактирование меню через «Свежие новости» и загружаем каждую нашу вырезку из меню по очереди. При просмотре будут показаны пропуски между нашими картинками. Для того чтобы от них избавиться, нужно добавить в каждую ссылку слово»;nopadding».
  21. Теперь чтобы ваши ссылки были активны и вы могли вставить нужную вам информацию, то напишите по ссылками картинок в редактировании меню — название одной из ваших кнопок — например Доставка. Но это слово нужно написать четко по установленным правилам, выглядеть оно должно так [[Доставка]]. Далее сохраняем страницу, переходим по этой ссылке и наполняем ее нужным контентом.
  22. Последним действием, чтобы все заработало, является вставка копии ссылки на страницу Доставка в ссылку кнопки, например — page-123456_456789, то есть инфа между словами «vk.com/» до «?». Все, теперь каждую кнопку оформляйте также и ваше меню будет успешно привлекать вам целевую аудиторию.

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

Источник: http://andreyspektor.com/socialnye-seti/kak-sozdat-menyu-v-gruppe-vkontakte.html

Ссылка на основную публикацию