Як зробити банер клікабельним. Як легко і просто зробити банер або робимо картинку посиланням, тобто, клікабельною.

Інструкція

Зробіть банер клікабельним шляхом його поміщення в гіперпосилання. Використовуйте HTML-елемент A. Додайте початковий тег з атрибутом href, значення якого вказує на цільовий ресурс, а також завершальний тег. Наприклад: Це найпростіший і найчастіше використовуваний спосіб додавання банерів до веб-сторінок. Фактично зображення тут є анкором посилання.

Застосуйте карти клієнта для створення декількох активних областей-посилань на зображенні банера. У HTML-розмітку документа додайте елемент MAP з атрибутом name, який визначає ім'я картки. У MAP розмістіть один або кілька дочірніх елементів AREA, з атрибутами href, shape та coords, що мають коректні значення. Наприклад: Елементу IMG, що визначає банер, додайте атрибут usemap, що посилається на клієнтську картку. Наприклад: Даний метод дозволяє використовувати один банер для перенаправлення користувача на різні ресурси залежно від того, яка область була активована.

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

Введіть банер у web-сторінку за допомогою елемента INPUT типу image, що входить до складу форми для того, щоб він був клікабельним. Елемент INPUT з атрибутом type, що має значення image, визначає графічну кнопку надсилання. Адреса ресурсу зображення визначається атрибутом src. Наприклад:

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

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

Розміри банерів

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

• 468 x 60 - довгий або повний banner. Найпоширенішим, найчастіше ще при розробці дизайну сайтів для нього виділяють окреме місце;
• 392 x 72 - довгий банер з вертикальною навігаційною панеллю;
• 234 x 60 – такі зазвичай розташовуються групами по кілька штук;
• 120 x 240 - такий частіше використовується для реклами послуг та товарів та розташовується вертикально;
• 88 x 31 – кнопки, розміри яких варіюються від квадратних 125 x 125 до мікрокнопок.

Види банерної реклами в інтернеті

За формою та способом створення банери ділять на графічні та текстові.

• Формат зображень графічних оголошень – gif, jpeg, png. Вони може бути як статичними, коли основу модуля становить лише одна картинка, і динамічними, тобто. кілька зображень, що змінюють один одного. Їх основною перевагою є простота та зручність їх створення. Але можливості їх, на жаль, обмежені повільним завантаженням. Пошукові системи швидко індексують як статичні, так і анімовані публікації, що має незаперечну перевагу у процесі просування будь-якого ресурсу.
• Текстові є банальними текстовими блоками без зображень або анімації. Виглядає це, звичайно, не дуже креативно, зате вони швидко вантажаться і не дратують користувача.

Найчастіше можна побачити текстово-графічний гібрид.

Суміжні формати

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

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

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

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

Технології створення

• Використання flash-технологій зараз найбільш популярне і дозволяє зробити оформлення будь-яким.
• На мові java пишуться прикладні програми та вбудовуються у HTML-документи. Для коректного відображення таких банерів у вікні браузера потрібні спеціальні плагіни. Наразі вони присутні у пакетах практично будь-якого програмного забезпечення для роботи в інтернеті. Особливих функціональних переваг такі модулі не мають. Можна редагувати деякі елементи, здійснювати найпростіші маніпуляції з об'єктами, простежити, коли клацнув мишею або натискав клавіші на клавіатурі тощо. Але вони довго вантажаться, часто можуть некоректно відображатися через брак будь-яких налаштувань.
  Такі об'єкти можна віднести до так званих rich media або рекламних носіїв, які відрізняються своєю інтерактивністю та привабливістю для користувача, але складні у виготовленні.

Призначення банерів

Банери можна розділити за завданнями, що ставляться перед створенням:

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

Переваги банерної реклами

• Цей вид просування підходить як для великих та відомих організацій, так і для молодих, що розвиваються. Тут усі рівні
• Це чудова можливість впливати на репутацію та імідж бренду. Практично кожен користувач інтернету візуально чи підсвідомо оцінює інструменти, якими користується компанія просування своєї продукції.
• Зробити, розмістити та редагувати оголошення в інтернеті значно дешевше, ніж замовити вуличний варіант.
• Завжди можна вибрати місце розташування. Рекламодавець знає свою цільову аудиторію, її соціальні, демографічні та географічні особливості та задає необхідні параметри, враховуючи ці аспекти. Завдяки цьому його рекламу бачать лише потенційні клієнти. Наприклад, в Яндексі медійно-контекстна реклама показує банери, які співпадають із запитами користувачів. Почитати про це ви можете у статті про МКБ у блозі Семантики.
• Завжди можна відстежити успішність такої стратегії просування і у разі недосягнення бажаних результатів можна змінити стратегію просування.
• Дізнатися про успішність ваших дій можна найближчим часом. Результат залежить від правильності налаштувань оголошення, вибору майданчика для розміщення та візуального оформлення блоку.
• А також завжди можна прибрати непотрібні публікації та внести зміни до існуючих, додати нові елементи та змінити текст.

Правила роботи з банерами

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

1. Визначте цільову аудиторію.
2. Сформулюйте цілі та завдання.
3. Продумайте дизайн.
4. Напишіть такий текст рекламного повідомлення, щоб викликати інтерес та бажання перейти на ресурс.
5. Проведіть аналіз використання цього інструменту та зробіть висновки.
6. Внесіть коригування, якщо це необхідно.

Якщо аналіз даних не приніс задоволення:

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

Де розмістити та як оплачувати

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

1. Статичним – це коли його вартість розраховуватиметься від терміну оренди місця на майданчику.
2. Динамічним – коли оплата залежатиме від кількості кліків.

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

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

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

Дивилося: 1 139

Час читання: 5 хв.

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

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

Принцип ОДП для банерів

Усі банери мають бути складені за принципом ОДП:

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

Запам'ятайте: хороший банер містить стільки інформації, скільки достатньо для кліка.

Розглянемо детальніше 3 варіанти дедлайну:

1. Обмеження за часом

Часто використовуваний варіант у банері – обмеження спецпропозиції. Суть у тому, що ви пропонуєте смачні умови, що діють до такого числа. А ще краще вказати у банері, що акція діє 24 години або 3-4 дні. Чим менше часу у відвідувачів на роздуми, тим більше кліків на ваш банер.

2. Зміна ціни

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

3. Обмеження за кількістю

Потрібно показати клієнту, що товар закінчується. Наприклад, вкажіть у банері - "Залишилося всього 17 екземплярів". Для більшого ефекту – 5 із 17 вже заброньовані. Усе це змушує покупця поспішати з рішенням.

2-3 банери у слайдері

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

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

Але якщо ж ви хочете розмістити 2-3 банери, слід враховувати наступні особливості.

1. Швидкість банерів

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

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

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

2. Послідовність банерів

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

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

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

4. Ручна взаємодія

Автоматична ротація має бути припинена після будь-якої активної взаємодії користувача з банером. Наприклад, коли він натискає на кнопки (наступний/попередній), щоб відобразити новий банер у каруселі.

Висновок

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

Стаття написана для "LPGenerator"

Популярні статті

Як легко і просто зробити банер або робимо картинку посиланням, тобто клікабельним

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

адреса посилання" target="_blank"> адреса картинки " />

Для цього потрібно завантажити картинку на будь-який фотохостинг і взяти посилання №1, тобто адресу картинки. Адреса посилання це сторінка, яка відкриватиметься при натисканні на картинку або банер.

Скопіюйте код у блокнот на ПК та уважно вставте адреси посилання та картинки (не переплутайте)

Вставте повідомлення в розширеному редакторі при натисканні на ДЖЕРЕЛО

Надішліть повідомлення в ПЕРЕГЛЯД або ЧЕРНІВЕЦЬ і перевірте результат на клікабельність. Я. наприклад, проводжу всі маніпуляції з картинкою в Чернівці, а потім щоразу беру готовий код картинки з чернетки і вставляю в повідомлення.

А цей банер я виготовила у звичайному Worde

Другий спосіб дуже легкий. За допомогою простих маніпуляцій, при завантаженні картинки в розширений редактор прямо з комп'ютера, можна зробити будь-яку картинку не тільки клікабельною, але з текстом при наведенні на картинку. Для цього тиснемо на іконку ЗОБРАЖЕННЯ і завантажуємо картинку з ПК. Коли картинка завантажиться переходимо на вкладку ПОСИЛАННЯ

Тиснемо ОК і милуємося результатом.

Для бажаючих працювати з кодом, для клікабельної картинки з текстом, що спливає, даю код, тільки не забудьте замість width=100 height=100 вставити розміри картинки, де width-ширина, а height - висота картинки

Адреса сторінки, на яку вказуватиме банер target=_blank> Адреса картинки з Інтернету або з Радикала (посилання №1)" border="0" title="(!LANG: Текст, видимий, як підказка, при наведенні на посилання. " width=100 height=100> !}

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

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

1. Використовуйте найефективніші стандартні розміри банерів

728×90 px — довгий банер-перетяжка, лідерборд (Leaderboard),
300×600 px – банер на половину сторінки (Half Page),
300×250 px – прямокутник середнього розміру (Medium Rectangle),
336×280 px – великий прямокутник (Large Rectangle).

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

2. Розміщуйте банери правильно

Купуйте місце на сайті поверх (Above The Fold) близько до основного контенту сторінки, тоді ваш дизайн буде видно всім.

3. Підтримуйте ієрархію

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

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

2. (Value Proposition) – пояснює, який продукт/послугу ви пропонуєте, та привертає увагу привабливими оффером та цінами. Як правило, тут можна побачити словосполучення на кшталт « висока якість», «50% знижка» і «обмежена за часом акція». Цей елемент займає основний простір, і саме його мають насамперед помітити глядачі.

3. (Call to Action, CTA) – це текст або кнопка, яка запрошує користувачів натиснути її. Зазвичай пишуть щось на кшталт "Дізнатися більше", "Подивитися" або "Почати". Заклик має стати фокусом рекламного оголошення.

4. Дотримуйтесь простоти

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

5. Впроваджуйте кнопки з розумом

Кнопки збільшують клікабельність реклами (Click-Through Rate, CTR). Розташуйте їх після тексту, ближче до правого нижнього кута. Застосовуйте контрастний колір і не забудьте про смак! Кнопки повинні відрізнятися постійним дизайном протягом усього набору рекламних оголошень.

6. Обрамляйте свої банери

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

7. Робіть текст миттєво читаним

Заголовок та основний текст повинні мати різний розмір. Весь текст не повинен перевищувати чотири рядки:

Небажано застосовувати курсивні або рукописні шрифти, дуже тонке написання, писати текст лише великими літерами або використовувати шрифт менше 10 pt (якщо це не заява про обмежену відповідальність або не відомості про авторські права).

8. Застосовуйте анімацію

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

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

9. Органічно доповнюйте, виділяючись

10. Забезпечуйте зв'язок із брендом

11. Переконайте відчуття терміновості

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

12. Образотворчі засоби вибирайте з розумом

Графіка та фотографії повинні мати відношення до продукту. Їхня мета — краще донести послання. Жодних абстракцій. Не можете собі дозволити професійних фотографівта моделей? Заплатіть за . Можна знайти оригінальні ілюстрації чи замовити графіку дизайнеру.

Зображення взагалі не є обов'язковими для використання. Майстерно складений текст і успішна друкарня створять аналогічний ефект.

13. Віддавайте перевагу відповідним кольорам

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

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

• червоний- Пристрасть, лють, збудження та любов. Потужний колір, який приваблює багатьох, але краще використовувати його обережно. Уникайте червоного, якщо ви прагнете класичного, зрілого, серйозного образу.
• Помаранчевий- Грайливість і наснагу. На відміну від агресивного червоного, помаранчевий заряджає енергією. Чудовий вибір для кнопки заклику до дії.
• Жовтий- Радість, сонячне сяйво, дружелюбність. Жовтий притягує погляд та випромінює енергію, створює відчуття молодіжності та доступності за вартістю.
• Зеленийздоров'я, свіжість, багатство, довкілля, зростання, турбота та початок чогось нового. Нашим очам приємно на нього дивитись.

• Синій- Безпека, довіра, ясність, зрілість, безтурботність, інтелект, формальність, відновлення сил, холодність і мужність. Цей колір є у більш ніж половині всіх логотипів світу.
• Фіолетовий- Розкіш, велич, екстравагантність, мудрість, магія, жіночність і креативність. Має на глядачів заспокійливий ефект.
• Рожевий- Кохання, симпатія, жіночність, юність і діти. Зазвичай рожевий пов'язують із чимось жіночим, але все залежить від тону та яскравості.
• Чорний- ексклюзивність, загадковість, сучасність, міць, престиж, розкіш та формальність. Традиційний вибір, зокрема, чорний текст на білому тлі – це найзручніша для читання колірна комбінація.

• Білий- Невинність, чистота, сучасність, стерильність, простота, чесність та невинність. Створює почуття економічної виправданості та причетності до молодості.
• Коричневий- природа, дерево, шкіра, серйозність, мужність, впертість/жорсткість та скромність. Коричневий створює баланс між сильнішими кольорами і тому добре підходить як тло.
• Сірий- Нейтральність і практичність. При використанні як фон посилює решту кольорів.

14. Підтримуйте невеликий розмір файлів

Чим менше, тим краще менше 150 кб, як рекомендує Google Adwords. Потрібно, щоб реклама завантажувалась швидко, інакше відвідувачі прокрутять сторінку вниз, не помітивши її.

15. Використовуйте правильні формати файлів

JPG, PNG, GIF або HTML5 це те, з чим слід працювати. Як правило, дизайнери створюють графіку в Adobe Illustrator або Photoshop і отримують файли в JPG, PNG або GIF, або вони застосовують Google Web Designer або Adobe Animate і мають HTML5 на виході.

Висновок

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

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

Оффер у вигляді банера → перехід на лендинг → підписка на розсилку → Lead Nurturing

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

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