Бесплатные конструкторы тизеров и баннеров

Бесплатные конструкторы тизеров и баннеров

В конструкторе можно изготовить цифровой материал для рекламы, анимационной открытки, анимированного баннера, изображения для веб-сайта, изготовить баннеры для рекламной кампании, поздравительные изображения и многое другое.

Можно использовать как свои материалы так и предзагруженные:

• Сделать фон – (загрузить картинку или выбрать из набора в конструкторе);
• Написать текст (слоганы);
• Загрузить свой логотип;
• Создать кнопку;
• Получить баннер и код в свой личный кабинет (без каких либо ограничений).

Баннерная реклама в интернете ― это эффективный способ получить лиды. Она:

• привлекает внимание пользователей креативными изображениями;
• вызывает интерес информацией или коммерческим предложением;
• вызывает желание узнать о продукте больше или купить товар;
• побуждает перейти по ссылке — кликнуть по баннеру.

Баннерная реклама помогает:

• получить новых клиентов;
• вернуть посетителей, которые покинули сайт, но не оставили контактные данные или не оформили заказ;
• заинтересовать довольного клиента повторной покупкой, напомнив о себе интересным предложением;
• повысить узнаваемость бренда, используя название компании, фирменные цвета или логотип;
• сформировать доброжелательное отношения к продукту через креативный контент.

Есть ошибки!

Как видите, баннер не отвечает требованиям системы. Посмотрим, что не так. Зафиксировано три ошибки:

• отсутствует вызов метода getClickURLNum(),
• отсутствует мета-тег размера,
• и присутствует внешняя ссылка на стороннюю библиотеку, что запрещено.

Чтобы устранить ошибки, перейдем по ссылке “Технические требования”, а затем “Требования к HTML-5 баннерам”. Как видите, здесь есть пример мета-тега, который указывает размер баннера, и пример вызова недостающего метода. Ну а как решить вопрос со сторонней библиотекой я вам сейчас покажу.

Возвращаемся в Google Web Designer и открываем наш баннер. Перейдем в “Режим кода”. Как вы помните, при создании документа мы определили контекст как Google Adwords. Дело в том, что контекст задает не только нормативы для “Инспектора объявлений”, но и подключает библиотеки DoubleClick Studio по умолчанию. Это и вызывает ошибку при загрузке в Яндекс Директ.

Устраняем ошибку #1

Чтобы решить эту проблему наверняка, сделайте следующее. Создайте новый баннер с теми же настройками, но в качестве контекста укажите “Внешнее объявление”. Такой тип документа не содержит подключения внешних .js библиотек.

В окне нашего баннера выделите все слои на временной шкале, нажмите сочетание клавиш Command + C на Mac (то есть скопируйте их), перейдите в окно нового документа и нажмите сочетание клавиш Command + V (то есть вставьте их).

Как видите, медиа быстренько “подсосались” и мы просто скопировали начинку баннера в новый документ. Креатив отображается исправно, а ошибка устранена. Я закрою исходный баннер, он нам не понадобится.

Устраняем ошибку #2

Вопрос с мета-тегом решается одной строчкой. Копируем, переходим в режим кода, вставляем в шапку к другим мета-тегам. Готово. Если вы работаете с баннером другого размера, укажите в мета-теге правильные значения ширины и высоты.

Устраняем ошибку #3

Вызов метода getClickURLNum() заключается в том, чтобы завернуть рабочую область в ссылку с каким-то идентификатором. А затем вызвать метод getClickURLNum() для элемента с данным айди.

Поэтому переходим в “Режим кода”, находим тело баннера и заворачиваем его в ссылку. Ниже вызываем указанный метод. Я далеко не ходил, а просто скопировал пример из справочной информации. Отлично.

Сохраняем баннер, возвращаемся в интерфейс медийной кампании и пробуем загружать отредактированный креатив. Как видите, на этот раз все в порядке. Осталось задать конечный URL, произвести настройки аудитории и можно ожидать модерации.

С модерацией тоже могут быть непредсказуемые моменты, как и в Adwords. Рекомендую обратить внимание на качество текста и кнопок на баннере, вес в килобайтах, исключить зацикливание анимации, учитывать местную валюту при указании цен.

В остальном вам нужно дождаться модерации первого баннера. Если все в порядке, можно заниматься всей партией и загружать скопом. Как видите, ничего сложного, а вы переживали. В следующем видео мы разберем создание адаптивных баннеров HTML-5.

2. Grantmarketing: удачные креативы с помощью конструктора

Константин, аккаунт-менеджер компании Grantmarketing, поделился кейсом, в котором был проведён эксперимент с кампанией РСЯ у одного из клиентов. Этот кейс смог доказать, что формат графических объявлений, который часто игнорируют, тоже выигрышный и эффективный инструмент. Графические объявления помогают повысить узнаваемость бренда, анонсировать новые акции, выводить новые товары на рынок.

Перед клиентом Grantmarketing стояла цель: повысить качество трафика, увеличить охват, CTR в РСЯ и Ретаргетинге. Компания использовала креативы — графические объявления, создаваемые с помощью конструктора.

Результаты: ретаргетинг стал эффективнее, увеличилась конверсия, CTR повысился на 0,5%, уменьшилась средняя цена клика.

HTML5

Размер баннера для десктопа 612х200px или 612х400px.

Для мобайла 612x400px.

Баннер необходимо выполнить следуя техническим требованиям баннерной системы AdFox.

Ссылки на внешние подключаемые ресурсы обязательно должны быть прописаны через https протокол, использование http протокола недопустимо.

Для размещения на мобильных устройствах принимаются только адаптивные креативы. Так как ширина колонки в мобильной версии сайта не имеет фиксированного значения, ширина баннера должна принимать 100% ширины браузера, а высота подстраиваться пропорционально.

Графический (только для десктопа)

Размер баннера 612х200px или 612х400px.

Анимированный CSS3 рекламный баннер для любого сайта — adCard

Не работают обычные баннеры? Попробуйте этот анимированный CSS3 рекламный баннер для любого сайта: обычный HTML сайт, на WordPress, на Joomla и т.д.

Простой пример adCard

Позитивная сторона этого баннера в том, что призыв с кнопкой скрыты до того момента, пока на баннер не навели курсором. Согласитесь, не навязчиво, а если дерзкую картинку подобрать и текст шикарный, то работать такой рекламный баннер у Вас будет на ура!

Рекомендую устанавливать справа в сайдбаре, если он шире 300px, поскольку человек скролля вниз, обязательно наткнется на этот баннер, а эффект аннимации обязательно привлечет внимание.

Еще примеры adCard

Установка такого баннера очень простая, даже, если установить два разных по содержанию и колориту. Есть CSS файл, который нужно привязать к сайту, и есть код, который помещаем туда, где баннер должен красоваться.

Как установить adCard?

1. Подключаем стили adCard к обычному HTML сайту.

Если это обычный HTML сайт, то мы просто добавляем эту строку в тег <head>,

после этого укажите правильный путь к основному файлу adCard.css

2. Подключаем стили adCard к сайту на WP.

Тут рекомендую посмотреть мой видеообзор на плагин «Custom CSS and JS» — с его помощью можно ОЧЕНЬ просто и правильно привязать к WP внешние CSS стили, и даже JavaScript-ы.

3. HTML-код для отображения adCard

Скопируйте код(ниже), и поместите его в том месте на сайте, где желаете, чтобы баннер отобразился. Если это сайдбар на WordPress, то создайте виджет «html-код», поскольку вы вставляете именно код, а не просто текст.

Я пометил черным в коде основные моменты, на которые Вам нужно заострить внимание, а под кодом постарался дать объяснение каждому.

1. ad-red / ad-blue / ad-green / ad-brown — регулируйте цветовую гамму
2. ad-500 / ad-450 / ad-400 — регулируйте высоту баннера
3. Загрузите картинку на хостинг, и укажите URL КАРТИНКИ. Рекомендуемые размеры картинки: 300×500
4. Ширина баннера по умолчанию 300px. Если решили изменить ширину баннера, то и размеры картинки поправьте соответственно (но не обязательно).
5. Укажите URL-ссылку
6. и 7. Регулируйте размеры шрифта, чтобы подстроить под себя.

Заключение

Итак, используя эти онлайн-конструкторы, мы за считанные минуты можем создать необходимую графику, видео или веб-сайт и тут же опубликовать готовую работу.

Типы шаблонов дизайнерской графики доступные на этих сервисах:

• Фотоколлажи;
• Видеоролики и анимация;
• Рекламные баннеры для Google Ads, Facebook Ads и других сетей;
• HTML-5, GIF и AMP-баннеры;
• Социальные обложки, фон, посты, истории для Instagram, Facebook, Twitter, Pinterest, YouTube и др.;
• Вдохновляющие цитаты;
• Фоны для рабочего стола;
• Плакаты и листовки;
• Изображения для печати на ткани;
• Приглашения и объявления;
• Мемы;
• Заголовки событий;
• Деловая графика;
• Слайды и презентации;
• Обложки профиля, резюме;
• Заголовки и баннеры блога;
• Портфолио, целевые страницы.

Почти все редакторы имеют полный или частичный перевод на русский язык, к тому же всегда можно воспользоваться браузерным расширением для перевода веб-страниц. Если что-то непонятно, то блоги этих сервисов содержат инструкции и полезные советы. Несмотря на некоторую схожесть задач, каждый из сервисов имеет свои плюсы. Чтобы выбрать для себя лучший инструмент, попробуйте каждый из этого списка. Или используйте все сразу. Вам даже не нужно создавать учетную запись, придумывать логин и запоминать пароль, при регистрации используйте свои учетные записи Facebook или Google. Профессиональным дизайнерам или бизнесменам рекомендуется приобрести PRO доступ и использовать сервисы на полную мощность. Успехов!