Как сделать в 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-продвижение не будет в тягость, что и кого читать начинающему специалисту...
01 06 2026 0:41:13
Как быстро создавать и запускать объявления, а также массово вносить правки в кампании с помощью файла Excel...
31 05 2026 0:45:17
Создать BI-систему собственного кошелька. Для ввода и хранения данных выбор стоял между Google Forms и Google Sheets или Airtable.Читайте дальше, что выбрал автор, чтобы оптимизировать расход, планировать траты на месяц и контролировать результаты в PowerBI....
30 05 2026 5:54:45
Перед обращением за услугами продвижения задайте себе вопрос: готов ли я выделить львиную долю своего времени и сил на серьезное развитие проекта? При отрицательном ответе не стоит и начинать. И другие вопросы о SEO-продвижении...
29 05 2026 23:40:37
Мы отключили интернет всем сотрудникам агентства интернет-маркетинга и получили удивительные результаты....
28 05 2026 5:38:29
Делайте анализ ссылочной массы хотя бы раз в месяц — и будет вам счастье....
27 05 2026 22:51:57
Почему важно знать детали создания и защиты уникального контента? Потому что это позволит защитить ваш сайт от санкций поисковых систем из-за неуникального контента...
26 05 2026 11:53:36
Как узнать срок хранения товаров в корзине и настроить ремаркетинг для завершения покупок...
25 05 2026 17:41:12
Это не автобиографические романы, не бесплатные учебники и не подборка книжек, чтобы скачать в epub. Это интересная топ литература о маркетинге, которую мы хотим вам посоветовать....
24 05 2026 23:26:57
Создатель студии рисованных видео Денис Довгаль — о тактике видеомаркетинга и жизни в стиле «цифровых кочевников»....
23 05 2026 15:20:30
Стоит установить и освоить Google Tag Manager для расширения представления сайта в выдаче...
22 05 2026 6:38:42
Ошибка на странице 404 может выглядеть креативно. Страница не найдена и не может быть найдена, потому что она в розыске, утеряна, украдена ниндзей, путь заснежен и дороги дальше нет, а принцесса находится в другом замке. О чем это?...
21 05 2026 4:33:34
Гайд по рекламе для SMM-, PPC-специалистов, блогеров и владельцев бизнеса...
20 05 2026 4:14:29
Магазин вязанных вещей хенд мейд. Как за два месяца увеличить посещаемость в 20 раз....
19 05 2026 12:57:34
Объявление или кабинет блокируют из-за эмоджи. Что делать?...
18 05 2026 22:23:31
LinkedIn хороший инструмент для достижения B2B целей. Пока его редко используют в СНГ, что делает LinkedIn еще привлекательней. В этой социальной сети возможности рекламных форматов и таргетингов почти безграничны. Узнать больше....
17 05 2026 11:24:39
Кейс в тематике «грузоперевозки»: как быстрое внедрение доработок помогло привлечь качественный трафик на новый сайт...
16 05 2026 2:47:54
82% малых бизнесов тонут как раз из-за проблем с денежными потоками (по данным исследований U.S. Bank, 2020). Как предприниматели попадают в кассовые разрывы и что делать в таких ситуациях, разберем в этой статье....
15 05 2026 8:25:44
Информация для бизнесменов, интернет-маркетологов и всех, кто интересуется продвижением бизнеса в интернете....
14 05 2026 6:14:59
Новая партнерская программа Netpeak agency. Как получить теплого лида, стабильный пассивный доход, разместить свой логотип и ссылку на сайт на сайте Netpeak и другие бонусы партнерской программы. Узнать больше!...
13 05 2026 22:37:59
Как мы продвигали бизнес-страницы OLX с помощью рекламы в Facebook, TikTok и Viber....
12 05 2026 3:36:43
От того, что такое оффер до лучших стратегий и избежания ошибок...
11 05 2026 3:13:41
Настройка в четыре шага и другие отличия AdWords Express от Adwords...
10 05 2026 0:52:31
Как говорится, люди делятся на тех, кто делит других на типы и тех, кто не делит. В этом посте — про желтых, синих, красных и зеленых людей....
09 05 2026 5:19:17
Для максимальной прибыли с YouTube-канала нужно выбрать одну из наиболее посещаемых ниш. Не всегда прибыльная тема соответствует личным предпочтениям владельца канала...
08 05 2026 19:58:59
Те самые проблемы, если бизнес пришел к вам за услугой, но ему не нужен маркетинг в интернете. Мнения экспертов интернет-маркетинга....
07 05 2026 1:26:43
Эффективное PPC благодаря правильной аналитике....
06 05 2026 10:32:53
Не путайте с контент-менеджером, пожалуйста....
05 05 2026 11:26:33
Рекомендации и мнения экспертов по одной из самых противоречивых тем украинского интернет-прострaнcтва....
04 05 2026 22:39:50
Когда на сайт добавляют новый контент, он тут же трaнcлируется в RSS-ленту и отображается в специальных программах для чтения, либо в email подписчиков. Как это работает?...
03 05 2026 13:43:18
Рассказываем в подробностях, что полезного сделал Netpeak для своих клиентов с января по апрель 2017 года...
02 05 2026 15:19:49
Facebook раскрывает алгоритм формирования новостной ленты...
01 05 2026 8:44:29
О возможностях нестандартного использования поисковых систем для решения важных бизнес-задач...
30 04 2026 3:19:46
Chrome Extensions экономят время тех, кто продвигает мобильные приложения...
29 04 2026 2:23:25
Создатель scrum model Джефф Сазерленд написал книгу о том, как использовать методику разработки программного обеспечения для развития бизнеса....
28 04 2026 15:26:24
Нескучный инструктаж на примере @netpeak_ua о том, зачем компании корпоративный Twitter для продвижения контента, компании или персоны. А еще про хештеги, поиск читателей, аналитику, стиль ведения вашего микроблога, создание сообщества и акции...
27 04 2026 21:58:17
Как сделать приятно подписчику в день его рождения, на Новый год и в любой другой праздник....
26 04 2026 20:59:19
Рассылка ежемecячно занимает второе место среди источников реферального трафика BuzzFeed. Уроки увеличения базы подписчиков от BuzzFeed от базы до метрик оценки. Принцип BuzzFeed — как можно быстрее внедрять в рассылку то, что нравится читателям....
25 04 2026 2:45:29
Важный вопрос, если вы рассчитываете на вирусный эффект своих рекламных идей....
24 04 2026 12:27:47
Наконец-то вы создали сайт. Вы потратили усилия на дизайн, разработку, его наполнение. Но этого оказалось недостаточно, чтобы о вашем интернет- ресурсе узнали. Как же привлечь посетителей на сайт?...
23 04 2026 23:44:37
Самые точные данные статистики, которые вы получите с помощью Google Tag Manager....
22 04 2026 1:28:56
Знакомство с реальным и потенциальным клиентом. Как создать доверительные отношения? Для этого понадобится сделать сегментацию аудитории и определить, кто ваш покупатель: от рода занятий, до его самых сокровенных страхов. Узнайте больше!...
21 04 2026 1:53:24
О новых функциях Universal App Campaigns — специально для тех, кто хочет эффективно вовлекать пользователей приложений...
20 04 2026 16:23:53
Сравним разные модели атрибуции с точки зрения оценки финансовых показателей проекта...
19 04 2026 8:32:12
Расчет прогноза по LTV позволит более точно задать параметры рекламной кампании в Apple Search Ads на начальном этапе. Как это делают в RadASO, читайте в статье....
18 04 2026 6:37:14
Любопытная подборка "маленьких" гигантов: компании и сервисы, чья аудитория превышает 10 миллионов пользователей, а также несколько интересных фактов о каждом из них. Узнать больше!...
17 04 2026 22:30:42
Правильно задать вопрос или сфоримулировать ответ на собеседовании это еще далеко не все. Рецензия на книгу Ласло Бока «Работа рулит»...
16 04 2026 18:29:37
Как избежать скликивания — инструкция...
15 04 2026 22:54:23
Рекламные кампании для брендинга, роста вовлечения пользователей, продаж, лояльности. Какой формат выбрать, чтобы получить необходимое целевое действие. Узнать!...
14 04 2026 17:36:47
Как правильно рассчитать окупаемость рекламных кампаний SaaS-продуктов, получить по ним четкую аналитику, и что делать дальше....
13 04 2026 15:24:29
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
