Как сделать в 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 ***ytics и Яндекс.Метрике и посмотрели в сторону менее популярных инструментов для веб-аналитики. Узнайте больше!...
08 06 2026 4:56:13
Как быстро создавать и запускать объявления, а также массово вносить правки в кампании с помощью файла Excel...
07 06 2026 11:43:17
Дейли — ежедневный комaндный митинг, на котором комaнда синхронизируется по ключевым моментам работы и по текущим задачам. Делимся чек-листом агентства Netpeak по организации дейли на удалёнке....
06 06 2026 19:56:38
Главная задача крауд-маркетинга — помочь, дать пользователю экспертный ответ и уже в последнюю очередь — оставить ссылку...
05 06 2026 6:30:49
Callback от Ringostat: пример того, как увеличить конверсии с помощью формы заказа обратного звонка...
04 06 2026 13:43:20
Очередной красивый пост о продвижении платформы email и sms-рассылок — UniSender...
03 06 2026 8:54:16
Панельная дискуссия, на которой специалисты представляют нестандартные идеи для привлечения трафика, продвижения проектов. Всё, что можно применить на деле. Читать!...
02 06 2026 15:18:34
Email-маркетинг — хороший полицейский, спам — плохой....
01 06 2026 21:34:23
Собирательный опыт сотрудников Netpeak. Мы изучали много всего в стиле «купить парковку в аэропорту Гатвика в Лондоне» и тому подобное. Но все, кроме описанного ниже, показалось сложным и ненадежным. Поэтому рассказываем про спокойные варианты....
31 05 2026 3:33:24
Используем маску ввода для оптимизации сбора телефонных номеров в формах на сайте: кейсы агентства Netpeak...
30 05 2026 16:14:11
Большой проект Джима Коллинза и его комaнды. Одна из лучших книг в нашей библиотеке. Всем рекомендуется к прочтению!...
29 05 2026 18:26:24
22 оригинальные гипотезы для A/B-теста сайта, которые чаще всего влияют на получаемую прибыль...
28 05 2026 2:53:17
Как распредляются зарплаты по грейдам и специализации: ежегодное исследование Serpstat....
27 05 2026 22:31:35
Доля органического трафика увеличилась с 14% до 44%, а небрендового — на 184%....
26 05 2026 13:29:13
Как помешать фейковым 404 страницам испортить статистику вашего сайта?...
25 05 2026 16:18:57
Основные этапы раскрутки сайта. Что такое и как работает поисковая оптимизация, ее виды, особенности, преимущества...
24 05 2026 2:46:13
Tencent — китайская компания, мировой лидер в сфере игр. Все о создании компании, доходах, прибыли, инвестициях. Особенности ведения бизнеса в Китае — в пересказе статьи Паки Маккормик. Читать дальше!...
23 05 2026 7:23:25
Продвижение казахстанского онлайн-издания, новостника informburo.kz....
22 05 2026 6:29:11
Facebook раскрывает алгоритм формирования новостной ленты...
21 05 2026 20:45:11
Правильная постановка целей, задач и дедлайна — основа успешной работы...
20 05 2026 0:23:33
Алексей Селезнев, руководитель отдела аналитики Netpeak делится статистикой по самым дорогим и самым дешевым тематикам, регионам размещения рекламы, каналам и устройствам. Узнать больше!...
19 05 2026 13:37:23
Как эффективно распределять бюджет и ресурсы на обучение сотрудников. Статья будет полезной для собственников бизнеса и HR-специалистов....
18 05 2026 14:37:35
Как сделать креативный мобильный баннер. Зачем нужны особенные баннеры для мобильных? Что делать с картинкой? Что делать с текстом? Что делать с другими рекламными форматами? Дополнительные элементы. Обо всем этом детально и спримерами...
17 05 2026 20:53:36
Готовые к использованию таргетинговые идеи для мобильных приложений онлайн в Facebook....
16 05 2026 19:18:52
Наука перехода — понятие краулинга (crawling, сканирование) сайта и принципа его работы. Виды поисковых роботов и способы их управления и другие полезные фишки в рубрике Азбука SEO на Netpeak Blog...
15 05 2026 15:34:56
Делимся фишками, которые облегчат работу как новичкам, так и специалистам....
14 05 2026 3:29:29
Минимизация пропущенных звонков и ускорение обработки заявок с наглядными примерами из сервиса...
13 05 2026 17:18:24
Заказчик всегда приходит с идеей. В этой идее может быть все продумано до мелочей, а может быть только каркас. В любом случае мысли клиента следует систематизировать так, чтобы с ними было удобно работать....
12 05 2026 7:19:47
Новая инструкция, которую можно применять к любым задачам в Google Таблицах....
11 05 2026 13:40:27
Сторителлинг — это способ рассказывать истории, его цель — дать возможность читателю или зрителю почувствовать себя героем этой истории,...
10 05 2026 7:25:20
Краш-тест сервиса визуализации данных: выбираем задачу, источники, создаём отчет с помощью DataDeck. Бонус в конце — лаконичные списки преимуществ и недостатков этого инструмента и приятный подарок для дочитавших...
09 05 2026 9:19:40
Понятная инструкция для SMM-специалистов для тех, кто экспериментирует с настройками аудиторий в рекламных кампаниях. Вы увидите, как настраивать ремаркетинг на примере Facebook. Существует 10 типов индивидуализированных аудиторий в Facebook, разберем три...
08 05 2026 1:27:41
Что такое посол бренда и чем он отличается от адвоката бренда?...
07 05 2026 9:12:55
Как научиться продвигать мобильные приложения и заpaбатывать на этом....
06 05 2026 10:36:31
Как грамотно раскрутить пиццерию. Сняли фильтр и достигли хороших результатов....
05 05 2026 6:21:14
Зачем нужно работать с отчетами по ассоциированным конверсиям и сравнивать различные модели атрибуции?...
04 05 2026 12:50:51
Как не облажаться при выборе подрядчика для SEO-аудита....
03 05 2026 8:40:50
Ringostat и Binotel. Сравнение главных сервисов для коллтрекинга в Украине...
02 05 2026 12:21:48
Почти 50 тыс. контактов за год принесли формы подписки и регистрации....
01 05 2026 7:35:33
Мы рассмотрим, почему сотрудники на удалёнке стали менее эффективными и как руководить комaндой из дома, чтобы её результаты не падали....
30 04 2026 2:50:28
Рекламируем онлайн-уроки к 1 сентября. Именно сочетание Facebook и Google Ads помогло нам сначала обратиться к родителям (которые, например, листают соцсеть по пути домой) и потом уже напомнить о себе с помощью Google Рекламы...
29 04 2026 12:25:26
Советы для фрилансеров и удаленных сотрудников: как строить рабочий процесс так, чтобы он вел к максимальной эффективности. О работе со временем, перерывами, необходимости выключать уведомления, статусе задач, празднованиях побед и организации рабочей среды...
28 04 2026 10:50:51
Netpeak подводит итоги 2016 года и делится планами на будущее....
27 04 2026 1:15:25
А ещё Netpeak Cluster стал инструментом и у нас появился хаб знаний на YouTube....
26 04 2026 1:18:54
Новые триггеры, разнообразие рассылок и обновленная форма подписки дали нужный результат....
25 04 2026 13:24:30
Краткая инструкция по работе с обратной связью: как правильно просить и получать отзывы. Они напрямую влияют на бизнес, увеличивают конверсию и выгодно выделяют вас на фоне конкурентов. Как это использовать? Читайте дальше!...
24 04 2026 10:26:54
Всем, кто собирается перейти на Single Page Application, но переживает, что они поссорятся с поисковыми системами. Правильно переживаете!...
23 04 2026 0:56:52
Четыре важных шага для новичка...
22 04 2026 9:34:57
Знаете, как доменная зона Германии связана с криптовалютой, или почему в доменной зоне маленького острова площадью 10 квадратных километров зарегистрировано 20 млн доменов? Сейчас расскажем!...
21 04 2026 22:58:30
Андрей Чумаченко про будни топ-менеджера, постановку, декомпозицию, помощь и контроль выполнения задач сотрудниками комaнд, которые входят в состав департамента маркетинга, а также о регулярных встречах и тонкостях работы. Узнать больше!...
20 04 2026 19:14:40
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
