Всем привет, что то давненько я не писал, в этой статье мы с вами сделаем симпатичное и информативное приветствие на главную страницу нашего магазина. Приветствие оформим в две колонки — в левой разместим симпатичную картинку, а в правую информативный текст.
Для начала подберём симпатичную картинку (для примера, вы можете выбрать любую другую):
Для поиска картинок я использую этот ресурс: 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 > Редактировать > Верх страницы > Приветствие > Добавить > Сохранить.
Текст желательно подогнать под размер картинки и тогда он будет лучше смотреться (к тому же можно поиграть размером шрифта, добавить вертикальную полосу — разделитель между заголовком и текстом и т.д.).
Ну и давайте посмотрим что же у нас с вами получилось:
На этом всё, вступайте в нашу группу в ВК и сможете следить за выходом новых статей.
Живой пример (обновляется одновременно с выходом новых статей): https://about-all.ru
