Как сделать в 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 архив с баннером, чтобы можно было рассмотреть подробности на каждом этапе создания изображения.
Комментарии:
Сайту нужны внешние ссылки на сторонних ресурсах. Они могут повлиять на ранжирование вашего ресурса и трафик, а один из методов их получить — аутрич....
16 07 2026 8:46:45
До понижения в органической выдачи Гугл у сайта есть около 15 дней с момента появления сообщения о вредоносном контенте....
15 07 2026 18:42:39
Если вы не можете разработать технические задания для себя в виде структурированного текста, вы, скорее всего, плохо понимаете, что хотите от исполнителя...
14 07 2026 8:27:48
Хотите узнать, сколько стоит клик в вашей тематике? Как эффективно распределить рекламный бюджет? В этом исследовании я изучил, сколько стоил клик в Google Ads и Яндекс.Директ в Казахстане...
13 07 2026 0:13:31
Ситема управления проектами, которой пользуются в Netpeak....
12 07 2026 4:20:30
Аромамаркетинг. Почему В Нью-Йоркских магазинах Samsung пахнет медовой дыней, в British Airways — луговыми травами. Что мы знаем о восприятии нами сенсорной информации, а конкретно — ароматов. Читать дальше!...
11 07 2026 8:52:14
Проверяем, есть ли разница в ранжировании при наличии/отсутствии этих слов в метаданных. Эксперимент....
10 07 2026 22:24:29
Обойдемся без теории, зато покажем пример SEO-аудита...
09 07 2026 22:23:24
SEO-продвижение онлайн-сервиса доставки еды с новым сайтом. Цели продвижения, составление семантического ядра, формирование URL, поддомены, карточки товаров, тексты, внешняя оптимизация, дополнительные работы, а также полученные результаты...
08 07 2026 18:58:55
Специалисты, занимающиеся seo копирайтингом, рассказывают об использовании LSI: определение текста, кол во символов, подсчет слов онлайн...
07 07 2026 19:17:55
Клиенты, партнеры, потенциальные сотрудники — для каждой аудитории есть своя платформа. Какими нужно быть в соцсетях, чтобы вас заметили, читайте об опыте Reface....
06 07 2026 0:28:49
Краткий обзор динамических мультимедийных объявлений...
05 07 2026 12:26:44
Анализ содержимого сайта показывает: Url разные, а контент страниц одинаковый. Думаете, ничего страшного? Но одинаковый контент может попасть под фильтры поисковых систем. Чтобы этого не произошло, надо знать, как избавляться от внутренних дублей...
04 07 2026 18:20:28
Новая партнерская программа Netpeak agency. Как получить теплого лида, стабильный пассивный доход, разместить свой логотип и ссылку на сайт на сайте Netpeak и другие бонусы партнерской программы. Узнать больше!...
03 07 2026 13:34:22
Как преодолеть онлайн писательский ступор, разобраться с рутиной и освободить время для экспериментов...
02 07 2026 2:14:29
5 примеров маркетингового троллинга. Сатира, ирония, пародия — все эти приемы в рекламе помогают брендам выделиться среди конкурентов. Если их правильно использовать, конечно, это отличный способ привлечь клиентов и создать запоминающийся образ бренда...
01 07 2026 0:36:31
Мир гаджетов на Android и IOS. ROMI (возврат маркетинговых инвестиций) по валовой прибыли: 764%....
30 06 2026 10:50:27
9 тревожных признаков того, что ваши подчиненные могут выгореть и уволиться. Обратите внимание и, возможно, не придется терять ценных для компании людей....
29 06 2026 16:13:26
Новости агентства Netpeak за предыдущий квартал. Появление отдела веб-аналитики. Открыли услугу «Создание и ведение блогов». Добавили мультивалютность. Глобально изменили скрипт Netpeak X-Reference. Запустили серию писем. Что еще?...
28 06 2026 16:47:37
Кейсы, фишки и советы, опыт крупных брендов, маркетологов....
27 06 2026 4:12:16
Как научиться продвигать мобильные приложения и заpaбатывать на этом....
26 06 2026 3:39:52
Распространенные ошибки продвижения B2B-компаний + стратегии того, как наращивать число активных подписчиков и потенциальных клиентов....
25 06 2026 0:24:35
И уж если бумага стерпит все, интернет — тем более, а значит онлайн-исповедальне быть! И не только ей......
24 06 2026 23:59:40
Как диагностировать Google Panda, понять, что нужно изменить на своем сайте и сделать пользователей счастливыми....
23 06 2026 21:13:57
Если ваш товар или услуга будут хорошо выглядеть на фото или целевая аудитория точно находится в Инстаграм, площадка для будущего блога определена. Узнать больше!...
22 06 2026 0:19:48
Как сэкономить на рекламе мобильных приложений в Facebook...
21 06 2026 9:21:21
Применяя фишки, можно выделить релевантную аудиторию и продать ей что угодно — от кроссовок до президента....
20 06 2026 6:14:20
Крауд-маркетинг предполагает взаимодействие с целевой аудиторией с помощью рекомендательных комментариев на форумах, сайтах вопросов и ответов, в блогах, на других площадках...
19 06 2026 1:16:28
Можно открыть корпоративную почту с использованием собственного сервера для принятия/отправки и с использованием стороннего сервиса от яндекс или гугл...
18 06 2026 1:51:14
Делайте анализ ссылочной массы хотя бы раз в месяц — и будет вам счастье....
17 06 2026 3:24:17
VPN — технология анонимного сетевого подключения. Она позволяет организовать подсеть в уже существующем соединении. Поверхностная сеть закрыта от внешнего доступа, потому вмешаться в нее не смогут. Чтобы узнать больше, читайте дальше!...
16 06 2026 23:21:59
Алгоритм ссылочного ранжирования, который показывает ее значимость, в частности, для поисковиков. Важность показателя PageRank оспаривают, но до сих пор считают. Читать!...
15 06 2026 18:40:58
Сериал «Ход королевы» взорвал интерес к шахматам, и вот насколько сильно...
14 06 2026 9:20:41
Вместо легкой пятничной темы, представляю вольный перевод статьи автора книги «Позитивная иррациональность»....
13 06 2026 10:51:49
Расширяем возможности визуализации данных из Google ***ytics c помощью пакета RGA и Power BI...
12 06 2026 10:43:27
То, как мы разговариваем, важно не только в жизни, но и в соцсетях. Зачем нужен tone of voice и как сделать, чтобы ваш голос отличался от других и был эффективен? Читайте наш гайд....
11 06 2026 6:18:53
Поговорим о soft skills, потому что именно они, исходя из моего опыта, помогают строить поистине сильные комaнды....
10 06 2026 20:10:24
Четкий мануал для настройки Яндекс.Аудиторий от создания сегмента, работы с геолокацией, пикселем аудитории, похожими аудиториями, ретаргетингом и до корректировки ставок...
09 06 2026 21:21:58
О чем следует позаботиться перед созданием интернет-магазина...
08 06 2026 12:21:58
Для продвижения интернет-магазина женского нижнего белья мы решили попробовать новый источник привлечения клиентов....
07 06 2026 23:31:27
Быстрый и бесплатный способ настройки целей через Google Tag Manager....
06 06 2026 8:54:55
Фотоконкурс для стимуляции активности в сообществе, прироста фанов и поощрения лояльной аудитории....
05 06 2026 16:52:49
Словарь, которым пользуются SEO-специалисты агентства Netpeak...
04 06 2026 14:12:25
Уроки, написанные понятным и доступным языком экспертами по контекстной рекламе, поисковому продвижению, SMM....
03 06 2026 9:40:26
Возможно, вы купили обувь Intertop именно после просмотра нашей рекламы....
02 06 2026 22:28:51
Мы предложили фанам бренда прокатиться на автомобиле SEAT Altea Freetrack!...
01 06 2026 7:44:17
7 советов для оптимизации вашего профиля в Google Мой Бизнес....
31 05 2026 4:34:42
Контент-революция: искусственный интеллект для уникальных текстов с достоверной информацией и контент-платформы на блокчейне для сохранения авторского права. Читайте больше в статье!...
30 05 2026 16:10:12
3 часто задаваемых вопроса о раскрутке сайтов об эффективной организации SEO своими силами, способах проверки оптимизации сайта и о том, как быстро можно увидеть эффект от SEO. Узнайте больше!...
29 05 2026 21:13:54
По-настоящему работающих идей не так много, поэтому не стоит бояться творчески заимствовать лучшие наработки и адаптировать их....
28 05 2026 9:16:24
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
