Wiki-разметка Вконтакте. Как сделать оформление меню в группе [Гид для начинающих] Vol.1

STAFF-ONLINE ПРОДВИЖЕНИЕ
5 465

Wiki-разметка Вконтакте. Как сделать оформление меню в группе [Гид для начинающих] Vol.1

Расскажите об этой статье своим друзьям:

X
Осуществите Ваш 100 % переход на удаленную работу, используя нашу проверенную технологию и многолетний опыт работы

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

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

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

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

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

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

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

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

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

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

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

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

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

Wiki-разметка разметка Вконтакте

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

Wiki-разметка разметка Вконтакте

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

Wiki-разметка

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

Wiki-разметка

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

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

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

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

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

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

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

Wiki-разметка

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

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

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

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

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

Wiki-разметка

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

Wiki-разметка

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

 

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

Wiki-разметка

Заключение.

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

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

Здорово

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

Внесите Ваши данные в форму прямо сейчас - и мы свяжемся с Вами по телефону

Ваши данные никогда не будут переданы 3-м лицам.