Как сделать в Google Web Designer анимированные баннеры для рекламных кампаний
Всем привет. Я интернет-маркетолог, специализируюсь на продвижении сайтов и в своем блоге делюсь неочевидными нюансами по теме. Сегодня расскажу, как легко создать анимированные баннеры для рекламных кампаний с помощью бесплатного инструмента Google Web Designer.
Google Web Designer — это бесплатный софт для создания баннеров и страниц в стандарте HTML5 и CSS3.Преимущества HTML5 баннеров
Данные типы баннеров адаптивные и анимированные, поэтому выделяются в выдаче на фоне статичных баннеров.
Кроме того:
- объявления правильно отображаются в любых браузерах и выглядят идентично на всех типах устройств;
- большие возможности рекламных интеграций — например, можно добавить кнопки с социальными сетями или создавать анимацию, чтобы привлечь внимание пользователей;
- относительно небольшой вес, что помогает баннеру быстро загружаться и не упускать показы.
Шаблоны в Google Web Designer
При создании баннера сервис предложит создать файл с нуля либо использовать шаблон.
Среди доступных шаблонов:
- Динамический ремаркетинг. Один из самых популярных шаблонов для показа сразу нескольких предложений (товаров или услуг). Например, можно показывать туры, недвижимость, автомобили, товары, авиабилеты и многое другое.
- App Install. Поможет при создании креатива для рекламы мобильного предложения.
- Banner for Display. Специальный формат, который может быть размещен на каждом сайте.
- Баннер для Google Ads и AdMob. Универсальный формат, легко продвигающийся среди мобильных устройств.
- Data Driven. Показывает по очереди преимущества бренда.
- Demonstration. Баннер с интеpaктивными элементами, например, вывод текста при наведении курсора на изображение.
- Expandable. Показывает один большой баннер и несколько маленьких, позволяя продвигать товары/услуги для кросс-сейла.
- Floating. Редкий формат, отображается только на ПК.
- In-stream video. Показ видео вместо баннера, в последнее время довольно популярная опция.
- Interstitial & in-app. Баннер для планшетов для продвижения мобильных приложений.
- Lightbox. Универсальный формат, в котором удобно использовать видео, карты и изображения для продвижения товаров и услуг.
- Parallax. Создает красивую иллюзию сразу нескольких слоев и быстро загружается.
- Rising star. Баннеры с интеpaктивным форматом, правда, редко используются из-за отображения только на ПК.
После основного макета нужно задать шаблон. Выбрав, например, «Динамический ремаркетинг», потребуется дополнительно подобрать один из шаблонов и подходящий размер баннера.
Нажав на «Предпросмотр», можно подобрать другой размер для данного шаблона и при необходимости открыть пример в нужном браузере.
При выборе подходящего макета следует нажать «Использовать шаблон», чтобы начать работать с интерфейсом.
Инструкция по созданию баннеров HTML5 в Google Web Designer
Обзор Netpeak Checker 2.1 — мультифункционального инструмента для массового анализа и сравнения сайтов В качестве примера создадим баннер для двух инструментов
Мы будем использоваться баннер 300*600 пикселей — в блоке «Свойства» нужно изменить соответствующие поля.
После в блоке «Библиотека объектов» загрузим все составные части для нашего проекта это:
- задний фон;
- логотип Netpeak Software;
- логотип Netpeak Spider;
- логотип Netpeak Checker;
- лого Netpeak.
Для этого кликаем правой клавишей мыши и выбираем «Добавить объект».
После загружаем все необходимые части.
Далее расставляем составные части по нужным местам (при необходимости изменяя их размеры, через «Свойства»).
Добавляем текст к баннеру через панель инструментов.
В итоге получаем такой баннер.
Теперь потребуется расставить кнопки для перенаправления на нужные страницы. Для этого кликаем правой клавишей мыши на нужный объект и выбираем «Добавить событие».
Далее нажмите «Мышь» и затем «Click».
В блоке «Действие» выбираем «Переход».
Здесь только один пункт — «gwd-ad».
Теперь в URL ставим ссылку на нужную страницу.
Все готово и проводим аналогичную операцию со всеми элементами в проекте.
Следующий этап — это создание анимации, для чего используем временную шкалу ниже.
Для примера мы будем использовать упрощенный редактор, но также можно перейти в расширенный при помощи нажатия на соответствующую клавишу.
Расставляем объекты на странице в порядке появления во время анимации.
Далее, нажимая на «+», копируем исходный кадр и получаем его полную копию. Вносим правки и снова копируем. Затем снова вносим правки.
Так проводим работу со всеми кадрами, пока картинка не будет собрана полностью.
После этого проверяем баннер — нажмите «Воспроизведение».
Теперь осталось только сохранить баннер кликнув в правом-верхнем углу на «Файл» — «Сохранить как ZIP-файл».
Пример готового баннера:
Я сохранил на Google Drive архив с баннером, чтобы можно было рассмотреть подробности на каждом этапе создания изображения.
Комментарии:
Улучшайте свой уровень английского. Упражнения для В1 — Intermediate («Средний+»). Узнать больше!...
14 10 2026 7:26:47
Если хотите, чтобы кампании в контекстно-медийной сети работали эффективно, следует очистить площадки и ввести это в привычку...
13 10 2026 10:39:19
Опыт контент студии WordFactory и 14 экспертов интернет-маркетинга....
12 10 2026 2:13:19
Почему дешевый копирайт не подходит для текстов карточки товара...
11 10 2026 19:27:22
Проверяем, есть ли разница в ранжировании при наличии/отсутствии этих слов в метаданных. Эксперимент....
10 10 2026 5:16:18
Тренинг по контекстной рекламе образовательных курсов в Google Ads, Яндекс.Директ, Target@mail...
09 10 2026 16:50:58
То, чего нет в справке — подробный обзор отчетов Google ***ytics: в режиме реального времени, по аудитории, источникам трафика, поведению, конверсии. Узнать больше!...
08 10 2026 15:34:13
Как настроить просто и быстро настроить скрипт в Google ***ytics для отслеживания печати страниц сайта....
07 10 2026 9:37:10
Что такое идеальное время доставки почты и как его использовать для повышения кликабельности email-кампаний....
06 10 2026 12:22:22
Как найти, нарастить и проанализировать ссылочную массу...
05 10 2026 7:41:57
Экспорт/импорт с помощью Excel-файла или таблиц Google позволит скопировать и перенести кампании, группы объявлений и объявления в Facebook вместе с креативами, текстами, ссылками и utm-метками...
04 10 2026 22:23:22
Лучшие фишки продвижения мобильных приложений в адаптированном переводе отчета Branch.io...
03 10 2026 13:30:13
При создании рекламы на украинском мы завоевываем большую долю рынка без повышения цены за клик....
02 10 2026 18:48:36
Многие не догадываются о том, что в КМС Google можно разместить и редактировать графические объявления онлайн...
01 10 2026 22:38:49
Чем полезна вкладка Network в DevTools для SEO-специалиста...
30 09 2026 6:20:11
Проверка структурированных данных поисковыми роботами нуждается в нашей поддержке...
29 09 2026 0:59:17
Любопытная подборка "маленьких" гигантов: компании и сервисы, чья аудитория превышает 10 миллионов пользователей, а также несколько интересных фактов о каждом из них. Узнать больше!...
28 09 2026 5:35:19
Делимся фишками, которые облегчат работу как новичкам, так и специалистам....
27 09 2026 17:49:57
Работа с умными рекламными кампаниями с оплатой за конверсии в контекстно-медийной сети. Особенности настройки и оптимизации в кейсе продвижения недвижимости. Узнать больше!...
26 09 2026 16:30:34
Рассказываем в подробностях, что полезного сделал Netpeak для своих клиентов с января по апрель 2017 года...
25 09 2026 21:31:16
Компании и продукты, социальные инициативы, главные проекты и миссия группы. Разложили все о Netpeak Group по полочкам в новом посте....
24 09 2026 13:15:24
Nommi — сокращение от nomadic MiFi: роутер для современных цифровых кочевников...
23 09 2026 3:15:29
Если у вас есть продукт, о котором миру стоит узнать, книга Pitch perfect придется вам очень кстати....
22 09 2026 4:35:23
Стоит ли платить за рекламную кампанию «Медийно-контекстный баннер на поиске»?...
21 09 2026 11:13:12
Ссылка с сайта с высоким тИЦ уже не считается качественной. Хороший донор вычисляется по комплексу факторов. Большую часть работы придется делать вручную. Важно найти отличный сайт, с огромным количеством интересного контента, оцененного по достоинству читателями, и гармонично туда вписать свою статью со ссылкой...
20 09 2026 5:57:11
Часто в распоряжении клиента только интерфейс конструктора сайтов, весьма ограниченный в функциональности. Тогда на помощь интернет-маркетологу приходит сервис Tag Manager, благодаря которому можно настроить необходимый код расширенной электронной торговли....
19 09 2026 15:45:33
Как мы продвигали бизнес-страницы OLX с помощью рекламы в Facebook, TikTok и Viber....
18 09 2026 12:45:23
Кейс роста трафика из органического поиска на 200%....
17 09 2026 15:47:32
Читайте, если не хотите «слить» бюджет. Определите конкретные цели и УТП, соберите аналитику, идите к специалисту без опыта работы в конкретной нише и другие рекомендации эксперта. Читайте подробнее в статье!...
16 09 2026 14:48:47
После нехитрых манипуляций с текстом вторая строка оказывается в заголовке....
15 09 2026 0:25:54
Данные по 42,5 млн кликов в 25 тематиках и 391 городу...
14 09 2026 11:42:56
Как работать с Facebook ***ytics — бесплатным инструментом с богатым инструментарием и лучшей из всех существующих решений интеграцией с платформой Facebook...
13 09 2026 14:59:44
Успех рекламы во многом зависит от сезонности, популярности тематики и умения оперативно среагировать на тренд. Для этого и существует сервис Google Trends....
12 09 2026 16:53:43
Создатели алгоритмов соцсетей используют слабые места человеческого мозга. Случайно или намеренно, но они это делают. Как нам с этим жить?...
11 09 2026 12:49:58
Как повысить результаты продаж в режиме цейтнота. Советы новому руководителю от специалистов Netpeak Group. Больше подробностей — в посте...
10 09 2026 5:39:40
Определение сайта нового типа. Захочет ли бизнес интернета перевести свои веб-приложения на более прогрессивные рельсы?...
09 09 2026 22:55:23
Как упростить знакомство клиента с компанией, продуктом или услугами....
08 09 2026 17:41:22
Сайту нужны внешние ссылки на сторонних ресурсах. Они могут повлиять на ранжирование вашего ресурса и трафик, а один из методов их получить — аутрич....
07 09 2026 2:44:36
Результаты, которых мы достигли за 2 месяца работы....
06 09 2026 16:55:43
Не Google единым. Нужные и важные знания по Яндекс.Вебмастер....
05 09 2026 10:21:44
Агентство Netpeak закрыло сделку по покупке агентства мобильного маркетинга Радомира Новковича RadASO....
04 09 2026 11:44:12
Кейс SMM-специалиста Edu-CASH.com о том, что делать, если Facebook страница заблокирована. И почему могут забанить аккаунт даже популярного бренда. Узнайте в статье!...
03 09 2026 13:26:39
Как настроить автоматическое обновление данных о товарах с помощью таблиц Google....
02 09 2026 17:56:52
Начинаем работать с облачным сервисом хранения Google BigQuery...
01 09 2026 9:48:18
По-настоящему работающих идей не так много, поэтому не стоит бояться творчески заимствовать лучшие наработки и адаптировать их....
31 08 2026 0:40:41
Почему стоит внимательно относиться к выбору библиотеки JavaScript....
30 08 2026 6:38:41
Уже сейчас в Google Play и App Store миллионы приложений. Как сделать так, чтобы приложение получило достаточное количество установок и приносило доход? Читайте об этом далее и изучайте наглядную инфографику!...
29 08 2026 23:14:57
Интеграция видео в маркетинговую кампанию – решение, которое повысит ценность каждого посетителя сайта....
28 08 2026 22:17:41
Звук телефонного звонка важен и для пользователя интернета. Как точно рассчитать полученную прибыль и рентабельность инвестиций в рекламу...
26 08 2026 19:51:51
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
