Оформление группы ВКонтакте в стиле вики — разметки

Добрый день, друзья. Мы создали и оформили группу. Но функционал группы позволяет нам делать и более интересные оформления.  Поэтому давайте оформим группу ВКонтакте, используя вики — разметку, как было обещано в предыдущей статье.

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

интерактивное меню, оформление группы вконтакте, вики - разметка, шаблон

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

Заготавливаем шаблон для группы ВКонтакте согласно изображению.

интерактивное меню, оформление группы вконтакте, вики - разметка, шаблон

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

интерактивное меню, оформление группы вконтакте, вики - разметка, шаблон

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

интерактивное меню, оформление группы вконтакте, вики - разметка, шаблон

Сохранив и удалив ненужные фрагменты (фотошоп кроит и сохраняет всё изображение и белые поля тоже), переименуем фрагменты, пронумеровав их по порядку их расположения в меню.

интерактивное меню, оформление группы вконтакте, вики - разметка, шаблон

Теперь переходим непосредственно к группе. После корректировки настроек, на стене появились две вкладки: «Свежие новости» и «Обсуждения». Кликаем по «Новая тема» в закладке обсуждений и создаем первую страничку нашего меню.

интерактивное меню, оформление группы вконтакте, вики - разметка, шаблон

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

интерактивное меню, оформление группы вконтакте, вики - разметка, шаблон

На стене появится созданное сообщение. Таким же путем создаем нужное нам количество (в соответсвии с разделами меню) страниц.

интерактивное меню, оформление группы вконтакте, вики - разметка, шаблон

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

интерактивное меню, оформление группы вконтакте, вики - разметка, шаблон

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

интерактивное меню, оформление группы вконтакте, вики - разметка, шаблон

Образец кода для рассматриваемого меню:

[[photo161272339_305868837|387x50px;noborder;nopadding|topic-55525598_28652980]]
[[photo161272339_305868826|387x50px;noborder;nopadding|topic-55525598_28653317]]
[[photo161272339_305868817|387x50px;noborder;nopadding|topic-55525598_28653323]]
[[photo161272339_305868805|387x197px;noborder;nopadding;nolink| ]]

Важно иметь в виду, что для фрагментов, не выполняющих роль кнопки необходимо вместо ссылки на страничку прописывать «nolink». Иначе, фрагмент будет кликабельным,  и при каждом нажатии на него будет открываться сам фрагмент, как отдельное изображение.

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

интерактивное меню, оформление группы вконтакте, вики - разметка, шаблон

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

интерактивное меню, оформление группы вконтакте, вики - разметка, шаблон

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

Мы  рассмотрели, как сделать интерактивное меню или оформить группу в стиле wiki. Если возникнут вопросы по самому процессу подготовки, пишите в комментариях и вместе попробуем решить их.

Понравилась публикация !? Хотите получать новые прямо в свой почтовый ящик ? Нет ничего проще !
Комментарии к записи " Оформление группы ВКонтакте в стиле вики — разметки"

Посмотреть последние комментарии
  1. Очень интересная статья. Теперь я с большим удовольствием буду создавать группу, которая подходит под мои критерии. С помощью статьи я научилась делать это правильно и без каких-либо ошибок.

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

  3. В каком браузере вы это делали? Потому что, в Файрфоксе и в Хроме отображаются по-разному. Выравниваю в Файрфоксе, низ банера А уходит вниз в Хроме.

    • В Хроме. У нас два компьютера. На одном в мазиле работает также, как и в хроме. На другом – есть проблемы. Варианта два. Либо конфликтуют какие-то установленные программы, либо надо обновить браузер.

Здесь вы можете написать комментарий к записи "Оформление группы ВКонтакте в стиле вики — разметки"

* Текст комментария
* Обязательные для заполнения поля

Внимание: все отзывы проходят модерацию.