CMS OpenCart 3.0 приветствие на главную страницу витрины (1 вариант)

Всем привет, что то давненько я не писал, в этой статье мы с вами сделаем симпатичное и информативное приветствие на главную страницу нашего магазина. Приветствие оформим в две колонки – в левой разместим симпатичную картинку, а в правую информативный текст.

Для начала подберём симпатичную картинку (для примера, вы можете выбрать любую другую):

Картинка для приветствия
Картинка для приветствия

Для поиска картинок я использую этот ресурс: ru.freepik.com

Обязательно уменьшаем картинку и оптимизируем для Веб (я уменьшил до 800px x 600px и до 500kb, можно оптимизировать и лучше, но для демонстрации вполне приемлемо).

Открываем свой файловый менеджер (я использую Filezilla) и переходим: ../image/catalog и размещаем в этой папке наше изображение (в моём случае картинка welcome.jpg) и запоминаем его название и расширение.

P.S. – Для удобства в магазинах я создаю дополнительные папки slide, image и т.д. и уже в них размещаю необходимые изображения (на работающих магазинах обычно куча графики и с помощью каталогов проще ориентироваться в файлах).

Теперь переходим в админку и переходим: Модули / Расширения > Модули / Расширения > текстовый блок – HTML > Редактировать и заполняем:

  • Название модуля: Приветствие
  • Заголовок модуля: Оставляем пустым!
  • Статус: Включено

Вкладку Текст переключаем на Просмотр кода (иконка </> – Code View) и заполняем:

<div class="col-xs-12 col-sm-6">
  <img src="image/catalog/welcome.jpg" alt="Приветствие" title="Приветствие" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-6">
  <h3>Добро пожаловать в интернет магазин "About-all.ru"</h3>
  <p>Уважаемые покупатели в нашем интернет магазине представлен широкий ассортимент разнообразной электроники: смартфоны, планшеты,
    ноутбуки и современные периферийные устройства для геймеров: игровые клавиатуры, мыши, наушники, веб-камеры и коврики для игровых мышек</p>
  <p>Наши сотрудники прекрасно разбираются во всём ассортименте магазина и с радостью проконсультируют Вас по интересующим вас вопросам!
    Задать свой вопрос вы можете позвонив нам: <b>+7 (925) 000-00-00</b> или написав на нашу электронную почту: <b>zakaz.about-all@yandex.ru</b></p>
  <p>По вопросам сотрудничества направляйте свой запрос на электронную почту <b>opt.about-all@yandex.ru</b></p>
</div>

Вновь нажимаем кнопку Просмотр кода и только после этого нажимаем кнопку Сохранить.

Теперь необходимо вывести наш информационный блок на витрину магазина, переходим: Дизайн > Макеты > Home > Редактировать > Верх страницы > Приветствие > Добавить > Сохранить.

Текст желательно подогнать под размер картинки и тогда он будет лучше смотреться (к тому же можно поиграть размером шрифта, добавить вертикальную полосу – разделитель между заголовком и текстом и т.д.).

Ну и давайте посмотрим что же у нас с вами получилось:

CMS OpenCart 3.0 приветствие на домашнюю страницу
CMS OpenCart 3.0 приветствие на домашнюю страницу

На этом всё, вступайте в нашу группу в ВК и сможете следить за выходом новых статей.

Живой пример (обновляется одновременно с выходом новых статей): https://about-all.ru

Комментарии

Меню навигации