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

Продвижение
6 888

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

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

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

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

Начинающему фрилансеру может показаться, что выполнить задание не составит никакого труда, ведь каждый в своей жизни создал хотя бы одну группу. Но есть один маленький, но важный подводный камень, о котором мы поговорим сегодня. Это 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-разметка

Заключение:

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

 

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

 

Как можно заработать на рекламе в социальных сетях?

Senler — Рассылка сообщений ВКонтакте. Полный обзор сервиса и обучающие видео

Publbox: отложенный постинг в социальных сетях. Полный обзор сервиса

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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

Здорово

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

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

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