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

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

15.11.2018 0 Автор admin

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

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

Вам буде цікаво почитати статті:

  • Як розкрутити групу ВКонтакте
  • Як швидко набрати 10000 друзів ВКонтакте
  • Найпопулярніші соціальні мережі в Росії та в Світі

1 етап - підготовка меню фотошопі


  1. Для наочного прикладу, як зробити Меню, ми знайшли відповідну картинку в Інтернеті. Важливо тільки, щоб ширина зображення становила не більше 600 пікселів (через особливості ВК). Ми виберемо ширину 400px. Це органічно спишеться в наш дизайн. Задати розміри можна через поєднання клавіш Alt + Ctrl + I. Зверніть увагу, що висоту вказувати не треба, вона підлаштується пропорційно.
Як зробити меню в групі в ВК - працюємо в фотошопі

Ось так буде виглядати меню нашої групи вконтакте

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

Змінюємо ширину заготовки під меню групи

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

Раскройка зображення для створення кнопок меню

  1. Тепер збережіть зображення для меню групи ВКонтакте в форматі WEB через поєднання клавіш «SHIFT + CTRL + ALT + S».
Зберігаємо наше меню для групи в ВК

Збереження кнопок меню

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

Збережені «Кнопки» меню

2 етап - створюємо Вікі-розмітку меню ВК

  1. Переходимо до групи ВКонтакте. Насамперед треба зайти в її налаштування і для розділу «Матеріали» встановити значення «Обмежені».
  2. На головній сторінці групи переходимо у вкладку «Свіжі новини». Кількома по напису «Редагувати».
  3. Ви викликали Вікі-редактор, де ми і будемо створювати красиве меню ВКонтакте. Тепер поміняйте напис «Свіжі новини» на «Меню» і завантажте за допомогою спеціальної іконки у вигляді фотоапарата зображення, які отримали при «розкроюванні» в Фотошопі.
  4. Після завантаження всіх зображень перейдіть в режим редагування «Вікі-розмітки», натиснувши в панелі інструментів редактора кнопку <>. Тут ви побачите код меню такого типу.
[[Photo449038873_456239150 | 400x82px; noborder | ]]

[[Photo449038873_456239151 | 400x70px; noborder | ]]

[[Photo449038873_456239152 | 400x57px; noborder | ]]

[[Photo449038873_456239153 | 400x72px; noborder | ]]

[[Photo449038873_456239154 | 400x68px; noborder | ]]

[[Photo449038873_456239155 | 400x70px; noborder | ]]

[[Photo449038873_456239156 | 400x83px; noborder | ]]
  1. Якщо зберегти сторінку і натиснути «Предпросмотр», то трохи нижче можна побачити прообраз меню. Поки воно виглядає безрадісно: між кнопками білі прогалини.
Як зробити красиве графічне меню в групі вконтакте

Поки виглядає не дуже красиво

  1. Займемося редагуванням коду, щоб все встало на свої місця. Для цього додамо тег nopadding в кожен рядок. У підсумку ми отримаємо код такого вигляду:
[[Photo449038873_456239150 | 400x82px; noborder; nopadding | ]]

[[Photo449038873_456239151 | 400x70px; noborder; nopadding | ]]

[[Photo449038873_456239152 | 400x57px; noborder; nopadding | ]]

[[Photo449038873_456239153 | 400x72px; noborder; nopadding | ]]

[[Photo449038873_456239154 | 400x68px; noborder; nopadding | ]]

[[Photo449038873_456239155 | 400x70px; noborder; nopadding | ]]

[[Photo449038873_456239156 | 400x83px; noborder; nopadding | ]]

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

3 етап - розміщуємо меню групи ВКонтакте з посиланнями

  1. Як зробити графічне меню ВКонтакте не тільки красивим, але і інтерактивним? Вірно, для кнопок треба додати посилання. Так як в нашій групі ще немає нічого крім головної сторінки, всі кнопки будуть вести на неї. Ви ж можете вставляти будь-які посилання, в залежності від своїх потреб (фотоальбоми, обговорення, документи і так далі). Вставляємо посилання в кожен рядок коду замість пробілу перед закриваються квадратними дужками -
[[Photo449038873_456239150 | 400x82px; noborder; nopadding | https: //vk.com/club173497067]]

[[Photo449038873_456239151 | 400x70px; noborder; nopadding | https: //vk.com/club173497067]]

[[Photo449038873_456239152 | 400x57px; noborder; nopadding | https: //vk.com/club173497067]]

[[Photo449038873_456239153 | 400x72px; noborder; nopadding | https: //vk.com/club173497067]]

[[Photo449038873_456239154 | 400x68px; noborder; nopadding | https: //vk.com/club173497067]]

[[Photo449038873_456239155 | 400x70px; noborder; nopadding | https: //vk.com/club173497067]]

[[Photo449038873_456239156 | 400x83px; noborder; nopadding | https: //vk.com/club173497067]]
  1. Тепер вирівняємо наше меню по центру за допомогою тегів
    :
[[photo449038873_МИ сховати частину КОДА ... club173497067]]
  1. Наше меню вже працює, залишилося розмістити його на стіні в групі. Для цього натиснемо на напис « МЕНЮ » у верхній частині вікна і скопіюємо посилання з адресного рядка браузера.

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

  1. Тепер створимо новий пост на стіні від імені спільноти і вставимо в нього посилання. Як бачите, в запису з'явилася графічна посилання на меню. Видалимо текстове посилання і натиснемо «Відправити». Пост з'явиться на стіні, закріплюємо його зверху. І ... і можна користуватися! Меню працює! До речі, перейти в нього можна також за посиланням відразу під шапкою групи.

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

  1. Зверніть увагу, в цей пост можна додати будь-яке зображення. Тоді воно теж буде служити посиланням на меню.

Зображення-посилання на меню групи вконтакте

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

 

Ви дочитали до самого кінця?

Чи була ця стаття корисною?


Що саме вам не сподобалося? Стаття була неповною або неправдивої?
Напишіть в коментарях і ми обіцяємо виправитися!

Спасибі, ми старалися. Щастя і добра вам!
Що будемо робити далі?



Допоможіть, будь ласка, сайту. Зробіть репост статті хоч куди-небудь:

Виберіть мову

Українськийанглійська німецький Іспанська французький італійський Португальська турецький Арабська шведський угорський болгарський естонський Китайська (спрощена) В'єтнамський румунський тайський Словенська Словацька сербський Малайський Норвезька Латвійська Литовський Корейська японський Індонезійська хінді іврит Фінський грецький нідерландський чеський Данська Хорватська Китайська (традиційна) Філіппінська урду Азейбарджанскій Вірменський білоруський бенгальська грузинський казахський каталонська Mongolski Таджітскій Tamil'skij телугу узбецький


Читай ще:   Безпека в інтернеті - основи