Как сделать в 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 архив с баннером, чтобы можно было рассмотреть подробности на каждом этапе создания изображения.
Комментарии:
Вам точно нужен ВП? Тогда утвердите сабж, чтобы умещался в три слова, скиньте линк и дескрипшн и распознайте канал-оборотень. Полная подборка сленговых слов, значение которых не всегда найдете в Google...
17 04 2026 16:25:42
95% заполняемости коливингов для сервиса аренды жилья....
16 04 2026 23:32:45
Google внедрил новую возможность выделить объявление — автоматическое добавление часов работы. Давайте разберемся, как добавить эту полезную информацию в расширения объявлений...
15 04 2026 15:16:37
Андреас Рётль о продвижении Journi: как трое выпускников Стэнфордского университета создали приложение для сторителлинга с 25 000 пользователями в 100 странах....
14 04 2026 14:34:35
О работе внутреннего и внешнего контент-маркетолога: необходимые знания и навыки для старта, плюшки и головная боль. Все здесь....
13 04 2026 8:27:33
От наличия отзывов зависит решение клиента купить товар или заказать услугу. Как правильно работать с репутацией? Разбираемся...
12 04 2026 20:35:46
Объявление или кабинет блокируют из-за эмоджи. Что делать?...
11 04 2026 19:49:40
Стив Рейсон назвал 20 уроков, которые BuzzSumo усвоил на пути к топу самых популярных сервисов для контент-маркетологов....
10 04 2026 9:50:53
Как говорится, люди делятся на тех, кто делит других на типы и тех, кто не делит. В этом посте — про желтых, синих, красных и зеленых людей....
09 04 2026 13:50:48
Триггер — способ ненавязчивого воздействия на потенциального клиента путем использования психологических приемов в текстах, заголовках и остальном контенте...
08 04 2026 13:32:31
Узкие специализированные ниши и широкие, которые, как правило, уже заняты лидерами рынка — в каждой найдется место для онлайн-издания с полезным контентом. Узнать больше!...
07 04 2026 14:19:11
В этой статье я покажу пример визуальной работы с закладкой и пошагово разберу процесс их создания и применения для удобства визуализации данных...
06 04 2026 22:44:11
Рекомендации и мнения экспертов по одной из самых противоречивых тем украинского интернет-прострaнcтва....
05 04 2026 18:47:38
Есть ли шанс на апелляцию...
04 04 2026 6:25:40
Считаем SEO-эффект от нового дизайна сайта и работы над usability...
03 04 2026 23:37:11
Думаете, что почитать об онлайн-продвижении и диджитал-маркетинге? Вам сюда. Мы собрали топ интересных сайтов, блогов, каналов и пабликов...
02 04 2026 22:41:29
SEO-специалисты в Киеве получают в два раза больше, чем жители других городов Украины. Middle лидирует среди должностей как PPC, так и SEO-специалистов. Самая высокооплачиваемая должность — Head of PPC $1900. Узнать больше!...
01 04 2026 17:46:41
Как владельцу стартапа пробиться сквозь сотни ежедневных сообщений, которые получает инвестор, создать эффективную цепочку писем и быть замеченным...
31 03 2026 8:37:37
Пошаговый чек-лист и описание действий SEO-специалиста на всех этапах переноса сайта на новую CMS....
30 03 2026 20:53:14
PR должен решать задачи бизнеса и для этого мало мониторить упоминания компании или бренда, нужно анализировать. С появлением соцсетей пиар изменился. Узнать больше!...
29 03 2026 21:27:48
Сравнительная хаpaктеристика B2B и B2C. Как строятся отношения с клиентом, какой объем рынка, особенности сервиса, на чем делать акцент при создании контента. Подробнее....
28 03 2026 2:15:52
Правильно выбранная соц. площадка поможет раскрутить бизнес эффективно....
27 03 2026 0:42:35
Структура обзора, правила написания и важные хаpaктеристики этого формата. Подача информации в обзоре и запрещенные методы, которые отпугнут клиентов. Узнать больше!...
26 03 2026 3:32:55
Советы специалистов Netpeak: виды фильтров Google, что с этим делать и как снять ручные санкции Google....
25 03 2026 2:13:50
Как настроить многокaнaльную модель атрибуции для своего бизнеса....
24 03 2026 4:19:30
Аккаунт менеджеры это... Быть лицом компании, проводником между заказчиком и комaндой агентства, ментором для коллег и суперменом, готовым прийти на помощь клиенту в любой час дня и ночи… Эти задачи по плечу аккаунт-менеджерам Netpeak...
23 03 2026 20:47:24
Чтобы грамотно анализировать статистику рекламных кампаний, необходимо связать Яндекс.Метрику и Яндекс.Директ. Рассказываем, как это сделать...
22 03 2026 9:15:15
Стартовый урок о том, как настроить визуализацию данных из Google ***ytics с помощью Google Spreadsheets...
21 03 2026 3:49:14
Плейсменты, требования, запоминаемость...
20 03 2026 12:16:39
Определение сайта нового типа. Захочет ли бизнес интернета перевести свои веб-приложения на более прогрессивные рельсы?...
19 03 2026 3:40:52
Как анализировать конкуренты и делать правильные выводы для развития бизнеса....
18 03 2026 9:51:17
Парсинг сайтов: как избавиться от головной боли и сэкономить сотни часов рутинного труда...
17 03 2026 15:37:30
Алгоритм ссылочного ранжирования, который показывает ее значимость, в частности, для поисковиков. Важность показателя PageRank оспаривают, но до сих пор считают. Читать!...
16 03 2026 23:34:29
Расширения, горячие клавиши и мгновенный перевод слов на другой язык — минимум лайфаков, которые можно использовать для удобства пользователей Google Chrome...
15 03 2026 10:38:13
Аналитик Алексей Селезнев описал простой алогритм прогнозирования поисковой активности пользователей в Яндексе....
14 03 2026 21:38:31
Чтобы увеличить количество заявок и получить волну новых заказов, нужен комплексный подход...
13 03 2026 12:55:14
Мануал, по которому вы создадите специальный отчет, чтобы применить его на своем сайте....
12 03 2026 15:26:14
На одном из проектов был успешный рост трафика и транзакций, но в следующем месяце видимость по Яндексу снизилась до 30% и продолжала жестоко падать. ТИЦ упал с 450 до 425....
11 03 2026 12:41:42
Самые точные данные статистики, которые вы получите с помощью Google Tag Manager....
10 03 2026 0:39:27
С помощью этой шпаргалки вы легко распределите акценты и начнете последовательно внедрять маркетинговую стратегию по продвижению мобильного приложения...
09 03 2026 14:47:59
Лафхаки для маркетологов и владельцев сайтов на Prom...
08 03 2026 2:38:22
Какие форматы видеорекламы логичнее купить для создания спроса на новую продукцию? Выясняем на примере кейса бренда Yves Rocher...
07 03 2026 17:24:23
82% малых бизнесов тонут как раз из-за проблем с денежными потоками (по данным исследований U.S. Bank, 2020). Как предприниматели попадают в кассовые разрывы и что делать в таких ситуациях, разберем в этой статье....
06 03 2026 21:52:11
Как установить счетчик Метрики, грамотно настроить цели, сегменты и запустить рекламную кампанию по ретаргетингу в Яндекс.Директ...
05 03 2026 23:37:18
Стоит ли торопиться с переходом на новый формат объявлений? Эксперимент PPC-специалистов агентства Netpeak....
04 03 2026 9:29:51
Мы восстановили репутацию и повысили рейтинг домена за три месяца....
03 03 2026 1:44:16
Пора сделать так, чтобы мобильная версия сайта приносила прибыль....
02 03 2026 1:13:30
Правила преобразования фидов в Google Merchant Center помогут сегментировать товары и сделать вашу рекламу более эффективной...
01 03 2026 15:54:16
Будьте полезны, будьте удобны и будьте везде. Далее подробно — 18 способов собрать базу для email-рассылок. О пользе бесплатного, привлечении внимания, возможных активностях для аудитории, социальных доказательствах, предсказуемости, работе с Facebook и многом другом...
28 02 2026 8:57:23
Образец товарного фида можно использовать при запуске динамических объявлений в поисковой сети Яндекса и Google, в кампаниях со смарт-баннерами в Яндекс.Директ, в динамических медийных кампаниях Google Рекламы, в товарной рекламе — с помощью Google Merchant Center....
27 02 2026 12:50:23
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
