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

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

Вопрос 1: Первый и самый распространенный: «где код в меню?» или «если нет закладки при редактировании «Исходный код» как добавить внутреннюю страницу?» или «Я все равно не понимаю, что сделать, если не появляется код!»

Ответ 1: ВК изменил редактор, теперь для переключения между визуальным редактором и кодом всего один клик (правый верхний угол редактора):

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

Вопрос 2: Второй, реально проблематичный: «а как убрать пробелы между картинками?? »

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

Добавь тег nopadding; и все станет на свои места!

Между картинками вкрадывается пространство и меню выглядит битым. Для несведущих, может это и не нормально, а для , это как минимум не профессионально. Так в чем же тут дело? А, все очень просто! В ВК постоянно происходят какие-то обновления, вводятся новые алгоритмы… да еще и редактор кривоват… бывает ни с того, ни с сего из кода выпадают важные теги и тогда мы видим такую картину. Что бы исправить это, нужно заглянуть в код и внести необходимые коррективы. Формат кода, должен быть вот таким:

Шаблон: [] Пример: []

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

Вопрос 3: Новость. В октябре 2012г., в принудительном порядке, Вконтакте обрезал автары групп и пабликов. Теперь их размер имеет общий стандарт 200х500 пикселей. Так, что если у вас в группе аватар был больше, то сделайте апдейт (обновите аватар).

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

Та-а-ак, с вопросами закончили… теперь переходим к самому созданию меню!

Шаг 1. Как создать меню в контакте и сделать вложенные страницы:

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

Как вам моя шпаргалка?

Вот такая шпаргалка у меня получилась! Для большей ясности, распишу каждую цифру:

Проделайте, эту операцию со всеми вложенными страницами и ваше меню будет готово.

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

Шаг 2. Как создать красивое графическое меню в контакте и поставить его:

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

Для начала покажу вам код и результат своего меню:

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

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

Я покажу вам средний по сложности вариант установки меню. Разница в количестве элементов. Меню, которое разрезается просто на полоски, является самым простым его исполнением. Чем больше кликабельных кнопок в строке, тем более сложно его исполнение. Хотя, зная особенность, все просто! Дело только во времени. Итак, ширина картинки должна быть:

370 px – если в строке у вас будет два и более объектов, как у меня кнопочки соц сетей

И max 388 px – если разрезаем картинку по-простому, только на строки, не разделяя на мелкие объекты. Вот это та особенность, которую нужно знать, при нарезании меню на кнопки. У меня размер картинки всего меню получился 370х456 px.

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

Технический альбом ВК

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

[]

где, photo7632142_296911699 – это адрес картинки! Его мы смотрим в адресной строке картинки:

С первой картинки, начнем вставлять меню в группу вконтакте

Вам нужен короткий адрес картинки, для этого перейдите в сам альбом:

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

…и начиная с первой картинки, переносите их в меню группы.

Добавляем размер картинки в код меню!

Итак, адрес картинки добавили, размер указали, теперь ставим, тег nopadding; - он нужен для того, что бы наши картинки плотно прилегали друг к другу. И последним этапом ставим ссылочку на страницу, куда будет попадать посетитель, после того как кликнет на картинку.

Здесь небольшое уточнение! Внешние ссылки, ссылки на альбомы ВК и обсуждения пишем полностью, а ссылки на внутренние страницы в формате page-32734125_44298120 . В начале и конце строки, не забываем ставить по две квадратные кавычки и без пробелов.

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

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

После того как вы перенесли все картинки в меню и оформили их (размер, ссылка), сохраняем результат и любуемся своей работой! Все! Готово!

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

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

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

С чего же начать создание меню в паблике Вконтакте? Это, пожалуй самый главный вопрос, который задает большинство владельцев пабликов Вконтакте, задумываясь — как можно сделать меню? Ответ, как часто бывает простой — Вконтакте предусмотрено создание в паблике wiki-страниц с помощью wiki-разметки (об учебнике wiki-разметки я писал в предыдущей статье). Для начала, чтобы создать меню паблика Вконтакте, я сделаю новую страницу в своем паблике с помощью wiki-разметки.

Http://vk.com/pages?oid=-XXX&p=Нaзвание_страницы

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

Http://vk.com/wall-46864771?own=1

Где цифры 46864771 и есть ID моего паблика Вконтакте, итак, я делаю ссылку для создания страницы Меню:

Http://vk.com/pages?oid=-46864771&p=Меню

Запускаю эту строку в своем броузере. И вот, передо мной новая страница моего паблика Вконтакте, которая и будет использована мной под создание меню для паблика.
Далее, я нажимаю -> наполнить содержанием, и начинаю создавать свое меню паблика Вконтакте. Еще, я не забываю сделать один важный шаг, ограничить доступ всех подписчиков паблика для редакции данной страницы (на всякий случай). В нижнем правом углу нажимаю -> доступ к странице, ставлю нужные галки и сохраняю.
Теперь, мне осталась самая трудная часть, создания меню паблика Вконтакте — собственно, с помощью знаний фотошопа и wiki-разметки сделать меню для моего паблика. А когда я закончу редактировать страницу Меню, то ее можно будет сохранить и в верхнем правом углу редактора нажать -> Вернуться к странице. В строке броузера появиться ссылка, которая и нужна для вставки меню в шапку паблика Вконтакте.

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

Http://vk.com/page-46864771_44676832

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

Вы можете посмотреть как завершить работу над созданием меню паблика Вконтакте в следующей статье —

Увидеть, какое меню паблика Вконтакте у меня получилось можно посетив

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

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

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

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

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

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

Для работы с меню нам поможет 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, то просто загружаем и сохраняем.

[]
где xxxxx - id вашей картинки
yyyyy - ширина в пикселях (не более 388)

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

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

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

http://vk.com/page-116682062_51411604?act=edit&hid=183950676§ion=edit

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

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

Шаг №1.

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

Шаг №2.

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

Шаг №3.

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

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

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

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

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

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

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

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

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

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

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

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

Шаг 1
Создаем в фотошопе новый документ размером примерно 900х700 пикселей, заливаем его белым цветом. Теперь нам надо вырезать в слое два окна, через которые будет проглядывать собственно само графическое оформление. Сначала выделяем прямоугольник размером 200х500 пикселя (аватар) и нажимаем Del. Потом выделяем прямоугольник размером 510х352 (выравниваем по нижней линии аватара и делаем расстояние между фигурами 50 пикселей) и также нажимаем Del.
После очередного апдейта дизайна ВКонтактом (31.10.2016) размеры баннера стали 510х307 (а не 510х352).

Шаг 2
Теперь ниже белого слоя кладем какую-нибудь единую картинку, которая и будет составлять основу оформления.

Шаг 3
После этого дополняем картинку различными элементами — логотипом, текстовыми надписями и кнопкой, призывающей кликнуть по меню. Затем сохраняем на компьютере две отдельных картинки — одна аватар (справа), вторая меню с кнопкой кликнуть (слева).

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

Шаг 5
Нарезаем наше меню на несколько горизонтальных полосок в соответствии с количеством пунктов меню. Сохраняем в виде отдельных файлов.

Шаг 6
Заходим в нашу группу Вконтакте, нажимаем «Управление сообществом» (при нажатии на три точки под автаром открывается выпадающее меню) и проверяем правильность установок. Группа должна быть открытая и материалы тоже открыты.

Шаг 7
Теперь загружаем новый аватар. Подводим мышкой к месту аватара и на всплывающем меню выбираем «Обновить фотографию». Загружаем правую фотографию из Шага 3, растягиваем область выделения вверх и вниз до краев картинки, нажимаем «Сохранить» и потом выбираем область для круглой миниатюры.

Шаг 8
Теперь нужно создать внутреннюю страницу. О том, как это сделать, подробно расписано в уроке . Еще один альтернативный способ создания внутренней страницы расписан в уроке « » в Шаге 5 и 6.

Шаг 9
После того, как мы создали внутреннюю страницу, можно перейти на нее. Для этого нужно нажать на раскрывающееся меню группы (по умолчанию этот пункт называется «Свежие новости» — я переименовала в «Меню») и там нажать на ссылку «Меню». После этого мы перейдем на вновь созданную пустую страницу.

Шаг 10
Теперь нам надо создать графическое меню из пяти пунктов. Для этого мы загружаем в альбом группы наши пять картинок из Шага 5. Мы нажимаем на значок фотоаппарата и загружаем нарезанные картинки с компьютера. Хранится картинки будут где-то на серверах ВКонтакта с привязкой к группе, поэтому создавать отдельный альбом для картинок-нарезок не обязательно. Загружать картинки нужно в режими Вики-разметки.

Шаг 11
Теперь в режиме вики-разметки мы будем создавать графическое меню. Очень важно создавать именно в режиме вики-разметки (иконка в правом верхнем углу из двух треугольных скобочек), а не в визуальном режиме редактирования. Подробнее о создании кода в вики-разметке рассказано в Шаге 4 и Шаге 5 урока « «. Там же приведен шаблон кода для вставки. Если все сделано правильно, то должно получиться готовое графическое меню, как на рисунке ниже.

Шаг 12
Теперь возвращаемся на главную страницу группы, берем урл нашей внутренней страницы (он должен быть такого вида https://vk.com/page-78320145_49821289) и вставляем в окошко, где создаются новости. Автоматически должно прикрепиться окошко со ссылкой на эту самую внутреннюю страницу. После этого мы подводим курсор к надписи «Прикрепить» и прикрепляем к записи фотографию, а именно нашу картинку слева из Шага 3. После этого стираем строку с урл внутренней страницы, оставив пустое место. Важно! На данном шаге надо поставить галочку (если есть такие права, в основном это касается групп с открытой стеной) в чекбоксе «От имени группы». Если эту галочку не поставить, то запись невозможно будет закрепить. В конце нажимаем «Отправить».

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

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

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

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

Первые секунды пребывания формируют дальнейшие действия гостя. Именно поэтому интерфейс играет большую роль.

Факторы оставляющие гостя:

• аватарка;
• описание;
• название;
• красивое и практичное меню;
• красочность;
• контент.

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

Каким должно быть меню

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

Три основные цели групп:

1. продажи;
2. увеличение трафика;
3. увеличение активных посестителей.

Для продаж навигация в группе заменяет витрину в магазине.

Здесь должны быть самые важные кнопки:

1. каталог;
2. стоимость;
3. доставка;
4. акционные предложения;
5. отзывы.

Для увеличения посещаемости акцент делается на контент и изюминку сайта или блога.

Приблизительный вариант набора кнопок:

видео: меню для паблика

Работаем с фотошопом

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

Алгоритм действий:

Делается это с помощью инструмента «Прямоугольная область»:

Работа с графикой:

Приблизительно должно получиться вот так:

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

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

Для начала следует сделать разметку:

Создаем фрагменты:

Сохранение изображений:

Техническая часть

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

Важно! Заливка меню отличается от обычно загрузки фото или картинок.

Все по порядку:

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

1. найдите необходимую запись;
2. кликните по ней левой кнопкой мыши;
3. скопируйте URL в адресной строке.

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

Сохраните изменения соответствующей кнопкой внизу окна.

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

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

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

Данный инструмент позволяет создавать:

• эффекты;
• необычные меню;
• таблички;
• элементы навигации;
• форматировать текст.

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

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

Визуально такая система очень схожа с HTML-версткой. Но она не требует длительного обучения и специального склада ума.

Видео: меню с поиском по рубрикам

Нюансы создания

Собственно, то, что было сделано выше (разделение и загрузка картинки) это уже элементы разметки. В этом и преимущество данного инструмента. Автоматическое превращение в теги, при простой загрузке картинок.

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

Вот так: []

Основные теги представлены в таблице ниже:

Фото: теги используемые для разметки

Работа с картинками

Где options заменяется на:

• noborder - снятие рамки вокруг изображения;
• nopadding - снятие пробелов между изображением;
• plain - вставка ссылки на картинку. Оформляется в виде текста, без графики;
• nolink - снятие ссылки на картинку;
• box - открытие изображения в окне;
• NNNxYYYpx или NNNpx - задает размер фото в пикселях.

Создание таблицы

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

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

• {| символ начала таблицы, без него таблицы быть не может. Используется всегда;
• |+ отвечает за расположение названия таблицы по центру. Ставят после символов начала таблицы. Используется по желанию;
• | обозначает начало новой строки и ячейки;
• | символ, делающий ячейку прозрачной;
• ! делает ячейку темным цветом. При его отсутствии обязательно нужно применять предыдущий знак;
• |} означает конец таблицы. Необязательный символ, однако, используется, чтоб предотвратить возникновение ошибки.

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

Особенности разметки

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

С целью избегания основных ошибок следует ознакомиться с основными из них:

1. необходимо быть внимательными, при изменении размера картинки – если она менее 131 пикселя, ее качество значительно ухудшится;
2. ширина картинки не должна превышать 610px;
3. на одной wiki-странице запрещено размещать больше 17 незакрытых тегов;
4. при изменении ширины картинки, ее высота изменяется автоматически и пропорционально;
5. список внутри таблицы следует создавать с помощью тега
   ;
6. в одной строке разметки должно быть не больше 8 элементов списка.

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

Важно! Проверяйте закрытие всех тегов. Сохраняйте последовательность.

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