Блок приветствия на CMS OpenCart 4

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

Работаем с изображением

Сначала нам понадобится подходящее изображение для приветственного блока (по тематике вашего интернет магазина — к примеру сотрудники фирмы, фото товаров, фото магазина, логотип фирмы), конечно лучше всего сделать фото самостоятельно (или заказать у специалистов), но так как у меня демонстрационный сайт я возьму картинку с фотостока Freepik:

Когда то я занимался продажей профессиональных игровых устройств (эта тематика мне близка) и я выбрал тематическое изображение. Я его немного отредактировал (цветокоррекция, обрезка, оптимизация для веб):

Изображение есть, теперь осталось его загрузить на наш сайт, для этого воспользуемся или файловым менеджером нашего хостинга Beget или ftp клиентом установленным на вашем компьютере и переходим: ../public_html/image/ и загружаем наше изображение (запоминаем название и расширение фото — jpeg, png, в моём случае это company.jpg).

Работаем с кодом в админке

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

Название Модуля: О компании
Статус: Включить

В блоке текст нажимаем первую кнопку Источник и заполняем:

<div class="row company-block">
<div class="col-sm-12 col-md-6 company-img"><img alt="о компании" class="img-fluid" src="/image/company.jpg" /></div>

<div class="col-sm-12 col-md-6 company-info">
<h3>Интернет магазин Cyber-gamer.ru</h3>

<p>Добро пожаловать в магазин профессиональных игровых устройств для компьютера и игровых приставок от самых популярных в мире производителей: Asus ROG, Bloody, CoolerMaster, Cougar, HyperX, Logitech, MadCatz, Razer, SteelSeries, Zowie и многих других брендов.</p>

<p>В нашем каталоге вы можете найти самые различные устройства: игровые мыши, игровые клавиатуры, коврики для игровых мышек, игровые наушники, геймпады, игровые рули и оборудование для авиа-симуляторов.</p>

<p>Помимо игровых устройств мы предлагаем широкий ассортимент различной игровой мебели: столы, кресла, стойки для авто и авиа симуляторов и различное оборудование для проведения стримов по вашим любимым играм.</p>

<p>Если у вас есть возникли вопросы по ассортименту нашего интернет магазина просто позвоните нам по телефону +7(000)000-00-00 и мы ответим на все ваши вопросы, так-же вы можете написать нам в онлайн чат или в наши соц. сети: <a href="ссылка">Название соц. сети</a>,<a href="ссылка">Название соц. сети</a>,<a href="ссылка">Название соц. сети</a>, либо приезжайте в наш розничный магазин.</p>
</div>
</div>

Текст конечно так себе, но для демонстрации пойдёт.

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

Выводим блок

Теперь нам необходимо вывести наш блок О компании на главную страницу витрины магазина, переходим: Дизайн — Макеты — Главная/Home — Редактировать — Верх страницы — Добавить — О компании — Сохранить:

Переходим на витрину нашего магазина и проверяем:

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

Работаем со стилями

Вновь возвращаемся к ftp и открываем файл: ../public_html/catalog/view/stylesheet/stylesheet.css, добавляем в конец файла этот код:

/* company */
.company-block {
  padding: 0 10px 30px 0;
}
.company-img img {
  border-radius: 5px;
}
.company-info {
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.company-info h3 {
  text-align: center;
  padding: 20px 0 20px 0;
}

Чистим кеши и проверяем результат: