Как сделать в 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-специалистов :)...
18 04 2026 16:52:21
Давайте больше не будем сливать бюджет, выбирая неправильный параметр....
17 04 2026 12:26:50
Учимся выстраивать коммуникацию по специальным сценариям....
16 04 2026 8:59:10
Как правильно читать отчеты в Панели вебмастеров Google — объясняем на примерах из пpaктики....
15 04 2026 10:21:52
Рассказываем об интересных диджитал-специальностях и зарплатах, как обучиться этим профессиям с нуля (в том числе в зрелом возрасте) и можно ли работать удалённо....
14 04 2026 3:26:45
Понятные людям и роботам URL. Это уникальный набор символов, который дает возможность идентифицировать всевозможные ресурсы в интернете (страницы сайтов, файлы, изображения, видео и так далее). Чтобы узнать больше, читайте далее!...
13 04 2026 2:33:49
330 миллионов активных пользователей и 14 миллиардов просмотров в месяц. Хорошо бы там запускать рекламные кампании....
12 04 2026 19:52:37
О запуске новых услуг по SEO и PPC, обновлениях Netpeak Cloud и конференциях по интернет-маркетингу...
11 04 2026 10:22:58
О чем стоит задуматься владельцам бизнеса и пользователям больших сайтов и почему Марку Цукербергу надо брать пример с телефонных сетей...
10 04 2026 17:45:54
Примеры новой концепции Digital-маркетинга по формуле 8Р...
09 04 2026 7:42:30
Внедрение скрама, чтобы решить проблемы в управлении бизнесом, год работы на нем и отказ от методологии. Читайте об опыте Boosta, которая объединяет 9 SEO-комaнд на удаленке....
08 04 2026 4:26:54
Как автоматизировать целый участок в работе комaнды специалистов по контекстной рекламе — кейс concert.ua...
07 04 2026 0:45:45
Любопытная подборка "маленьких" гигантов: компании и сервисы, чья аудитория превышает 10 миллионов пользователей, а также несколько интересных фактов о каждом из них. Узнать больше!...
06 04 2026 8:13:38
Вес страниц — один из факторов ранжирования в поисковых системах Google и Яндекс....
05 04 2026 10:28:44
SEO-специалист Netpeak Виктория Игнатьева опубликовала небольшой обзор особенностей рынка SEO Японии, подготовленный на основе собранных в сети материалов, а также личных знаний и наблюдений...
04 04 2026 16:19:42
Уверены, что аппы в украине не приносят денег? В этом кейсе мы расскажем, как увеличить доход с мобильного приложения, и поделимся результатами продвижения LeBoutique...
03 04 2026 6:40:46
Компании и продукты, социальные инициативы, главные проекты и миссия группы. Разложили все о Netpeak Group по полочкам в новом посте....
02 04 2026 23:47:52
Дропшип предполагает минимум затрат со стороны предпринимателя. Например, не нужно думать о логистике, держать склад. Можно минимизировать и траты на рекламу. Узнать как!...
01 04 2026 1:17:36
Руководство по переносу кампаний в новый аккаунт Рекламы...
31 03 2026 12:17:34
5 примеров маркетингового троллинга. Сатира, ирония, пародия — все эти приемы в рекламе помогают брендам выделиться среди конкурентов. Если их правильно использовать, конечно, это отличный способ привлечь клиентов и создать запоминающийся образ бренда...
30 03 2026 1:58:56
95% заполняемости коливингов для сервиса аренды жилья....
29 03 2026 20:15:14
Гайд по типам рекламы в соцсетях для SMM-, PPC-специалистов, блогеров и владельцев бизнеса в зависимости от целей, которые вы ставите перед продвижением. С конкретными рекомендациями и примерами. Узнать больше!...
28 03 2026 6:29:31
Как правильно мотивировать и демотивировать себя — теория и кейсы. Как бросить курить, начать бегать и наконец-то приступить к изучению английского. Читать!...
27 03 2026 18:18:26
Дайджест-путеводитель по серии постов о работе с редакторами электронных таблиц для PPC-специалистов....
26 03 2026 5:38:17
Алгоритм E-A-T теперь следит за экспертностью, авторитетностью и достоверностью контента. Что это значит?...
25 03 2026 16:53:49
Результаты рейтинга зарплат интернет-маркетологов....
24 03 2026 4:17:23
Увеличение трафика из поисковых систем Азербайджана на 30% за три месяца. И он продолжает расти...
23 03 2026 4:58:46
Профессиональный уровень SEO-специалиста в штатных комaндах редко определяется конкретной категорией (Junior, Midle, Senior). Но большинство считает себя мидлами. Узнать больше!...
22 03 2026 7:14:18
До понижения в органической выдачи Гугл у сайта есть около 15 дней с момента появления сообщения о вредоносном контенте....
21 03 2026 10:23:48
Как грамотно раскрутить пиццерию. Сняли фильтр и достигли хороших результатов....
20 03 2026 8:29:59
кейсы по seo интернет-магазина модной одежды в Болгарии: как мы сняли негативный эффект от Google Penguin и получили ROMI (возврат маркетинговых инвестиций) 1428%...
19 03 2026 22:31:58
Краткий обзор динамических мультимедийных объявлений...
18 03 2026 0:52:26
Как мы создаем BI-решение для департамента поискового продвижения — первые шаги...
17 03 2026 17:22:38
Почти 4,5 млрд людей имеют аккаунты в соцсетях. Огромная и активная аудитория. Но как среди нее найти своего клиента? Поможет таргетированная реклама....
16 03 2026 2:11:14
Как работать с новой функцией, чтобы набирать подписчиков и делать продажи. Подробное и актуальное руководство в 2021 году....
15 03 2026 20:44:28
Снимать скрин нужно красиво и логично, вне зависимости от того, кому вы его покажете: начальнику, другу или многотысячной аудитории блога...
14 03 2026 4:10:40
Рекомендации и мнения экспертов по одной из самых противоречивых тем украинского интернет-прострaнcтва....
13 03 2026 22:37:20
Участники бизнес-клуба netpeak получают бесплатные консультации по вопросам ведения контекстной рекламы в Google Ads...
12 03 2026 8:33:50
Лафхаки для маркетологов и владельцев сайтов на Prom...
11 03 2026 21:39:26
20 сервисов для прокачки контента под SEO. Штуки, которые будут полезны новичкам и экспертам....
10 03 2026 1:59:36
Разбираемся, как определить самые эффективные источники лидов....
09 03 2026 16:19:24
Партнерская программа — это когда сервис дает партнеру вознаграждение за приведенных клиентов. Получить деньги и/или другие плюшки можно также по реферальной программе. Как это работает? Разбираемся на примерах....
08 03 2026 23:29:47
Новое исследование стоимости клика в Казахстане в четвертом квартале 2018 года...
07 03 2026 10:48:25
Основная цель CTA — помочь посетителю принять решение о покупке, скачивании, регистрации или подписке...
06 03 2026 8:56:39
Продвижение сервисного центра техники Total Apple в Москве....
05 03 2026 18:22:12
Как начать бизнес в институте и масштабировать его до международной группы компаний. Собрали все самое интересное из интервью фаундера «Техно Ёж» Алексея Гулыя на конференции 8P....
04 03 2026 5:54:31
Возможности и перспективы Clubhouse, лайфхаки для пользователей и бонус в конце...
03 03 2026 17:43:41
Какую связь можно назвать «качественной» и как улучшить работу телефонии — советы от платформы Ringostat в новом посте....
02 03 2026 20:39:34
Что постить предпринимателям в соцсетях. Несколько примеров уместной работы SMM- и PR-специалистов, которые прямо и четко помогают озвучить позицию бизнеса в период карантина. Узнайте больше, чем действовать правильно!...
01 03 2026 13:21:56
Как найти тему для поста, который и в онлайн поиске будет хорошо ранжироваться, и по социалкам разойдется, и комментарии в треде обеспечит...
28 02 2026 5:13:50
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
