Привіт дорогі друзі, останнім часом, якщо Ви могли помітити, я багато пишу про соціальну мережу Вконтакті та її премудрості! Не дивуйтеся, я не збираюся поки що змінювати свого основного напряму - бути блогом шпоргалгою для самого себе, ну і для людей звичайно! 🙂
Просто, я написав серію статей, і мені почало надходити безліч листів з різними питаннями. Тепер мені потрібно трохи розвинути тему створення меню в групах і пабликах Вконтакте, щоб заощадити свій безцінний час, і не друкувати багато разів відповіді на однакові запитання моїх читачів.
Отже, сьогодні я хочу розповісти. як вміло управляти своїм акаунтом Вконтакте, ну і звичайно,як можна робити будь-яке меню у групі та паблиці Вконтакте. Не так давно, завдяки одній хорошій людині — Марині Лазарєвій та її статті. VKopt - що це таке і навіщо він потрібен адміністраторам вконтакті? я дізнався про невеликий безкоштовний скрипт (VkOpt — це скорочення від повної назви Vkontakte Optimizer), який створений для полегшення користування соціальною мережею Вконтакте.
Установка елементарна і займає всього хвилину часу, можливостей і нових функцій, раніше недоступних Вконтакте, відкривається ціла купа. Заходжу на офіційний сайт Vkontakte Optimize, вибираю свій броузер і встановлюю розширення даного скрипту.
Не забуваю закрити та відкрити броузер для початку роботи скрипту Вконтакте. Входжу до свого облікового запису Вконтакте, де з'являється табличка з подякою за встановлення скрипта та пропозицію вибрати мову інтерфейсу.
Цікаво, що спочатку даний скрипт був створений у далекому вже 2007 році для скачування відео, що тоді набирає популярності. соціальної мережіВконтакті.
На даний момент скрипт ВкОпт вміє робити безліч речей, і в першу чергу спрямований на покращення функцій інтерфейсу для простих користувачів, таких як завантаження музики та відео, сортування друзів, можливості додавати, змінювати деяку інформацію на сторінках Вконтакте, в тому числі і приховану. Про всі функції скрипту можна прочитати ось.
А мене ж більше зацікавили деякі можливості, які дає даний скрипт для роботи Вконтакте, спробую їх перерахувати в картинках з коментарями.
Чудово, що тепер мені не потрібно щоразу клацати мишкою по екрану для перегляду фотографій, достатньо прокручувати коліщатком миші для переходу до наступного фото. Це дуже швидко і зручно, особливо коли гортаєш тисячі фоток і серед них шукаєш ті, які потрібні в даний момент.
Далі, на цій же вкладці нижче, завдяки Vkontakte Optimizer з'явилися посилання, натиснувши на них, я отримую доступ до всіх створених Вконтакте розмірів даної картинки або фото від маленької іконки, до максимальної закачаної картинки. У повсякденності, Вконтакте представлені фотографії з шириною 604 пікселі. Усі копії відкриваються у повному розмірі, де їх можна легко завантажити.
З'явилося кілька кнопок, одна з них — пошук копій Google. Натиснувши її, з великою ймовірністю можна знайти справжнього автора цієї картинки або фотографії, наприклад, натиснувши на моє фото - гугл виявив копію цієї фотографії, тільки в моїй статті про північ Таїланду на нашому тревел блозі. Так само можна дізнатися про несанкціоноване використання Вашого фото іншими людьми. А ще смішно - гугл намагається знайти картинки, схожі за кольором на представлену фотографію.
Далі, заходжу у вкладку мої групи, тут теж з'явилися нововведення, зверху в правому кутку я помітив нову кнопку, мабуть для тих людей, кому все набридло, або хто хоче великих змін. Там розташувалася кнопка "Залишити все", тобто. одним кліком можна вийти зі всіх груп одночасно.
Тут же, натискаю щоб подивитися оновлення та останні новини, з'явилася кнопка фільтрації новин, можна забрати новини, які містять відео, фото, графіті, опитування, посилання і т.д. Це може бути дуже зручно при пошуку чогось у новинах, щоб не відволікатися на зайве.
Вище були рядові функції, які просто сподобалися особисто мені, а тепер, ближче до справи! Знаходжу приклад групи Вконтакті з гарним дизайном. Припустимо, мені потрібно подивитися вихідники дизайну цієї групи і зробити щось подібне. Якщо натиснути на меню цієї групи виходить мила картинка - це один із варіантів. А ось у правій частині групи завдяки скрипту Vkontakte Optimizer з'явилася кнопка -> Список Wiki-сторінок.
Натискаю на список Wiki-сторінок і отримую вихідний код wiki-розмітки, який використаний під час створення меню цієї групи Вконтакте.
Як Ви розумієте, щоб створити подібне меню групи Вконтакте, я вже маю код, і мені навіть не треба вивчати wiki-розмітку, хоча, це ще нікому не заважало!
А тепер мені тільки не вистачає вихідних картинок до цього меню для прикладу. У цій же групі знаходжу альбом із фото, де й розташовані вихідні меню.
Кожну картинку можна завантажити в оригінальному розмірі, представленому в меню. Коли у мене є всі вихідні меню, мені залишається подумки висловити велику подяку людям, які зробили меню в даній групі, і приступати до роботи у фотошопі над своїми вихідними джерелами з такими ж розмірами.
Як Ви розумієте, тут немає жодного плагіату в тому, що я беру вихідний код wiki-розмітки у певного автора, ідею з розмірами та розташуванням картинок, у створеному ним меню у групі або паблиці Вконтакте. Я тільки навчаюсь у цього автора на його конкретному прикладі. Після чого, створюю свої картинки у фотошопі та своє меню.
Виходить, для того, щоб створити меню в групі або паблиці Вконтакте будь-якої складності, достатньо теоретично знати, знайти приклад складного меню в паблиці або групі Вконтакте, і звичайно, потрібно мати знання елементарного створення і верстки картинок у фотошопі. У цьому Вам можуть допомогти будь-які туторіали фотошопу - поставте це питання яндексу, знайдете тисячі відповідей.
Ще хотів порушити одне питання, чи мене вже кілька разів запитували чи можна паблік Вконтакті зробити групою Вконтакте? Відповідаю – тепер можна, завдяки скрипту Vkontakte Optimizer, у паблику з'являється нова кнопка – перевести до групи. Випробовувати цю можливість я не став, мені ні до чого. Ну, як я розумію, там доведеться заново запрошувати всіх передплатників до групи, а якщо їх тисячі, це не дуже зручно!
Привіт друзі!
Бажаєте зробити групу ВКонтакті максимально привабливою для своїх передплатників? Чи не знаєте з чого почати? Якщо у вас вже є високоякісний контент, сконцентруйте свою увагу на оформленні спільноти. Я не говорю про простий підбір аватара. Створення меню у групі ВКонтакте – це з головних моментів, який необхідно врахувати при оформленні. Саме цей пункт ми сьогодні розглянемо.
Що таке меню ВКонтакте і для чого воно потрібне?
Меню – це обличчя гурту. Перше, на що наштовхується будь-який відвідувач вашої спільноти, це меню. Тому ваше завдання продумати його максимально зручно та привабливо. По-перше, ви повинні визначитися з тим, що саме хочете донести своїм передплатникам. Це залежить від місії самої спільноти. Адже бувають зовсім різні цілі створення групи: пізнавальна, розважальна або мета продати товар/послугу. Відштовхуючись від цього, вирішіть, яка інформація є найбільш важливою для ваших майбутніх передплатників.
Наприклад, якщо орієнтовано на розвагу користувачів або інформування їх про що-небудь, то можливо сфокусуйтеся на зручності пошуку потрібної інформації. Це стосується груп, де контент можна поділити на окремі теми, наприклад здоров'я, мода і т.д.
Якщо ж ваша спільнота створена у вигляді інтернет-магазину, то підхід має бути зовсім іншим. Зручність пошуку товарів або послуг, звичайно, має бути присутньою, але також зробіть акцент на акції, новинки, умови доставки, а також ваші контакти.
Тому обов'язково враховуйте тематику спільноти під час створення меню.
Способи створення меню для груп ВКонтакте
Насамперед потрібно визначитися зі способом створення вашого меню: автоматично або вручну. Якщо Ви вибрали спосіб швидкий та простий, але при цьому якісний, представляю Вашій увазі сервіс зі створення меню для спільнот ВК ВікіМейкер, з ним Ви легко та швидко розберетеся, зробивши свою групу зручнішою. Якщо Ви хочете взяти створення меню повністю під свій контроль, далі йде покрокова інструкція.
Як зробити привабливе оформлення?
Я хочу об'єднати в інструкції створення двох важливих елементів групи: меню та аватара. Оскільки не бажано створювати їх окремо, користувач повинен бачити гармонійність між цими двома графічними елементами. 
- Для початку вам потрібно встановити програму Photoshop, якщо раніше на комп'ютері у вас не було встановлено цю програму.
- Відкриваємо Фотошоп і створюємо два файли-шаблони для аватара та меню. Задаємо потрібні розміри. Наприклад, для аватара – 200х500 пікселів, а меню 389х600 пікселів. Залийте їх якимось одним кольором для того, щоб їх було чітко видно і зберігаємо два створені окремі файли.
- Завантажуємо в групу шаблон місце аватара, виділяючи всю область.
- Завантаження меню відбувається трохи складніше. Для цього вам знадобиться в «Управлінні спільнотою» увімкнути матеріали. Після цього буде доступна можливість додавати меню. Зайдіть у вкладку під описом групи «Свіжі новини» і натисніть на панелі інструментів на кнопку у вигляді фотоапарата і завантажуйте файл з комп'ютера. Вийшло?
- Відразу після завантаження вам стане доступне посилання, яке доведеться трохи доопрацювати. Після слова "noborder" впишіть знак ";" і слово "nopadding". Ця функція не дасть вашому меню опускатися при додаванні новин до спільноти.
- Робимо Prnt Scrn основної сторінки вашої групи. Для чого? Щоб зрозуміти свої помилки. Справа в тому, що зараз це чорновий варіант - все не рівне і не так красиво. Ваша мета полягає в тому, щоб нижні межі меню та аватара ідеально збігалися. Тоді, можливо, у вас з'явиться питання «Чому я не даю вам точних розмірів?». А річ у тому, що кожен адмін використовує різну кількість тексту в описі групи, від чого змінюється висота меню, а ширина меню – це справа смаку і як ми знаємо у всіх він різний.
- Входимо в Фотошоп і створюємо новий файл, вставляючи туди скріншот.
- Тепер, працюючи з цим файлом, виділяємо область аватара за допомогою прямокутного виділення - їм можна максимально точно виділити конкретну область. Далі, клацаємо правою кнопкою миші і вибираємо «вирізати на новий шар».
- Те саме проробляємо з картинкою меню, тільки при виділенні потрібно відсікти непотрібне внизу. Зробити так, щоб низ меню та аватара повністю збігалися.
- Тепер, затиснувши кнопку Ctrl, вибираємо два створені нами шари. Клацаємо правою кнопкою миші по ним і вибираємо функцію «Об'єднати шари». Перед нами з'являються два наші ідеально підігнані один під одного шаблони на одній сторінці.
- Наступний етап – завантажуємо фото обкладинки. Воно з'являється поверх наших шаблонів. Тепер праворуч в інструментах для шарів клацаємо по файлу-обкладинці, затиснувши клавішу Alt. Після цієї процедури, обкладинка буде видна лише на шаблонах і стане невидимою за їх межами. Але це не завадить вам пересувати обкладинку та підбирати потрібну видиму її частину.
- Тепер важливий пункт створення меню – кнопки. До цього моменту ви повинні знати точні назви майбутніх кнопок. Наприклад, "Здоров'я", "Діти", "Наші контакти". Для полегшення завдання створюємо першу кнопку, наступні лише дублюємо та змінюємо текст.
- Додаємо логотип на аватарку або словесний заклик, або ж і те, й інше. Це додасть вашій групі жвавості, а також відмінну рису.
- Зберігаємо спільний файляк картинка на свій комп'ютер. Що далі?
- Відкриваємо у Фотошопі створений щойно нами файл. Далі створюємо новий порожній файл із точними розмірами нашого аватара, вставляємо в нього створену нами картинку з логотипом та кнопками. Вибираємо потрібну нам область під аватар і ідеально підганяємо під вибрані розміри. Після чого зберігаємо наш витвір.
- Те саме робимо з меню. Але знову ж таки тут є своє доповнення. Для початку потрібно дізнатися висоту меню, оскільки вона не збігається з чорновим варіантом. Використовуючи лінійку, вимірюємо висоту до єдиного пікселя (а найкраще кілька разів виміряти, щоб не помилитися). Створюємо новий файл зі старою шириною та новою висотою, підганяємо картинку під розмір та натискаємо кнопку «Зберегти».
- Завантажуємо новий аватар, виділяючи всю область та підбираємо мініатюру.
- Закачуємо меню через кнопку «Нові новини». Видаляємо попереднє посилання, завантажуємо нове фото та додаємо "; nopadding".
- Тепер розгортаємо наш макет меню. Застосовуємо інструмент Фотошопу "Розкройка" або "Ніж". У різних версіяхФотошопу він називається по-різному. Під кожною кнопкою проводимо лінію щоб зробити окремі прямокутники, наводячи на які користувач зможе в майбутньому переходити на конкретні посилання.
- Заходимо в редагування меню через «Свіжі новини» та завантажуємо кожну нашу вирізку з меню по черзі. Під час перегляду будуть показані перепустки між нашими картинками. Для того щоб їх позбутися, потрібно додати в кожну посилання слово "; nopadding".
- Тепер щоб ваші посилання були активні і ви могли вставити потрібну вам інформацію, то напишіть за посиланнями картинок у редагуванні меню назва однієї з ваших кнопок наприклад Доставка. Але це слово потрібно написати чітко за встановленими правилами, воно має виглядати так [[Доставка]]. Далі зберігаємо сторінку, переходимо за цим посиланням та наповнюємо її потрібним контентом.
- Останньою дією, щоб усе запрацювало, є вставка копії посилання на сторінку Доставка у посилання кнопки, наприклад, page-123456_456789, тобто інфа між словами vk.com/ до ? Тепер кожну кнопку оформляйте також і ваше меню буде успішно залучати вам цільову аудиторію.
Підписуйтесь на оновлення блогу та ділитесь інформацією з друзями. Створюйте більше прекрасного у вашому житті!
Вітаю дорогих друзів. У сьогоднішньому пості я хочу розповісти про те, як створити меню для групи Вконтакті. Зробити це не так складно, як здається на перший погляд, і якщо Ви маєте хоча б початкові знання програми Photoshop або Paint, то у Вас все обов'язково вийде. Отже, давайте приступимо.
При правильно складеній структурі меню може збільшити кількість продажів або потік клієнтів для Вашого бізнесу, це вже залежить від того, яку спрямованість має група. Як приклад розглянемо оформлення інтернет магазину одягу:
Структура сформована дуже чітко, практично в кілька кліків користувач може знайти все, що потрібно: телефони, адреси, інформацію про замовлення, каталог товарів і т.д. На мій погляд, таке оформлення допомагає збільшити продаж як мінімум у 2 рази.
У цьому варіанті меню є розбитий на розділи каталог товарів, що робить дуже зручним їх пошук. На аватарці спільноти розміщені контактні телефони кількох операторів, що дозволить клієнтам швидко вийти на зв'язок із продавцем.
А ось приклад невдалого рішення:
Каталог оформлений у вигляді звичайних посилань, що ведуть незрозуміло куди. Погодьтеся, що переходити по них немає особливого бажання, навпаки, хочеться покинути групу.
У цих прикладах ми розібрали варіанти оформлення інтернет магазинів, Ви можете використовувати щось подібне в інших тематиках. Формула проста: чітка структура + графічне оформлення = приплив клієнтів та збільшення продажів.
Тепер давайте подивимося на все це з технічного погляду.
Створюємо меню для групи Вконтакте
Насамперед створимо графічний макет майбутнього меню. Для цієї мети ми будемо використовувати програму Photoshop (для простенької картинки цілком згодиться стандартний Paint). Відкрийте програму та створіть новий документ:
Я створюватиму картинку розміром 500×500 пікселів, однак, залежно від кількості та розташування розділів розмір картинки може бути іншим.
Тепер скачайте зображення, яке хотіли б використовувати як тло і перенесіть його на полотно. Якщо Ви професійно володієте програмою, можна намалювати фон самостійно.
Потім напишіть на фоновій картинці заздалегідь продумані розділи, кнопки та телефони. Їх ми надалі перетворимо на посилання:
Щоб зробити розрізи якнайточніше, потрібно задіяти допоміжні лінії, натиснувши CTRL+R. Наведіть курсор миші на верхню лінію та перетягніть її на зображення приблизно таким чином:
Останнім кроком буде розріз об'єктів. Щоб це зробити, клацніть по кнопці “фрагменти по напрямних” (Slices From Guides) на верхній панелі інструментів:
Зберігаємо каркас для веб-пристроїв. Формат картинки ставимо JPG, вибираємо максимальну якість та зберігаємо, наприклад, на робочий стіл:
На робочому столі з'явилася папка з каркасом майбутнього меню, яке нам потрібно перенести до групи.
Виведення меню за допомогою Wiki розмітки
У своїй групі зайдіть в "управління спільнотою" і перевірте, чи підключений розділ "матеріали". Якщо розділ вимкнено, підключіть його:
Після цього в групі з'явиться вкладка "Нові новини". Натисніть кнопку “редагувати”, Вас перекине в текстовий редактор:
Замість стандартного заголовка пропишіть свій, а також увімкніть режим wiki розмітки, натиснувши на піктограму ромба:
Тепер відкрийте групу в новій вкладці і завантажте у фотоальбом заготовлений каркас, а в текстовий редактор вставте наступний код стільки разів, на скільки частин розбитий каркас:
| [ [ photo133337_133701019|370px;nopadding;|page- 133333377 _13333337] ] |
Замість значення “photo133337_133701019” слід вставити посилання на фотографію
Замість значення “page-13333337_13333337” слід вставити посилання на потрібну сторінкуабо розділ групи
Замість 370px можна підібрати свої розміри, а параметр nopadding дозволяє виводити повноцінну картинку, без неї наше меню виводилося б шматками, що розрізають.
Натиснувши кнопку “Перегляд” можна подивитися, як меню виглядатиме у групі. Якщо все влаштовує, то тиснемо "Зберегти результати" і радіємо виконаній роботі.
Крок 1
Для початку йдемо у свою групу і в блоці «Свіжі новини» (в даному випадку я перейменувала її на «Меню») натискаємо посилання «Редагувати», яке з'являється при наведенні. Важливо! По-перше, у вас має бути саме Відкрита група, а не Сторінка. Бо на сторінці такого пункту просто немає. І друге, у меню Керування спільнотою > Інформація > Матеріали має бути вибраний пункт «Відкриті». 
Крок 2
У вкладці «Редагування» пишемо фразу [[Веб-дизайн теорія]], укладену в подвійні квадратні дужки. Потім натискаємо кнопку «Зберегти сторінку». 
Крок 3
Після цього поряд з кнопкою з'явиться посилання «Перегляд», на неї і тиснемо. Нижче відкриється перегляд нашого меню, де ми бачимо посилання «Веб-дизайн теорія», що з'явилося знизу. 
Крок 4
Тиснемо на це посилання і переходимо на створену сторінку під назвою «Веб-дизайн теорія». Потім тиснемо на посилання «Наповнити змістом». Далі редагуємо текст як у звичайному текстовому редакторі- Вставляємо картинки, тексти, відео та інші об'єкти. При цьому наша створена сторінка матиме урл виду https://vk.com/page-15865937_43819846. 
Альтернативний спосіб створення внутрішньої сторінки
Є альтернативний спосібстворення сторінки. В основному він підходить для пабліків ( публічних сторінок), оскільки їм підходить спосіб, описаний вище. Для цього ми скористаємося таким кодом
http://vk.com/pages?oid=-XXX&p=Назва_сторінки
де замість ХХХ ми підставимо id нашої групи, а замість тексту «Назва сторінки» ми напишемо Меню. Тепер треба з'ясувати ID групи. Як це зробити? Заходимо на головну сторінкугрупи і дивимося на наші записи на стіні – прямо під блоком «Додати запис» буде написано «Всі записи» – натискаємо на це посилання. 
Переходимо на сторінку та бачимо урл такого виду https://vk.com/wall-78320145?own=1, де цифри 78320145 даному прикладіі є id групи. Підставляємо наші дані у вихідний код та отримуємо запис такого виду: http://vk.com/pages?oid=-78320145&p=Меню(З вашими цифрами!). Вставляємо цей рядок в адресний рядок браузера та натискаємо Enter. Так ми створили нову сторінкуВконтакті.
Думаю, кожен, хто активно користується соціальною мережеюВконтакте вже зустрічав красиво оформлені групи та паблики. Багато з них мають окрім меню ще й безліч стилізованих вкладених сторінок, каталоги та інше, що насправді створює невеликий сайт прямо всередині соціалки.
Ось кілька прикладів, щоб усі розуміли, про що йдеться.
Такі групи дозволяють виділитися серед своїх конкурентів та залучати більше користувачів. Особливо якщо ще й контент цікавий:)
У рамках цієї статті ми поговоримо про те, як це все робиться. Щоб детальніше все розібрати і вникнути у всі тонкощі, візьмемо конкретний приклад. Буде невеликий майстер-клас із оформлення груп.
Найперший етап нашої роботи – це ідея. Потрібно зрозуміти, що ми хочемо розповісти і кому. У контакті є кілька форматів спільнот і вибирати варто з урахуванням поставлених завдань. Хоча надалі групу можна перевести у формат паблік і навпаки.
Пояснюю на пальцях. Паблік- Це щось порівняти блогу. Стрічка новин. Іншими словами, ми розповідаємо своїм передплатникам про якісь речі, і вони не зможуть писати на стіні нашої спільноти. Максимум – коментувати.
Групадозволяє створити більш відкриту до бесіди та обговорень спільноту, де люди зможуть від свого імені робити пости у стрічці. До неї також можна додавати друзів зі свого списку. У паблік такої можливості немає. Крім того, у групі трохи більше можливостей щодо інтегрування вікі-розмітки (тут є розділ «Новини», до якого можна інтегрувати меню).
Глобально можна міркувати так: якщо нам потрібно створити спільноту для магазину, то я взяв би формат «паблік». Якщо ж мова йде, наприклад, про любителів риболовлі, краще взяти «групу». Хоча кожен вільний чинити так, як вважає за потрібне. Адже будь-якої миті формат можна буде змінити. Однак, майте на увазі, що Вконтакте вводить обмеження на повторна змінаформату спільноти та після першого разу потрібно буде чекати кілька днів до того моменту, як ви зможете все повернути назад за потреби. Тому тестувати функціонал краще, перш ніж група почне наповнюватися контентом.
В рамках цього майстер-класу я як відправна точка візьму гру Mad Max за мотивами однойменного фільму, яка вийшла буквально пару тижнів тому і створюю спільноту для гравців з різними матеріалами з цієї гри. Головна мета – злив трафіку на свій ігровий сайт.
Формат буде «Група», оскільки потрібно створити природний приплив аудиторії та максимально розширити спілкування всередині спільноти. Відразу уточню, що використовуватиму універсальну методику, яку можна використовувати як у форматі групи, так і в паблику. Це працює скрізь.
Контенту море, починаємо втілювати ідею у життя!
Створення групи
Щоб створити групу, переходимо в «Мої групи» у правому меню облікового запису Вконтакте і натискаємо на синю кнопку вгорі «Створити спільноту».
Повинно з'явитися таке віконце, де ми вводимо назву для нашої групи і вибираємо формат.
Ввівши необхідну інформаціюперед нами відкривається панель управління нашою спільнотою. У моєму випадку вона виглядає так.
Як ви бачите, я додав трохи параметрів: включив відео, аудіозаписи, обговорення та ще ряд можливостей, які мені знадобляться подальшій роботіпід час збору контенту. Все це можна буде надалі змінювати без жодних обмежень. Також я прописав адресу свого сайту. Якщо у вас сайту немає, або його тематика не відповідає формату спільноти (вони про різні речі і ніяк не пов'язані один з одним), то цей рядок можна залишити порожнім.
Вікові обмеження я ставлю в даному випадку від 18 за аналогією з тими, що розробники виставили грі. Хоча я практично не маю сумніву, що грають і діти.
Всі. Група створена!
Тепер можна починати її оформляти.
Оформлення групи Вконтакте
Цей етап можна розбити на 2 складові: графічну та технічну. Для роботи нам знадобиться шаблон для створення аватарки групи та меню, а також трохи уяви та базові знання фотошопу (він же Adobe Photoshop).
Шаблон розмітки
Що таке шаблон і що це взагалі таке? Шаблон – це свого роду заготівля. В даному випадку, в форматі *.psd у нас розмічені області для картинки під меню і аватарки групи.
Як видно на другому прикладі на початку цієї статті, ми можемо зробити оформлення в єдиному стилі для аватарки та картинки меню. При цьому візуально розрізає її на 2 частини. Так ось шаблон дозволяє сформувати зображення так, щоб усунути зміщення графіки та максимально підігнати картинки на один рівень.
Щоб стало зрозумілішим, ось приклад.
Ми бачимо, що на обох частинах картинки є смуга з видом на житловий район. Без використання шаблону рівно зробити з першого разу майже неможливо. Потрібно буде підганяти картинки, вимірюючи розбіжності до 1px. У той час, як при використанні шаблону ми просто додаємо в нього графіку в рамках розмітки і відразу отримуємо бажаний результат.
Хочу зазначити, що цей шаблон розрахований на 1 рядок у поясненні. На скріншоті прикладу телефони. Якщо з'явиться другий рядок, необхідно буде використовувати інший шаблон, або виправити дизайн вручну.
Ми ж тим часом приступаємо безпосередньо до графічного оформлення свого нової групи. Тут я вибираю шлях найменшого опору та для пошуку частин дизайну вирушаю до Google Картинки. Можна використовувати Яндекс. Кому більше подобається.
Дизайнерської освіти у мене немає, тому докладно зупинятись на питаннях підбору шрифтів та інших дрібниць не будемо. Почаклувавши трохи у фотошопі, я отримав такий результат.
На лівому фрагменті (де напис «Меню») можна додати кілька тригерів. В цьому випадку я вирішив робити без них. Всі. Дизайн аватарки готовий. Тиснемо у фотошопі поєднання гарячих клавіш Shift+Ctrl+Alt+S і зберігаємо наші фрагменти в папку на жорсткий диск.
Перший етап роботи із графікою завершено. Повертаємось у контакт.
Встановлення аватара та меню для групи
Клацаємо мишкою на двох типів на місці ава нашої групи і завантажуємо туди наше зображення. Ось ці хлопці під ними ще написано «Завантажити фотографію».
Додаємо картинку. Вказуємо поля та вибираємо мініатюру. Тут все просто і проблем не повинно бути.
Як бачимо, потрібно знати id спільноти. Впізнати його дуже просто. Знаходимо у своїй групі меню (відразу під аватаркою) та відкриваємо «Статистику спільноти». При цьому в адресному рядку браузера з'явиться схоже (цифри будуть інші).
Ці цифри після «?gid=» і є шуканою id групи. Вставляємо отримане значення у форму скрипту та пишемо назву для тієї сторінки, яку хочемо створити. У цьому випадку я вбиваю Меню.
Сторінку створить лише в тому випадку, якщо вікно з групою відкрито у сусідній вкладці. Простіше кажучи, ви повинні бути авторизовані у вк в цьому ж браузері. Адже на подібні маніпуляції є доступ лише у адміністратора групи та призначених їм людей. Випадковий перехожий не зможе ось так запросто взяти і поміняти налаштування групу, до якої він не має доступу.
Якщо все зроблено правильно, відкриється така сторінка.
Це те вікно, де ми трохи пізніше зробимо вікі-розмітку і створимо внутрішнє меню для своєї групи. Поки що нам достатньо тут написати. Після чого натискаємо синю кнопку "Зберегти сторінку" і вгорі тиснемо на посилання Повернутися до сторінки.
Я у себе написав «Меню» і моя сторінка після збереження стала виглядати так.
Дизайну ще ніякого немає, але зараз нам потрібне лише посилання на цю сторінку. Забираємо її в адресному рядку браузера та повертаємось на головну сторінку нашої групи. У стрічку.
Тут створюємо пост наступного змісту: вставляємо туди картинку та посилання на сторінку меню групи.
Натискаємо відправити. Після чого клацаємо за часом відправлення повідомлення та вибираємо там серед усіх варіантів пункт "Закріпити". Обновляємо сторінку (клавіша F5 на клавіатурі) і, якщо все зроблено правильно, отримуємо перший результат: група знайшла аватарку та посилання для переходу до розділу меню.
Wiki-розмітка меню групи Вконтакте
Тепер займемося оформленням безпосередньо самої меню. Знову йдемо у фотошоп та створюємо дизайн для нашого меню. При проектуванні інтерфейсу потрібно пам'ятати про тих людей, які заходитимуть у вк через програму з мобільних телефонів. Іншими словами, у нас не повинно бути дрібних елементів і, крім того, потрібно постаратися зробити все якомога зрозуміліше. Щоб не треба було гадати, як тут все влаштовано і куди нам натиснути… а просто тицьнути у потрібний пункт та вивчати шукану інформацію.
Не буду зупинятися докладно на тому, як саме я збирав меню. Ось що в мене вийшло.
Мінімум полів. Вертикальна розкладка. Ідеальний формат для адаптивного меню. Тобто на мобілах нічого нікуди не поїде. Все буде точно, як на екранах комп'ютерів і планшетів. Ширину беру 500 px, щоб потім нічого не зменшилося і не втратити як зображення двічі. Висота не важлива.
Розрізаємо зображення на фрагменти та зберігаємо їх.
Всі. Настав час заключного акорду – збираємо меню вже у самій групі.
Для цього повертаємось на головну сторінку групи (там, де стрічка та наше посилання-картинка, що веде в меню). Клацаємо мишкою на зображення меню і потрапляємо на ту саму сторінку, яку раніше створили для меню.
Якщо ви адміністратор або творець групи (у нашому випадку це так і є), то у верхній частині сторінки буде посилання «Редагувати». Клацаємо по ній.
Потім переходимо в режим wiki-розмітки (під кнопкою закрити у верхньому правому кутку сторінки намальована така рамочка з<>всередині). Коли потрібний режимактивовано, ця кнопка обведена сірим.
Після чого тикаємо в іконку фотоапарата та додаємо одразу всі фрагменти нашого меню. У режимі вікі самих картинок ми не побачимо лише код цих зображень з розмірами і параметрами.
Я хочу розташувати меню центром і щоб між фрагментами не було ніяких зазорів. Тому кожен із елементів обгортаємо в тег
Перший і останній елементименю не повинні бути кнопками — у мене на малюнку це лише графічний елемент без посилання на внутрішню сторінку, тому до них прописуємо додатково параметр «nolink». Це прибере можливість клацнувши по даному елементу відкрити в окремому вікні шматочок картинки. Від клацання мишки тепер взагалі нічого не станеться. Це звичайне тло сторінки. Неактивні.
У моєму випадку код меню виглядає так.
Окремо хочу відзначити той факт, що після імпорту картинок у вбудована система часом неправильно вказує розміри зображень. Тому слід уважно стежити і виставляти саме ті, які ми планували на етапі проектування дизайну. А якщо ні, то все може роз'їхатися і пазл в результаті не складеться.
Коли ми прописали код і вирівняли всі елементи, зберігаємо сторінку і бачимо те саме, що було у фотошопі.
Залишився останній штрих — потрібно створити ті самі сторінки, куди надсилатиме людей наше меню. Для цього знову звернемося до скрипту з генерації wiki-сторінок і цього разу замовляємо одразу три сторінки. При цьому також необхідно щось на кожній написати і не забути зберегти кудись їхні адреси з адресного рядкабраузер.
Після чого вставляємо у вікі-код меню посилання на нові сторінки у вигляді page-102302049_51013384, де перше число - це id групи, а друге - номер сторінки. Хоча, це загалом і не важливо. Адже нам потрібно лише скопіювати цей фрагмент URL і вставити в розмітку.
У результаті код меню набуває наступного вигляду.
Зовні ж нічого не змінилося. Зате коли ми клацаємо мишкою по елементах меню, видно, що тепер воно працює!
Щодо самої розмітки та правил, за якими пишеться код, раджу почитати спеціально присвячену цій справі групу Вконтакте. Діти описали всі ключові моменти і в їх каталозі легко можна знайти необхідний елемент і з'ясувати, як додати його на свою вікі-сторінку.