Перед тим як заглибитись у вікі — розмітку, створюючи інтерактивне менюнеобхідно зробити деякі підготовчі дії, в першу чергу, змінити деякі налаштування в групі. Натискаємо на «Управління спільнотою», відкриваємо «Обговорення» та підключаємо «Матеріали».

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

Заготовляємо шаблондля групи ВКонтакте відповідно до зображення.

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

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

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

Тепер переходимо безпосередньо до групи. Після коригування налаштувань на стіні з'явилися дві вкладки: «Свіжі новини» та «Обговорення». Клацаємо по «Нова тема» у закладці обговорень та створюємо першу сторінку нашого меню.

Її потрібно назвати відповідно до імені на графічному меню і заповнити поле з описом. Після заповнення всієї необхідної інформації натискаємо «Створити тему».

На стіні з'явиться повідомлення. Таким же шляхом створюємо потрібну нам кількість (відповідно до розділів меню) сторінок.

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

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

Зразок коду для меню:

[]
[]
[]
[]

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

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

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

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

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

Для створення сторінок використовується Вікі розмітка. Зараз ми розберемо, що таке.

Що таке Вікі розмітка?

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

Навіщо використовується?

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

Структура Wiki розмітки

http://vk.com/wiki?w=page-87938575_51299900

Там детально представлені всі основні елементи і наведено код.

[­]

Як почати користуватися?

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

Ідемо на вкладку «Розділ». Тут знаходимо пункт «Матеріали» і для нього виставляємо значення «Відкриті».

Зберігаємо налаштування та повертаємося назад до групи.

У нас з'являється вкладка "Свіжі новини". Ідемо на неї, і натискаємо кнопку "Редагувати".

Ми перейдемо в режим редагування сторінки. Можете розпочинати її наповнення. Не забудьте перейти в режим розмітки Wiki, натиснувши відповідну кнопку в меню.

Коли закінчите, збережіть сторінку.

Відеоурок: оформлення групи за допомогою вікі розмітки

Запитання?

Вконтакте

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

Що таке вікі-сторінка

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

Ось класний приклад такої сторінки:

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

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

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

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

Як зробити пост-статтю вконтакті

Як виглядає типовий пост вконтакті? Текст, а в кінці одне або кілька зображень чи музика. Іноді хочеться зробити так, щоб картинки були всередині тексту. Так, як це робиться на сайтах і в блогах (ось у цій статті, яку ви зараз читаєте, наприклад) . Наприклад, якщо ми хочемо отримати ось такий результат:

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

Алгоритм створення вікі-сторінок

Щоб створити внутрішню сторінку вконтакті, треба правильно прописати її адресу у браузері

Вписуємо, натискаємо Enter і нас перекине на нову сторінку, яку можна буде заповнювати як завгодно.

Після заповнення та збереження сторінки ми отримаємо кінцева адресадля роботи - page-52497428_44506807який будемо використовувати.

Як заповнюється wiki сторінка

Ну з наповненням у вас взагалі не повинно виникнути проблем. Пишемо текст, прикрашаємо його та форматуємо:

Як бачите, ця панелька дуже схожа на звичайний текстовий редактор або віконце відповіді на блозі або форумі. у правому куточку ви бачите символ<>. це режим перемикання між кодом вікі-розмітки та візуальним відображенням.

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

Можливо, вам і зовсім не стане в нагоді режим розмітки, але іноді може статися так, що готова сторінка «поїхала» — в ній збилися шрифти або посилання, зникла картинка. Тоді має сенс зазирнути в цей режим і знайти там зайві теги або доставити дужку, що загубилася.

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

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

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

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

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

Існує сьогодні кілька видів створюваного меню:

• Відкрите із активними пунктами;
• Закрите у вигляді закріпленого запису;
• З окремими картинками або загальною суміжною картинкою банера та меню.

Суть створення обох варіантів одна й та сама. Тільки основна відмінність у додаткових елементах та типах запису і про це докладніше буде у цій статті.

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

Закрите меню групи ВК

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

Вигляд меню буде наступним:

Відкрите меню групи (закріплений матеріал)

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

Як зробити гарне меню для групи Вконтакте: покрокова інструкція

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

• Для аватарки 200х332 пікселя;
• Для основного банера меню 395х282 пікселі.

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

Щоб було зрозуміло, якщо висота головної аватарки групи 332, то від неї віднімаємо 50 і отримуємо висоту основного меню рівну 282. Якщо ж розміри не мають значення, то висоту можна буде виставляти довільну.

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

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

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

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

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

Повинно вийти таке:

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

Чудово. Після того як ви помістили картинку нашого дизайну, нам залишається вибрати «зберегти для Web» і на виході ми отримуємо 2 наші картинки. Тепер йдемо знову до нашої групи і можемо заливати головну аватарку (вертикальну). Банер для меню ми будемо використовувати трохи пізніше під час роботи з кодом wiki-розмітки.

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

Отже, переходимо знову у фотошоп і створюємо нове полотно з розмірами 400х300 пікселів. Після чого вибираємо у розділі: файл-помістити та вибираємо картинку для фону меню.

На малюнку розміщуємо кнопки нашого майбутнього меню і нарізаємо картинку як ми робили вище шляхом виділення потрібних блоків. Після цього також вибираємо «зберегти для web» і отримуємо папку з нашими нарізками. У моєму випадку вийшло 4 картинки в окремій папці.

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

Зверніть увагу, що у вас має бути:

• Відкриті матеріали у режимі «обмежені»;
• Включено обговорення;
• Папка з фотографіями відкрита для всіх.

Тепер залишається налаштувати нашу сторінку де і відображатиметься на менюшка. Для цього переходимо на головну сторінку спільноти та обираємо свіжі матеріали та редагувати та називаємо «НАШЕ МЕНЮ».

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

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

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

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

[]
де xxxxx - id вашої картинки
yyyyy – ширина в пікселях (не більше 388)

Повинно в результаті вийти ось так:

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

І ось ми підійшли до найважливішого та останнього пункту створення нашого меню вконтакті. Тепер нам необхідно зберегти нашу сторінку з картинками та скопіювати її адресу. У моєму випадку він виглядає так:

http://vk.com/page-116682062_51411604?act=edit&hid=183950676§ion=edit

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

Переходимо на головну сторінку та робимо таке:

Крок №1.

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

Крок №2.

До запису прикріплюємо зображення нашої заглушки для меню та натискаємо надіслати.

Крок №3.

Тепер після публікації запису натискаємо на час створення в нижній лівій частині запису та вибираємо "ЗАКРІПИТИ".

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

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

В результаті роботи ми отримаємо таке меню.

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

ВАЖЛИВО: Після зміни дизайну ВК у 2016 році внесено нові зміни при створенні зображень та вимоги до картинок про які.

Завантажити шаблон меню групи ВК + усі вихідники уроку

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

Прикладаю відеоролик для закріплення прочитаного -))).

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

Актуальні розміри зображень «ВКонтакті»

Якийсь час тому розробники соціальної мережі «ВКонтакте» запустили новий дизайн. Це призвело до того, що змінилися розміри та принципи відображення зображень. Пам'ятка, яка буде наведена нижче, відповідає всім нововведенням і містить розміри, актуальні на даний момент часу.

А тепер давайте докладніше по кожному пункту.

Розмір аватара ВК

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

Максимальний розмір аватара – 200 на 500 пікселів. Але, в принципі, можна завантажувати зображення більшого розміру – до 7000 пікселів з кожної сторони. Головне, щоб співвідношення їхніх сторін не перевищувало 2 до 5.

Покажу на прикладі.

Я маю зображення. Його розмір: 200 на 800 пікселів (співвідношення 2 до 8). При завантаженні немає жодних помилок. Однак використовувати це зображення я все одно не можу, тому що «Контакт» не дозволяє мені виділити його повністю.

Обкладинка

Розмір обкладинки для повної версії сайту – 1590 на 400 пікселів.

Зверніть увагу: в мобільній версії та програмах відображається не повна версія обкладинки, а тільки її частина розміром 1196 на 400 пікселів. Подивіться, як вона обрізається у додатку на мобільному:

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

Прикріплені зображення

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

Звучить трохи заплутано :) Тому покажу на прикладі.

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

А ось так виглядає горизонтальне зображення в альбомній орієнтації (ширина 510 пікселів):

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

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

Зображення до постів з посиланням

Всі ці дані беруться з коду розмітки Open Graph:

Якщо Open Graph не прописаний, заголовок береться із метатегу Title, а зображення – із статті. При цьому, його можна легко змінити або вибрати інше зображення зі статті за допомогою спеціальних стрілочок:

Або завантажити своє:

Мінімальний розмір зображення, яке ви можете використовувати як анонс до вашої статті, – 537 на 240 пікселів. Однак ви можете завантажувати і більші зображення, якщо буде дотримано пропорція.

Зображення для статті, створеної в редакторі

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

Гарний приклад:

Не дуже добрий приклад:

Розмір фото та відео для історій

Розмір для фотографій – 1080 на 1920 пікселів. Розмір для відео – 720 на 1280 пікселів.

Технічні характеристики для відеозаписів:

• до 15 секунд;
• не більше 5 МБ;
• кодек h.264;
• звук AAC.

В історії необхідно використовувати фото та відео вертикального формату.

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

Розмір обкладинки для фотоальбому

Розмір картинки для відео

1280 на 720 пікселів.

Вікі-сторінка

Ширина області контенту у вікі-сторінки становить 607 пікселів. Якщо ви завантажуватимете зображення більшого розміру, воно автоматично завантажиться розміром 400 пікселів завширшки. Приклад: у мене є зображення розміром 1366 на 768. Якщо я додам його на вікі-сторінку, вийде ось що:

Щоб змінити розміри картинки, по ній потрібно натиснути та встановити потрібні значення:

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

Як зробити так, щоб зображення «ВКонтакті» не стискалися? Вплив фону та розміру на якість картинки.

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

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

Щоб зображення не стискалося (точніше, стискалося, але значно меншою мірою), необхідно робити його в 2-3 рази більше потрібного розміру. Наприклад, якщо нам потрібно зробити аватар розміром 200 на 500 пікселів, беремо картинку розміром 400 на 1000 пікселів. Якщо потрібно зробити меню розміром 510 на 400 пікселів, то беремо – 1020 на 800.

Зображення на темно-синьому фоні, яке я привела трохи вище, має розмір 510 на 350. Я зробила його вдвічі більше (1020 на 700) і зберегла. Ось що з цього вийшло:

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

Як оформити шапку сторінки

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

Обкладинка

Нещодавно «ВКонтакте» ввели оновлення – тепер на сторінки можна завантажувати великі та красиві обкладинки (1590 на 400 пікселів). Щоб це зробити, перейдіть до налаштувань і натисніть кнопку «Завантажити».

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

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

Приклади динамічних обкладинок:

Обкладинка + опис спільноти + посилання на сайт

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

Опис з хештегами

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

Закріплений піст, який розповідає, про що сторінка

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

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

Меню групи відкрите

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

Ось як виглядає закріплений пост у шапці сторінки Flatro:

Меню групи закрите

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

А ось що ми бачимо, коли клацаємо по ньому:

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

Зливне меню для групи

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

Гіфка та аватар одним зображенням

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

До речі, цей приклад я підглянула у групі SMM-маркетолога Сергія Шмакова. Так що за знахідку висловлюю йому подяку:)

Приховане меню

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

Автоматично відтворюване відео

Наприкінці листопада 2015 року у соціальній мережі «ВКонтакте» з'явилося цікаве нововведення – як тільки користувач заходить на вашу сторінку, відео, прикріплене до шапки, починає відтворюватися автоматично. За допомогою цього прийому ви зможете привернути ще більше уваги користувачів (особливо тих, хто вперше зайшов на вашу сторінку), і при цьому не дратувати тих, хто не любить, коли йому нав'язують свій контент, адже відео відтворюється без звуку і практично не заважає .

Як додати таке відео до шапки своєї сторінки?

Для цього потрібно виконати три умови:

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

Запис, який отримує багато репостів

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

Анонси нових кліпів, альбомів, заходів

Презентація нових товарів/послуг

Знижки та акції

Кейси, відгуки клієнтів

Реклама програми

Розіграші

Правила спільноти

Посилання на інші соцмережі

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

Яким має бути аватар

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

Мініатюра аватара

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







2. Текст не повинен виходити за межі мініатюри.







3. Користувачам має бути зрозуміло, що зображено на аватарці.







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




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



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







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

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

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

Яку інформацію можна розмістити на мініатюрі аватара

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

Анонс нового продукту/послуги/події

Переваги компанії/сервісу/сторінки

Номер телефону компанії

Вигідні ціни

Безкоштовна доставка

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

Акції

Конкурси

Вакансії

Яким має бути сам аватар?

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

1. Аватар має бути якісним. Про те, як цього досягти, я писала трохи вище. Для тих, хто пропустив цю частину, скажу коротко - розмір аватара повинен бути в 2-3 рази більшим за те, що ви запланували.
2. Бажано, щоб аватар поєднувався з меню: був такою ж кольоровою гамою, мав ті самі шрифти, елементи і т. д. Завдяки цьому шапка вашої сторінки буде виглядати акуратніше і професійніше. Приклад:
3. Сам аватар та мініатюра аватара можуть бути різними. Наприклад, ви можете намалювати на аватарі коло, оформити його так, як вам подобається, вибрати цю область як мініатюру, а решту аватара виконати в іншому стилі.




Ще один варіант – розділити аватар на дві частини. Одна – для мініатюри, а друга – для решти аватара.




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




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

Яку інформацію можна розмістити на аватарі?

По суті, на аватарі можна розмістити все, що завгодно. На відміну від мініатюри, тут справді є десь розгулятися. Головне, не зловживайте цим:)

Домен сайту

Телефон/адреса/час роботи

Конкурси/акції

Найпопулярніші товари/новинки

інформація про доставку

Реклама мобільного додатку

Головні переваги компанії/сторінки/товару тощо.

Оновлення асортименту/нову творчість тощо.

Інформація про те, що ваша спільнота є офіційною

Інформація про майбутні заходи

Адреси облікових записів в інших соціальних мережах

Розширений опис сторінки

Хвости

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

Як створити злиті аватар та меню

Для того щоб зробити злиті аватар і меню, вам знадобиться програма Adobe Photoshop або її аналог. Я пояснюватиму весь процес на прикладі «Фотошопа». Тож поїхали.

1. Завантажте шаблон для «Фотошопу», який я спеціально підготувала для цієї статті. У звичайному розмірі (меню – 510 пікселів завширшки, аватар – 200) або у збільшеному (меню – 1020 пікселів завширшки, аватар – 400).
2. Відкрийте зображення, яке ви хочете взяти як основу.
3. Скопіюйте його, вставте в шаблон і розташуйте його так, як ви хотіли б його розрізати.

1. Додайте ефекти, текст, графіку тощо.

1. Якщо ви не хочете, щоб губилася частина зображення (у тому пробілі, що становить 50 пікселів), посуньте її вправо так, як показано на наступній гіфці:

1. Виберіть інструмент «Розкройка» та натисніть кнопку «Фрагменти за напрямними».

1. Видаліть зайві фрагменти (праве клацання миші – «Видалити фрагмент») і підредагуйте вже наявні (праве клацання миші – клік у порожнє місце – беремо потрібну область і розтягуємо її до потрібного розміру).

1. Зайдіть у розділ «Файл» та виберіть «Зберегти для Web».

1. Перейдіть у місце, куди ви зберегли картинки (робочий стіл або якась конкретна директорія), і знайдіть там папку під назвою "Images". Саме там і будуть ваші зображення. Тепер залишається лише залити їх на сторінку.

P.S.Висоту аватара можна змінювати на вашу думку. Я взяла максимальний розмір - 500 пікселів, але це значення може бути і менше. Наприклад, як на сторінці «Вікі-розмітка»:

Як використовувати віджети

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

Ось кілька прикладів того, як виглядають віджети на сторінці «ВКонтакті»:

Як оформити зображення до постів

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

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

Де взяти добрі зображення?

У нас у блозі є гарна стаття на цю тему – «». Вони всі безкоштовні, але якісь вимагають реєстрації. Якщо не підберете для себе нічого придатного, спробуйте шукати за ключовим словом + шпалери (або, якщо англійською, wallpaper). Зазвичай на такий запит виходять якісні зображення. Але тут потрібно бути уважним і перевіряти тип ліцензії, інакше якщо у вас серйозний бізнес, можна нарватися на неприємності.

А що робити тим, хто не вміє працювати у «Фотошопі»?

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

1. Fotor.com

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

Вставляємо її в шаблон, виділімо лівою кнопкою миші, вибираємо команду Layer (іконка бутерброду) і клацаємо Move to bottom. Таким чином наша картинка йтиме тлом, а всі написи накладуться поверх неї.

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

Потім тиснемо на іконку у вигляді дискети, вибираємо назву, формат зображення, якість і тиснемо на кнопку Sign in to download.

2. Canva.com

Ще один сервіс, який допоможе красиво оформити зображення. Працює він за таким самим принципом, як і попередній. Реєструємось у сервісі (можна використовувати свій обліковий запис Google+ або електронну пошту).

Вибираємо свою сферу діяльності. Крок, на якому вас просять запросити друзів, пропускаємо. Потрапляємо в основне меню, де вибираємо запис у Facebook, якщо нам потрібне прямокутне фото, або запис у Instagram – якщо квадратне.

Вибираємо шаблон (якщо на шаблоні стоїть позначка «БЕЗКОШТОВНА», значить, він безкоштовний), змінюємо текст.

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

Як оформляти статті у редакторі

З недавнього часу «ВКонтакте» можна верстати статті у спеціальному редакторі. Щоб створити статтю, необхідно натиснути на літеру «Т»:

Як користуватися вікі-розміткою

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

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

Так само як Wordpress (або будь-який інший CMS) є HTML-редактор, за допомогою якого ви створюєте статті, так і у «Контакту» є свій редактор для створення і редагування вікі-сторінок. Виглядає він так:

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