Как сделать в 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 архив с баннером, чтобы можно было рассмотреть подробности на каждом этапе создания изображения.
Комментарии:
Личный опыт экс-главреда экс-блога Netpeak (сейчас — Netpeak Journal): о работе с информацией, мотивации написания, редактуре черновика, подаче информации по степени важности, выделении главного и составлении окончательной версии текста. Как сделать текст логичным и полезным? Узнайте!...
01 04 2026 14:21:18
Кейс продвижения Pizza House — ROMI 709,9%. От старта с дублями страниц и постановки целей и задач продвижения, проведения технического аудита, аналитики, анализа поисковых фраз, выбора контента до экспериментов с метатегами, увеличения среднего чека и планов на будущее...
31 03 2026 2:13:25
Красивое креативное описание страницы «о нас» — важная составляющая коммуникации с потенциальным клиентом. Покажите свою комaнду, опишите ценности и миссию. Сделайте эту страницу продающей. Узнать больше!...
30 03 2026 16:58:35
Опыт удаленки стартапа lemlist. Как сотрудники работали онлайн в доковидные времена и совмещали профессиональную деятельность с тимбилдингом. Читайте в коротком посте Владимира Поло, основателя AcademyOcean....
29 03 2026 21:27:20
Создатели алгоритмов соцсетей используют слабые места человеческого мозга. Случайно или намеренно, но они это делают. Как нам с этим жить?...
28 03 2026 13:18:33
Лафхаки для маркетологов и владельцев сайтов на Prom...
27 03 2026 3:33:35
Чтобы раскрутить себя в Твиттер иногда нужно чистить списки фолловеров и это намного проще, чем кажется :)...
26 03 2026 1:43:52
Как решить все задачи и не изобретать велосипед. Мы оторвались от отчетов в Google ***ytics и Яндекс.Метрике и посмотрели в сторону менее популярных инструментов для веб-аналитики. Узнайте больше!...
25 03 2026 19:44:58
Объясняем по пунктам, как создать и правильно настроить DSA c таргетингом на фид и содержание сайта...
24 03 2026 8:58:11
Что делать, когда не получается заставить себя написать статью или кейс...
23 03 2026 12:45:33
Решили написать про новый формат рекламы — баннерный...
22 03 2026 11:18:28
Что делать, если вы специально или нет попали под фильтр: руководство от выявления до спасения...
21 03 2026 7:19:52
Как обезопасить себя от интернет-пиратов и защитить авторское право онлайн....
20 03 2026 11:36:45
Адвент-календарь, конкурсы и викторины, праздничные линейки товаров, подборки подарков для родных и близких, опросы, тесты и другие интересности. Используйте, если нужны идеи и вдохновение....
19 03 2026 0:48:12
Наши сотрудники смогли составить разбор непростых вещей, дать им определение и рассказать о них простым языком....
18 03 2026 8:43:35
Партнерская программа — это когда сервис дает партнеру вознаграждение за приведенных клиентов. Получить деньги и/или другие плюшки можно также по реферальной программе. Как это работает? Разбираемся на примерах....
17 03 2026 13:45:45
Рекомендации от Google для бизнеса о поведении в период распространения коронавируса....
16 03 2026 11:12:20
Рекламные заголовки в гугл адвордс так и пестрят предложениями контекстной рекламы бесплатно — вы когда-нибудь задумывались о том, откуда берутся эти «подарки»?...
15 03 2026 15:26:57
Перво-наперво для мониторинга ошибок SEO-специалист открывает вебмастерку с подсказками Google — она же панель вебмастеров, она же Google Search Console...
14 03 2026 15:48:16
Расчет прогноза по LTV позволит более точно задать параметры рекламной кампании в Apple Search Ads на начальном этапе. Как это делают в RadASO, читайте в статье....
13 03 2026 19:46:14
На отклонение исходящих ссылок после загрузки файла может уйти достаточно много времени: от нескольких недель до нескольких месяцев...
12 03 2026 7:44:53
Суть бренда на одном дыхании: о рекламе с любовью. Изначально под большой идеей мы пониманием ту пользу, которую несет бренд в окружающий его мир. Помимо этого, большая идея — это те «рельсы», по которым будут ехать все коммуникации бренда в течение нескольких лет...
11 03 2026 8:53:45
1 — меняй работу внутри работы, 2 — выбери то, что нравится больше всего и старайся делать это чаще, 3 — придумай себе развлечения. Подробности — в посте. Читать дальше....
10 03 2026 18:14:53
Как подготовить фиды в Яндекс.Директ для разных тематик...
09 03 2026 3:50:24
В основе каждой великой компании – хорошо рассказанная история....
08 03 2026 19:45:47
20 сервисов для прокачки контента под SEO. Штуки, которые будут полезны новичкам и экспертам....
07 03 2026 9:29:20
Прогнозирование с помощью «Планировщика ключевых слов»....
06 03 2026 9:41:47
Пример того, как составить маркетинговый контент-план, анализируя успешных конкурентов...
05 03 2026 23:59:54
Киев, Одесса, Харьков, Днепр и другие города — в офис и обратно IT-специалисты добираются от 10 минут до более чем полутора часа. В дороге они слушают музыку, подкасты, читают книги. Узнать больше!...
04 03 2026 9:29:58
Следим за развитием событий и анализируем решение суда. Читать дальше!...
03 03 2026 13:56:25
Как снизить цену за привлечение клиента на 50%, развивая только кампании для пользователей десктопов....
02 03 2026 5:12:27
Электронный кошелек — это виртуальная ячейка для хранения денежных средств. Каждая такая ячейка обладает уникальным цифровым определителем и может принадлежать одному человеку....
01 03 2026 2:41:57
Гайд по типам рекламы в соцсетях для SMM-, PPC-специалистов, блогеров и владельцев бизнеса в зависимости от целей, которые вы ставите перед продвижением. С конкретными рекомендациями и примерами. Узнать больше!...
28 02 2026 23:51:32
Что нужно знать о целевой аудитории, как грамотно воровать у других и что нужно сделать, чтобы настроить идеальную рекламную кампанию....
27 02 2026 15:15:41
Сколько страниц на самом деле показывает и может перевести поисковик Google?...
26 02 2026 10:59:29
General Data Protection Regulation (GDPR): ответы на вопросы....
25 02 2026 14:30:11
Хотите видеть в отчетах точный ROMI в разрезе рекламных кампаний, групп объявлений и ключевых слов? Импортируйте себестоимость товаров в Google ***ytics...
24 02 2026 13:34:59
Кейс: как золотой корпоративный линкбилдинг помог в SEO-продвижении интернет-магазина, в котором можно заказать и купить чехлы и виниловые наклейки для смартфонов...
23 02 2026 0:58:39
Данные по 33,5 миллионов кликов в 26 тематиках и 394 городах...
22 02 2026 23:15:35
Обязательные элементы продающей страницы: удобный и красивый дизайн, легко читаемые форматы и стили шрифтов, текстовые блоки, кнопки призыва к действию. Узнать больше!...
21 02 2026 15:52:29
Используем возможности Google Cloud Platform в работе с R...
20 02 2026 13:51:26
О том как растут доходы при оптовой торговле женской одеждой и обувью, а траты на рекламу остаются на прежнем уровне...
19 02 2026 3:49:40
Зачем маркетологи и аналитики обращаются к языку программирования R в повседневной работе нужно и какая польза от программирования на R в интернет-маркетинге в интервью Алексея Селезнева...
18 02 2026 23:40:44
Реклама будет не настолько персонализирована, как сейчас....
17 02 2026 14:44:26
Грабберы — программы, позволяющие автоматизировать процесс сбора и публикации контента. С помощью грабберов, помимо парсинга контента, осуществляют перевод и уникализацию текстов....
16 02 2026 2:10:42
Разбор типичных ошибок в рекламе Google Shopping как обязательного инструмента рекламы в Google. О минус-словах, геолокации, структуре сайта и обновлении объявлений. Что именно важно? Читайте дальше!...
15 02 2026 19:14:53
Как узнать, что потенциальный сотрудник креативный, умеет убеждать, работать в комaнде, адаптироваться к быстрой смене условий, владеет эмоциональным интеллектом? Вопросы для проверки этих софт-скиллов здесь....
14 02 2026 10:24:52
Нужно организовать конференцию с участием многих пользователей? Этот пост будет полезен, если до важного ивента есть хотя бы несколько дней в запасе....
13 02 2026 16:41:16
Всё что нужно знать про SMM...
12 02 2026 0:43:51
Узнайте, как пользоваться Инспектором и внутренними диаграммами Facebook, чтобы быть в лидерах своей ниши!...
11 02 2026 12:27:21
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
