# Промо-баннеры в аккаунте веб-мастера
Чтобы привлечь внимание веб-мастеров к вашей программе, вы можете разместить промо-баннеры, которые будут отображаться у веб-мастеров на страницах личного кабинета.
О баннерах в разделе «Рекламные материалы» читайте в [этой статье](/article/ru/201.html).
# Где можно разместить промо-баннер
* На главной странице личного кабинета веб-мастера:
* В каталоге программ [Admitad Store](https://store.admitad.com/ru/catalog/):
* Под главным меню на всех страницах личного кабинета:
# Как разместить промо-баннер
1. Узнайте условия размещения у своего менеджера.
2. Согласуйте с менеджером место и период размещения промо-баннера.
3. Подготовьте HTML-баннер по инструкции ниже и отправьте архив с файлами своему менеджеру.
:::tip
Баннер должен соответствовать всем требованиям инструкции, иначе он не будет принят.
:::
# Рекомендации по подготовке и требования к промо-баннерам
* Редактировать и изменять баннер нужно в файле index.html.
Для этого используйте HTML-редактор: например, [sublimetext.com](http://www.sublimetext.com/), [brackets.io](http://brackets.io/), [atom.io](http://atom.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).
Все эти элементы вы можете изменять и редактировать.
2\. Скачайте и распакуйте архив с файлами для баннера: [скачать архив](https://cdn.admitad-connect.com/public/storage/2025/06/02/HTML_Admitad_2021.zip).
В нем вы увидите следующие файлы:
* 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\_700x450.png" alt\=" "> | \ |
| \![]()
logo\_210x80.svg" alt\=" "> | \ |
| \Boost your online sales and only pay for results\
| \ |
| \60 000+ publishers work with Admitad\
| \ |
| \Join\
| \ |
Кроме того, вы можете проверять, как ваши изменения в файле index.html влияют на внешний вид баннера.
Для этого откройте в браузере файл предпросмотра preview-dashboard.html.
Внесите изменения в файл index.html и сохраните их (Ctrl+S или ⌘+S).
Затем вернитесь на страницу предпросмотра и обновите ее: внесенные изменения отобразятся на баннере.
4\. Добавьте логотип вашей компании в папку с файлами для баннера.
Требования и рекомендации:
* Формат: только SVG.
* Если фон баннера недостаточно контрастный для логотипа, добавьте ему подложку.
* Чтобы логотип отображался на баннере корректно, при сохранении логотипа отключите параметр «Адаптивный svg».
* Имя вашего файла логотипа должно совпадать с именем логотипа в файле index.html.
Чтобы они совпадали, в коде файла index.html найдите «logo\_210x80.svg» и вместо него укажите имя вашего файла логотипа. Сохраните изменения.
После этого можно удалить logo\_210x80.svg из папки с файлами для баннера.
5\. Добавьте в папку с файлами для баннера изображение, которое хотите разместить на баннере.
Требования и рекомендации:
* Размер изображения: 700х450px.
Изображение в другом размере будет автоматически обрезано до подходящего.
* Формат: GIF, PNG, JPG, JPEG или SVG.
* Имя и формат вашего изображения должны совпадать с именем и форматом изображения в файле index.html.
Чтобы они совпадали, в коде файла index.html найдите «img\_700x450.png» и вместо него укажите имя и формат вашего изображения. Сохраните изменения.
После этого можно удалить img\_700x450.png из папки с файлами для баннера.
6\. После окончания работы над баннером еще раз сохраните все изменения и проверьте итоговый вид баннера с помощью файла preview-dashboard.html.Убедитесь, что все элементы, которые вы редактировали, отображаются корректно при любом разрешении экрана.
7\. Проверьте, что в папке собраны все необходимые файлы:
* логотип вашей компании;
* ваше изображение для правой части баннера;
* index.html — итоговый файл, в котором сохранены все внесенные вами изменения (новый цвет фона, ваш заголовок и текст на баннере и т.д.);
* preview-dashboard.html — файл предпросмотра финального вида вашего баннера.
8\. Создайте архив папки и отправьте его своему менеджеру.
## Баннер в каталоге программ Admitad Store
1\. Баннер состоит из изменяемых и неизменяемых элементов.
Изменяемые элементы — те, которые вы можете отредактировать.
К ним относятся:
* текст заголовка (1).
* текст описания баннера (2).
* изображение, которое визуально раскрывает тематику программы или содержание баннера (3).
* цвет фона баннера.
Остальные элементы — неизменяемые, их нельзя редактировать, т.к. они подставляются в баннер автоматически:
* логотип программы.
* статистика программы.
* кнопка «Подключиться».
* кнопка «Закрыть».
2\. Скачайте и распакуйте архив с файлами для баннера: [скачать архив](https://cdn.admitad-connect.com/public/storage/2025/06/02/HTML_Admitad_2021.zip).
В нем вы увидите следующие файлы:
* 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\_700x450.png" alt\=" "> | \ |
| \Boost your online sales and only pay for results\
| \ |
| \60 000+ publishers work with Admitad\
| \ |
Вы можете отслеживать, как ваши изменения в файле 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» и вместо него укажите имя и формат вашего изображения. Сохраните изменения.
После этого можно удалить 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).
Все эти элементы вы можете изменять и редактировать.
2\. Скачайте и распакуйте архив с файлами для баннера: [скачать архив](https://cdn.admitad-connect.com/public/storage/2025/06/02/HTML_Admitad_2021.zip).
В нем вы увидите следующие файлы:
* 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 \*/ |
| \![]()
logo\_159x60.svg" alt\=" "> | \ |
| \Boost your online sales and only pay for results\
| \ |
:::tip
Максимальная длина заголовка баннера — 120 символов.
:::
Вы можете отслеживать, как ваши изменения в файле index.html влияют на внешний вид баннера.
Для этого откройте в браузере файл предпросмотра preview-global.html.
Внесите изменения в файл index.html и сохраните их (Ctrl+S или ⌘+S).
Затем вернитесь на страницу предпросмотра и обновите ее: внесенные изменения отобразятся на баннере.
4\. Добавьте логотип вашей компании в папку с файлами для баннера.
Требования и рекомендации:
* Формат: только SVG.
* Если фон баннера недостаточно контрастный для логотипа, добавьте ему подложку.
* Чтобы логотип отображался на баннере корректно, при сохранении логотипа отключите параметр «Адаптивный svg».
* Имя вашего файла логотипа должно совпадать с именем логотипа в файле index.html.
Чтобы они совпадали, в коде файла index.html найдите «logo\_159x60.svg» и вместо него укажите имя вашего файла. Сохраните изменения.
После этого можно удалить logo\_159x60.svg из папки с файлами для баннера.
5\. Добавьте в папку с файлами для баннера изображение, которое хотите использовать в качестве фона.
Требования и рекомендации:
* Размер фонового изображения: 1920x60px.
* Формат: GIF, PNG, JPG, JPEG или SVG.
* Имя и формат вашего изображения должны совпадать с именем и форматом изображения в файле index.html.
Чтобы они совпадали, в коде файла index.html найдите «bg\_1920x60.jpg» и вместо него укажите имя и формат вашего изображения. Сохраните изменения.
После этого можно удалить img\_700x450.png из папки с файлами для баннера.
6\. После окончания работы над баннером еще раз сохраните все изменения и проверьте итоговый вид вашего баннера с помощью файла предпросмотра preview-global.html.
Убедитесь, что все элементы, которые вы редактировали, отображаются корректно при любом разрешении экрана.
7\. Проверьте, что в папке собраны все необходимые файлы:
* логотип вашей компании;
* фоновое изображение для баннера;
* index.html — итоговый файл, в котором сохранены все внесенные вами изменения (новый цвет шрифта, ваш заголовок на баннере и т.д.);
* preview-global.html — файл предпросмотра финального вида вашего баннера.
8\. Создайте архив папки и отправьте его своему менеджеру.