Статьи

управління банерами

Елементи банерів (зображення, заголовок, опис) зберігаються в картках. У рішенні використовується 3 види карток для банерів, які відображаються на головній сторінці:

  • Перший вид допомагає створювати основні, верхні і плаваючі банери;
  • Другий - маленькі банери, банери в вигляді тізерів і широкі банери внизу сторінки;
  • Третій - внутрішні банери.

Фактично, внутрішні банери показуються не тільки на головній сторінці, а й на тематичних розділах сайту, тому їх структура і елементи управління будуть розглядатися нами окремо в розділі «Рекламні банери».

У режимі редагування в публічній частині сайту при наведенні покажчика на область одного з банерів спливає меню з кнопками управління, що дозволяють змінити, видалити (1) або додати новий банер (2).

Елементи банерів (зображення, заголовок, опис) зберігаються в картках

Примітка: При використанні типу сторінки №1 з активними верхніми банерами при наведенні покажчика виділяється область, що включає і основні банери, і верхні (ті, що з боків). На спливаючому меню кнопки зміни і видалення діятимуть на основний банер. Ті ж дії над верхніми банерами можна здійснити тільки в адміністративній частині сайту. В інших випадках озвучені елементи управління виробляють дії над тими банерами, над якими вони з'явилися.

Кнопка «Додати банер» дозволяє створити будь-який новий баннер того ж виду. Це означає, що ви можете навести вказівник, наприклад, на область основного банера і створити новий елемент в блоці плаваючих банерів, заповнивши картку певним чином. І навпаки, використовуючи елемент управління над блоком плаваючих банерів, додати основний банер.

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

Для роботи зі списками банерів першого виду в адміністративній частині сайту перейдіть в Контент → Реклама (aspro.next) → Банери. Тут виберіть гілку, що відповідає одному з редагованих підвидів. Наприклад, для того, щоб не відображати банерів з боків від основного, розкрийте «Верхні банери».


Відключити верхній банер без видалення з бази можна за допомогою пункту «Деактивувати» (3) в меню кнопки Гамбургер. За допомогою інших пунктів цього ж меню можна підправити банер (2) або видалити його (4). Використовуйте кнопку «Додати банер» (1) для створення нового елемента.

Картка банера першого виду складається з вкладок: «Банер», «Анонс», «Докладно», «SEO», «Реклама», «Розділи». Вміст вкладок «SEO» і «Реклама» не належать до даної теми, тому їх опис в рамках уроку відсутня.

На вкладці «Банер» загальними для основних, верхніх і плаваючих банерів є поля:

  • Активність (1) - робить банер видимим на головній сторінці;
  • Початок і закінчення активності (2) - задає часовий інтервал, в якому банер буде доступний для перегляду;
  • Назва (3) - містить текст заголовка, відображуваного на банері (поле є обов'язковим для заповнення);
  • Сортування (4) - задає порядок відображення банерів на сторінці;

  • Розташування тексту (7) - визначає де буде знаходитися заголовок і підпис на банері: справа, зліва, по центру або зовсім буде відключений;
  • Тип переходу (9) - встановлює як буде відкриватися посилання, прив'язана до банера: в новому вікні або поточному;
  • Колір тексту (10) - задає в верхньому і плаваючому банері колір заголовка, в основному банері впливає також і на опис;

  • Тип банера (8) - є одним з ключових полів при створенні банера. Змінюючи значення в цьому полі, ви визначаєте в якому блоці банер буде відображатися. Щоб встановити потрібний тип, натисніть кнопку з трьома крапками і виберіть в новому вікні відповідний пункт: банер зверху, основний або плаваючий.

Для верхніх і плаваючих банерів заповнюється поле «Посилання з банера» (11). Якщо поле залишити порожнім, користувач не зможе отримати ніякої додаткової інформації, кликнув по ньому. Банер буде використовуватися тільки для краси.

Використовуючи поле «Розмір банера» (6), ви можете перетворити плитку в мозаїку.

У блоці плаваючих банерів в одному ряду може перебувати до 4х елементів зі значенням «не встановлено» (a) в зазначеному полі. При виборі варіанту «Широкий» елемент займе 2 місця в ряду (b). Якщо вибрати «На всю область», ширина банера буде підігнана під довжину всього ряду (c).
У блоці плаваючих банерів в одному ряду може перебувати до 4х елементів зі значенням «не встановлено» (a) в зазначеному полі

Для основних банерів додатково можна поставити світлий або темний колір точок навігації (5), щоб вони не губилися на тлі банера, а група полів внизу картки (12) дозволяє розмістити на банері кнопки і прив'язати до них сторінки сайту з переліком товарів або детальною інформацією.

У Аспро: Next, починаючи з версії 1.3.1, вкладка «Відео» доступна для типу банера «На головній, основною банер». Параметри з цієї вкладки дозволять вам використовувати відео замість картинки або прив'язати його до неї.


Для цього:

  • встановіть галку «Показувати відео» (1), щоб зробити його доступним для користувачів;
  • завантажте відеофайл в систему (3) і / або прив'яжіть ролик з YouTube (8) (докладніше в уроці « Додавання відеоролика з «Youtube »»);
  • вкажіть його джерело (2) - відео з файлу або «html embed код <iframe> </ iframe>», якщо відео завантажено з YouTube;
  • активуйте поле «Автовідтворення» (4), якщо хочете, щоб відео програвалося автоматично при завантаження сторінки.
  • активуйте поле «Заповнювати відео за розміром» (5), якщо будете відображати відео по всій ширині банера;
  • для відключення звуку, встановіть галку біля однойменного параметра (6).
  • встановіть галку «Повторювати відео» (7), якщо потрібно зробити цикл відтворення ролика;
  • текст підказки кнопки відтворення відео (9);
  • колір кнопки відтворення відео (10).

Увага! Його користувачі не зможуть самостійно вмикати або вимикати звук при перегляді відео на сайті.

Щоб зробити основний банер складовим, завантажте фонову картинку на вкладці «Докладно», а активну - на вкладці «Анонс».


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

В поле опису анонса ви також можете розмістити короткий текст, який буде відображатися під заголовком на основному банері

Якщо ви створюєте верхній банер, зображення слід завантажувати на вкладці «Анонс».

Створюючи плаваючий банер, збережіть картинку на вкладці «Докладно». Якщо вам також потрібно короткий опис, яке буде з'являється при наведенні покажчика на банер, заповніть поле опису анонса.

Щоб не втратити новий баннер в адмінці, зіставте його з потрібним розділом в списку однойменної вкладки.


З банерів другого виду управляти елементами як в адмінці, так і в публічкою можна тільки банерами у вигляді тізерів. Маленькі банери і широкі банери внизу сторінки в публічній частині можна тільки додати. Їх зміна, видалення або вимкнення доступні в адміністративній частині сайту.

Принцип управління картками однаковий для обох видів.

В адмінці другий вид банерів можна знайти в Контент → Реклама (aspro.next) → Реклама - на головній. Підвиди розташовані у відповідних розділах.

Підвиди розташовані у відповідних розділах

Якщо ви відкриєте картку одного з таких банерів, то помітите, що полів для заповнення в ній менше.

Тут можна:

  • активувати відображення банера (1);
  • дати банеру назву (2) - поле є обов'язковим, відображається тільки з банерами-тизерами;
  • встановити тип банера (3) і тим самим включити його відображення в необхідному блоці;
  • задати порядковий номер серед інших банерів того ж підвиду (4);
  • зв'язати з однією з сторінок сайту (5);
  • Використати картинку (6);
  • задати короткий опис (7) - підтримується тільки банерами-тизерами.

Новости