Аватар та банер для групи вк.

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

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

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

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

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

Отже, почнемо: Відкриваємо фотошоп -> Файл -> Створити чи Ctrl+N.
Відкривається віконце, пишемо назву та розмір, але чому я взяла 2420 на 2000. Я просто збільшила наші розміри в 4 рази, на мій погляд, так у вк виглядає краще.

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

Є ще один спосіб поставити напрямні: Перегляд -> Нова напрямна. Відкривається віконце, вибираєш спочатку якась напрямна потрібна, горизонтальна або вертикальна, потім куди поставити.

Ставимо наступні напрямні горизонтальні: 0, 2000 (крайні), 200, 1360 пікселів; вертикальні: 0, 2420 (крайні), 1580, 1620 пікселів. І у нас вийшла заготовка для наших аватарки та банера.

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

Тепер підберемо картинку, у мене група з тематики дизайну, хай картинка буде такою.

Перетягнемо її в наш документ.

Тепер копіюємо та один шар переміщуємо на шар над авою.

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

Зробимо з прямокутниками те саме, те й з картинками приліпимо їх до авви. І перефарбуємо в колір, який нам подобається. У мене синій.

Заклику до дії не вистачає кнопочки та стрілочок. А на назву зробимо підкреслення.

Стрілки намалюємо за допомогою білих ліній або скачаємо в інтернеті і вставимо. Для кнопочки, знову беремо прямокутник зі округлими кутами. Робимо все на шарі нижче нашого напису!Забираємо заливку до 0.

Відкриваємо стиль шару та заходимо в обведення, робимо її білою приблизно 4 пікселі. Ту знову на ваш розсуд.

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

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

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

Тепер можна встановлювати групу. Для авки просто тиснемо нову фотографіюта завантажуємо. Для банера. Ставимо посилання на меню. видаляємо коли внизу з'явиться посилання як на скрині і тиснемо на завантажити фотографію. Тиснемо відправити і обов'язково, щоб було від імені групи. Потім тиснемо на час відправлення та з'явитися під постом кнопочки: редагувати, видалити, закріпити. Тиснемо - закріпити.

А ось і наше готове оздоблення.

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

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

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

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

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

Давайте розглянемо приклад ефективного застосування банера. Звернемося до паблику «moloko_coffee».

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

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

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

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

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

Програми, які найчастіше використовуються:

• Adobe Photoshop;
• Adobe Illustrator;
• GIMP.

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

Які вибрати розміри для банера ВКонтакте?

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

Виходячи з того, як саме Ви оформлятимете Ваш паблік, використовуйте відповідні розміри:

• Обкладинка – 1590 х 400 пікселів;
• Аватар - 200 х 500 пікселів;
• Закріплений пост (квадратний) – 510 х 510 пікселів;
• Закріплений піст (на рівні з аватаром) – 510 х 308 пікселів.

Як зробити банер для шапки

Для початку Вам необхідно буде завантажити та встановити на свій комп'ютер одну з вищезгаданих програм. У наших інструкціях ми будемо використовувати програму AdobePhotoshop.

1. Запустимо програму.
2. Відкриємо у ній зображення.

1. Далі за допомогою інструменту "CropTool" створюємо рамку розмірами 1590 х 400 пікселів.

1. Далі вибираємо частину, що відображається, і натискаємо Enter. Зображення обріжеться.

1. Зберігаємо.

Таким чином ми отримали банер необхідного розміру.

Тепер нам залишається завантажити його до групи:

1. Зайдіть до «Управління спільнотою».

1. Праворуч виберіть розділ "Параметри".
2. Знайдіть рядок «Обкладинка» та натисніть кнопку «Завантажити».

1. Виберіть файл на комп'ютері, а потім на екрані.

1. Збережіть зміни.

Процес роботи в інших редакторах аналогічний.

Якщо Ви вирішили робити банер з повного нуля(Весь дизайн, стиль, текст і т.д.), тоді Вам знадобляться і дизайнерські навички.

Як зробити закріплений банер у групі Вк

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

Для додавання в паблік необхідно:

1. Створити піст.
2. При створенні завантажити готову картинку (банер).

1. Опублікувати пост.
2. Натиснути кнопку з трійкою і закріпити його.

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

Як зробити суміжний банер Вконтакте

Тепер переходимо до найскладнішого та найцікавішого.

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

Ви можете вибрати один із двох банерів:

• суміжний Banner VK з обкладинкою;

• Суміжний з аватаркою.

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

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

• Чи є статус групи – він зміщує закріплену частину на 10 – 20 пікселів вниз;
• Чи є у запису текст - він також зміщує фото вниз (залежно від розміру тексту);
• Чи хочете Ви, щоб зображення закінчувалися по нижньому краю на одному рівні?

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

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

Тепер перейдемо до самого процесу створення:

1. Для початку необхідно взяти дві заготівлі: перша - 200 х 500 пікселів, друга 510 х 308 пікселів (у Вас можуть бути інші параметри).
2. Далі першу завантажуємо на місце аватара, другу на місце запису.

1. Потім робимо скріншот.
2. Завантажуємо скріншот у фотошоп.
3. Далі натискаємо другою кнопкою миші по інструменту «CropTool» і вибираємо «SliceTool».

1. Виділяємо дві області із точністю до пікселя.

1. Знімаємо значок замка з шару і робимо його невидимим.

1. Додаємо зображення та підганяємо його під наші рамки.

1. Зберігаємо файл для Інтернет. І в налаштуваннях вибираємо формат JPEG. Він збережеться у html форматі, а фото будуть у папці images.

1. Після цього завантажуємо зображення на свої місця.

У результаті ось, що в нас вийшло:

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

Готові шаблони банерів ВК

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

Тепер давайте поговоримо про готові шаблони.

По-перше, є сайти, де можна завантажити необхідні розміри будь-які банери. Це такі сайти, як:

• Vk-oblozhki.ru
• You-ps.ru
• Psd-box.at.ua

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

• Fotor.com;
• Canva.com.

Використання такого софту значно спрощує процес оформлення групи.

Підсумок

Для створення банерів для пабліків ВК необхідні певні навички роботи з графічними редакторами, терпіння та розуміння справи.

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

Сподіваємося, ця стаття була для Вас корисною.

Перша перевага конструктора банерів в тому, що він доступний онлайн і не вимагає додаткового встановлення програмного забезпечення. Як видно на скрині, сам сервіс невеликий і не перевантажений посиланнями меню, кнопками управління та різних налаштувань. На головній сторінці їх всього 4. Нам знадобиться розділ Мої проекти та натхнення (Inspiration). Після авторизації через Фейсбук або звичайну реєстрацію (емейл + пароль) ми можемо приступити до створення банера, постера або запрошення.

Як зробити банер

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

Щоб зробити банер, достатньо просто розпочати. Перейдіть на веб-сайт конструктора.

1. Ми можемо вибрати готовий дизайн із запропонованої бібліотеки готових варантів. По суті, якщо нас влаштовує картинка та оформлення, ми можемо лише замінити текст на свій;
2. Або, можна почати створювати з чистого листа, поставивши потрібний розмірабо вибравши із запропонованих форматів (для Фейсбук, Інстаграм, Постер та ін) та завантаживши в сервіс свою картинку.

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

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

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

Для роботи з конструктором краще використовувати браузер Хром, тому що я помітив, що Мозилі при збереженні не вписується розширення.png - це вирішується простим перейменуванням файлу і додаванням потрібного (у якому завантажували) точка та назва (png або jpg). Наче все.

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

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

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

Як завантажити обкладинку
Щоб завантажити обкладинку, потрібно перейти до Керування спільнотою >> блок Основна інформація >> Обкладинка спільноти >> Завантажити. Рекомендований розмір обкладинки 1590х400 пікселів. У шапці не може бути ніяких робочих кнопок, на які можна натиснути - по суті, це картинка і все. На сьогоднішній день обкладинка видно на мобільних пристроях, і начебто вже видно у додатках та клієнтах.

Wiki вкладка Свіжі новини
У верхньому блоці під шапкою тепер можуть бути три вкладки: закріплений запис, інформація про спільноту та wiki-меню (тільки в групах, на публічних сторінкахтакої вкладки немає). Акцент, як і раніше, робиться на закріплений запис, однак навіть при його присутності користувач тепер завжди матиме доступ до інформації про спільноту, перемикаючись по вкладках. Щоб з'явилася вкладка wiki-меню (вона спочатку називається Нові новини), потрібно перейти в Управління спільнотою » Розділи » Матеріали » Обмежені (або Відкриті) » Зберегти.

2. Вертикальний аватар
Тепер звернемо увагу на старий добрий аватар для групи розміром 200х500 пікселів. Поки що він також є способом оформлення групи. Зазвичай на аватарі розташовується наступна інформація: логотип, супровідний текст або слоган, контакти, заклик вступити до групи. У мобільних пристроях весь аватар не видно, видно лише його частину — мініатюру. Для оформлення групи можна використовувати горизонтальну шапку (обкладинку), або вертикальний банер. За наявності шапки вертикального аватара не видно. На аватарі не може бути ніяких робочих кнопок, на які можна натиснути - по суті, це картинка і все.

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

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

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

4.1 Банер інформаційний
Поширений вид банера, що містить загальну інформаціюпро фірму, групу, послугу чи захід з розгорнутим переліком переваг та іншими супровідними матеріалами. Часто використовується як закріплений записв групі. Розмір такого банера 510х307 пікселів. При такому розмірі банер знизу збігається з аватаром. Якщо немає зв'язки з аватаром, можна використовувати будь-які розміри. Я, наприклад, використовую розмір 600х350 пікселів. Також зручний і набирає популярності зараз формат квадрата 510х510 пікселів — при такому розмірі банер займає максимально велику площу. стрічці новин.

4.2 Банер для входу у внутрішнє меню
Якщо до банеру з попереднього пункту додати помітний напис «Відкрити меню», ми отримаємо банер, основне завдання якого служить точкою входу у внутрішнє меню. Іноді роблять обманку у вигляді кількох кнопок на банер, але це ілюзія, що при натисканні користувач все одно потрапляє на внутрішню сторінку, а там уже кожна кнопка має своє власне посилання. Розмір такого банера 510х307 пікселів. При такому розмірі банер знизу збігається з автором. Якщо вхід у меню не зав'язаний з аватаром, можна робити будь-які розміри банера, хоч вузьку кнопку з написом «Відкрити меню». Головне, щоб ширина банера була не менше ніж 510 пікселів.

4.3 Картка для репоста, акції
У Останнім часомОсобливої ​​актуальності набули картки для репостів чи акцій. Її завдання – заклик до конкретної дії. В основному це «Вступи в групу, зроби репост або постав лайк і виграй приз». Такі банери використовуються в рамках рекламних компанійабо акцій як у власних групах, і для просування в інших групах. Я зазвичай використовую розміри 600х350 пікселів.

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

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

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

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

Точки входу у внутрішнє меню
Хочу відзначити один тонкий момент, якому часто не надають значення. Іноді клієнти замовляють у мене внутрішнє меню, але при цьому абсолютно не уявляють, як користувач потрапить у це внутрішнє меню. А потрапити до нього можна двома способами: або через закріплений банер (див. пункт 4.2), або через текстове посилання у верхній вкладці під рядком статусу (див. малюнок нижче). Іноді ще текстове посилання розміщують у блоці «Посилання» у правому стовпці інтерфейсу.

Посилання внутрішнього меню
Зазвичай, при замовленні клієнти вказують наступні пункти меню: Про нас, Наші товари (каталог), Способи доставки, Оплата, Гарантії, Відгуки, Контакти, Акції, Знижки, Розклад, Як замовити, Портфоліо, Питання та відповіді, Інфо, Зробити замовлення. Посилання пунктів меню можуть йти на відповідні розділи зовнішнього сайту. Тоді посилання автоматично відкривається у новому вікні. Здебільшого пункти ведуть на внутрішні сторінкиВконтакт. При цьому сторінка відкривається у тому ж вікні і доводиться робити посилання або кнопку «Повернутись до головного меню».

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

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

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

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

Ось, знову ж таки, слова розробників щодо адаптивності. «Вікі-меню відображається в мобільних браузерах, але не адаптується до розміру екрана, тому зображення можуть виглядати не так, як на комп'ютері. У мережі можна знайти посібники з адаптації вікі-розмітки під мобільні пристрої, Але навіть вони не гарантують 100% працездатності на всіх пристроях.

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

7.2 Велике графічне меню
У разі вертикальний ряд посилань розташовується великий фонової картинкита має жорстко закріплену структуру. Ось урок.

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

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

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

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

1. Банери ВКонтакте

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

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

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

Типи реклами ВКонтакте

Умовно реклама ВКонтакте поділяється на два типи ( за способом оплати). Її можна називати цільовою та нецільовою. Якщо за цільової реклами ви платите за переходи по банеру, то за нецільової – за покази. При цьому 1000 показів обходиться набагато дешевше ніж 1 перехід. Як не крути, але з 1000 показів найімовірніше суб'єкт здійснить мінімум 1 перехід. Тому другий варіант виявляється вигіднішим.

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

Правила розміщення реклами ВКонтакті

2. Навіщо потрібні банери ВКонтакте?

Окрім широкого охоплення аудиторії та високої популярності банерна реклама ВКонтакте має одну дуже важливу перевагу – можливість точного націлення. Майже 90 % успіху рекламної кампаніїзалежить від правильності його налаштування. Адже вас не цікавлять усі учасники ВКонтакті, а лише певна їхня частина.

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

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

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

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

Крім того, зверніть увагу на цінову категорію. У соціальних мережах немає сенсу просувати товари, вартість яких перевищує 200 доларів.

3. Як розмістити банер ВКонтакте? Шпаргалка для новачків, секрети та поради

Перед тим, як додати банер, перейдіть за посиланням «Реклама» у футері сторінки:

Тиснемо на « Створити оголошення» і бачимо наступний список:

Тут потрібно вибрати, що саме ви рекламуватимете: додаток ВКонтакте (IFrame і Flash ), спільнота ( паблік, групу чи зустріч), відеозапис ( з посиланням на сайт рекламодавця) або зовнішній сайт.

Найбільшою популярністю користується останній варіант. Посилання з такого банера ВКонтакте, як правило, перенаправляє користувачів на landing page (посадкову сторінку).

Формати банерної реклами ВКонтакте

Можна використовувати три типи оголошень:

• Зображення+текст. Тут можна розмістити банер ВКонтакте 90 на 65 пікселів із заголовком (25 символів) та описом (60 символів);
• Велика картинка. Є можливість додати банер розміром 90 на 120 пікселів без опису та із заголовком у 25 символів;
• Ексклюзивний варіант. Банер 90 на 160 пікселів із заголовком у 25 знаків. Головна його перевага полягає в тому, що під час його демонстрації інші оголошення не відображаються. Однак і вартість такої реклами вдвічі вища.

Вибравши потрібний форматта завантаживши дані, слід вказати тематику та підрозділ ( географію, демографію, інтереси, освіту та роботу, а також додаткові параметри). У додаткові параметриможна уточнити операційну систему, тип пристрою, групи ретаргетингу, браузер.

Чим точніше буде налаштовано цільова аудиторія, тим краще CTR, а при хорошій відвідуваності та конверсія.

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

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

4. Як вставити банер до групи ВКонтакте?

Давайте розглянемо, як зробити банер у групі ВКонтакті.

Крок 1. Заходимо на сторінку групи:

Крок 2. У блоці праворуч вибираємо пункт « Рекламувати спільноту»:

Перед тим, як зробити банер, визначаємо формат банера переходи або покази. Зберігаємо і чекаємо, поки банер пройде модерацію:

5. Банерна реклама ВКонтакте

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

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

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

6. Як створити банер ВКонтакте для власного сайту, навіщо він потрібен і як його можна використати?

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

Заходимо у віджети та додаємо наступний код:

У полі «Адреса посилання» вказуємо адресу сторінки, куди потрібно перенаправити відвідувача, після того як він клікне по банеру. "Шлях до картинки" - це посилання на банер. Скопіюйте посилання на картинку та вставте її замість «Шлях до картинки».

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

7. Створення банерів для ВКонтакті

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

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

Існують кілька способів створення банерів:

• Замовлення у дизайнера;
• Самостійне створення у графічному редакторі;
• Використання спеціальних програмдля створення банерів;
• Створення за допомогою онлайн-сервісів.

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