Ця стаття буде докладним мануалом і я розповім, як зробити меню для групи вконтакті. Красиво оформлене меню групи ВК сприяє реальному збільшенню відвідувачів та зростання продажу на сайті.
Здрастуйте, мої шановні читачі. Давайте сьогодні я розповім, як зробити гарне меню для групи ВКонтактета абсолютно безкоштовно. До речі навчившись створювати такі теми, можна трохи заробити на цьому -))). Вже жоден комерційний сайт не працює без створення своєї спільноти в соціальних мережах, особливо ВК, що гарантовано допомагає привести нових клієнтів, а також розкрутити свій бізнес.
Але якщо Ваша спільнота буде непривабливою і як у всіх, хто захоче там залишитися? Я думаю ніхто! Тож давайте прикрасимо свої групи якісним дизайном і навчимося робити це дуже швидко. Перед тим як почати створювати графіку та наше майбутнє меню необхідно встановити програму фотошоп на свій комп'ютер для подальшого нарізання картинок. Багато хто запитає, навіщо взагалі потрібно нарізати картинки. Тут справа в тому, що для кожного посилання меню ми повинні створити окрему смужку із загального банера.
Існує сьогодні кілька видів створюваного меню:
- Відкрите із активними пунктами;
- Закрите у вигляді закріпленого запису;
- З окремими картинками або загальною суміжною картинкою банера та меню.
Суть створення обох варіантів одна й та сама. Тільки основна відмінність у додаткових елементах та типах запису і про це докладніше буде у цій статті.
Для роботи з меню нам допоможе wiki-розмітка, яка вбудована сьогодні у текстовий редактор ВКонтакте. Від звичайного вона відрізняється тим, що для неї використовуватимуться стандартні команди для виведення тієї чи іншої картинки та вставки посилань на потрібні елементи. Сама wiki-розмітка дає можливість вставити код для відображення зображень, відео та інших елементів.
Закрите меню групи ВК
У даному випадку ми спостерігатимемо ліворуч від основної аватарки групи гіперпосилання у вигляді напису «меню групи» при натисканні на яке у нас буде відкриватися наше меню з активними пунктами та зображеннями.
Вигляд меню буде наступним:
Відкрите меню групи (закріплений матеріал)
Суть полягає у створенні вже відкритих пунктів меню, які відображатимуться в описі самої групи, де зазвичай і відображається за всіма умовами. В опис буде закріплено нашу картинку, яку ми підготуємо заздалегідь та зв'яжемо її зі сторінкою, на якій у нас будуть активні пункти. Дане меню стало дуже популярним останнім часом і користується попитом у замовників. Виглядають вони так:
Як зробити гарне меню для групи Вконтакте: покрокова інструкція
Отже, в першу чергу нам необхідно буде створити головну аватарку групи, яку ми розмістимо праворуч і заглушку нашого меню у вигляді банера.
- Для аватарки 200х332 пікселя;
- Для основного банера меню 395х282 пікселі.
Як ви могли помітити висота зображень відрізняється і це зроблено для того, щоб картинки не з'їжджали по висоті і були на одному рівні, так як висота назви спільноти та статус займають близько 50 px і саме цю величину нам необхідно буде прибрати з висоти меню.
Щоб було зрозуміло, якщо висота головної аватарки групи 332, то від неї віднімаємо 50 і отримуємо висоту основного меню рівну 282. Якщо ж розміри не мають значення, то висоту можна буде виставляти довільну.
Наступним кроком після створення спільноти буде налаштування матеріалів, і тут нам необхідно заборонити учасникам створювати додаткові сторінки та блоки, а лише писати на стіні. Для цього необхідно буде перейти в розділ під аватаркою групи під назвою «управління спільнотою», де нам необхідно зробити наші матеріали «обмеженими» як показано нижче.
Тепер займемося створенням загальної композиції. Можна звичайно просто вставити картинку замість аватарки і в опис, але не будемо дилетантами і покажу як зробити професійно, щоб це була одна повноцінна картинка, що переходить одна в іншу.
Створимо нове полотно у фотошопі розмірами 600х350 пікселів, яке ми будемо використовувати як трафарет, вирізавши в ньому отвори для наших картинок. Для роботи нам необхідно перевести розміри всіх елементів і лінійок у пікселі і робиться це наступним шляхом: «Редагувати-установка-основне» і тут уже виставляємо пікселі.
Наступним кроком створення відкритого меню необхідно зробити вирізки під банер і аватарку, які ми потім отримаємо для завантаження. Для цього переходимо до розділу лівого вертикального меню і вибираємо розкрійку.
Використовуючи ліву кнопку миші, як ви виділяєте область, необхідно виділити блоки потрібних нам розмірів і після кожного виділення натискаємо кнопку видалити «Delete» і вибираємо 50% сірого. Такі дії призведуть до того, що блоки будуть потрібних розмірів і виділені кольором, відмінним від основного фону.
Повинно вийти таке:
А тепер просто вибираємо гумку і функцією «чарівний гумка» тиснемо на кожен сірий блок і отримаємо трафарет з вирізами. Наступним кроком ми вибираємо наше основне зображення і підкладаємо під фон і отримаємо готові картинки на який можна буде написати текст з назвою чи меню інші рекламні елементи.
Чудово. Після того як ви помістили картинку нашого дизайну, нам залишається вибрати «зберегти для Web» і на виході ми отримуємо 2 наші картинки. Тепер йдемо знову до нашої групи і можемо заливати головну аватарку (вертикальну). Банер для меню ми будемо використовувати трохи пізніше під час роботи з кодом wiki-розмітки.
Давайте створимо саме меню, з активними пунктами, які будуть перенаправляти користувача на потрібні розділи стороннього сайту або альбоми і каталоги в самій групі. Використовуватимемо нове зображення для різноманітності -))).
Отже, переходимо знову у фотошоп і створюємо нове полотно з розмірами 400х300 пікселів. Після чого вибираємо у розділі: файл-помістити та вибираємо картинку для фону меню.
На малюнку розміщуємо кнопки нашого майбутнього меню і нарізаємо картинку як ми робили вище шляхом виділення потрібних блоків. Після цього також вибираємо «зберегти для web» і отримуємо папку з нашими нарізками. У моєму випадку вийшло 4 картинки в окремій папці.
Тепер нам необхідно завантажити з фотошопу картинки в окремий альбом і приховати від сторонніх очей. Після завантаження кожна картинка отримає свою нову назву та унікальний id.
Зверніть увагу, що у вас має бути:
- Відкриті матеріали у режимі «обмежені»;
- Включено обговорення;
- Папка з фотографіями відкрита для всіх.
Тепер залишається налаштувати нашу сторінку де і відображатиметься на менюшка. Для цього переходимо на головну сторінку спільноти та обираємо свіжі матеріали та редагувати та називаємо «НАШЕ МЕНЮ».
Далі нам необхідно вставити картинки, які ми отримали при нарізці у фотошопі. Хтось використовує коди розмітки, але щоб не мудрувати голову пропоную просто вибрати вставку картинки натиснувши на іконку фотоапарата і по черзі завантажити один за одним.
Працюючи в текстовому редакторі якщо після завантаження картинок, ми натиснемо на іконку у вигляді дужок у правому верхньому кутку, то повинні побачити такий код:
Порада:Важливим моментом після завантаження зображень є видалення відступів. Вирішується це вставкою "nopadding" перед розмірами зображень.
Для пояснення нижче розписано, що звідки береться, але враховуючи, що все буде вставлено автоматично і не потрібно мудрувати, і відкривати як деякі пишуть кожну картинку і брати id, то просто завантажуємо та зберігаємо.
[]
де xxxxx - id вашої картинки
yyyyy – ширина в пікселях (не більше 388)
Повинно в результаті вийти ось так:
Наразі наші картинки зібрані в окремий банер. А для того, щоб додати кожному пункту посилання, просто натискаємо при відключеній розмітці на картинку і в розділі посилання вставляємо скопійований url.
І ось ми підійшли до найважливішого та останнього пункту створення нашого меню вконтакті. Тепер нам необхідно зберегти нашу сторінку з картинками та скопіювати її адресу. У моєму випадку він виглядає так:
http://vk.com/page-116682062_51411604?act=edit&hid=183950676§ion=edit
Пам'ятаєте ми на початку статті робили заглушку меню, яке буде продовженням нашої головної аватарки і під неї якраз і робили трафарет. Ось саме зараз нам і знадобиться.
Переходимо на головну сторінку та робимо таке:
Крок №1.
Вставляємо адресу сторінки в текстове поле для нового запису на стіні, після чого вона перетворюється на посилання.
Крок №2.
До запису прикріплюємо зображення нашої заглушки для меню та натискаємо надіслати.
Крок №3.
Тепер після публікації запису натискаємо на час створення в нижній лівій частині запису та вибираємо "ЗАКРІПИТИ".
Чудово! На цьому закінчуємо. Тепер ви вмієте створювати класні меню та можете заробляти на цьому непогані гроші. Раджу все робити у такому порядку:
- Вигадуємо структуру та замовляємо дизайн зображень меню;
- Робимо припасування розмірів і нарізку всіх зображень;
- Вставляємо в альбоми картинки;
- Редагуємо у редакторі всі нарізки та публікуємо на головні сторінки групи.
В результаті роботи ми отримаємо таке меню.
А ось саме меню при натисканні воно вискакуватиме з активними посиланнями. Варто пограти з розмірами та підігнати під свій екран, але не забуваємо і про відображення у мобільних пристроях.
ВАЖЛИВО: Після зміни дизайну ВК у 2016 році внесено нові зміни при створенні зображень та вимоги до картинок про які.
Завантажити шаблон меню групи ВК + усі вихідники уроку
Сподіваюся, матеріал був корисний, і ви з легкістю тепер зрозуміли, як зробити гарне меню для групи ВКонтакте. Підписуйтесь на оновлення блогу та до швидких зустрічей у нових постах. Якщо залишилися питання, пишіть їх у коментарях, і я обов'язково допоможу Вам.
Прикладаю відеоролик для закріплення прочитаного -))).
Дуже багато хто цікавиться, як зробити меню у групі «В Контакті». Вже є велика кількість красиво оформлених угруповань, з яких хочеться взяти приклад. Це можна зробити за кілька годин. Головне, розробити стильний дизайн, а інша справа техніки.
Що для цього потрібно?
Як «У контакті» у групі зробити меню? У "Фотошопі" необхідно створити дві картинки, які раніше були одним цілим. Перша для аватарки, друга – саме меню, це зображення необхідно нерізати на кілька частин. У контакті на сторінці, призначеній для меню, потрібно вставити код з посиланнями на частини зображення та розділи. А якщо потрібний відкритий тип, знадобиться третя картинка, яка закріплюється у верхній частині спільноти.
Для створення гарного меню знадобляться навички "Фотошопа". Тим, хто погано малює, рекомендується підібрати добрі картинки. Для знавців цієї програми інструкція наведена нижче. Процес поділяється на кілька етапів.
Перший етап
Як зробити меню у групі «В Контакті»? Спочатку потрібно створити новий документ із розмірами 700 на 800 пікселів. Простежити, щоб фон був білим кольором. На верхньому шарі необхідно вирізати два віконця 200 на 710 - для аватара та 382 на 442 - меню. Зробити це можна за допомогою виділення прямокутником або командою, що викликається кнопкою «Del».
Висоту в залежності від фантазії можна коригувати на свій смак, а ось ширину краще залишити колишньою. Під нижній шар потрібно підкласти ілюстрацію. Орієнтуючись на одну із сторін, прямокутники необхідно поєднати.
У потрібних зонах зображення за допомогою елементів "Фотошопа" необхідно розмістити написи та кнопки.
Прямокутник, який вийшов праворуч (розміром 200 на 710), можна скопіювати і вивантажити в окремий файл. Це готова аватарка для гурту. А ось ліва частина картинки потребує додаткової нарізки.
Кількість елементів у меню дозволяється від двох частин. Але може бути і три, і чотири. Ми розглянемо приклад для двох.
Висота кожного нарізаного елемента має бути не менше ніж 50 пікселів.
Як нарізати картинку для меню?
Для цього потрібно відкрити зображення в окремому файлі. Знадобиться інструмент «Розкройка». Він знаходиться на панелі програми у вигляді ножа.
Правою кнопкою миші необхідно клацнути на картинку і вибрати з списку пункт «Розділити фрагмент».
Відкриється віконце, у якому потрібно задати параметри розкривання. Рекомендується поставити галочку біля напису «Розділити по горизонталі» та вибрати кількість рівних фрагментів.
Після виконаних дій на екрані з'явиться сітка, яка поділяє картинку на ділянки.
Розрізані файли будуть у пронумерованому вигляді.
Другий етап
Це урок, як зробити меню групи «В Контакте». Усі нарізані зображення необхідно завантажити в альбом групи.
Знадобиться сторінка «Свіжі новини». Найближчим часом робота проходитиме з нею.
Бажано вибрати в редакторі праворуч режим wiki-розмітки та вставити туди наступний код:
Кожна картинка меню займатиме окрему строчку, яка побудована за принципом схеми вище. Рекомендується створити ці записи заздалегідь у блокноті і лише після цього вивантажити їх у поле «В Контакте». Так буде набагато простіше і система не змусить переробляти.
В результаті вийде щось схоже на:
Як отримати номер зображення?
Для цього необхідно клацнути правою кнопкою миші на картинку. Після того, як вона відкриється в новому вікні, в адресному рядку браузера з'явиться код. Його потрібно скопіювати разом із словом "photo".
Коли всі зміни збережені, можна перевірити роботу меню. У групі за відповідним посиланням розкривається довгоочікувана картинка.
Щоб поєднати з нею аватар, потрібно трохи поекспериментувати з описом. Приблизно за вказаними розмірами має бути 12 рядків.
Це один із варіантів, як зробити меню у групі «В Контакті». Усього їх два. Ще один спосіб – відкритий. Їх можна поєднати.
Як зробити відкрите меню?
У новому вікні необхідно натиснути правою кнопкою миші на створене меню і натиснути на посилання «Редагування». У вкладці «Повернутися до сторінки» у рядку браузера можна отримати посилання на меню. Її потрібно скопіювати.
Потім у групі необхідно створити традиційний пост. Знадобиться ще одна тематична картинка із написом «Меню». Для цього потрібно завантажити фотографію. Пост відіграватиме роль відкритого меню вгорі сторінки. До повідомлення в ньому потрібно вставити отримане посилання, яке потрібно відразу видалити після того, як з'явилася нижче сторінка з меню. Пост не повинен містити зайвих посилань, це буде негарно.
Як зробити меню у групі «В Контакті»? Тепер потрібно клацнути правою кнопкою миші на дату новини. Вона має відкритися у новому вікні. Там можна побачити новий напис "Закріпити". Саме вона й потрібна.
Після цього в групі можна милуватися гарним меню. Для того, щоб поєднати картинки, необхідно потренуватися з їх розмірами.
От і все. Створювати меню в контакті не так вже й складно. Якщо діяти за інструкцією, описаною вище, справитися може кожен.
Сьогодні я продовжу свій «Занурення до груп ВК». У третій частині «серіалу», я розповідала та показувала, . Сьогодні ж поговоримо про оформлення меню групи вконтакті!
У першій статті про створення меню, в коментах було багато питань, тому перш ніж розпочати нову тему, відповім на часті запитання.
Питання 1:Перший і найпоширеніший: де код у меню?або «якщо немає закладки під час редагування «Вихідний код» як додати внутрішню сторінку?»або "Я все одно не розумію, що зробити, якщо не з'являється код!"
Відповідь 1:ВК змінив редактор, тепер для перемикання між візуальним редактором та кодом всього один клік (правий верхній кут редактора):
Щоб перевірити в якому ви редакторі: підведіть мишкою на цю кнопку, напишіть який-небудь текст і виділіть його жирним - якщо з'являються не звичайні символи, значить - це код
Питання 2:Другий, реально проблематичний: « а як прибрати прогалини між картинками?»
Відповідь 2:Визнаю, сама злякалася, коли вперше у клієнта «поїхала» меню. Зараз я це швидко керую, а тоді було не весело. Дивіться:
Додати тег nopadding; і все стане на свої місця!
Між картинками вкрадається простір і меню виглядає битим. Для необізнаних, може це і не нормально, а для , це як мінімум не професійно. То в чому тут справа? А все дуже просто! У ВК постійно відбуваються якісь оновлення, запроваджуються нові алгоритми… та ще й редактор кривуватий… буває ні з того, ні з сього з коду випадають важливі теги, і тоді ми бачимо таку картину. Щоб виправити це, потрібно заглянути в код і внести необхідні корективи. Формат коду повинен бути ось таким:
Шаблон: [] Приклад: []
Зазвичай картинки меню розсуваються тому, що з коду випадає nopadding; - Вставляємо його на місце і все вирівнюється. Перед тим як зберігати результат, натисніть кнопку «Перегляд», щоб переконатися, що все рівно стало.
Питання 3:Новина. У жовтні 2012 р., у примусовому порядку, Вконтакте обрізав автори груп та пабліків. Тепер їхній розмір має загальний стандарт 200х500 пікселів. Так що якщо у вас в групі аватар був більше, то зробіть апдейт (оновіть аватар).
До речі, разом із обрізанням, ВК ввів ще одне нововведення щодо фотографій гуртів: тепер клікнувши на аватар, ми так само, як в акаунті, зможемо побачити всі альбоми спільноти. Це зручно! І з цього малюється новий функціонал у комунікаціях групи.
Та-а-ак, з питаннями закінчили… тепер переходимо до створення меню!
Крок 1. Як створити меню в контакті та зробити вкладені сторінки:
Насамперед переконаємося в тому, що ви знаєте, як створити меню групи в контакті та пробіжимося по невеликій інструкції:
Як вам моя шпаргалка?
Ось така шпаргалка в мене вийшла! Для більшої ясності розпишу кожну цифру:
Зробіть цю операцію з усіма вкладеними сторінками і ваше меню буде готове.
Є! Меню створили, внутрішні сторінки зробили, заповнили їх, тепер перейдемо до створення гарного меню.
Крок 2. Як створити гарне графічне меню в контакті та поставити його:
Всю теорію про те, як влаштована розмітка wiki в контакті, я вам давати не буду, у нас зараз інші цілі. Для створення візуального меню групи ВК, всієї вікі-розмітки знати не потрібно. Перейдемо до створення візуального меню!
Для початку покажу вам код та результат свого меню:
Зізнаюся, я його зробила спеціально, щоб написати цю статтю. Усі «руки не доходили», знаєте, як «шевець без чобіт». Але тепер і я з візуальним меню у групі ВК!
Як малювати картинку для меню, я не розповідатиму, це справа дизайнерів, я сама малюю, але не настільки професійно. , наприкінці статті, я давала відео про те, як у фотошопі малювати простеньке меню, ознайомтеся, можливо ви впораєтеся своїми силами. Якщо ні замовте картинку меню у .
Я покажу вам середній варіант установки меню. Різниця у кількості елементів. Меню, яке розрізається просто на смужки, є найпростішим виконанням. Чим більше клікабельних кнопок у рядку, тим складніше його виконання. Хоча знаючи особливість, все просто! Справа лише у часі. Отже, ширина картинки має бути:
370 px – якщо у рядку у вас буде два і більше об'єктів, як у мене кнопочки соціальних мереж
І max 388 px – якщо розрізаємо картинку просто, тільки на рядки, не поділяючи на дрібні об'єкти. Ось це особливість, яку потрібно знати, при нарізанні меню на кнопки. У мене розмір картинки всього меню вийшов 370х456 px.
Після того, як картинка розрізана на потрібну кількість об'єктів та збережена в окремий альбом, завантажуємо цей альбом у ВК. Завантажуємо в профіль облікового запису, а не в групу! Оскільки в альбомах гурту більше немає можливості приховувати альбоми. Технічний альбом в корпоративній (наприклад) групі зовсім не потрібен, тому ховаємо елементи меню в альбом акаунту:
Технічний альбом ВК
Після того як ви налаштували конфіденційність "Тільки Я". Переходимо до встановлення самого меню. Дамо вам приклад коду, що був для вас шаблоном і розберемо з чого він складається:
[]
де, photo7632142_296911699- Це адреса картинки! Його ми дивимося в адресному рядку картинки:
З першої картинки почнемо вставляти меню в групу вконтакті
Вам потрібна коротка адреса картинки, для цього перейдіть до самого альбому:
Перейдіть в сам альбом, щоб отримати потрібну адресу картинки!
…і з першої картинки, переносіть їх у меню групи.
Додаємо розмір картинки до коду меню!
Отже, адресу картинки додали, розмір вказали, тепер ставимо, тег nopadding;- він потрібен для того, щоб наші картинки щільно прилягали один до одного. І останнім етапом ставимо посилання на сторінку, куди потраплятиме відвідувач після того, як натисне на картинку.
Тут невелике уточнення! Зовнішні посилання, посилання на альбоми ВК та обговорення пишемо повністю, а посилання на внутрішні сторінки у форматі page-32734125_44298120. На початку і в кінці рядка, не забуваємо ставити по дві квадратні лапки і без пробілів.
Уточнення 2: коли ми посилаємося на внутрішні сторінки без картинок, для обговорень, альбомів і зовнішніх посилань ставимо одинарні квадратні лапки.
Рядки, в яких у вас два і більше елементи, в код вставляємо без пробілів. Вставляйте кожен рядок зображення один за одним. Тому що якщо ви натиснете Enter після рядка з картинкою, то картинка перестрибне на новий рядок і зрушить меню. Нам потрібно, щоб меню відображалося цілісним, тому жодних зайвих прогалин і «іртерів» нам не треба!
Після того, як ви перенесли всі картинки в меню і оформили їх (розмір, посилання), зберігаємо результат і милуємося своєю роботою! Всі! Готово!
Для того, щоб Ваша група була популярна серед користувачів, необхідно регулярно додавати нові публікації, завантажувати фото, відео та інше. А щоб люди могли легше орієнтуватись, зайшовши на сторінку групи, краще створити меню, в якому будуть вказані основні пункти.
Наприклад, у Вас є своя фірма, яка пропонує певний товар чи послуги. Також є веб-сайт в Інтернеті. Тоді група Вконтакте для цієї фірми допоможе залучити нових покупців та збільшити продажі. Меню може включати такі пункти: Вікна, Двері, Ворота, Охоронні системи, Додаткові матеріали, Акції та знижки. Посилання робимо таким чином, щоб клацнувши по одному з пунктів, людина перейшла у відповідний розділ на сайті.
Меню можна зробити, не посилаючись на сторонні сторінки в Інтернеті. Наприклад, у Вас гурт присвячений музиці. У пунктах можете вказати жанри: класична, рок, реп, з індійських фільмів, для новонароджених, з мультиків. Коли людина кликає по одному з пунктів, у неї має відкритися альбом із відповідними піснями. У цьому випадку пункт – це посилання на певний альбом у групі.
Прикладів для створення навігації у групі можна наводити багато. Ну, а тепер давайте перейдемо до практики.
Створюємо меню
Необхідні налаштування у групі
Перш ніж приступати до створення самого меню, необхідно перевірити деякі налаштування групи. Ви повинні бути саме творцем групи, інакше у Вас просто може не вистачити прав для створення навігації.
На своїй сторінці Вконтакте в лівій колонці клацніть по «Групі» та виберіть зі списку свою групу. Потім під аватаркою натисніть три вертикальні точки і виберіть зі списку «Управління спільнотою».
Тепер у меню праворуч перейдіть на вкладку "Розділи" і в полях "Обговорення" та "Матеріали" виберіть "Відкриті" або "Обмежені". Натисніть "Зберегти".
Підготовка зображень для меню та аватарки у Photoshop
Після того, як перевірили та змінили налаштування у групі, можна приступати до створення зображень для аватарки та меню. Тут може бути кілька варіантів:
Меню може бути продовженням зображення, яке стоїть на аватарці;
Його можна зробити на окремому зображенні або однотонному тлі, аватарка з ним не пов'язана, на ній може бути зображений, наприклад, логотип компанії.
Докладно розглядатимемо перший варіант. У нас аватар і навігація будуть складатися з одного зображення, яке потрібно грамотно розрізати на частини.
Відкриваємо Photoshop і створюємо новий файл – Ctrl+N. Значення ширини встановіть 760, висоти – 500 пікселів.
Тепер, використовуючи інструмент Slice Tool, потрібно розрізати аркуш кілька областей. Виділіть інструментом область праворуч і клацніть по ній двічі, щоб відкрити вікно з меню. Встановіть значення ширини – 200, висоти – 500. Це буде аватарка нашої групи.
Тим же інструментом виділяємо ще одну область, ліворуч від попередньої. Для неї ширина 50, висота – 500. Ця відстань між майбутніми пунктами та аватаркою, нам ця частина зображення буде не потрібна.
Виділяємо область ліворуч угорі. Для неї ширина 510, висота 182. Ця область нашого зображення відповідає групі тієї області, в якій написано назву групи, статус, показані деякі вкладки. Тобто вона нам теж не потрібна.
У результаті має вийти наступне – зображення розбите на 4 області. Область справа – це аватарка групи, зліва внизу – будуть пункти меню, і ще 2 області, які не потрібні.
Щоб було зрозуміло. Ми розрізали порожній аркуш. Потім додамо на нього вибране зображення. Після того, як ми його збережемо, у нас вийде стільки невеликих зображень потрібної форми, скільки ми нарізали. Далі на сторінці в групі вставлятимемо певні частини картинки в потрібні місця.
Далі відкрийте у Photoshop зображення, яке Ви вибрали для аватарки та меню. Використовуючи інструмент Move Tool, перетягніть картинку на раніше розрізаний аркуш. Можете спонукати картинку, щоб було видно потрібну область.
Наприклад, у мене розмір зображення більший за той, який ми вибрали для білого аркуша. Тому я перемістила його так, щоб було трохи видно пальми, і не було так багато неба вгорі.
Після додавання зображення знову візьміть інструмент Slice Tool і розріжте область зліва внизу, яку ми залишали для пунктів, на потрібну кількість частин. Скільки хочете зробити пунктів, стільки буде частин.
Тепер беремо інструмент для тексту та прописуємо пункти меню у кожній частині.
На цьому все готове. Справа наша аватарка, зліва внизу – навігаційні пункти. Дві інші частини зображення не будуть потрібні.
На даному етапі можете на область справа (аватарка), додати ще й логотип компанії, або красиво написати її назву.
Зберігаємо зроблене зображення: File – Save for Web & Devices, або використовуєте клавіші Alt+Shift+Ctrl+S.
Ось що вийшло мені: папка «menu» на Робочому столі. У ній вибрані зображення розрізані на шматочки потрібного розміру. Найбільше - це аватарка, багато маленьких однакових - пункти меню, і два непотрібні - їх видаліть з папки.
Тепер потрібно зроблені зображення, які відповідають пунктам, завантажити на сторінку Вконтакте. Виберіть "Фотографії" і створіть новий альбом, я назвала його "для меню групи". Зробіть альбом закритим, щоб переглядати його могли лише Ви – «Редагувати альбом». Додайте до альбому зображення, які відповідають Вашим пунктам меню.
Потім поверніться на головну сторінку групи та виберіть аватарку - "Завантажити фотографію". Це одне з тих зображень, які ми щойно зробили у Photoshop.
Отже, на даному етапі у Вас має бути створений закритий альбом на сторінці із зображеннями пунктів навігації та завантажена аватарка для групи.
Створення меню за допомогою wiki-розмітки
Приступимо до створення самого меню. Заходимо до групи та переходимо на вкладку «Свіжі новини». Потім натисніть на кнопку «Редагувати».
Можете перейменувати назву вкладки. Я так і напишу "МЕНЮ". Тепер сюди потрібно додати зображення, які відповідають пунктам. Для цього натисніть на піктограму камери.
Клацніть по одному з доданих у свій профіль зображень.
Після цього воно з'явиться на сторінці редагування.
Таким чином, додайте всі інші зображення, щоб вийшла потрібна картинка меню.
Коли всі пункти будуть додані, клацніть по двох стрілочках у верхньому правому кутку, щоб перейти в режим wiki-розмітки.
Тут видаліть усі непотрібні теги, начебто
Після значень розміру картинки та вертикальної палички вставте посилання на сторінку, куди перейде людина, натиснувши відповідний пункт меню. Як я вже писала, посилання може бути на якусь сторінку Вконтакті або на сторонній ресурс в Інтернеті.
Ось так буде виглядати код після того, як Ви додасте «nopadding;» та посилання.
В результаті має бути так: змінено назву вкладки (МЕНЮ), прибрано пробіли між рядками, прибрано пробіли між зображеннями (nopadding;), додано посилання. Натисніть «Зберегти сторінку» та повертайтеся на головну сторінку групи.
На цьому процес створення навігації для групи Вконтакте завершено. У мене так вийшло. Зображення аватарки та меню – одне ціле. Перейшовши на вкладку «МЕНЮ», користувач може вибрати те, що його цікавить, і перейти за вказаним посиланням.
Якщо Ви переживаєте, що меню в групі можуть не побачити, закріпіть фотографію, в якій, наприклад, стрілками вкажіть на наявність вкладки. Якщо у Вас є запитання, ставте їх у коментарях.
Оформлення меню ВКонтакте починається з правильного вибору. У Вас інтернет-магазин, будівельна компанія, Ви займаєтеся коучингом чи б'юті-майстер? Кожен бізнес є унікальним і вимагає особливого підходу до дизайну вікі меню. З нашої статті Ви дізнаєтесь які види меню для групи ВКонтакте існують, у чому їх особливості та відмінності, а також яке меню вибрати для Вашого бізнесу.
Це найпоширеніший і найдешевший вид меню. Дозволяє створити зручну навігацію за розділами групи або на зовнішні ресурси: обговорення, фотоальбоми, каталог товарів, людину, відеозаписи, сайт компанії або сторінки в соціальних мережах. Дизайн навігаційного меню зазвичай не буває довше 1000px та вміщається на одному екрані монітора.
Види навігаційного меню:
Дане меню має простий функціонал і встановлюється лише на одну wiki-сторінку. Кнопочки меню ведуть за посиланням одразу на потрібний розділ групи або зовнішні сайти без відкриття додаткових навігаційних сторінок. Це зручний варіант меню, якщо Ви не маєте великої кількості послуг/товарів і Ви не позиціонуєтеся як велика компанія.
Односторінкове меню підходить для невеликих інтернет-магазинів, фотографів, коучої та б'юті-майстрів.
Багатосторінкове меню
Це вид навігаційного меню, у якому перехід за розділами групи здійснюється структурою. Як приклад: кнопочка "товари" веде на нову wiki-сторінку, на якій відображається список розділів "дитячий одяг", "для жінок", "для чоловіків" і т.д. Кожна вікі-сторінка може мати унікальне оформлення, активні кнопки або дублювати дизайн головної сторінки меню.
Багатосторінкове меню - головна вікі-сторінка Багатосторінкове меню буде зручним для інтернет-магазинів, коли потрібно допомогти клієнтам легко та швидко знайти потрібний розділ у групі.
Багатосторінкове меню - додаткова вікі-сторінка Wiki-лендинг ВКонтакте
Вікі-лендінг або як його ще називають лендинг ВКонтакте є найпопулярнішим видом меню. Любов до даного оформлення меню у наших клієнтів не дивна - це красивий, структурований дизайн, вся найважливіша інформація про Вашу групу знаходиться на одній сторінці, активні кнопки замовлення (ведуть в лс адміністратора або повідомлення групи) і каталог товарів. Які б розділи Ви не захотіли створити у вікі-лендінгу, це можливо.
- Опис компанії та її діяльності
- Категорії послуг чи товарів
- Відгуки клієнтів через графічне оформлення
- Відео-записи та промо-ролики
- Переваги роботи з Вами
- Акції та спеціальні пропозиції
- Опис послуг чи товарів
- Популярні статті у групі
- Контакти для зв'язку з Вами
- Активну картку з адресою компанії
- Відповіді на запитання, що часто ставляться
Вікі-лендінг є найкращим вибором для великих компаній, що надають послуги, інтернет-магазинів вузької спрямованості та коучою
Відповідаємо на часті запитання про вікі меню:
Головним фактором вибору дизайну для групи Вконтакте є тематика Вашого бізнесу та бюджет на розробку оформлення. Якщо у Вас молода компанія або Ви тільки ухвалили рішення про створення групи та хочете протестувати популярність Ваших послуг в інтернеті, варто віддати перевагу навігаційному меню. Для тих, хто хоче створити гарне графічне оформлення групи та отримувати більше заявок, радимо обрати лендинг ВКонтакті.
Коли меню групи вже намальоване дизайнером і встановлене на вікі-сторінку, Ви можете легко прив'язати його до будь-якого посту або банера в закріпленому пості. Для цього Вам потрібно відкрити посилання на вікі-меню у новій вкладці браузера, скопіювати його, повернутися до своєї групи та вставити скопійоване посилання у новий пост. Коли провантажиться прев'ю посилання, її текст із поста потрібно видалити. Ви можете написати будь-яку інформацію в даній публікації, заклик до дії та контакти, після чого прикріпити картинку (фото) та натиснути кнопку «Опублікувати». Тепер натискаєте «Закріпити» та банер з активним посиланням на меню групи завжди буде на увазі.
Як зробити меню у групі ВКонтакте?
Для цього Вам знадобляться навички роботи у графічних редакторах, таких як Adobe Photoshop (формат psd), Adobe Illustrator (формат ai або eps) або CorelDRAW (формат cdr). Кожна з цих програм добре впорається з цим завданням. Створюйте новий документ з розмірами 607 px (ми радимо створити документ 608 px) завширшки і задати необхідну довжину меню (висота документа). Тепер можете починати дизайн. В інтернеті Ви знайдете безліч відео, як створити меню ВКонтакте самостійно, а якщо Ви хочете зробити красивий, професійний дизайн, краще звернутися до досвідченого дизайнера.
Верстка графічного меню також має свої тонкощі.Наприклад: Вам потрібно буде розібратися з вікі розміткою ВКонтакте, навчитися перемикатися між можливостями редактора, попрацювати з прив'язкою посилань до кожного фрагменту дизайну та правильно виставити розмір меню. Для недосвідченої людини ця робота може зайняти до кількох днів, коли дизайнер може намалювати графічне меню і скинути його до групи за пару годин.
Чим відрізняється меню для паблика та групи ВКонтакте?
Відмінностей у графічному оформленні меню для паблика, групи чи заходу немає. Різниця тільки в установці меню на вікі сторінку. У заходах та пабликах функція включення «Матеріалів» відсутня. Саме через цей розділ створюється посилання на вікі-сторінку, на яку буде встановлено меню групи. Тим не менш, існує вихід з цієї ситуації через публікацію вікі коду, який відкриє доступ до створення вікі сторінки.
Для досвідченого дизайнера створити меню "ВКонтакте" не проблема!
Вам набридло меню у групі ВКонтакте або Ви хочете його приховати? Це можна зробити декількома способами: відключити «Матеріали» в налаштуваннях групи, видалити закріплений пост з посиланням на меню або видалити код меню на вікі сторінці. Найшвидшим і найлегшим способом є відключення розділу «Матеріали» — меню в групі перестане бути видимим і за бажання Ви завжди зможете його повернути. Саму вікі сторінку ВКонтакте видалити не можна.
Приклади гарного оформлення меню
Зробити гарне оформлення меню групи ВКонтакте під силу лише дизайнеру і це не дивно. Для розробки гарного дизайну потрібні навички роботи у графічних редакторах та гарний смак, а це приходить із досвідом. На наших прикладах Ви можете порівняти як виглядає навігаційне меню та вікі лендинг групах ВКонтакте, а також отримати ідеї для дизайну.
Замовити дизайн групи ВКонтакте - дизайнер Ірина Філіпенко Замовити дизайн меню для групи ВК
Ми працюємо у сфері оформлення груп ВКонтакте з 2012 року та за цей час виконали понад 200 проектів на розробку дизайну. Найпопулярнішою послугою наших клієнтів є дизайн групи «під ключ» з вікі-лендингом. Ця дорога послуга в нашій студії надається без величезних націнок, тому що Ви працюєте на пряму з дизайнером і ми не беремо жодних додаткових платежів за виправлення, витрачений час або покупку графіки. Чи зацікавила наша пропозиція? Зв'яжіться з нами через розділ на цьому сайті.
