Як зробити графічне меню вконтакті. Як зробити внутрішню сторінку для меню групи у контакті

💖 Подобається?Поділися з друзями посиланням

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

З якою метою використовується?

Меню групи ВК може виконувати такі цели:

  • Навігація. Наявність навігації у спільноті ВКонтакті дозволяє вашим потенційним клієнтамшвидше знаходити необхідну інформацію та розділи групи, що скорочує шлях конвертації відвідувача у покупця. Таке меню може містити не тільки посилання на внутрішні сторінки ВК, але також і сторонні сайти. Наприклад, офіційний сайт вашої компанії.
  • Естетична привабливість. Інша, щонайменше значима мета – надання паблику прекрасного зовнішнього вигляду. Поєднуючи цей елемент з іншими елементами оформлення (аватар, обкладинка, банер, закріплений пост), можна надати індивідуальний, неповторний стиль вашому співтовариству, що запам'ятовується.

Ну хіба не краси?

  • Мотивація здійснення цільової дії. Ви можете підштовхнути користувача до прочитання чи перегляду певної інформації, кліку за певною кнопкою тощо. Якісне та продумане оформлення здатне зробити клікабельне меню, яке буде привертати увагу користувачів, і зацікавлювати їх, і закликати до дії (call to action).

Як створити текстове меню?

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

Отже, як зробити меню у групі ВКонтакте:

Важливо!Робіть їх обмеженими, щоб доступ до редагування був лише у вас. При відкритому доступі, редагувати меню зможе будь-який учасник спільноти.

При наведенні на кнопку<>, з'явиться напис «Візуальний режим редагування». Якщо з'являється режим wiki-розмітки, це означає, що він не включений.

Кнопка «Перегляд» дозволяє заздалегідь побачити результат.

  1. Якщо все зроблено правильно, натискаємо кнопку "Зберегти сторінку".

Вуаль! Тепер у нашому паблику з'явилося меню. Клікнувши на кожен із пунктів, ми потраплятимемо на відповідну сторінку.

За промовчанням воно буде доступне у вкладці з назвою, яку ви вказали (замість «Свіжих новин»). Але далеко не всі користувачі його бачитимуть. Щоб зробити його більш клікабельним та помітним, створіть пост із посиланням на меню, оформіть цей пост відповідним чином та закріпіть його. Таким чином, натискаючи на посилання в закріпленому записі, перед користувачем відкриватиметься меню групи.

Нижче наведено приклад такого запису:

Текстове меню використовується рідко, оскільки вашого співтовариства не отримає жодного привабливого вигляду. Та й кликати нею неохоче. Але я показав вам, як його створювати так, щоб користувачі звернули на нього увагу.

Як зробити графічне меню?

Інша річ графічне меню, де за основу беруться зображення. Тут як кнопки виступатиме не текст з гіперпосиланнями, а картинки формату PNG. Тому, щоб зробити графічний варіант wiki-меню для своєї спільноти, вам знадобляться хоч якісь навички та вміння роботи у фотошопі чи іншому графічному редакторі.

У ньому необхідно буде створити зображення кнопок. Щоб меню не виглядало, як набір випадкових зображень, кнопки, що створюються у фотошопі, повинні поєднуватися між собою, щоб разом вони виглядали, як одне ціле. Наприклад, як на скріншоті нижче:

Як створити графічне меню у групі:


Таким чином, ми отримали меню, яке складається лише із зображень. За бажання та достатніх навичок ви зможете створити неповторний стиль та новий дизайн для своєї спільноти.

Якщо ж ви не маєте навичок роботи у фотошопі, але бажаєте отримати якісне та привабливе оформлення свого меню, зверніться до професіоналів. Або використовуйте спосіб, що я опишу далі.

Використання шаблонів

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

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

Як наявність меню сприяє успіху спільноти?

Якісне, красиво оформлене інтерактивне меню є і грамотним дизайнерським рішенням, і корисним інструментом. Причому користь воно приносить як відвідувачам спільноти, так і маркетологам, завдання яких змусити цих відвідувачів здійснювати цільові дії.

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

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

Дивіться також які інструменти допоможуть у відповідній статті.

Підсумок

Сьогодні я розповів вам про те, як зробити меню в групах ВКонтакті, про його види та користь. Це багатофункціональний та дуже корисний інструмент. Використовуйте його у своїй роботі. Сподіваюся, стаття була для вас корисною.

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

Це найпоширеніший і найдешевший вид меню. Дозволяє створити зручну навігацію за розділами групи або на зовнішні ресурси: обговорення, фотоальбоми, каталог товарів, людину, відеозаписи, сайт компанії або сторінки в соціальних мережах. Дизайн навігаційного меню зазвичай не буває довше 1000px та вміщається на одному екрані монітора.

Види навігаційного меню:

Дане меню має простий функціонал і встановлюється лише на одну wiki-сторінку. Кнопочки меню ведуть за посиланням одразу на потрібний розділ групи або зовнішні сайти без відкриття додаткових навігаційних сторінок. Це зручний варіант меню, якщо Ви не маєте великої кількості послуг/товарів і Ви не позиціонуєтеся як велика компанія.

Односторінкове меню підходить для невеликих інтернет-магазинів, фотографів, коучої та б'юті-майстрів.

Багатосторінкове меню

Це вид навігаційного меню, у якому перехід за розділами групи здійснюється структурою. Як приклад: кнопочка "товари" веде на нову wiki-сторінку, на якій відображається список розділів "дитячий одяг", "для жінок", "для чоловіків" і т.д. Кожна вікі-сторінка може мати унікальне оформлення, активні кнопки або дублювати дизайн головної сторінки меню.


Багатосторінкове меню - головна вікі-сторінка

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


Багатосторінкове меню - додаткова вікі-сторінка

Wiki-лендинг ВКонтакте

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


  • Опис компанії та її діяльності
  • Категорії послуг чи товарів
  • Відгуки клієнтів через графічне оформлення
  • Відео-записи та промо-ролики
  • Переваги роботи з Вами
  • Акції та спеціальні пропозиції
  • Опис послуг чи товарів
  • Популярні статті у групі
  • Контакти для зв'язку з Вами
  • Активну картку з адресою компанії
  • Відповіді на питання, що часто ставляться

Вікі-лендінг є найкращим вибором для великих компаній, що надають послуги, інтернет-магазинів вузької спрямованості та коучою


Відповідаємо на часті запитання про вікі меню:

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

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


Як зробити меню у групі ВКонтакте?

Для цього Вам знадобляться навички роботи в графічних редакторів, таких як Adobe Photoshop(формат psd), Adobe Illustrator(формат ai або eps) або CorelDRAW (формат cdr). Кожна з цих програм добре впорається з цим завданням. Створюйте новий документ з розмірами 607 px (ми радимо створити документ 608 px) завширшки і задати необхідну довжину меню (висота документа). Тепер можете розпочинати дизайн. В інтернеті Ви знайдете безліч відео, як створити меню ВКонтакте самостійно, а якщо Ви хочете зробити красивий, професійний дизайн, краще звернутися до досвідченого дизайнера.


Верстка графічного меню також має свої тонкощі.Наприклад: Вам потрібно буде розібратися з вікі розміткою ВКонтакте, навчитися перемикатися між можливостями редактора, попрацювати з прив'язкою посилань до кожного фрагмента дизайну та правильно виставити розмір меню. Для недосвідченої людини дана роботаможе зайняти до кількох днів, коли дизайнер може намалювати графічне меню і скидати його до групи за пару годин.


Чим відрізняється меню для паблика та групи ВКонтакте?

Відмінностей у графічному оформленні меню для паблика, групи чи заходу немає. Різниця тільки в установці меню на вікі сторінку. У заходах та пабликах функція включення «Матеріалів» відсутня. Саме через цей розділ створюється посилання на вікі-сторінку, на яку буде встановлено меню групи. Тим не менш, існує вихід з цієї ситуації через публікацію вікі коду, який відкриє доступ до створення вікі сторінки.


Для досвідченого дизайнера створити меню "ВКонтакте" не проблема!


Вам набридло меню у групі ВКонтакте або Ви хочете його приховати? Це можна зробити декількома способами: відключити «Матеріали» в налаштуваннях групи, видалити закріплений пост з посиланням на меню або видалити код меню на вікі сторінці. Найшвидшим і легким способомє відключення розділу «Матеріали» - меню в групі перестане бути видимим і за бажання Ви завжди зможете його повернути. Саму вікі сторінку ВКонтакте видалити не можна.

Приклади гарного оформлення меню

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


Замовити дизайн групи ВКонтакте - дизайнер Ірина Філіпенко

Замовити дизайн меню для групи ВК

Ми працюємо у сфері оформлення груп ВКонтакте з 2012 року та за цей час виконали понад 200 проектів на розробку дизайну. Найпопулярнішою послугою наших клієнтів є дизайн групи «під ключ» з вікі-лендингом. Ця дорога послуга в нашій студії надається без величезних націнок, тому що Ви працюєте на пряму з дизайнером і ми не беремо жодних додаткових платежів- за виправлення, витрачений час або покупку графіки. Чи зацікавила наша пропозиція? Зв'яжіться з нами через розділ на цьому сайті.

Коментарі закриті.

Конвертер Валют

Конвертер Криптовалют

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

Наприклад, у Вас є своя фірма, яка пропонує певний товар чи послуги. Також є веб-сайт в Інтернеті. Тоді група Вконтакте для цієї фірми допоможе залучити нових покупців та збільшити продажі. Меню може включати такі пункти: Вікна, Двері, Ворота, Охоронні системи, Додаткові матеріали, Акції та знижки. Посилання робимо таким чином, щоб клацнувши по одному з пунктів, людина перейшла у відповідний розділ на сайті.

Меню можна зробити, не посилаючись на сторонні сторінки в Інтернеті. Наприклад, у Вас гурт присвячений музиці. У пунктах можете вказати жанри: класична, рок, реп, з індійських фільмів, для новонароджених, з мультиків. Коли людина кликає по одному з пунктів, у неї має відкритися альбом із відповідними піснями. У цьому випадку пункт – це посилання на певний альбом у групі.

Прикладів для створення навігації у групі можна наводити багато. Ну, а тепер давайте перейдемо до практики.

Створюємо меню

Необхідні налаштування у групі

Перш ніж приступати до створення самого меню, необхідно перевірити деякі налаштування групи. Ви маєте бути саме творцем групи, інакше у Вас просто може не вистачити прав для створення навігації.

На своїй сторінці Вконтакті в лівій колонці клацніть по Групі і виберіть зі списку свою групу. Потім під аватаркою натисніть три вертикальні точки і виберіть зі списку «Управління спільнотою».

Тепер у меню праворуч перейдіть на вкладку "Розділи" і в полях "Обговорення" та "Матеріали" виберіть "Відкриті" або "Обмежені". Натисніть "Зберегти".

Підготовка зображень для меню та аватарки у 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;» та посилання.

В результаті має бути так: змінено назву вкладки (МЕНЮ), прибрано пробіли між рядками, прибрано пробіли між зображеннями (nopadding;), додано посилання. Натисніть «Зберегти сторінку» та повертайтеся на головну сторінку групи.

На цьому процес створення навігації для групи Вконтакте завершено. У мене так вийшло. Зображення аватарки та меню – одне ціле. Перейшовши на вкладку «МЕНЮ», користувач може вибрати те, що його цікавить, і перейти за вказаним посиланням.

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

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

Різновиди меню для спільноти "ВКонтакте"

Наразі існує два типи меню групи "ВКонтакті". Шаблони їх, звичайно, є на просторах Інтернету, і можна робити все за ними. Проте результат не буде креативним та оригінальним, а отже, не залучатиме велику кількість передплатників.

Отже, є закрите меню та відкрите.

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

Відкрите – це піст, який був закріплений. На ньому розташовується посилання на меню. Цей тип ще досить молодий, з'явився він нещодавно, а точніше з появою функції закріплення посту на стіні сторінки. Відкрите менює найбільш ефективним на сьогоднішній день, воно привабливіше, ніж закрите. Перший варіант менш продуктивний, тому що відвідувачі групи можуть просто не помітити посилання на нього.

Отже, "ВКонтакті"? Відповідь досить проста. Для створення обох типів меню групи "ВКонтакте" застосовується вікі-розмітка. Це дуже зручний інструмент, він дозволяє створювати таблиці, графіки, форматувати та редагувати зображення, працювати з посиланнями та інше. Однак зараз все набагато простіше для творців спільноти "ВКонтакте", ніж кілька років тому. У соціальній мережі є на автоматі перекладач весь контент у вікі-розмітку.

Відкрите меню для групи "ВКонтакте" зараз популярніше, а закрите вже практично не використовується. Отже, буде розумним розглянути докладніше створення відкритого типу. Далі ви дізнаєтесь, як зробити меню у групі "ВКонтакте" ( покрокова інструкціяпредставлена ​​нижче).

Етап перший

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

Перша картинка є аватаром. Друга (центральна) – зображення-дія. Параметри аватара повинні бути не менше 200 x 330 пікселів. Центральне зображення – не менше 390 х 280 пікселів.

Етап другий

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

На основній сторінці натисніть редагування в рядку «Матеріали». У формі-редакторі вкажіть назву, розділи, а потім обов'язково натисніть кнопку внизу для збереження. Після цього поверніться до сторінки за допомогою кнопки у верхньому правому кутку.

Етап третій

Копіюйте адресу сторінки. Перший ряд чисел після слова “page” – це номер спільноти, другий – номер сторінки групи. Це потрібно обов'язково знати, замислюючись, як створити меню групи "ВКонтакте". Адресу необхідно вставити на стіні разом із центральним зображенням. Щоб прикріпити зображення, натисніть «прикріпити» та «фотографію». Далі вибирайте та вставляйте. Після цього натисніть відправити - це опублікує пост.

Етап четвертий

Поставте перше зображення на місце основної фотографії спільноти. Запис про цю дію разом із картинкою з'явиться на стіні. Вона там ні до чого, тож її треба видалити.

Це все. Коли користувачі клацатимуть на центральне зображення, ним відкриватиметься меню групи.

Як створити таблицю у меню?

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

Таблиця дуже зручна у навігації по меню для групи "ВКонтакте". Щоб створити таблицю, потрібне знання певних символів.

  • (| означає початок;
  • |+ розташування центром;
  • |- з нового рядка;
  • | прозорість;
  • ! темне заливання осередку;
  • |) означає кінець.

Як оформити посилання?

У питанні про те, як зробити меню у групі "ВКонтакте", є важливий момент, що стосується посилань. Оформити їх можна по-різному:

  • Залишити просто посиланням. Для цього візьміть посилання у квадратні дужки.
  • Зробити посилання словом чи фразою. Відкрийте вставте посилання після посилання поставте знак | та закрийте квадратну дужку.
  • Зображення-посилання. Зробити це можна за таким прикладом: [].

Найчастіше кожен навчається сам, тому, як створити меню групи "ВКонтакте". Знання приходять із досвідом методом проб та помилок. Однак початківцям все ж таки можна дати кілька рекомендацій.

  • Розмір зображення не повинен бути меншим за 130 пікселів. Це значно погіршить вигляд меню.
  • Ширина картинки – не більше 610 пікселів.
  • Вікі-сторінка не здатна містити більше 17 незакритих тегів.
  • Коли ви ставите показник ширини, висота автоматично змінюється відповідно до пропорцій.
  • Всередині таблиці можна створити список за допомогою />.
  • В одному рядку можна розмістити максимум 8 одиниць списку.

Крім усього іншого, існують спеціальні програмидля легшого користування вікі-розміткою. Це і навчальні програми, і справжні помічники, які зроблять все за вас.

Наприклад, додаток "Інтерактивний FAQ (beta)" дозволяє перевірити свої здібності у вікі-програмуванні.

Робота його проста: користувачеві надається готове меню і потрібно прописати код розмітки. Наприкінці результат порівнюється з оригіналом.

Програма "Вікі редактор" нічому не вчить і не тренує своїх користувачів. З її допомогою можна зробити меню навіть без початкових навичок програмування. Простий у використанні редактор сам пише коди – користувачеві потрібно лише керувати.

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

Як відомо, людина, читаючи чи потрапляючи на той чи інший веб-ресурс, перші 8 секунд звертає увагу на дизайн та інтерфейс. Паралельно він переконується у хорошому чи поганому юзабіліті (зручності користування). Меню в групі в соціальній мережі «Вконтакте», про яке ми сьогодні й поговоримо та розглянемо принцип його конструювання на прикладі, дозволяє не лише барвисто подати інформацію та «відрізнитись» від конкурентів на краще, а й виявити саме ті пункти і зробити на них акцент, який необхідний.

Достатньо поглянути на кілька прикладів, щоб зрозуміти, наскільки це красиво та зручно:

Приступимо. Для початку, слід зазначити, що, якщо ви хочете зробити меню самі з нуля, вам знадобиться вся нижченаведена інформація. У тому випадку, якщо дизайн вже є, то можете пропустити частину статті пі перейти безпосередньо до його розміщення та wiki-розмітки.

Дизайн меню

Дозволяє виконати основу для майбутнього проекту. Щоб виконати цю частинуробіт, вітається знання такої програми, як "Adobe Photoshop". Ось так виглядає шаблон розмірів, в якому ми реалізовуватимемо майбутнє красиве меню.

Ширина аватара становить 200 пікселів, висота – 500. Зображення основного меню – 510*308. В результаті ми отримаємо ось таку гарну «менюшку» наприкінці.

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

Цей вихідний PSD-макета був реалізований для прикладу. Завантажити

Не загострюватимемо уваги на тому, як робився шаблон, приступимо відразу до його підготовки для розміщення в нову або вже існуючу групу. Відкриваємо файл у «Фотошопі».

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

Заходимо в розділ «Зображення» та вибираємо операцію «Триммінг».

На виході отримуємо:

При великій вазі зображення, що вийшло, можна скористатися інструментом «Зберегти для Web». Команда також знаходиться у розділі "Файл".

Виконуємо аналогічну операцію із зображенням, яке буде виводитися при первинному відображенні меню. У нашому випадку залишаємо видимими – папку «відкрити меню» та «фон меню» у папці «меню з машиною». На виході в результаті:

Тепер необхідно виконати збереження та нарізку другого рівня меню. Для цього залишаємо видимим "фон меню" в папці "меню з машиною" і додаємо до нього "Меню другий рівень".

Потім скористаємося інструментом «Розкройка», який можна знайти в меню зліва.

"Розрізаємо" нашу картинку на відповідні частини. У нашому випадку їх буде три.

На цьому підготовчу частину закінчено. Приступаємо до основного етапу.

Wiki-розмітка готового меню у «Вконтакті».

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


Потім обов'язково виконуємо наступну послідовність дій. Заходимо до «Управління спільнотою» та у пункті «Розділи» навпроти кнопки «Матеріали» вибираємо «Обмежені».

Зробити це необхідно, щоб користувачі та учасники групи не могли змінювати та/або редагувати додаткові позиції, зокрема меню.

Після виконаної операції завантажуємо наші нарізані картинки до альбому спільноти.

Переходимо до розділу «Свіжі новини», вибираємо «Редагувати» та потрапляємо до меню редактора.

Щоб прискорити процес, скористайтеся клавішею «Фотоапарат» і натисніть «Вибрати з фотографій спільноти».

Після додавання знову потрапляємо в меню редактора та натискаємо клавішу «<>», у якій зробимо подальше редагування. Також одразу перейменовуємо розділ та замість «Свіжі новини» пишемо в нашому випадку «МЕНЮ ГРУПИ».

Загальна структура кожної нарізаної частини виглядає так у розмітці - [], де:

    id – ідентифікатор (номер) картинки, яку ви завантажили;

    X та Y – розмір зображення по горизонталі та вертикалі в пікселях;

Дивлячись на шаблон, редагуємо нашу wiki-розмітку і періодично заходимо до розділу «Перегляд», де візуально відображаються внесені нами зміни.

Відразу всі картинки необхідно закрити тегом (а не як слід за промовчанням, кожне зображення)

, який автоматично розміщує всі частини меню центром сторінки!

Оскільки тег, що центрує зображення, ми вже залишили один, те, щоб позбавитися «неприємних» відстаней між частинами загального зображення, слід вставити тег «nopadding» таким чином: []

Ось що виходить у результаті.

Тепер слід натиснути на вкладку "МЕНЮ ГРУПИ", потім "редагувати".

Важливо! Щоб скопіювати необхідну адресу, натискаємо у нашому варіанті на «МЕНЮ ГРУПИ» та копіюємо звідти «правильне посилання».

Переходимо на головну сторінку, натискаємо «Додати запис». Не забуваймо відразу ж поміняти автора запису!

Натискаємо на «крапку» праворуч від запису і клацаємо по вкладці «Закріпити».

Після цього оновлюємо сторінку і насолоджуємося результатом, що виглядає таким чином:

Натисніть «Відкрити меню».

Як бачите, зробити меню у соціальній мережі «Вконтакте» досить легко та просто. Достатньо мати легкий рівень знань користування «Фотошопом» та wiki-розмітки. Чим кращий і тямущий дизайн, тим охочіше і частіше потенційний користувач приходитиме і повертатиметься у вашу групу.

Якщо ви хочете дійсно унікальний і приголомшливий дизайн гурту з дотриманням фірмової стилістики та супутніх елементів, то зверніться до професійного дизайнера, а можете й самі перед цим випробувати розмах своїх талантів. Успіхів вам у всіх ваших починаннях!

Розповісти друзям