Как сделать в 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....
26 04 2024 12:19:41
Nommi — сокращение от nomadic MiFi: роутер для современных цифровых кочевников...
25 04 2024 21:22:55
Аудит юзабилити способствует следованию современным тенденциям, пониманию целевого посетителя и увеличению конверсии....
24 04 2024 2:51:35
Кратко об аутрич-продвижении? Размещайте полезный контент с ссылками на ваш сайт на качественных ресурсах. Хотите подробности — читайте новую статью....
23 04 2024 7:58:44
Как сделать креативный мобильный баннер. Зачем нужны особенные баннеры для мобильных? Что делать с картинкой? Что делать с текстом? Что делать с другими рекламными форматами? Дополнительные элементы. Обо всем этом детально и спримерами...
22 04 2024 20:41:42
Составим его вместе...
21 04 2024 17:12:43
Оплата покупок в Facebook и Instagram через платежные ссылки...
20 04 2024 3:19:59
Как бесплатно пользоваться преимуществами, особенностями и дополнительными инструментами сервиса...
19 04 2024 6:43:33
Личный кабинет на сайте: что нового во внешнем виде, внутренностях и отчетах, функционале и юзабилити, автоматизации работы с оплатами, интернет-представительстве клиента и для специалистов. Узнайте больше!...
18 04 2024 2:42:43
В аккаунте ***ytics появилась возможность подключения ремаркетинга в поисковой сети Google. Расскажем о результатах применения инструмента на примере кейса крупного проекта ecommerce....
17 04 2024 6:57:47
Николь Лаззаро из XEODesign провела исследование о том, почему мы играем или не играем в игры....
16 04 2024 12:59:16
Примеры новой концепции Digital-маркетинга по формуле 8Р...
15 04 2024 19:41:59
Инсайты Диви Конф 2021, онлайн-конференции о видеомаркетинге....
14 04 2024 8:22:43
Краткий обзор динамических мультимедийных объявлений...
13 04 2024 17:31:44
Сакральные знания о контекстной рекламе для экспертов и тех, кто с ними сотрудничает....
12 04 2024 12:48:28
После нехитрых манипуляций с текстом вторая строка оказывается в заголовке....
11 04 2024 16:18:13
Зачем нужны пользовательские сегменты клиентов и как их создавать — читайте в завершающей части серии «Как анализировать эффективность рекламы в Google ***ytics?»...
10 04 2024 2:51:59
Активно юзая Google Tag Manager, узнали много нового о dataLayer и методах отслеживания статистики в Google ***ytics для SPA-сайтов и лендингов. Об этом и расскажем...
09 04 2024 4:10:28
Новый способ автоматизации процессов при настройке аналитики больших объемов данных....
08 04 2024 3:20:44
Как за один час собрать самые популярные темы для информационных статей с помощью Serpstat и Key Collector?...
07 04 2024 22:57:31
Совет Константина Леоновича (Sape.ru), 4 наших + 2 бонусных...
06 04 2024 4:57:15
Чтобы прекратить споры о том, с какого конца разбивать яйцо, я собрал аргументы за союз SEO и PPC...
05 04 2024 22:21:44
Количество обращений выросло на 43,27%, а рынок перегрет — десятки компаний предлагают свою продукцию, услуги. Что делать, чтобы люди выбрали вас среди других игроков рынка (помимо качественного выполнения своей работы)? Читайте дальше!...
04 04 2024 22:32:16
Пpaктика в режиме «рейтинг онлайн». Новинка Google Рекламы — отчет «Статистика аукционов»....
03 04 2024 11:46:44
Личный опыт экс-главреда экс-блога Netpeak (сейчас — Netpeak Journal): о работе с информацией, мотивации написания, редактуре черновика, подаче информации по степени важности, выделении главного и составлении окончательной версии текста. Как сделать текст логичным и полезным? Узнайте!...
02 04 2024 6:43:33
Короткая история про одного из руководителей корпорации «Kimberly Clark». Альтернативная Википедия для тех, кто любит сторителлинг. Читать дальше!...
01 04 2024 21:56:51
Проверенные лайфхаки по платному трафику от спикеров и участников конференции 8P 2018...
31 03 2024 13:21:28
Примеры странной, классной и непонятной рекламы в соцсетях из моей ленты за февраль 2021 года...
30 03 2024 6:18:25
Грамотный контент важен для всех, но особенно — для аутсорсов и стартапов в B2B. Если вы согласны с этим, давайте делать медиа....
29 03 2024 17:28:48
Статистика изменений долей рынка после майского и декабрьского апдейта Google в 2020 году....
28 03 2024 3:23:49
Подробно об оплате аккаунтов и налогообложении рекламы в Украине, России, Казахстане....
27 03 2024 4:18:13
Пока вы не осознаете причины, почему вам выгодно не хвалить, забудьте про качественную обратную связь и максимальную включенность комaнды. Фишки управления собой, людьми и проектами....
26 03 2024 1:57:28
Перед нами стояла цель увеличить поисковый трафик и видимость, не охватывая новые города. Через 8 месяцев после старта сотрудничества сайт переносили на новый front-end. Узнать больше!...
25 03 2024 17:55:15
Разбор типичных ошибок в рекламе Google Shopping как обязательного инструмента рекламы в Google. О минус-словах, геолокации, структуре сайта и обновлении объявлений. Что именно важно? Читайте дальше!...
24 03 2024 2:18:44
Пошаговый чек-лист и описание действий SEO-специалиста на всех этапах переноса сайта на новую CMS....
23 03 2024 12:25:57
Чек-лист для РРС-специалистов. Всегда быстрее учиться на опыте других людей, а не набивать шишки самостоятельно. А также советы, как исправить рекламные кампании. Обо всем читайте в этой статье!...
22 03 2024 21:57:14
Экс-CEO, а теперь просто сотрудник и «волшебник страны Moz» Рэнд Фишкин поделился с читателями блога рассказом о своем видении будущего SEO, перспективах анонимизации сети и причудах американских клиентов....
21 03 2024 22:16:59
Распределение бюджета на кампании в Google Рекламе. Обозревает Григорий Крутий....
20 03 2024 12:28:47
Как прокачать email, когда рассылки уже работают....
19 03 2024 15:48:15
Часто копирайтеры пишут для поисковых роботов, не заботясь о качестве контента и читабельности. Рассмотрим метрики для оценки ридабилити....
18 03 2024 12:11:13
Новая партнерская программа Netpeak agency. Как получить теплого лида, стабильный пассивный доход, разместить свой логотип и ссылку на сайт на сайте Netpeak и другие бонусы партнерской программы. Узнать больше!...
17 03 2024 4:18:56
Подробно о преимуществах и особенностях двух сервисов контекстной рекламы....
16 03 2024 14:20:10
79% владельцев смартфонов, если верить Google, используют их для покупок или заказов услуг. Это более двух миллиардов человек. Ничего удивительного, что даже Google запустил собственный сервис Call Tracking. Кому и зачем жизненно важно отслеживать звонки...
15 03 2024 1:59:30
Ошибки, которые допускают новички и теряют деньги, трафик, клиентов....
14 03 2024 5:29:40
Особенности продвижения локального офлайн-бизнеса...
13 03 2024 10:53:10
Комaнда Serpstat провела исследование среди интернет-маркетологов и создала виджет, который рассчитывает среднюю зарплату на основе опыта, навыков и знаний специалистов. Что из этого получилось, читаем в статье....
12 03 2024 20:43:25
Почему синергия штатных специалистов и рекламное дело агентства SEO/PPC выгодна бизнесу...
11 03 2024 0:32:35
Данные по более 26 млн кликов в 23 тематиках и 402 городах Украины...
10 03 2024 17:29:37
Кейс: как золотой корпоративный линкбилдинг помог в SEO-продвижении интернет-магазина, в котором можно заказать и купить чехлы и виниловые наклейки для смартфонов...
09 03 2024 12:35:45
Когда email-маркетинг становится точкой роста. Кейс интернет-магазина книг Book24....
08 03 2024 21:28:23
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
