Как сделать в 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 архив с баннером, чтобы можно было рассмотреть подробности на каждом этапе создания изображения.
Комментарии:
И чем этот тип отслеживания событий отличается от Client-side. Узнать!...
14 08 2026 23:51:57
Оплата покупок в Facebook и Instagram через платежные ссылки...
13 08 2026 3:48:46
Сайту нужны внешние ссылки на сторонних ресурсах. Они могут повлиять на ранжирование вашего ресурса и трафик, а один из методов их получить — аутрич....
12 08 2026 23:48:57
Как правильно распределить рекламный бюджет? Читайте топ-50 самых дорогих ключевых слов Google Рекламы в Казахстане по версии Serpstat...
11 08 2026 0:18:33
Какие шрифты бывают, для чего они предназначены, где найти самый подходящий шрифт и как его правильно использовать?...
10 08 2026 23:28:51
Рассказываем про маркетинговые техники продающих email рассылок...
09 08 2026 0:50:15
Лучшая работа по перехвату инициативы у конкурентов в аналитике продаж...
08 08 2026 20:38:43
Не стучитесь к Алексею на ФБ с предложением что-то придумать для бренда. У Ломоносова целый тред таких непрочитанных сообщений. Узнать больше....
07 08 2026 3:40:32
Гайд по типам рекламы в соцсетях для SMM-, PPC-специалистов, блогеров и владельцев бизнеса в зависимости от целей, которые вы ставите перед продвижением. С конкретными рекомендациями и примерами. Узнать больше!...
06 08 2026 16:32:27
О возможностях нестандартного использования поисковых систем для решения важных бизнес-задач...
05 08 2026 23:32:47
Редполитика Netpeak Journal (ex блог Netpeak) — руководство по написанию понятных, полезных, продающих и удобочитаемых текстов. Документ для внутреннего использования в открытом доступе. Применяйте, адаптируйте. Читать!...
04 08 2026 3:13:55
Эта история о том, как за два года комплексный подход к поисковому продвижению (SEO на этапе разработке сайта и дальнейшие действия по оптимизации) помог увеличить рост бесплатного трафика на 463% или Что делать, если SEO не приносит результаты сразу...
03 08 2026 5:49:27
Мотивация сотрудников к работе с текстами. Опыт бюро копирайтинга Texbroker...
02 08 2026 10:29:38
Как настроить многокaнaльную модель атрибуции для своего бизнеса....
01 08 2026 15:32:28
О том как растут доходы при оптовой торговле женской одеждой и обувью, а траты на рекламу остаются на прежнем уровне...
31 07 2026 9:51:51
Как начать бизнес в институте и масштабировать его до международной группы компаний. Собрали все самое интересное из интервью фаундера «Техно Ёж» Алексея Гулыя на конференции 8P....
30 07 2026 1:24:18
Айти эксперт Женя Розинский о том, почему нацию айти развивают продуктовые бизнесы, а не outsourcing сервисы...
29 07 2026 12:37:50
Какая интересная и трэшовая реклама встречалась в соцсетях в январе 2021-го? Давайте смотреть...
28 07 2026 14:54:41
Примеры странной, классной и непонятной рекламы в соцсетях из моей ленты за февраль 2021 года...
27 07 2026 11:23:24
В этой статье мы поговорим про принципы работы СRM-системы. Это базовые моменты, прояснив которые СRM перестанет быть для вас чем-то сложным и непонятным....
26 07 2026 22:36:49
Думаете, что почитать об онлайн-продвижении и диджитал-маркетинге? Вам сюда. Мы собрали топ интересных сайтов, блогов, каналов и пабликов...
25 07 2026 9:42:22
Как эффективно выйти из карантина с помощью контекстной рекламы...
24 07 2026 16:18:11
Сначала учитесь, а потом идите в бизнес и предпринимательство. Бизнес — это игра, в которую играют пару тысяч лет, и здесь не нужно придумывать велосипеды. Научитесь сначала просто ездить, потом уже будете думать про кастомы....
23 07 2026 14:27:29
Объясняем по пунктам, как создать и правильно настроить DSA c таргетингом на фид и содержание сайта...
22 07 2026 19:11:43
2013, 2014, 2015 — годы, когда конференция 8p радовала все сео-сообщество СНГ. Прошла она и в 2016 году. Мы собрали лучшие советы интернет-магазинам от экспертов и участников круглого стола на конференции 8P 2016....
21 07 2026 9:38:25
Данные о стоимости клика в наиболее популярных рекламных интернет-площадках страны....
20 07 2026 23:40:24
Рынок мобильных приложений и его глобальные тренды из исследования App Annie...
19 07 2026 6:30:27
О работе, креативности, мотивации и многом другом....
18 07 2026 14:28:18
Грамотная аналитика в мире мобильных приложений, как и в целом в маркетинге — единственный путь к окупаемости продукта и выходу в высшую лигу брендов...
17 07 2026 3:44:46
Энн Смарти (Ann Smarty), пожалуй, самая известная публичная личность в мире контент-маркетинга и поискового продвижения. За несколько лет она прошла путь от SEO-блогера до главного редактора авторитетного Search Engine Journal и CEO одного из самых популя...
16 07 2026 11:26:20
Сохраняем время и ресурсы для проверки типичных задач и тратим его на реализацию креативных идей по оптимизации сайта....
15 07 2026 6:46:54
Дайджест-путеводитель по серии постов о работе с редакторами электронных таблиц для PPC-специалистов....
14 07 2026 10:41:13
Вам тоже нужно предоставлять отчеты о работе рекламной кампании, посещение сайтов? Держите три примера работы с Google ***ytics и понятных отчета по ним, которые можно продемонстрировать, не открывая доступ к аккаунту....
13 07 2026 18:41:40
Мы собрали 30+ Телеграм-каналов, где вы найдете только полезную и актуальную информацию про маркетинг, SEO, SMM, веб-аналитику и развитие бизнеса...
12 07 2026 9:21:43
Влияет ли значение показателя отказов на ранжирование сайта в поисковых системах и стоит ли переживать из-за высоких показателей отказов? Узнать больше....
11 07 2026 16:28:43
Старт любых активностей в сфере email-маркетинга — разработка стратегии...
10 07 2026 10:18:13
Google Shopping и Smart Shopping Campaign сами себя не оптимизируют....
09 07 2026 4:47:56
Мы уже писали о Google Shopping, в каких странах он доступен и как его настроить. В этом посте я покажу один из способов создания и загрузки фида данных. Это важный этап подготовки к запуску Google Shopping...
08 07 2026 1:39:11
Как уменьшить время ответа сервера и повысить общий показатель скорости загрузки сайта...
07 07 2026 15:54:39
Полезный и развлекательный контент для всех, кто работает в IT, интернет-маркетинге, интересуется фишками тайм-менеджмента, учится управлять комaндой и собой....
06 07 2026 10:55:40
Как и где найти хорошего автора для вашего сайта: сравнение платформ копирайтинга, форматы оплаты (объем или качество), фишки по выбору фрилансера. Читать дальше!...
05 07 2026 17:26:36
Распространенные ошибки продвижения B2B-компаний + стратегии того, как наращивать число активных подписчиков и потенциальных клиентов....
04 07 2026 9:36:13
Крупным брендам не избежать негатива в сети. Но с ним можно и нужно работать. Читайте успешный кейс для DOM.RIA....
03 07 2026 16:34:24
Данные по 24 миллионам кликов в 24 тематиках и 391 городу...
02 07 2026 7:15:31
Клиентам не нужно ориентироваться на попадание к поисковым топам выдачи...
01 07 2026 13:25:51
Когда саппорт-отдел не справляется, подключайте к работе ПланФикс и Телеграм....
30 06 2026 9:48:58
Продвигаем медицинский проект. Кроме цифр рассказываем, что и как делали...
29 06 2026 11:50:12
Короткий кейс и рекомендации по защите аккаунта от взлома....
28 06 2026 13:27:57
Топ-8 ошибок новичков в Google Рекламе: как сэкономить деньги при планировании рекламной кампании....
27 06 2026 5:39:39
Готовые к использованию таргетинговые идеи для мобильных приложений онлайн в Facebook....
26 06 2026 0:10:10
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
