Как сделать в 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 архив с баннером, чтобы можно было рассмотреть подробности на каждом этапе создания изображения.
Комментарии:
Советы и даже требования SEO-специалистов к разработчикам сайтов....
23 07 2026 8:35:34
Инструмент позволяет создавать ролики длительностью от 6 до 16 секунд. Созданные видеоматериалы можно размещать не только в рекламных кампаниях, но и на сайте или в email-рассылке. ...
22 07 2026 4:56:25
Основатель Depositphotos и Clashot Дмитрий Сергеев рассказал нам о базовых правилах ведения бизнеса на западном рынке....
21 07 2026 11:31:56
Прежде чем использовать феминитивы в коммуникации со своими клиентами и сотрудниками, убедитесь, что им это нужно и важно. Впрочем, ждите негатива при любом раскладе. Что с ним делать? Рассказываем....
20 07 2026 18:37:25
Что делать, когда не получается заставить себя написать статью или кейс...
19 07 2026 2:18:10
Кейс о том, как написать большинству дилеров премиальных акустических систем в Европе и ничего не продать. И почему это кейс, а не антикейс....
18 07 2026 0:23:44
Полезный ликбез для новичков и бизнесменов: анкорные и безанкорные ссылки. Чем отличаются, зачем нужны, какое влияние оказывают на раскрутку сайта в интернете? Узнать!...
17 07 2026 7:46:15
Зачем нужны пользовательские сегменты клиентов и как их создавать — читайте в завершающей части серии «Как анализировать эффективность рекламы в Google ***ytics?»...
16 07 2026 16:13:24
Публикуем тему с закрытого аналитического форума Netpeak про «звездочки» как инструмент оценки релевантности контента....
15 07 2026 10:13:53
Инструкция для новичков по одновременной работе с кампаниями, а также объявлениями и группами в Яндекс.Директ...
14 07 2026 17:47:44
Забавные и полезные штуки от Google и как их найти...
13 07 2026 5:57:21
Офис Netpeak в Харькове официально открыт! В этом посте, вместо игры на фанфарах, мы на собственном примере рассмотрим, что нужно для создания регионального отделения в разгар кризиса....
12 07 2026 11:24:58
Гарантии результата в SEO: миф или реальность. Спрос рождает предложение, поэтому не удивительно, что существует большое количество SEO-студий. Сразу возникает резонный вопрос, как могут существовать те компании, которые не дают гарантии вообще?...
11 07 2026 12:39:58
Мы хотим найти и купить локальную комaнду SEO или PPC-специалистов. Как обычно, делаем предложение нестандартно — в блоге...
10 07 2026 0:49:37
Чем шокировала, радовала и удивляла реклама в социальных сетях и контекстная в Google в апреле 2021 года...
09 07 2026 9:43:33
Как Blizzard реализует тимбилдинг, мотивирует сотрудников и превращает офис в музей...
08 07 2026 14:21:22
Инструменты веб-мастера: что может заменить Google ***ytics?...
07 07 2026 4:34:33
Старт любых активностей в сфере email-маркетинга — разработка стратегии...
06 07 2026 9:21:52
Мы собрали и проанализировали ответы 270 владельцев и маркетологов...
05 07 2026 6:12:39
Как составить список, работа с которым займет меньше времени, чем обычно. На примере обработки запросов в ювелирной тематике....
04 07 2026 7:38:18
Редполитика Netpeak Journal (ex блог Netpeak) — руководство по написанию понятных, полезных, продающих и удобочитаемых текстов. Документ для внутреннего использования в открытом доступе. Применяйте, адаптируйте. Читать!...
03 07 2026 8:48:45
Несколько полезных советов перед запуском. Tрaнcпорт и путешествия, ритейл, медиа и развлечения — тематики, в которых чаще используют мобильные приложения. Есть и другие факторы популярности приложений. Узнать!...
02 07 2026 3:19:51
Красивое креативное описание страницы «о нас» — важная составляющая коммуникации с потенциальным клиентом. Покажите свою комaнду, опишите ценности и миссию. Сделайте эту страницу продающей. Узнать больше!...
01 07 2026 18:52:33
Короткая история Serpstat — от сервиса «для своих» до международной SEO-платформы....
30 06 2026 15:15:10
Используя для продвижения контекстную рекламу, большинство рекламодателей в Украине отдают предпочтение системе Google Ads. Директ однозначно не стоит недооценивать. Почему? Читайте в статье!...
29 06 2026 23:17:57
Чтобы проставить 301 редиректы, вначале надо выгрузить весь список топовых страниц по обратным ссылкам...
28 06 2026 12:22:34
У нас на руках оказались все карты для создания собственного мини-рейтинга популярных сервисов email-рассылок....
27 06 2026 7:44:17
Устраняем причины, по которым пользователи покидают сайт без покупки....
26 06 2026 8:14:42
Callback от Ringostat: пример того, как увеличить конверсии с помощью формы заказа обратного звонка...
25 06 2026 22:52:27
Как быстро увеличить количество заинтересованных подписчиков в facebook, twitter, google+ и linkedIn с помощью контактов из рассылки и аккаунтов Facebook....
24 06 2026 18:56:36
Экс-CEO, а теперь просто сотрудник и «волшебник страны Moz» Рэнд Фишкин поделился с читателями блога рассказом о своем видении будущего SEO, перспективах анонимизации сети и причудах американских клиентов....
23 06 2026 3:19:21
И научиться делать свою рекламу прибыльной. Читайте про типы автостратегий и способы их оптимизации....
22 06 2026 22:35:46
Достаточно настроить соответствующим способом триггеры и теги. Мануал здесь....
21 06 2026 14:18:42
Бесплатные продукты для онлайн-бизнеса — история внедрения freemium модели в сфере виджетов обратных звонков....
20 06 2026 15:16:29
Прайс-менеджерам: покупаем и моделируем недостающие данные с помощью алгоритмов машинного обучения...
19 06 2026 4:53:23
Пишите стоимость товара под постами. Но это не универсальный совет. Если ваша ниша с длинным циклом продаж, можно сделать исключение. Что ещё нужно знать про ответ в директ? Узнать!...
18 06 2026 19:28:19
Определение и настройка главного зеркала сайта в поисковых системах — первое, что нужно сделать перед раскруткой сайта...
17 06 2026 13:18:35
Отмена видео-сниппетов в выдаче Google, удаление страницы с тегами и инструмента подсказки ключевых слов в YouTube — все события последних месяцев свидетельствуют: Google всерьёз взялся за видеохостинги и решил изменить правила игры для видеомаркетинга в...
16 06 2026 3:17:50
Денис Бигус, Bihus.info: с 13 до 457 000 подписчиков на YouTube за четыре года....
15 06 2026 6:45:27
Как создать Apple ID и настроить поисковую рекламу в App Store...
14 06 2026 11:34:23
Почему дешевый копирайт не подходит для текстов карточки товара...
13 06 2026 20:52:41
К чему стоит относиться с особенным вниманием при отправке рассылок. Грамматические ошибки, тема, прехедер и другие стратегически важные составляющие письма. Узнать больше!...
12 06 2026 5:45:18
Часто трафик проседает из-за удаления важных страниц или изменения URL-адресов. Анализ данных веб-архива позволит сохранить или восстановить посещаемость...
11 06 2026 18:46:53
Идея, напечатанная в 3Д? Уже сегодня маркетологи могут это делать с успехом. Главное — поменять свой стиль мышления....
10 06 2026 1:50:18
Какие форматы видеорекламы логичнее купить для создания спроса на новую продукцию? Выясняем на примере кейса бренда Yves Rocher...
09 06 2026 9:12:23
Список рекомендаций для SMM-специалистов. Статья будет полезна SMM-менеджерам, проектным менеджерам, а также владельцам бизнеса, которые предпочитают самостоятельно ставить комaнде задачи и отслеживать выполнение целей....
08 06 2026 8:32:33
Украинские реалии того, в каких тематиках трафик из Yandex.Direct дороже Google Ads. Новое исследование Алексея Селезнева....
07 06 2026 22:22:42
Обзор новой версии краулера Netpeak Spider 3.0, которая включает в себя около 300 изменений: от супер-фич до небольших фиксов в юзабилити....
06 06 2026 1:59:43
Проведение краудфандинговых кампаний — это бизнес. Это отдельный и вполне серьёзный рынок с уймой заточенных под ваши нужды услуг. Раньше нужно было ждать, пока проект пройдет обязательную проверку сотрудником Kickstarter, сейчас можно запускать кампанию...
05 06 2026 4:57:31
Эта история о том, как за два года комплексный подход к поисковому продвижению (SEO на этапе разработке сайта и дальнейшие действия по оптимизации) помог увеличить рост бесплатного трафика на 463% или Что делать, если SEO не приносит результаты сразу...
04 06 2026 4:14:34
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
