Как сделать в 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 архив с баннером, чтобы можно было рассмотреть подробности на каждом этапе создания изображения.
Комментарии:
Каким правилам нужно следовать, чтобы создать эффективный рекламный ролик?...
30 08 2026 11:40:29
Alexa Rank учитывает как число страниц, так и количество просмотров страниц. Alexa Rank 1, что означает, что все сайты и сервисы Google посещают больше всего посетителей в интернете....
29 08 2026 11:54:45
Нужно подобрать красивый шрифт? Готический или народный? Стандартный или фирменный? Как выбрать — рассказывает профессионал...
28 08 2026 15:45:33
С каждым годом китайские маркетплейсы увеличивают свое влияние, и покупатели всё активней заказывают товары из Поднебесной. Но не всё скидки да покупки — обладатели интернет-аудитории и маркетологи могут еще и хорошо заработать на этих площадках....
27 08 2026 7:19:42
Четкая структура полноценного письма с примерами из рассылок крупных компаний: Aviasales, LinguaLeo, Rozetka, Yves Rocher, Pich Shop, Эльдорадо и другие....
26 08 2026 23:53:29
Менеджер, маркетолог, дизайнер программист? Делимся секретами нетпик, каким должен быть специалист по рекламе...
25 08 2026 7:10:36
Бета-версия помогает записывать действия пользователей на сайте и благодаря этому улучшать удобство использования сайта и в перспективе растить продажи. Узнать больше!...
24 08 2026 6:36:30
Как создать Apple ID и настроить поисковую рекламу в App Store...
23 08 2026 7:16:51
Особенности продвижения локального офлайн-бизнеса...
22 08 2026 8:18:20
Какими бывают формы подписки и как их используют бренды...
21 08 2026 7:30:22
Динамический ремаркетинг — один из самых эффективных способов продаж для любой группы товаров. В этой статье мы поделимся тонкостями технической подготовки к запуску динамического ремаркетинга в Facebook....
20 08 2026 3:28:41
29 ноября в Киеве в UNIT.City — конференция по медицинскому маркетингу MeDiConf...
19 08 2026 14:56:55
Direct way. Как вложить 200 у.е. и получить 800 у.е....
18 08 2026 9:56:36
Лекции о ключевых этапах развития бизнеса в интернете: от создания сайта до подсчета ROMI (возврат маркетинговых инвестиций) рекламных каналов...
17 08 2026 3:44:29
Читать только интернет-маркетологам, SMM, PPC и SEO-специалистам....
16 08 2026 22:54:23
Алексей Селезнев, руководитель отдела аналитики Netpeak делится статистикой по самым дорогим и самым дешевым тематикам, регионам размещения рекламы, каналам и устройствам. Узнать больше!...
15 08 2026 13:25:24
Как достучаться до сердца блогера, или Автору звонят дважды...
14 08 2026 10:27:18
Персональная стратегия продвижения онлайн с помощью SEO и контекстной рекламы....
13 08 2026 6:38:39
Дейли — ежедневный комaндный митинг, на котором комaнда синхронизируется по ключевым моментам работы и по текущим задачам. Делимся чек-листом агентства Netpeak по организации дейли на удалёнке....
12 08 2026 8:45:41
В основе продвижения любых продуктов фигурирует ЦА и её потребности. Рассказываем, как с ней работать в разрезе Инстаграм и Facebook так, чтобы РК давала максимальный профит...
11 08 2026 20:49:35
Баннерная реклама в фейсбуке. Обзор семи новых рекламных инструментов...
10 08 2026 18:48:53
Что нам дают знания о статистике контента в социальных сетях и какими сервисами анализировать данные...
09 08 2026 18:20:44
Тренды, рекомендации, уроки, инструкции, а также вакансии, идеи, кейсы и всё, что поможет оставаться в теме, находить интересные проекты и вдохновляться. Читать дальше....
08 08 2026 23:57:48
Обсуждаем, как попробовать инфлюенсер-маркетинг без особого бюджета...
07 08 2026 4:52:58
Почему в рекламе недвижимости стоит запускать динамический ремаркетинг...
06 08 2026 16:46:46
Новая услуга для бизнесов, которым большое количество подписчиков не приносит продаж...
05 08 2026 5:51:33
Как упростить работу со скриптами на языке R? Программирование удобного интерфейса с помощью пакета «gWidgets»...
04 08 2026 23:59:38
Следим за развитием событий и анализируем решение суда. Читать дальше!...
03 08 2026 17:31:17
Рекомендации по ведению переговоров в непростых условиях....
02 08 2026 1:59:14
Консультант по маркетингу в зоне ru Екатерина Решетило написала пост о том, как правильно настроить стратегический контент-маркетинг для долгосрочных продаж...
01 08 2026 8:57:19
Об истории и значении поговорок и других фразеологических оборотов...
31 07 2026 18:35:14
Сколько страниц на самом деле показывает и может перевести поисковик Google?...
30 07 2026 6:20:17
Проделанные шаги и полученные результаты при раскрутке магазина великов в интернете...
29 07 2026 0:32:11
И чем этот тип отслеживания событий отличается от Client-side. Узнать!...
28 07 2026 21:35:38
Алгоритм настройки и запуска рекламы для SMM-, PPC-специалистов, блогеров и владельцев бизнеса....
27 07 2026 11:55:20
Как создать онлайн кампанию по продвижению мобильного приложения с максимальной отдачей....
26 07 2026 21:20:16
Гифка — это зациклиненное видеоизображение, рисунок-ролик, крохотный фильм, без которого трудно представить современный сайт. Как быстро создавать гифки и получать профит....
25 07 2026 9:50:37
Онлайн-корпоративы стали трендом 2020 года, но останутся с нами надолго если не в чистом, то в гибридном формате. Делимся опытом организации дня рождения компании в Zoom....
24 07 2026 0:23:15
Зачем размещаться на AppSumo и как запустить продукт в 2021 году? Лайфхаки по размещению, личный опыт и результаты по проведенной кампании...
23 07 2026 3:14:10
Программа покорения онлайн мира мобайла — самому и с ограниченными средствами на маркетинг...
22 07 2026 17:55:34
Что делать, если нет четкой модели оценки эффективности контекстной рекламы?...
21 07 2026 12:41:33
Перевод статьи о стадиях формирования комaнд по Брюсу Такмену — полезно знать всем....
20 07 2026 7:38:51
Клиентам не нужно ориентироваться на попадание к поисковым топам выдачи...
19 07 2026 1:57:19
Грамотная аналитика в мире мобильных приложений, как и в целом в маркетинге — единственный путь к окупаемости продукта и выходу в высшую лигу брендов...
18 07 2026 10:44:58
Начинаем работать с облачным сервисом хранения Google BigQuery...
17 07 2026 21:33:29
Придумать цепляющие заголовки для 1000 репостов в соцсетях — что можно узнать в результате анализа миллиона заголовков в блогах....
16 07 2026 9:52:51
Успех рекламы во многом зависит от сезонности, популярности тематики и умения оперативно среагировать на тренд. Для этого и существует сервис Google Trends....
15 07 2026 5:59:34
Продвижение монобренда: особенности, трудности, подводные камни. Ниша здоровья и красоты....
14 07 2026 23:53:17
Как владельцу стартапа пробиться сквозь сотни ежедневных сообщений, которые получает инвестор, создать эффективную цепочку писем и быть замеченным...
13 07 2026 3:54:22
Применяя фишки, можно выделить релевантную аудиторию и продать ей что угодно — от кроссовок до президента....
12 07 2026 4:46:49
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
