Оформление группы «Вконтакте» своими руками на примере магазина бижутерии

Оформление группы «Вконтакте» своими руками на примере магазина бижутерии

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

Сеть «Vk.com» – это отличная платформа для продаж, которая безусловно подтвердила это за время своего существования. Здесь продается все что угодно, в том числе и бижутерия.

КАК ЖЕ СОЗДАТЬ СВОЕ КРАСИВОЕ И ПРОДАЮЩЕЕ СООБЩЕСТВО В «ВКОНТАКТЕ»?

В данном уроке мы рассмотрим все шаги для того, чтобы дизайн вашей группы стал привлекательным. Как сделать оформление группы самостоятельно, я расскажу на примере нашего интернет-магазина бижутерии и отмечу, что данный урок подойдет только тем, кто хоть немного владеет графическими программами, типа «Photoshop».

На текущий момент «Вконтакте» есть два основных способа оформить графическое меню в группе:

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

Отблагодарите автора, кликнув по рекламе:

ПОШАГОВАЯ ИНСТРУКЦИЯ ПО ОФОРМЛЕНИЮ ГРУППЫ «VKONTAKTE» СВОИМИ РУКАМИ

  1. Создаем дизайн аватара группы и фиксированной картинки слева, которая послужит в дальнейшем нам основной для меню.
    Если с размером аватара можно играться (максимальная высота его составляет 500px), то чтобы ваша картинка слева отображалась корректно, ее размер должнен быть строго 395px на 289px. В своем случае, высоту аватара я сделал в 355px.


    Образец/Шаблон с размерами аватара и меню в формате PSD вы можете скачать ЗДЕСЬ!
    Размеры аватара и графического меню Вконтакте
    В итоге, после завершения оформления главной страницы группы получаем вот такой вот дизайн:
    Итоговый дизайн сообщества бижутерии Вконтакте
  2. Посредством инструмента «Раскройка», выделяем аватар и графическое изображение слева, как показано на картинке выше и сохраняем фрагменты на ПК, перейдя в меню и нажав «Сохранить для WEB»:
    Сохранение фрагментов изображения группы Вконтакте
  3. Теперь создаем дизайн PopUP - это и есть то самое меню сообщества, которое появляется после клика на графическую ссылку, разработанную выше.
    Максимальная ширина блока - 600px, что касается высоты, то я тестировал ее при размерах 1150px. Порог высоты уверен возможен и больше, но обещать тут ничего не буду.


    Образец/Шаблон с размерами PopUP группы в формате PSD вы можете скачать ЗДЕСЬ!

    Ну, а пока, у меня получилось вот такое вот оформление, которое я разделил на фрагменты, почти каждый из которых будет вести на определенную страницу.
    Оформление PopUp для группы Вконтакте
  4. Посредством инструмента «Раскройка», по аналогии с ПУНКТОМ 2, выделяем фрагменты, как показано на картинке выше и сохраняем, перейдя в меню и нажав «Сохранить для WEB».
  5. Теперь переходим в нашу группу и загружаем аватар, растянув области отображения и нажав кнопку «Сохранить и продолжить»:
    загружаем аватар группы
    Растягиваем границы аватара группы
  6. Создаем альбом в группе и называем его к примеру «Дизайн нашей группы», загрузив туда все рабочие фрагменты дизайна, полученные с предыдущих пунктов.
  7. Открываем в соседней вкладке браузера окно и вводим в поле URL следующее: https://vk.com/pages?oid=-xxxxxxxx&p=pagename, где хххххххх – это ID вашего сообщества, а pagename – заголовок страницы.  В моем случае, мною было меню названо так: http://vk.com/pages?oid=-44895681&p=Меню сообщества AleviStyle. Сделали? Тогда переходим на данную страницу.
  8. После клика на «Наполнить содержанием», переходим в режим редактирования (Вики-разметка) и нажимаем на иконку «Исходный код». Давайте пройдемся и посмотрим, что же из себя представляет viki-разметка в моем случае:Вики-разметка
    • photo-44895681_342477431 - путь изображения;
    • 190px - ширина изображения;
    • noborder - убираем рамку изображения;
    • nopadding - убираем отступы, между изображениями;
    • nolink - делаем картинку некликабельной.
  9. После внедрения кода, сохранения и проверки через «Предварительный просмотр», заходим в "Доступ к странице" и выставляем необходимые права, после нажав «Сохранить изменения»:
    Выставляем доступ к меню
  10. Переходим на главную страницу группы и в поле публикации записи вставляем ссылку на созданную страницу с меню (в настройках управлении сообщества «Стена» должна быть включена):
    Вводим на стене группы ссылку на создание меню
  11. После этого, прикрепляем изображение, которое будет находиться слевой стороны от аватара, при этом текст самой ссылки убираем и нажимаем кнопку «Отправить» :
    Вставка кликабельного изображения на меню
  12. Финальном шагом остается закрепление графической записи в верху группы. Для этого, кликаем на пустую область между ссылкой «Комментировать» и ссылкой «Мне нравится», а в появишемся окне нажимаем на ссылку «Закрепить»:
    Ищем пустую область для клика
    Закрепляем запись вверху сообщества

Вот и все. Смотрим на результат и радуемся успеху :)

Дизайн группы Вконтакте в конечном виде


PopUp в работе

Данный урок авторский и был подготовлен мной - ДЕНИСОМ АЛЕКСАНДРЕНКО.
Надеемся, что у вас все получилось и вы сэкономили свое время и деньги. А если это так и данная статья вам чем-то помогла, то вы можете символически отблагодарить меня, всего навсего кликнув по рекламному баннеру от Google, перейдя на сайт рекламодателя. Спасибо!

Обратившись ко мне, вы можете заказать оформление группы (цена от 30$), внезависимости от направления вашей деятельности, а также разработку сайта с последующим его продвижением. Заинтересовались? Тогда звоните: +38063 789 89 96 или пишите на скайп: dezmagic.com .

  • Мой профиль в Вконтакте: http://vk.com/id71506005
  • Мой профиль в FaceBook: https://www.facebook.com/Deni.Day.Odessa
  • Моя группа Вконтакте: http://vk.com/deni_day_com


Отблагодарите автора, кликнув по рекламе:

08.02.2017 12:18:03
0
14574

Комментарии:

Внимание: HTML символы запрещены!
Я прочитал Пользовательское соглашение и согласен с условиями