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

Після значень розміру картинки і вертикальної палички вставте посилання на сторінку, куди перейде людина, клікнувши по відповідному пункту меню. Як я вже писала, посилання може бути на якусь сторінку Вконтакте або на сторонній ресурс в Інтернеті.

Ось так буде виглядати код, після того, як Ви додасте «nopadding;» і посилання.

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

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

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

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

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

У даній статті ви знайдете інформацію про те, як створити меню групи вк самостійно! Тому якщо ви спантеличені питанням: як зробити меню групи вконтакте, цей огляд для вас!

Швидка навігація:

Що таке меню групи

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

Створення меню групи Вконтакте онлайн

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

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

Принцип створення меню можна розділити на кілька кроків:

Крок 1. Визначтеся з шаблоном для оформлення.

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

Крок 2. Визначте кількість кнопок.

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

Крок 3. Вкажіть посилання і написи.

Крок 4. Перевірка і експорт.

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

Крок 5. Внесення змін.

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

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

Банер для групи Вконтакте, створити безкоштовно!

Є спеціалізовані сайти, де без особливих зусиль і програмного забезпечення, Ви зможете зробити собі гарний банер для групи Вконтакте. Наприклад https://bannermakers.ru/banners-vk/.
Крім створення меню таким чином є так само способи зробити меню в групі вк і іншим чином. Про це читайте нижче.

Меню ВК вікі розмітка

Вікі-розмітка - відмінний помічник в створенні красивого і ефективного спільноти! Це дуже зручний і ефективний спосіб оформлення паблік в популярній мережі «ВКонтакте». Ця розмітка за схемою свого дії дуже схожа з html кодом. Але для тих, хто не пов'язаний з програмуванням,

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

· Створювати спойлери і таблиці графічним способом.

· Форматувати зображення і текст.

Отже, перейдемо до розбору як же зробити меню спільноті ВК?

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

Трохи зупинимося на її історії, а потім вже поговоримо про технології. Уорд Каннінгем вперше познайомив людей з поняттям «вікі», яке в перекладі з гавайської мови означає «швидкий». Таким чином, він висловив простоту і швидкість у використанні розмітки.

Швидка обслуга

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

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

Основи Wiki-розмітки в створенні меню для групи ВК

Створити меню групи ВК, красивим і цікавим вам дозволять тематичні картинки і фотографії. Важливо знати, що «ВКонтакте» вставити необхідну фотографію або картинку з використанням вікі-розмітки надається можливим тільки тоді, коли вони вже завантажені в альбоми сайту. Отже, заходимо в альбом, визначаємося з потрібною фотографією і копіюємо її адресу. Припустимо, нехай він буде таким: photo14523_90678. Тепер потрібно його захопити в подвійні квадратні дужки. Повинен бути такий підсумку: []. А що, якщо до картинки або фотографії потрібно прикріпити посилання або ТЕКТ? А може, є необхідність відредагувати зовнішній образ? Тоді тут допоможе наступна дія: потрібно, щоб файл мав такий вигляд - [[photo14523_90678 | options | text / link]], і замість трьох останніх слів потрібно підставити те, що треба. Text - вписуємо те, що потрібно. Тут напевно додаткові пояснення будуть недоречні. Link в перекладі з англійської - «посилання». Позначається для того, щоб машина відвідувача розуміла, куди їй необхідно йти. Options - тут встановлюються такі значення:

Noborder - видаляється рамка, розташована близько фотографії. Box - зображення розташоване у вікні.

Nopadding - прогалини між картинками не відображаються.

NNNxYYYpx або NNNpx - вказують на розмір картинки (в пікселя).

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

(| - позначення початку таблиці. Обійтися без цього символу при створенні таблиці неможливо, він обов'язковий атрибут.

| - застосовується, для додання осередкам ефекту прозорості.

| + - за допомогою такого набору символів назву таблиці розташовують по центру. Це зовсім не обов'язковий атрибут, але він повинен розміщуватися безпосередньо після знаків, що характеризують початок.

| - - так позначаються нові рядки (також і для осередків).

Оформляє темний колір. При відсутності цього символу необхідно застосовувати знак з пункту №2.

|) - набір символів, що позначає кінець таблиці. Це необов'язковий атрибут. Але застосовувати його все ж рекомендується, для запобігання виникнення помилки.

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

Тепер ви поетапно вивчили інформацію як зробити меню в групі вк за допомогою вікі - розмітки. На прикладі складання меню для свого паблік вам стане ще все більш зрозуміліше.

Як зробити меню в групі ВК з новим дизайном 2018

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

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

1. Відкриваємо зображення меню в фотошопі або іншому графічному редакторі.

2. Досліджуємо розмір картинки і якщо він перевищує 600пікс по ширині - міняємо розмір на 600, висота картинки змінюється пропорційно, вручну її не задані!

3. Використовуємо інструмент «розкроювання» і кроїмо наше зображення на кнопки.

4. Зберігаємо картинку в параметрі «для WEB». Тепер робота по фотошоп закінчена. Переходимо до спільноти.

5. Переходимо в налаштування спільноти в «Матеріали», вибираємо «Обмежені» і тиснемо «Зберегти».

6. Переходимо на головну сторінку, у підрозділ «свіжі новини» натискаємо «редагувати».

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

Якщо замість коду з'являються відразу картинки після входу в редактор вікі розмітка меню необхідно переключити режим вікі розмітки!

Тепер перед нами код нашого меню, але його необхідно трохи допрацювати, щоб видалити пробіли між зображеннями. Зараз наш код виглядає таким чином: [] [-] [-] [-] [-]

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

8. Правимо код: За умовчанням в вк вбудовано дозвіл на максимальний розмір зображення по ширині 400пікс, перша кнопка виходить 600, міняємо параметри першої кнопки 400x89px на 600рх, висоту вказувати не потрібен. Так само вписуємо в кожен рядок такий тег: nopadding обов'язково через крапку з комою.

Важливо! Чи не клікайте на ENTER після рядків коду якщо бажаєте, щоб у вас дві кнопки знаходилися поруч, в одному рядку меню. Редактор автоматично перенесе на новий рядок ті параметри, які не влазять! Такий код повинен бути після правки:

[][-][-][-][-]

Тепер, перейшовши в «попередній» ми бачимо що все знаходиться на своїх місцях. Додаємо в код необхідні посилання на кожну з кнопок, для наочного прикладу посилання на першу кнопку тут неклікабельна! Не забувайте прибрати зайвий пробіл між | і].

[][-][-][-][-]

Переконавшись що все зроблено, як було задумано, натискаємо «зберегти» і повертаємося до сторінки. Зверніть увагу що в новій версії 2018 відсутня кнопка «повернутися на сторінку», тому потрібно просто клікати на ім'я сторінки вгорі.

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

10. У полі нового повідомлення потрібно вставити скопійоване посилання. Після того як відобразитися шматочок меню посилання потрібно видалити! І за допомогою значка фотокамери потрібно додати заздалегідь підготовлене зображення для банера. Ставимо «від імені спільноти», клікаючи на гурток зліва від кнопки «відправити», і тиснемо на «відправити»

11. Тепер закріпимо меню, оновимо сторінку і оцінюємо наш результат. На всю роботу, не поспішаючи, витрачається приблизно 15-20 хвилин.

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

Тепер розглянемо, як можна зробити меню групи ВК з переходами.

Отже, як же зробити одне вікі меню всередині іншого? В першу чергу, має бути готовий перший меню. Будемо відштовхуватися від вже нарізаною на кнопки картинку. Додаємо розкроєні шматочки зображення через заначок фотокамери в редакторі вікі. Якщо замість коду з'являються картинки, значить не включений режим вікі розмітки, перед додаванням зображення натисніть<>

Не забуваємо клікати на «Зберегти» внизу сторінки! При необхідності можна змінити розмір зображення і дописати в код тег nopadding, за замовчуванням він відсутній, а розмір картинки повинен бути максимум 400 пікселів по ширині, якщо зображення більше потрібно виправити його на потрібний розмір!

1. Після редагування коду, зберігаємо і натискаємо «повернутися».

2. Перевіряємо в правильності відображення першого меню.

3. Якщо все як треба, знову натискаємо "редагувати".

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

Поки ваша тільки що сформована сторінка ще пуста, натискаємо «редагувати» або «наповнити змістом»

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

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

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

Таким чином, при кліці на кнопку «Відгуки» буде відкриватися наше друге меню.

Як зробити меню групи ВК з телефону

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

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

Меню групи Вконтакте шаблони

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

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

Привіт друзі!

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

Що таке меню ВКонтакте і для чого воно потрібне?

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

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

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

Тому обов'язково враховуйте тематику співтовариства при створенні меню.

Способи створення меню для груп ВКонтакте

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

Як зробити привабливе оформлення?

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

1. Для початку вам потрібно встановити програму Photoshop, Якщо раніше на комп'ютері у вас не була встановлена \u200b\u200bця програма.
2. Відкриваємо Фотошоп і створюємо два файли-шаблони для аватара і для меню. Задаємо потрібні розміри. Наприклад, для аватара - 200 × 500 пікселів, а меню 389 × 600 пікселів. Залийте їх яким-небудь одним кольором для того, щоб їх було чітко видно і зберігаємо два створених окремих файлу.
3. Завантажуємо в групу шаблон на місце аватара, виділяючи всю область.
4. Завантаження меню відбувається трохи складніше. Для цього вам знадобиться в «Управлінні співтовариством» включити матеріали. Після цього стане доступна можливість додавати меню. Зайдіть в інформацію, що з'явилася вкладку під описом групи «Свіжі новини» та натисніть в панелі інструментів на кнопку у вигляді фотоапарата і завантажуйте файл з комп'ютера. Вийшло?
   
5. Відразу після завантаження вам стане доступна посилання, яку доведеться трохи допрацювати. Після слова «noborder» впишіть знак «;» і слово «nopadding». Це функція не дасть вашому меню опускатися при додаванні новин в співтовариство.
6. Робимо Prnt Scrn основної сторінки вашої групи. Для чого? Щоб зрозуміти свої помилки. Справа в тому, що зараз це чорновий варіант - все не рівно і не так красиво. Ваша мета полягає в тому, щоб нижні межі меню і аватара ідеально збігалися. Тоді можливо у вас з'явиться питання «Чому я не даю вам точних розмірів?». А справа в тому, що кожен адмін використовує різну кількість тексту в описі групи, від чого змінюється висота меню, а ширина меню - це справа смаку і як ми знаємо у всіх він різний.
7. Входимо в Фотошоп, і створюємо новий файл, вставляючи туди скріншот.
8. Тепер, працюючи з цим файлом, виділяємо область аватара за допомогою «прямокутного виділення» - їм можна максимально точно виділити конкретну область. Далі, натискаємо правою клавішею миші і вибираємо «вирізати на новий шар».
   
9. Те ж саме проробляємо з картинкою меню, тільки при виділенні потрібно відсікти непотрібне внизу. Зробити так, щоб низ меню і аватара повністю збігалися.
10. Тепер, затиснувши кнопку Ctrl, вибираємо два, створені нами шари. Натискаємо правою клавішею миші по ним і вибираємо функцію «Об'єднати шари». Перед нами з'являються два наших ідеально підігнаних один під одного шаблону на одній сторінці.
11. Наступний етап - завантажуємо фото обкладинки. Воно з'являється поверх наших шаблонів. Тепер справа в інструментах для шарів натискаємо по файлу-обкладинці, затиснувши клавішу Alt. Після даної процедури, обкладинка буде видно тільки на шаблонах і стане невидимим за їх межами. Але це не завадить вам пересувати обкладинку і підбирати потрібну видиму її частину.
12. Тепер важливий пункт створення меню - кнопки. До цього моменту ви повинні вже знати точні назви майбутніх кнопок. Наприклад, «Здоров'я», «Діти», «Наші контакти». Для полегшення завдання створюємо першу кнопку, такі лише дублюємо і міняємо текст.
13. Додаємо логотип на аватарку або словесний заклик, або ж і те, і інше. Це додасть вашій групі жвавості, а також відмінну рису.
    
14. зберігаємо загальний файл в якості картинки на свій комп'ютер. Що далі?
15. Відкриваємо в Фотошопі створений тільки що нами файл. Далі створюємо новий порожній файл з точними розмірами нашого аватара, вставляємо в нього створену нами картинку з логотипом і кнопками. Вибираємо потрібну нам область під аватар і ідеально підганяємо під вибрані розміри. Після чого зберігаємо наше творіння.
16. Те ж саме робимо з меню. Але знову ж таки тут є своє доповнення. Для початку потрібно дізнатися висоту меню, так як вона не збігається з чорновим варіантом. Використовуючи лінійку, вимірюємо висоту до єдиного пікселя (а краще всього кілька разів виміряти, щоб не помилитися). Створюємо новий файл зі старою шириною і нової висотою, підганяємо картинку під розмір і натискаємо кнопку «Зберегти».
    
17. Завантажуємо новий аватар, виділяючи всю область і підбираємо мініатюру.
18. Закачуємо меню через кнопку «Свіжі новини». Видаляємо попереднє посилання, завантажуємо нове фото і додаємо «; nopadding».
19. Тепер розкроюємо наш макет меню. Застосовуємо інструмент Фотошопа «Раскройка» або «Ніж». В різних версіях Фотошопа він називається по різному. Під кожною кнопкою проводимо лінію, щоб зробити окремі прямокутники, наводячи на які користувач зможе в майбутньому переходити на конкретні посилання.
20. Заходимо в редагування меню через «Свіжі новини» і завантажуємо кожну нашу вирізку з меню по черзі. При перегляді будуть показані пропуски між нашими картинками. Для того щоб від них позбутися, потрібно додати в кожну посилання слово "; nopadding".
    
21. Тепер щоб ваші посилання були активні і ви могли вставити потрібну вам інформацію, то напишіть по посиланнями картинок в редагуванні меню - назва однієї з ваших кнопок - наприклад Доставка. Але це слово потрібно написати чітко по встановленим правилам, Виглядати воно повинно так [[Доставка]]. Далі зберігаємо сторінку, переходимо за цим посиланням і наповнюємо її потрібним контентом.
22. Останньою дією, щоб все запрацювало, є вставка копії посилання на сторінку Доставка на заслання кнопки, наприклад - page-123456_456789, тобто інфа між словами «vk.com/» до «?». Все, тепер кожну кнопку оформляйте також і ваше меню буде успішно залучати вам цільову аудиторію.

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

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

Ось кілька прикладів, щоб всі розуміли, про що йдеться.

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

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

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

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

Глобально можна міркувати так: якщо нам потрібно створити співтовариство для магазину, то я б взяв формат «паблік». Якщо ж мова йде, наприклад, про любителів риболовлі, то краще взяти «групу». Хоча, кожен вільний чинити так, як вважає за потрібне. Адже в будь-який момент формат можна буде змінити. Однак, майте на увазі, що Вконтакте вводить обмеження на повторне зміна формату співтовариства і після першого разу потрібно буде чекати кілька днів до того моменту, як ви зможете все повернути назад при необхідності. Тому тестувати функціонал краще до того, як група почне наповнюватися контентом.

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

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

Контенту море, починаємо втілювати ідею в життя!

створення групи

Щоб створити групу, переходимо в «Мої групи» в правому меню аккаунта Вконтакте і натискаємо на синю кнопку вгорі «Створити спільноту».

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

Ввівши необхідну інформацію перед нами відкривається панель управління нашим співтовариством. У моєму випадку вона виглядає наступним чином.

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

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

Усе. Група створена!

Тепер можна починати її оформляти.

Оформлення групи Вконтакте

Цей етап можна розбити на 2 складові: графічна і технічна. Для роботи нам буде потрібно шаблон для створення аватарки групи і меню, а також трохи уяви і базові знання фотошопа (він же Adobe Photoshop).

шаблон розмітки

Що вдає із себе шаблон і що це взагалі таке? Шаблон - це свого роду заготовка. В даному випадку, в * .psd форматі у нас розмічені області для картинки під меню і аватарки групи.

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

Щоб стало зрозуміліше, ось приклад.

Ми бачимо, що на обох частинах картинки є смуга з видом на житловий район. Без використання шаблону рівно зробити з першого разу практично нереально. Потрібно буде підганяти картинки, виміряючи розбіжності аж до 1px. У той час як при використанні шаблону ми просто додаємо в нього графіком в рамках розмітки і відразу ж отримуємо бажаний результат.

Хочу зазначити, що даний шаблон розрахований на 1 рядок в поясненні. На скріншоті приклад там телефони. Якщо з'явиться другий рядок, то необхідно буде використовувати інший шаблон, або виправити дизайн вручну.

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

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

На лівому фрагменті (де напис «Меню») можна також додати кілька тригерів. В даному випадку я вирішив робити без них. Усе. Дизайн аватарки готовий. Тиснемо в фотошопі сочитание гарячих клавіш Shift + Ctrl + Alt + S і зберігаємо наші фрагменти в папку на жорсткий диск.

Перший етап роботи з графікою завершено. Повертаємося в контакт.

Установка аватара і меню для групи

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

Додаємо картинку. Вказуємо поля і вибираємо мініатюру. Тут все просто і проблем бути не повинно.

Як ми бачимо, потрібно знати id спільноти. Дізнатися його дуже просто. Знаходимо в своїй групі меню (відразу під аватарки) і відкриваємо «Статистику спільноти». При цьому в адресному рядку браузера з'явиться щось схоже (цифри будуть інші).

Ці цифри після «? Gid \u003d» і є шукане id групи. Вставляємо отримане значення в форму скрипта і пишемо назву для тієї сторінки, яку хочемо створити. В даному випадку, я вбиваю «Меню».

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

Якщо все зроблено правильно, відкриється ось така сторінка.

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

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

Дизайну ще ніякого немає, але зараз нам потрібна лише посилання на цю сторінку. Забираємо її в адресному рядку браузера і повертаємося на головну сторінку нашої групи. У стрічку.

Тут створюємо пост такого змісту: вставляємо туди картинку і посилання на сторінку меню для групи.

Натискаємо відправити. Після чого клацаємо по часу відправлення повідомлення і вибираємо там серед усіх варіантів пункт «Закріпити». Оновлюємо сторінку (клавіша F5 на клавіатурі) і, якщо все зроблено правильно, отримуємо перший результат: група знайшла аватарку і посилання для переходу в розділ меню.

Wiki-розмітка меню групи Вконтакте

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

Не буду зараз зупинятися детально на тому, як саме я збирав меню. Ось, що у мене вийшло.

Мінімум полів. Вертикальна розкладка. Ідеальний формат для адаптивного меню. Тобто, на меблях нічого нікуди не поїде. Все буде в точності, як на екранах комп'ютерів і планшетів. Ширину беру 500 px, щоб потім нічого не ужалось і не втратити в якості зображення двічі. Висота не принципова.

Розрізаємо зображення на фрагменти і зберігаємо їх.

Усе. Настав час заключного акорду - збираємо меню вже в самій групі.

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

Якщо ви адміністратор або творець групи (в нашому випадку це так і є), то в верху сторінки буде посилання «Редагувати». Клацаємо по ній.

Потім переходимо в режим wiki-розмітки (під кнопкою закрити у верхньому правому кутку сторінки намальована така рамочка з<> всередині). Коли потрібний режим активований, дана кнопка обведена сірим.

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

Я хочу розмістити меню по центру і щоб між фрагментами не було ніяких зазорів. Тому кожен з елементів обгортали в тег

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

У моєму випадку код меню виглядає наступним чином.

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

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

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

Після чого вставляємо в вікі-код менюшки посилання на нові сторінки у вигляді page-102302049_51013384, де перше число - це id групи, а друге - номер сторінки. Хоча, це взагалі-то і не важливо. Адже нам потрібно всього лише скопіювати цей фрагмент URL і вставити в розмітку.

В результаті код меню приймає наступний вигляд.

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

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

Соціальні мережі давно увійшли в життя більшості людей і є важливою складовою в ній. Багато людей навіть примудряються створювати свої віртуальні бізнеси в них: накрутка лайків, передплатників, продаж товарів як з інших країн, так і авторських. Майже всі вони мають групу. А як користувачам донести швидше за все, чим займається людина або навіть ціла організація? Створити спеціальне меню, в якому буде міститися сама необхідна інформація. І саме тут нам знадобиться Wiki-розмітка. Як зробити меню групи ВК? Що додати в неї? У статті будуть розглянуті правила створення і приклади.

Чим є Wiki-розмітка?

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

1. Створювати графічні спойлери і таблиці.
2. Форматувати текст і зображення.
3. Працювати з якорями і посиланнями.

Як зробити меню групі ВК? Рекомендації бувають так потрібні, але в цілому, можна розібратися і з допомогою хорошого керівництва. Якщо говорити про html, то для його вивчення та роботи з ним необхідно було посидіти кілька діб або навіть тиждень. Вікі-розмітка при хорошій пам'яті вимагає тільки зовсім небагато часу. Як же її можна створити? Які є підходи? Ось ми буде говорити про технології, а хто її зробив? Ми розберемося, як зробити меню групі ВК. Уорд Каннінгем же вперше ввів поняття «вікі» (в перекладі з гавайського означає «швидкий»).

Способи створення вікі-розміток

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

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

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

Робота з зображеннями

Як зробити меню в групі в ВК, яке було б гарним? У соціальній мережі «ВКонтакте» вставити фотографію або картинку за допомогою вікі-розмітки надається можливим тільки в тих випадках, коли вони завантажені в фотоальбоми сайту. Отже, заходимо в нього, вибираємо потрібну фотографію і копіюємо її адресу. Наприклад, нехай він буде такий: photo12345_67890. Тепер необхідно його взяти в подвійні Повинен вийти такий результат: []. А що, якщо до фотографії або зображення слід прикріпити текст або посилання? А може, є бажання трохи відредагувати зовнішній вигляд? Тоді з цим допоможе наступне: необхідно, щоб у файлу був такий вид - [[photo12345_67890 | options | text / link]]. Замість трьох останніх слів підставляється те, що треба. Text - пишемо те, що потрібно. Здається, особливих пояснень не треба. Link перекладається з англійської як «посилання». Вказується для того, щоб машина користувача знала, куди їй необхідно йти. Options - тут можуть встановлюватися такі значення:

1. Plain - посилання на зображення оформлена як текст, в ній відсутня картинка.
2. Noborder - забирається рамка близько фотографії.
3. Box - зображення відкривається у вікні.
4. Nolink - посилання на фотографію забирається.
5. Nopadding - прогалини між зображеннями не відображаються.
6. NNNxYYYpx або NNNpx - вказують, який розмір буде мати картинка в пікселях. Перший варіант передбачає ширину і висоту. При бажанні можна «стиснути» картинку. І другий варіант передбачає редагування ширини.

Як створювати таблиці з використанням вікі-розмітки?

Зазвичай і графічного, і текстового меню необхідний елемент, який дозволяє представити дані в зручному вигляді, а саме таблиці. Без них мало яка група в «ВКонтакте» обходиться. Щоб створити таблицю в вікі-розмітці, необхідно використовувати певний набір символів. Пропонуємо ознайомитися, за який функціонал вони відповідають:

1. (| - так позначається початок таблиці. Обійтися без нього при створенні даного елемента неможливо, він є обов'язковим атрибутом.
2. | - використовується, щоб давати осередкам ефект прозорості.
3. | + - за допомогою цього набору символів у своєму розпорядженні назву таблиці по центру. Це не обов'язковий атрибут, але він повинен бути розміщений відразу після знаків, що позначають початок.
4. | - - так позначають нові рядки (в тому числі і для осередків).
5. ! - дає темний колір. При его відсутності необхідно використовувати знак з пункту №2.
6. |) - набір символів, які позначає кінець таблиці. Він є необов'язковим атрибутом. Але використовувати його все ж рекомендується, щоб запобігти виникненню помилки.

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

Створення меню групи в соціальній мережі «ВКонтакте» за допомогою вікі-розмітки: приклад реалізації

Тут будуть використані опції noborder і nolink. Вони приберуть рамку картинки і посилання. Також у зображень буде змінено розмір, а другий рядок елементів таблиці буде мати темну заливку, завдяки використанню атрибута !. А ось і сам приклад:

{|
|-
|