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

PHOTOSHOP CS6 Как оформить группу в контакте

Создание красивого баннера

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

Этап 1
Открываем программу photoshop и создаем в ней новый документ, который должен иметь размер 630х725 пикселей. Затем этот документ заливаем белым цветом. После этого в слое вырезаем два окна. Через эти окна и будет проглядывать графическое оформление нашей группы. Для начала выделим прямоугольник размером 200х710 пикселей и нажимаем кнопку Del. Выделяем следующий прямоугольник размером 382х442, совмещаем оба прямоугольника по низу и нажимаем кнопку Del.

Этап 2
Под созданным слоем располагаем графическое оформление нашей группы. Удобней всего будет заранее на картинке с основным фоном написать требуемый текст и создать несколько пунктов меню.

Этап 3
Теперь правый прямоугольник размером 200х710 пикселя сохраняем как отдельную картинку. Мы получили полностью готовое изображение для оформления нашей группы. Его следует загружать в блок, находящийся в правом верхнем углу группы, там вы найдете кнопку «Загрузить фотографию».

Что делаем с левой картинкой? Левую картинку нарезаем на несколько частей в зависимости от количества пунктов меню. Например, если у нас 5 пунктов меню, то в итоге мы получаем 5 картинок имеющих ширину 382 пикселя и высоту не меньше 50 пикселей.

Этап 4
Полученные 5 картинок загружаем в альбом группы: Мои фотографии — Мои альбомы — Добавить фотографии. После этого переходим на страничку группы и выбираем специальный блок «Новости», который можно переименовать в «Меню группы». Нажимаем кнопку «редактировать».

Этап 5
Переходим на вкладку «Исходный код». Код, расположенный в нижнем окошке следует скопировать и вставить в «исходный код». В коде меняем photo на названия файлов и указываем высоту файла (ширина 382 пикселя). Затем вставляем url ссылок меню. Имя для файла берем из альбома. Открытая картинка имеет примерно такой http://vkontakte.ru/photo7236095_23453800. Все, что идет после photo, является названием картинки.

Этап 6
Для того, чтобы картинки идеально совместились, название группы должно быть в одну строку, описание в десять строк, а url веб-сайта в одну строку.

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

ВАЖНОЕ ОБНОВЛЕНИЕ: эта статья сильно устарела, поскольку появился специальный сервис MenuMake, который позволяет создать меню для группы автоматически. В ручном подходе больше нет необходимости. Однако, оставляю эту статью для истории.

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

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

Поговорим об идеологии

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

Меню для привлечения посетителей

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

Меню для продаж

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

Первый этап – работаем в фотошоп

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

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

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

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

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

После идем в меню «Файл» — «Сохранить для WEB» и сохраняем каждый отдельный элемент меню в формате .jpеg максимального качества.

Второй этап – верстка меню Вконтакте

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

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

Но прежде чем начинать верстать меню их надо загрузить в фотоальбом. Его можно назвать «фото для меню» и сделать недоступным для посетителей. Как только закончите загрузку, возвращайтесь в текстовый редактор. По умолчанию ваша новость так и называется «Свежие новости», но вы ее можете переименовать, как угодно, например «Меню». Для того чтобы начать непосредственную работу над созданием меню надо активировать режим wiki-разметки. Сделать это можно одним нажатием на пиктограмму ромба.

После того, как вы активируете вики-разметку в поле текстового редактора надо вставить код:

Читайте так же:  Приказ на полторы ставки

[[photo133337_133701019 | 370px;nopadding; | page-13333337_13333337]]

Этот код продублируйте ровно столько раз, сколько пунктов в вашем меню. После этого надо прописать ссылки на фотографии. Ссылку вставляйте вместо значения photo133337_133701019, а вместо значения page-13333337_13333337 вставляете ссылку на раздел или страницу, которая должна выводиться посредством клика на определенный пункт меню. Важно знать, что ссылку на страницу не надо копировать полностью, достаточно одной части.

Кстати, напомним, что вам необязательно заниматься всеми этими хитросплетениями — просто попробуйте этот сервис. Он за 100 рублей все это сделает на полном автомате.

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

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

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

Кстати, знаете ли вы, что наполнение групп Вконтакте можно автоматизировать, используя этот сервис? Обязательно попробуйте, вам понравится!

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

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

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

Начинать создавать такое меню можно в любом графическом редакторе (я использую Photoshop) можете выбрать любой редактор здесь или здесь Еще можно воспользоваться Vk Profi — уникальный онлайн-сервис, который предназначен для создания креативного оформления публичных страниц и групп в ВКонтакте, которое сможет сделать любой пользователь без специальных навыков http://vkprofi.ru/ далее нужно – продумать дизайн, сделать будущие кнопки или просто написать текст

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

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

Итак, что я делаю:
Готовлю 2 шаблона мои размеры
1 Аватарка 200х500 пикселей (максимальный размер)
2 Баннер ширина 510 высота 308 пикселей (без статуса и описания к баннеру)

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

Далее делаю скриншот группы и вставляю его в фотошоп.
Нажимаем →«Файл»→«Открыть» и выбираем скрин с компьютера
Инструментом раскройка выделяем наши зеленые шаблоны, появятся оранжевые линии, за которые нужно потянуть и установить границы точно Один неверный пиксель и у вас ничего не получится (для точности раскройки — увеличьте изображение) Снимаем замок со слоя и отключаем слой, остается наша раскройка. Далее вставляем нашу картинку, нажимаем →«Файл»→«Открыть» и выбираем изображение с компьютера, для того, что бы изображение не теряло качество нажимаем на слое правой кнопкой мыши и выбираем «Преобразовать в смарт объект» затем подгоняем наше изображение под шаблон для этого нажимаем «Редактирование» → «Трансформирование» → «Масштабирование» Затем сохраняем: «Файл» выбираем строку «Сохранить для Web и устройств» (можно использовать комбинацию клавиш Al+Ctrl+Shift+S). В настройках сохранения выбираем тип файла JPEG, ставим максимальное качество. Нажимаем кнопку «Сохранить». Теперь жму «Готово»
Photoshop сохранит всё это как html-файл с картинками (картинки находятся в папке images)
Загружаем наши картинки в группу. Правая часть (аватарка) у нас просто загружается, а к баннеру не забудьте прикрепить ссылку на меню (как это сделать подробнее здесь) у вашего поста должна появиться кнопка посмотреть. Далее закрепляем пост, обновляем сообщество и готово!
Вот так получилось у меня, надеюсь у вас тоже получится! Можете воспользоваться моим шаблоном фотошопа

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

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

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

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

Еще один хороший пример интернет магазина:

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

А вот пример неудачного решения:

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

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

Теперь давайте посмотрим на все это с технической точки зрения.

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

Первым делом создадим графический макет будущей менюшки. Для этой цели мы будем использовать программу Photoshop (для простенькой картинки вполне сгодится стандартный Paint). Откройте программу и создайте новый документ:

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

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

Затем напишите на фоновой картинке заранее продуманные разделы, кнопки и телефоны. Их мы в последующем превратим в ссылки:

Для того чтобы разделы превратились в ссылки, картинку нужно разрезать по частям. В этом нам поможет инструмент “раскройка” (Slice Tool):

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

Последним шагом будет разрез объектов. Чтобы это сделать кликните по кнопке “фрагменты по направляющим” (Slices From Guides) на верхней панели инструментов:

Сохраняем каркас для web устройств. Формат картинки ставим JPG, выбираем максимальное качество и сохраняем, например, на рабочий стол:

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

Вывод меню с помощью Wiki разметки

В своей группе зайдите в “управление сообществом” и проверьте, подключен ли раздел “материалы”. Если раздел выключен, то подключите его:

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

Вместо стандартного заголовка, пропишите свой, а также включите режим wiki разметки, нажав на пиктограмму ромба:

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

Вместо значения “photo133337_133701019” нужно вставить ссылку на фотографию

Вместо значения “page-13333337_13333337” нужно вставить ссылку на нужную страницу или раздел группы

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

Ссылку на фото нужно копировать не всю, а только эту часть:

Ссылки на сторонние сайты и разделы группы можно использовать полноценные. В итоге у нас получилось что-то вроде этого:

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

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

» alt=»»>
А на этом все. Подписываемся на блог, ибо скоро будет продолжение статьи про создание интернет магазина на wordpress, кроме этого Вас ожидает море полезной информации и бесплатностей. До встречи, братишки и сестрички!

Оформление группы в контакте – создание и wiki разметка меню с кнопками.

Вы чего-нибудь продаете? Занимаетесь творчеством и хотите рассказать о нем интернет сообществу? У вас есть сайт и вы хотите получить дополнительный трафик? Тогда вам просто необходимо создать собственную группу в контакте!

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

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

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

В общем поковырялся – без дебрей – взял основное и создал группу. Попутно сделал видео, для таких-же ламеров, как я, смотрите, что у меня получилось http://vk.com/kopirka_ekb . Не забудьте в нее вступить!

Еще приведу основные коды wiki для оформления меню, которые я использовал. Куда их втыкать? Если не знаете – поймете когда видео посмотрите.

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

photo1851587_288481917 – ID картинки (кнопки) для меню
382x50px – размер этой картинки (кнопки)
topic-44005638_27388424 – ID темы группы из раздела обсуждение, куда ведет кнопка – на этом месте может быть обычная внешняя ссылка, например http://kopirka-ekb.ru, либо ссылка на страницу группы в виде page-44005638_44103176 – это ID страницы соответственно.

Код для создания страницы

[[имя страницы]] , где “имя страницы” – любой текст

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

Оставляйте пожалуйста комментарии и вопросы! Жмите пожалуйста на кнопки социальных сетей!

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

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

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

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

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

Фото: пример функционального меню

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

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

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

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

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

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

Фото: пример навигации для продаж

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

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

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

Фото: привлечение подписчиков

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

  • интересные статьи;
  • полезная информация;
  • подписаться;
  • отзывы.

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

Предлагаем такие кнопки:

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

Фото: предоставление услуг

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

Создаем по этапам

Создание навигации – процесс интересный, сложный и длительный. Но результат того стоит.

Весь процесс условно делиться на 2 этапа:

  • работа с фотошопом;
  • техническое добавление.

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

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

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

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

    установите и запустите программу «Фотошоп»;

Фото: ярлык Фотошопа

Фото: заданные параметры

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

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

    кликните на значок правой кнопкой мышки;

Фото: кнопка для вырезания фигур

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

после, нажмите кнопку Delete;

Фото: появившееся окно

Фото: расположение прямоугольников

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

    под этим слоем расположите свое оформление:

Фото: замащивание слоя картинкой

Фото: кнопка рисования фигур

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

Фото: готовый результат

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

Фото: загрузка аватарки

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

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

  1. комбинацией клавиш «CTR+R» включите линейку;
  2. наведите курсор на верхнюю линейку;
  3. зажав левую кнопку мыши, потяните вниз, к нижней границе кнопки;
  4. повторите по каждой кнопке.

Фото: расстановка направляющих

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

    возьмите инструмент Slice Tool;

Фото: расположение Slice Tool

Фото: кнопка «Фрагменты по направляющим»

Фото: разбивка картинки

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

    нажмите Файл – Сохранить для web;

Фото: путь для сохранения картинок

Как очистить компьютер от ненужных программ? Инструкция тут.

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

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

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

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

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

  1. зайдите в группу;
  2. включите новостную ленту;

Фото: включение новостей через настройки

Фото: смена названия

Фото: загрузка картинок

Фото: код загрузки картинки

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

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

Если вы хотите вставить ссылку на запись со стены:

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

Для вставки ссылки на другой сайт, группу, одностраничник и прочего:

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

Фото: адресная строка

Далее просто вставьте ссылку на соответствующую картинку. Вот код картинки, который появился в окне загрузки картинки: [[photo37602118_351733570|400x90px;noborder|]].

После символа «|» просто вставьте свою ссылку. Выглядеть это будет вот так: [[photo37602118_351733570|400x90px;noborder| ссылка]]

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

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

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

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

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

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

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

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

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

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

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

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

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

Вот так: [[photo37602118_351733570|400x90px;noborder| ссылка]]

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

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

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

Для того чтоб прикрепить ссылку или текст к изображению, с возможностью слегка видоизменить его, следует ввести код следующего вида:
[[photo37602118_351733570|options|text/link]].

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

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

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

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

Фото: варианты создания таблиц

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

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

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

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

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

Фото: пример функциональности

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

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

Не знаете, как переустановить Андроид на планшете. Вам поможет статья.

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

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

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

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

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