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

STAFF-ONLINE ПРОДВИЖЕНИЕ
3 579

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

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

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

Вы уже освоили wiki-разметку, поняли как создавать меню группы и наполнять его содержанием, самое время заняться оформлением (по этой ссылке находится первая часть статьи, рекомендую начать с нее).

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

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

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

Подготовительный этап

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

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

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

Для создания макета я обычно использую тестовую пустую группу. В Photoshop я создаю изображение для аватара, максимальный его размер в пикселях 200 на 500, где 200 — это ширина аватара, а 500 высота. Высоту при желании можно поменять. Затем создаю баннер шириной 396 пикселей и высотой 290. 

Как сделать: выбираем команду меню Файл - Создать (File - New) и в диалоговом окне пишем название и соответствующий размер.

меню в группе

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

меню в группе

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

меню в группе

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

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

меню в группе

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

меню в группе

меню в группе

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

Как сделать: выбираем команду меню Изображение - Размер изображения (Image - Image size) и в диалоговом окне прописывам соответствующий размер.

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

меню в группе

Расположите картинку таким образом, чтобы нужные фрагменты попали в размеченные области для аватара и баннера, добавьте любой текст или другие элементы, например, стрелки, кнопки и т.д. Можно написать название сообщества прямо на аватаре, разместить хэштег (#) или контактный номер телефона. Все зависит только от вашей фантазии и функций группы. Я написал на баннере МЕНЮ. меню в группе

Когда все готово, нужно сохранить файл, но выбрать не просто Сохранение, а Сохранение для Web. Photoshop сохранит все элементы страницы в соответствии с заданной раскройкой в отдельную папку Images. Откроем папку и удалим все лишние куски. Оставим только аватар и баннер. Теперь можно посмотреть как наш дизайн будет смотреться в итоге, для этого загрузим элементы, баннер закрепим, также как делали до этого. Должно получиться вот так:

меню в группе

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

Возвращаемся к нашему макету в Photoshop и с помощью текста создаем на пространстве баннера названия страниц меню. В моем примере это: Товар, Как заказать, Как оплатить, Отзывы. Затем, тем же инструментом Раскройка выделяем отдельно области с текстом. У нас получается несколько отдельных кнопок. Снова сохраняем для WEB и удаляем из папки лишнее.

меню в группе

Итого мы имеем: баннер для закрепленного поста, аватар группы, меню в виде отдельных кнопок с названиями страниц. Также вам нужны адреса созданных страниц меню, их лучше сохранить в блокнот до начала работы. Обратите внимание на то, как выглядят ссылки на страницы. Если вы открываете созданные в меню группы страницы и ссылка на них в адресной строке выглядит по-другому, попробуйте зайти в режим редактирования, удалите ?act=edit и скопируйте ссылку в правильном виде.

меню в группе

Делаем графическое меню в группе с помощью wiki-разметки

 

Переходим к редактированию меню. В режиме wiki-разметки видим названия созданных страниц в квадратных скобках.

  1. Удаляем эти названия;
  2. Добавляем изображения наших кнопок в том порядке, как они должны быть расположены;
  3. Для удобства в режиме wiki-разметки размещаем код каждого изображения на отдельной строке;
  4. В коде после размеров изображений вручную прописываем команду nopadding для того чтобы между ними не было промежутков;
  5. Затем копируем нужную часть адреса наших страниц из заготовки в Блокноте;
  6. Нажимаем Предпросмотр, наше меню выглядит как целое изображение, а при нажатии на надпись мы попадаем на соответствующую страницу;
  7. Сохраняем изменения.

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

Все очень просто, создаете пост на стене сообщества, прикрепляете готовый баннер, а к нему добавляете ссылку на меню группы. Ссылка должна выглядеть вот так: https://vk.com/page-114241921_50260040 затем текст ссылки можно смело удалять и сохранять пост. Осталось закрепить баннер и получать удовольствие от результата.

меню в группе

Заключение

Получилось? Замечательно!

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

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

Здорово

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

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

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