Художественные эксперименты с текстовыми баннерами

Добавьте «жизни» в оформление интернет-магазина — для информирования и привлечения внимания посетителей

16 мая 2022, версия 0.1.1


Когда на сайте всё вроде бы красиво и аккуратно, но статично, то он выглядит каким-то неживым. Страницы будто застыли как замороженные…

Посмотрите ещё раз на свою онлайн-витрину. Может быть, надо добавить немного «жизни»? Чтобы внимание посетителей цепляла какая-то яркая надпись: например, выгодное кратковременное предложение или просто фраза для привлечения внимания к популярной группе товаров. Которая сразу подскажет посетителю: «Ого, этот магазин активно взаимодействует с покупателями, показывает что-то интересное, тут есть на что взглянуть! Это не какая-то скучная витрина, где всё просто разбито на стандартные прямоугольники и скучно-логичные меню.»

Как вам такой подход? Посмотрите, как плагин «Новостная бегущая строка» делает витрину интернет-магазина более живой и динамичной.

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




Если нужно, баннер может не просто показывать текст, но и работать в качестве ссылки. Т. е. при нажатии на него откроется нужная вам страница.

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


Но вообще в плагине есть ещё целая куча настроек! (Кажется, это одно из главных его достоинств, судя по восторженным отзывам пользователей.) Давайте посмотрим, с чем можно «поиграться».

Как можно изменять стиль работы баннера

Самое главное — нужно выбрать основной режим работы:

  • Бегущая строка. В этом режиме текст просто прокручивается — справа налево, слева направо, снизу вверх или сверху вниз.
  • Анимация. В этом режиме текст появляется, некоторое время остаётся видимым, а потом пропадает. И появляется, и пропадает он не просто так, а с каким-то особенным эффектом: растворением, миганием, подскакиванием, перемешиванием, вибрацией… Это очень приблизительные слова для описания того, что происходит с текстом — с некоторыми эффектами он ведёт себя очень необычно. И это просто отлично: мы именно для этого выбрали такой «живой» плагин, чтобы добавить немного движения.

    Для появления текста и для его исчезания можно выбрать разные эффекты анимации. Кстати, их всего больше 50 штук на выбор! И для каждого эффекта можно добавить ещё один из 3 дополнительных вариантов: «синхронизация», «смешивание», «противоположная».

    Кажется, вам придётся испытать настоящие муки выбора, чтобы остановиться на каком-то одном из доступных эффектов и их вариантов…

Для любого из этих основных режимов можно выбрать несколько параметров баннера:

  • ширину: на всё доступное пространство либо на его часть, указанную в процентах, либо на указанную фиксированную ширину;
  • тип, размер, цвет, тень шрифта — можно выбрать любой из 170 с лишним шрифтов Google, которые поддерживают кириллицу, если вам нужно написать текст в баннере на русском языке;
  • цвет, графическую текстуру, отступы, степень закругления, тень фона — можно выбрать один из 80 видов текстур, которые придадут баннеру какой-то объёмный стиль: под ткань, дерево, кирпич, кожу, бумагу и много другое.

Для режима бегущей строки можно также выбрать:

  • должен ли бегущий по баннеру текст приостанавливаться, когда посетитель магазина наводит на него курсор;
  • с какой скоростью должен двигаться текст;
  • сколько времени нужно подождать, прежде чем текст начнёт движение по баннеру.

Для режима анимации можно выбрать:

  • сколько времени нужно подождать, прежде чем текст начнёт появляться на баннере;
  • с каким из 50 с лишним эффектов (и одним из 3 дополнительных вариантов для каждого эффекта) текст должен появиться на баннере;
  • либо нужно ли каждый раз применять случайно выбранный вариант анимации (отличный выбор, чтобы не делать этот выбор самому!);
  • с каким эффектом текст должен пропасть с баннера;
  • с каким промежутком времени анимация должна применяться к отдельным элементам текста: словам или отдельным символ — на ваш выбор;
  • должна ли анимация повторяться бесконечно или сработать только один раз, а потом прекратиться, чтобы текст всё остальное время оставался статичным;

Где можно разместить баннер с движущимся текстом

Плагин предлагает несколько стандартных мест, где можно отобразить баннер:

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

Точное место расположения баннера наверняка зависит от особенностей конкретной темы дизайна.

Если ни одно из них вам не подойдёт, то есть также возможность разместить баннер вообще в произвольном месте витрины — для этого нужно скопировать в настройках плагина фрагмент кода и добавить его в нужный шаблон в редакторе дизайна. Кстати, это справедливо в том числе для страниц других приложений, например, «Сайта» или «Блога».

Ещё одно важное замечание: у этого плагина есть возможность раздельной настройки для нескольких витрин. Полезно, если на каждой витрине нужно показывать разные баннеры или если на некоторых витринах баннер вам вовсе не нужен.

Впечатления

Пользователи в отзывах не преувеличивали — в плагине «Новостная бегущая строка» действительно немалое количество настроек внешнего вида баннера, и можно получить очень разные виды оформления баннера с движущимся или анимированным текстом.

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

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



* * *

«Новостная бегущая строка» в Магазине Webasyst: https://www.webasyst.ru/store/plugin/shop/newsticker/