Промо-баннеры в аккаунте веб-мастера

  • Обновлено

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

  • О баннерах в разделе «Рекламные материалы» читайте здесь.
     

Где можно разместить промо-баннер

  • На главной странице личного кабинета веб-мастера:

    Промо-баннеры в аккаунте веб-мастера 1

     

 

  • Под главным меню на всех страницах личного кабинета:

    Промо-баннеры в аккаунте веб-мастера 3

 

Как разместить промо-баннер

  1. Узнайте условия размещения у своего менеджера.
  2. Согласуйте с менеджером место и период размещения промо-баннера.
  3. Подготовьте html-баннер по инструкции ниже и отправьте архив с файлами своему менеджеру.

Баннер должен соответствовать всем требованиям инструкции, иначе он не будет принят.

Рекомендации по подготовке и требования к промо-баннерам

  • Редактировать и изменять баннер нужно в файле index.html.
    Для этого используйте html-редактор: например, sublimetext.combrackets.ioatom.io.
     
  • Нельзя переименовывать файл index.html в папке с файлами для баннера.
  • При изменении названия или формата других файлов в папке нужно аналогичным образом переименовать или изменить их формат в файле index.html.
  • Разрешенные форматы файлов: HTML, CSS, GIF, PNG, JPG, JPEG и SVG.
    Логотипы принимаются только в формате SVG.
     
  • Общий вес всех файлов в итоговой папке не должен превышать 350 Кб.
     
  • В коде баннера запрещено использовать:
    • расширения и плагины браузера (Adobe Flash и т.д.).
    • скрипты (всплывающие окна, подмена адреса страницы и т. д.);
    • видео и аудиоролики;
    • ссылки на внешние ресурсы (кроме cdn.admitad.com и cdn.admitad-connect.com);
  • html-код в файле должен оставаться понятным и легко читаемым.
     
  • Баннер должен корректно работать для всех пользователей на всех платформах в двух последних версиях браузеров.
     

Как подготовить html-баннер

Баннер на главной странице личного кабинета веб-мастера

1. Такой баннер состоит из следующих элементов:

  • логотип компании (1);
  • текст заголовка (2);
  • текст описания баннера (3);
  • кнопка с призывом к действию (4);
  • изображение, которое визуально раскрывает тематику программы или содержание баннера (5).

RU_Promo-banners-4.png

 

Все эти элементы вы можете изменять и редактировать.

2. Скачайте и распакуйте архив с файлами для баннера: скачать архив

В нем вы увидите следующие файлы:

  • logo_210x80.svg — пример логотипа.
  • img_700x450.png — пример изображения для правой части баннера.
  • index.html — файл, который нужно редактировать, чтобы изменить баннер.
  • preview-dashboard.html — файл предпросмотра баннера.

3. Откройте файл index.html в html-редакторе.
Вы можете изменять элементы, у которых в строке кода есть комментарий.

Строка кода в файле index.html (синим выделены значения, которые можно изменять) Комментарий в файле index.html
background: #7A3DD0; /* цвет фона баннера / banner background color*/
color: #fff; /* цвет заголовка / title color */
color: #fff; /* цвет текста / text color */
color: #fff; /* цвет текста кнопки / button text color */
background: #00d06c; /* цвет фона кнопки / button background color*/
color: #fff;
background: #11e17d;
/* цвет текста и фона кнопки при наведении / text and background color of the button on hover */
color: #fff;
background: #00b04a;
/* цвет текста и фона активной кнопки / text and background color of the active button */
<img class="promo__bg" src="img_700x450.png" alt=" "> <!--изображение на баннере / banner image-->
<img class="promo__logo" src="logo_210x80.svg" alt=" "> <!--логотип компании / company logo-->
<h1 class="promo__title">Boost your online sales and only pay for results</h1> <!--текст заголовка / header text-->
<p class="promo__text">60 000+ publishers work with Admitad</p> <!--текст описания / description text-->
<div class="promo__btn">Join</div> <!--текст кнопки / button text-->


Кроме того, вы можете проверять, как ваши изменения в файле index.html влияют на внешний вид баннера.

Для этого откройте в браузере файл предпросмотра preview-dashboard.html.
Внесите изменения в файл index.html и сохраните их (Ctrl+S или ⌘+S).
Затем вернитесь на страницу предпросмотра и обновите ее: внесенные изменения отобразятся на баннере.
 

4. Добавьте логотип вашей компании в папку с файлами для баннера.

Требования и рекомендации:

  • Формат: только SVG.
  • Если фон баннера недостаточно контрастный для логотипа, добавьте ему подложку.
  • Чтобы логотип отображался на баннере корректно, при сохранении логотипа отключите параметр «Адаптивный svg».
  • Имя вашего файла логотипа должно совпадать с именем логотипа в файле index.html.
    Чтобы они совпадали, в коде файла index.html найдите «logo_210x80.svg» и вместо него укажите имя вашего файла логотипа. Сохраните изменения.

    RU_Promo-banners-5.png

После этого можно удалить logo_210x80.svg из папки с файлами для баннера.
 

5. Добавьте в папку с файлами для баннера изображение, которое хотите разместить на баннере.

Требования и рекомендации:

  • Размер изображения: 700х450px.
    Изображение в другом размере будет автоматически обрезано до подходящего.
  • Формат: GIF, PNG, JPG, JPEG или SVG.
  • Имя и формат вашего изображения должны совпадать с именем и форматом изображения в файле index.html.
    Чтобы они совпадали, в коде файла index.html найдите «img_700x450.png» и вместо него укажите имя и формат вашего изображения. Сохраните изменения.

    RU_Promo-banners-6.png

После этого можно удалить img_700x450.png из папки с файлами для баннера.

6. После окончания работы над баннером еще раз сохраните все изменения и проверьте итоговый вид баннера с помощью файла preview-dashboard.html.Убедитесь, что все элементы, которые вы редактировали, отображаются корректно при любом разрешении экрана.
 

7. Проверьте, что в папке собраны все необходимые файлы:

  • логотип вашей компании;
  • ваше изображение для правой части баннера;
  • index.html — итоговый файл, в котором сохранены все внесенные вами изменения (новый цвет фона, ваш заголовок и текст на баннере и т.д.);
  • preview-dashboard.html — файл предпросмотра финального вида вашего баннера.
     

8. Создайте архив папки и отправьте его своему менеджеру.
 

1. Баннер состоит из изменяемых и неизменяемых элементов.

Изменяемые элементы — те, которые вы можете отредактировать.
К ним относятся:

  • текст заголовка (1).
  • текст описания баннера (2).
  • изображение, которое визуально раскрывает тематику программы или содержание баннера (3).
  • цвет фона баннера.

RU_Promo-banners-7.png

 

Остальные элементы — неизменяемые, их нельзя редактировать, т.к. они подставляются в баннер автоматически:

  • логотип программы.
  • статистика программы.
  • кнопка «Подключиться».
  • кнопка «Закрыть».
     

2. Скачайте и распакуйте архив с файлами для баннера: скачать архив.

В нем вы увидите следующие файлы:

  • img_700x450.png — пример изображения для правой части баннера.
  • index.html — файл, который нужно редактировать, чтобы изменить баннер.
  • preview-catalog-with-offer-ad.html — файл предпросмотра баннера.
     

3. Откройте файл index.html в html-редакторе.
Вы можете изменять элементы, у которых в строке кода есть комментарий.

Строка кода в файле index.html (синим выделены значения, которые можно изменять) Комментарий в файле index.html
background: #7A3DD0; /* цвет фона баннера / banner background color*/
color: #fff; /* цвет заголовка / title color */
color: #fff; /* цвет текста / text color */
<img class="promo-campaign__bg" src="img_700x450.png" alt=" "> <!--изображение на баннере / banner image-->
<h1 class="promo-campaign__title">Boost your online sales and only pay for results</h1> <!--текст заголовка / header text-->
<p class="promo-campaign__text">60 000+ publishers work with Admitad</p> <!--текст описания / description text-->


Вы можете отслеживать, как ваши изменения в файле index.html влияют на внешний вид баннера.

Для этого откройте в браузере файл предпросмотра preview-catalog-with-offer-ad.html.
Внесите изменения в файл index.html и сохраните их (Ctrl+S или ⌘+S).
Затем вернитесь на страницу предпросмотра и обновите ее: внесенные изменения отобразятся на баннере.


4. Добавьте в папку с файлами для баннера изображение, которое хотите разметить на баннере.

Требования и рекомендации:

  • Размер изображения: 700х450px.
    Изображение в любом другом размере будет автоматически обрезано.
  • Формат: GIF, PNG, JPG, JPEG или SVG.
  • Имя и формат вашего изображения должны совпадать с именем и форматом изображения в файле index.html.
    Чтобы они совпадали, в коде файла index.html найдите «img_700x450.png» и вместо него укажите имя и формат вашего изображения. Сохраните изменения.

    RU_Promo-banners-8.png

 

После этого можно удалить img_700x450.png из папки с файлами для баннера.


5. После окончания работы над баннером еще раз сохраните все изменения и проверьте итоговый вид баннера с помощью файла preview-catalog-with-offer-ad.html.
Убедитесь, что все элементы, которые вы редактировали, отображаются корректно при любом разрешении экрана.


6. Проверьте, что в папке собраны все необходимые файлы:

  • ваше изображение для правой части баннера;
  • index.html — итоговый файл, в котором сохранены все внесенные вами изменения (новый цвет фона, ваш заголовок и текст на баннере и т.д.);
  • preview-catalog-with-offer-ad.html — файл предпросмотра финального вида вашего баннера.


7. Создайте архив папки и отправьте его своему менеджеру.
 

1. Баннер состоит из следующих элементов:

  • логотип компании (1);
  • текст заголовка баннера (2) — не более 120 символов.
  • фоновое изображение баннера (1920х60px).

RU_Promo-banners-9.png

 

Все эти элементы вы можете изменять и редактировать.


2. Скачайте и распакуйте архив с файлами для баннера: скачать архив.

В нем вы увидите следующие файлы:

  • logo_159x60.svg — пример логотипа.
  • bg_1920x60.jpg — пример фонового изображения для баннера.
  • index.html — файл, который нужно редактировать, чтобы изменить баннер.
  • preview-global.html — файл предпросмотра баннера.
     

3. Откройте файл index.html в html-редакторе. Вы можете изменять элементы, у которых в строке кода есть комментарий.

Строка кода в файле index.html (синим выделены значения, которые можно изменять) Комментарий в файле index.html
background: url('bg_1920x60.jpg') center no-repeat; /* фоновое изображение баннера / banner background image */
color: #fff; /* цвет текста / text color */
<img class="promo__logo" src="logo_159x60.svg" alt=" "> <!--логотип компании / company logo-->
<p class="promo__text">Boost your online sales and only pay for results</p> <!--текст заголовка / header text-->

Максимальная длина заголовка баннера — 120 символов.

Вы можете отслеживать, как ваши изменения в файле index.html влияют на внешний вид баннера.

Для этого откройте в браузере файл предпросмотра preview-global.html.
Внесите изменения в файл index.html и сохраните их (Ctrl+S или ⌘+S).
Затем вернитесь на страницу предпросмотра и обновите ее: внесенные изменения отобразятся на баннере.
 

4. Добавьте логотип вашей компании в папку с файлами для баннера.

Требования и рекомендации:

  • Формат: только SVG.
  • Если фон баннера недостаточно контрастный для логотипа, добавьте ему подложку.
  • Чтобы логотип отображался на баннере корректно, при сохранении логотипа отключите параметр «Адаптивный svg».
  • Имя вашего файла логотипа должно совпадать с именем логотипа в файле index.html.
    Чтобы они совпадали, в коде файла index.html найдите «logo_159x60.svg» и вместо него укажите имя вашего файла. Сохраните изменения.

    RU_Promo-banners-10.png

После этого можно удалить logo_159x60.svg из папки с файлами для баннера.
 

5. Добавьте в папку с файлами для баннера изображение, которое хотите использовать в качестве фона.

Требования и рекомендации:

  • Размер фонового изображения: 1920x60px.
  • Формат: GIF, PNG, JPG, JPEG или SVG.
  • Имя и формат вашего изображения должны совпадать с именем и форматом изображения в файле index.html.
    Чтобы они совпадали, в коде файла index.html найдите «bg_1920x60.jpg» и вместо него укажите имя и формат вашего изображения. Сохраните изменения.

    RU_Promo-banners-11.png

После этого можно удалить img_700x450.png из папки с файлами для баннера.


6. После окончания работы над баннером еще раз сохраните все изменения и проверьте итоговый вид вашего баннера с помощью файла предпросмотра preview-global.html.
Убедитесь, что все элементы, которые вы редактировали, отображаются корректно при любом разрешении экрана.
 

7. Проверьте, что в папке собраны все необходимые файлы:

  • логотип вашей компании;
  • фоновое изображение для баннера;
  • index.html — итоговый файл, в котором сохранены все внесенные вами изменения (новый цвет шрифта, ваш заголовок на баннере и т.д.);
  • preview-global.html — файл предпросмотра финального вида вашего баннера.
     

8. Создайте архив папки и отправьте его своему менеджеру.

Была ли эта статья полезной?