Сьогодні ми знову повертаємося до теми оформлення груп В Контакте. Раніше ми вже навчилися робити графічне спливаюче меню . Сьогодні ми будемо вчитися робити графічне меню з закріпленим верхнім банером і посиланням на внутрішню сторінку з пунктами розширеного меню. Загалом то, на внутрішній сторінці може бути будь-яка інформація. Особливо зручно там розташовувати, наприклад каталоги з асортиментом продукції. І у меню, що розкривається і у закріпленого меню є свої плюси і мінуси. Основний мінус у спадному меню - то, що він за замовчуванням знаходиться в закритому стані. Але зате на ньому можна розмістити відразу кілька посилань.

Закріплене меню виглядає більш ефектно за рахунок загального враження, але у нього може бути тільки одне посилання, що веде або на внутрішню сторінку Вконтакті, або на зовнішній сайт (причому на зовнішній сайт посилання буде йти не з картинки а з текстового посилання під картинкою). Також з очевидних мінусів те, що на мобільних пристроях графічне меню представлено у вигляді звичайного запису в стрічці, що стоїть зверху, а не у вигляді закріпленої поруч з аватаром. Загалом, при виборі оформлення варто враховувати ці нюанси. Отже, давайте подивимося, як створюється закріплене верхнє меню з посиланням на внутрішню сторінку.

Оформляю групи Вконтакте
Якісний дизайн груп та паблік ВК, закріплене меню, спливаюче меню, внутрішнє графічне меню, каталоги, внутрішня навігація - ціни і портфоліо .

Крок 1
Створюємо в фотошопі новий документ розміром приблизно 900х700 пікселів, заливаємо його білим кольором. Тепер нам треба вирізати в шарі два вікна, через які буде проглядатися власне саме графічне оформлення. Спочатку виділяємо прямокутник розміром 200х500 пікселів (аватар) і натискаємо Del. Потім виділяємо прямокутник розміром 510х352 (вирівнюємо по нижній лінії аватара і робимо відстань між фігурами 50 пікселів) і також натискаємо Del.
Після чергового апдейта дизайну ВКонтактом (31.10.2016) розміри банера стали 510х307 (а не 510х352).

крок 2
Тепер нижче білого шару кладемо якусь єдину картинку, яка і буде складати основу оформлення.

крок 3
Після цього доповнюємо картинку різними елементами - логотипом, текстовими написами і кнопкою, яка закликає клікнути по меню. Потім зберігаємо на комп'ютері дві окремих картинки - одна аватар (праворуч), друга меню з кнопкою кликнути (зліва).

крок 4
Також в фотошопі створюємо графічне меню, що складається з декількох пунктів. Ширина цього меню повинна бути 600 пікселів, висота на розсуд, в залежності від кількості пунктів. На допомогу використовуйте урок « Як у фотошопі створити кілька кнопок навігаційного меню «.

крок 5
Нарізаємо наше меню на кілька горизонтальних смужок відповідно до кількості пунктів меню. Зберігаємо в вигляді окремих файлів.

крок 6
Заходимо в нашу групу Вконтакте, натискаємо «Управління співтовариством» (при натисканні на три точки під автара відкривається меню, що випадає) і перевіряємо правильність установок. Група повинна бути відкрита і матеріали теж відкриті.

крок 7
Тепер завантажуємо новий аватар. Підводимо мишкою до місця аватара і на спливаючому меню вибираємо «Оновити фотографію». Завантажуємо праву фотографію з Кроку 3, розтягуємо область виділення вгору і вниз по самі вінця картинки, натискаємо «Зберегти» і потім вибираємо область для круглої мініатюри.

крок 8
Тепер потрібно створити внутрішню сторінку. Про те, як це зробити, детально розписано в уроці Як зробити внутрішню сторінку для меню групи В Контакте . Ще один альтернативний спосіб створення внутрішньої сторінки розписаний в уроці « Як Вконтакте створити динамічне меню з ефектом навігації »В Кроці 5 і 6.

крок 9
Після того, як ми створили внутрішню сторінку, можна перейти на неї. Для цього потрібно натиснути на спливаюче меню групи (за замовчуванням цей пункт називається «Свіжі новини» - я перейменувала в «Меню») і там натиснути на посилання «Меню». Після цього ми перейдемо на новостворену порожню сторінку.

крок 10
Тепер нам треба створити графічне меню з п'яти пунктів. Для цього ми завантажуємо в альбом групи наші п'ять картинок з Кроку 5. Ми натискаємо на значок фотоапарата і завантажуємо нарізані картинки з комп'ютера. Зберігається картинки будуть десь на серверах ВКонтакте з прив'язкою до групи, тому створювати окремий альбом для картинок-нарізок не обов'язково. Завантажувати картинки потрібно в режими Вікі-розмітки.

крок 11
Тепер в режимі вікі-розмітки ми будемо створювати графічне меню. Дуже важливо створювати саме в режимі вікі-розмітки (іконка в правому верхньому куті з двох трикутних скобочек), а не в візуальному режимі редагування. Детальніше про створення коду в вікі-розмітці розказано в Кроці 4 та Кроці 5 уроку « Як оформити групу В Контакте і створити гарне графічне меню «. Там же наведено шаблон коду для вставки. Якщо все зроблено правильно, то повинно вийти готове графічне меню, як на малюнку нижче.

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

крок 13
Підводимо курсор до трьох точок поруч із заголовком поста і в випадаючому віконці вибираємо пункт «Закріпити». Відповідно також новина і відкріплюється, якщо необхідно.

крок 14
Є один нюанс. Іноді, після того, як відкріплює новина, вона йде далеко вниз стрічки, згідно з датою створення, і буває досить важко знову її відшукати. Тому краще відразу десь записати урл закріпленої новини. Для цього треба підвести курсор до часу створення новини і натиснути на посилання.

крок 15
Тепер оновлюємо головну сторінку групи. Наше графічне меню буде вгорі сусідити поруч з аватаром. А при натисканні на картинку, ми потрапляємо на внутрішню сторінку з меню з п'яти пунктів.