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

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

 

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

 

Шаг 1

 

Создаем в фотошопе новый документ размером примерно 900х700 пикселей, заливаем его белым цветом. Теперь нам надо вырезать в слое два окна, через которые будет проглядывать собственно само графическое оформление. Сначала выделяем прямоугольник размером 200х500 пикселя (аватар) и нажимаем Del. Потом выделяем прямоугольник размером 395х289 (смещаем его вниз относительно верхнего края аватара на 53 пикселя, а расстояние между прямоугольниками 10 пикселей) и также нажимаем Del.

Шаг 2

 

Теперь ниже белого слоя кладем какую-нибудь единую картинку, которая и будет составлять основу оформления.

Шаг 3

 

После этого дополняем картинку различными элементами – логотипом, текстовыми надписями и кнопкой, призывающей кликнуть по меню. Затем сохраняем на компьютере две отдельных картинки – одна аватар (справа), вторая меню с кнопкой кликнуть (слева).

Шаг 4

 

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

  

 

Шаг 5

 

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

 

Шаг 6

 

Заходим в нашу группу Вконтакте, нажимаем «Управление сообществом» и проверяем правильность установок. Группа должна быть открытая и материалы тоже открыты.

 

Шаг 7

 

Теперь загружаем новый аватар. Подводим мышкой к месту аватара и на всплывающем меню выбираем «Загрузить новую фотографию». Загружаем правую фотографию из Шага 3, растягиваем область выделения вверх и вниз до краев картинки, нажимаем «Сохранить» и потом выбираем область для маленькой картинки.

Шаг 8

 

Теперь нужно создать внутреннюю страницу.

Шаг 9

 

После того, как мы создали внутреннюю страницу, можно перейти на нее. Для этого нужно нажать на раскрывающееся меню группы и там нажать на ссылку «Меню». После этого мы перейдем на вновь созданную пустую страницу.

 

Шаг 10

 

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

Шаг 11

 

Теперь в режиме вики-разметки мы будем создавать графическое меню. Очень важно создавать именно в режиме вики-разметки (иконка в правом верхнем углу из двух треугольных скобочек), а не в визуальном режиме редактирования. Если все сделано правильно, то должно получиться готовое графическое меню, как на рисунке ниже.

 

 

Шаг 12

 

Теперь возвращаемся на главную страницу группы, берем урл нашей внутренней страницы (он должен быть такого вида https://vk.com/page-78320145_49821289) и вставляем в окошко, где создаются новости. Автоматически должно прикрепиться окошко со ссылкой на эту самую внутреннюю страницу. После этого мы подводим курсор к надписи «Прикрепить» и прикрепляем к записи фотографию, а именно нашу картинку слева из Шага 3. После этого стираем строку с урл внутренней страницы, оставив пустое место. Важно! На данном шаге надо поставить галочку (если есть такие права, в основном это касается групп с открытой стеной) в чекбоксе «От имени группы». Если эту галочку не поставить, то запись невозможно будет закрепить. В конце нажимаем «Отправить».

 Шаг 13

 

После того, как новость появилась в ленте, подводим курсор ко времени создания новости и нажимаем на ссылку.

 

Шаг 14

 

В открывшемся окошке выбираем ссылку «Закрепить» и нажимаем на нее. Теперь там будет ссылка «Открепить». После этого закрываем окошко.

 

Шаг 15

 

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

 

Источник