Всё для сайтов

Управляемый модуль "Уже в продаже" с целью красиво подать продвигаемые группы товаров дня, недели, месяца.

Будьте в курсе событий

Модуль OnOffer - красиво рассказать о группах товаров

Модуль OnOffer

OnOffer - это очень свежий по концепту модуль из серии страниц-информеров "Уже в продаже". Его цель - красиво рассказать клиенту о группах товаров, к которым мы хотели бы привлечь внимание в первую очередь. Достоинство - лёгкий в управлении, позволяет создать произвольное число страниц с любыми заголовками, текстами и фото. К тому же он спроектирован адаптивным и смотрится отлично как на мониторах, так и на мобильных устройствах.

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

Купить модуль

Ссылки

Живое демо модуля demo.imperacms.com/onoffer?theme=modules

На демо сайте на широких мониторах слева появляется небольшое окно, где можете переключить фоны страницы. Это даст вам представление о той тональности фона, которая подойдёт именно вашему сайту. Поскольку модуль полностью управляем, то вы сможете заменить картинку фона на свою. Это делается в админпанели на странице дизайн > Файлы картинок, и далее файлы mod-onoffer-bg*.png, где звёздочка означает номер соответствующего фона.

Вот скриншот, как страница модуля с демо сайта выглядит на мониторе.

Как работать с модулем?

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

Порядок установки модуля

1 Открыть в админпанели страницу дизайн > Дизайны сайта.

2 Нажать ссылку загрузить в блоке Дизайны клиентской стороны.

3 В открывшемся окне выбрать тот самый архивный файл, что вы получили после оплаты модуля.

4 Ниже установить флажок поверх существующего.

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

Скриншот окна (здесь мы представляем, будто ваш шаблон имеет название YourTemplateName, а вы используйте своё настоящее название шаблона).

Затем перейдите в меню страницы > Специальные страницы и нажмите ссылку добавить. В этой новой странице укажите поле "Тип контента" равным "Статическая страница". Далее в поле "Шаблоном" укажите файл модуля mod-onoffer.htm. Потом:

  • Введите название страницы - оно станет основным заголовком.
  • Введите текст страницы - он станет текстом под основным заголовком.
  • Введите текст в поле "SEO текст" - он станет текстом в подвале страницы.

Как грузить картинки?

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

  • Первая фото - та что появится в шапке сайта. Её оптимальная высота - 220 пикселей.
  • Вторая фото - это баннер под текстом заголовка. Высота - 150 пикселей.
  • Третья и все далее - те что выведутся в виде подзаголовков. Их высота - 320 пикселей.

Где вводить текст около картинок?

При добавлении фотографий обратите внимание, что там есть поля "Название (alt)" и "Описание фото".

  • Если заполнить поле "Название (alt)" - оно станет текстом подзаголовка над картинкой.
  • Поле "Описание фото" - станет текстом с боку от картинки.
  • Если же перед текстом вставить URL страницы, он станет кнопкой.

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

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

Файлы модуля

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

  • css
    • mod-onoffer.css - стили модуля
  • html
    • mod-onoffer.htm - страница модуля
  • images
    • mod-onoffer-demo - папка с демо картинками (можете удалить на реальном сайте)
      • top.jpg - верхняя картинка (в шапке страницы)
      • banner.jpg - картинка баннера
      • group-1.jpg - картинка секции 1
      • group-2.jpg - картинка секции 2
      • group-3.jpg - картинка секции 3
      • group-4.jpg - картинка секции 4
      • group-5.jpg - картинка секции 5
      • group-6.jpg - картинка секции 6
      • about.jpg - нижняя картинка (в подвале страницы)
    • mod-onoffer-bg2.png - картинка фона 2
    • mod-onoffer-bg3.png - картинка фона 3
    • mod-onoffer-bg4.png - картинка фона 4
    • mod-onoffer-bg5.png - картинка фона 5
    • mod-onoffer-bg6.png - картинка фона 6
    • mod-onoffer-nophoto.png - картинка "нет фотографии" для шапки страницы
  • js
    • модуль вообще не использует сторонних скриптов
Обсуждение
«Игорь | 10 авг 14:10
Подскажите, вверху модуля есть меню Главная-Каталог-Бренды, а справа похоже номер телефона. Так вот в описании я не нашел где его задавать. Или в код надо лезть?
Ответить
«Impera CMS | 10 авг 18:40
Спасибо, что заметили. Я просто не описал это. В код влезать не нужно, Импера всегда старается делать так, чтобы пользователь имел возможность максимального управления модулем со стороны админки.

То поле с телефоном управляется с помощью конфигурационной настройки phone1. То есть зайдите в админпанель на страницу "настройки > Конфигурационный файл", смотрите параметр phone1 (если у вас нет такого, создайте и введите в нём нужный телефон).
Ответить
«Игорь | 10 авг 21:44
Спасибо. Как всегда удобно.
Ответить
«Стас | 11 авг 18:06
Очень простынка большая выпадает, если брендов около 60. Как уменьшить по вертикали? Может колонками или скрол приделать.
Ответить
«Андрей | 12 авг 08:30
Сколлинг я бы сделал так.
.menu .submenu {
overflow-y: auto;
max-height: 19em;
padding-right: 1em;
}
Это надо добавить в конец mod-onoffer.css.
Будет видно 6 выпавших элементов и скроллер вертикальный.
Max-height я посчитал по формуле 3n+1 эмфазы.
Ответить
«Стас | 12 авг 11:15
О! Спасибо, то что надо.
Ответить
«Наталья | 24 авг 18:54
Как менять порядок блоков?
Ответить
«Антон | 28 ноя 10:10
В файле mod-onoffer.htm дивы местами поменять.
Ответить
«Ирина | 15 дек 20:44
Больше бы таких модулей. бесплатных)
Ответить

Другие обсуждения »

Теги: onoffer, модуль, уже в продаже, товар дня, товар недели, товар месяца

Хотите чтобы мы рассказали ещё о чём-то - предлагайте тему.

Предложить

Следите за нашими публикациями в социальных сетях и новостных каналах.