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

Всем привет, в одной из прошлых статей мы с вами уже работали над блоком приветствия нашего интернет магазина созданного на CMS OpenCart (блок О компании), а в этот раз мы немного изменим его оформление — сделаем его посимпатичнее.

1. Откроем админку нашего интернет магазина и переходим: Модули/Расширения > Модули/Расширения > О компании > Редактировать, нажимаем кнопку Источник и вместо старого кода вставляем этот:

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

<div class="col-sm-12 col-md-6">
<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 и мы ответим на все ваши вопросы, так-же вы можете написать нам в онлайн чат или в наши соц. сети, либо приезжайте в наш розничный магазин.</p>
</div>
</div>

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

2. Откроем файл ../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;
}

вставляем эти:

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

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

Вроде неплохо.

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

При желании изображению можно добавить эффекты (например увеличить изображение при наведении курсором мыши, сделать его чёрно-белым и т.д.), делается это добавлением пары строк в CSS стили.

Если вам интересно эта тема — оставляйте комментарии и я расскажу как вставить кнопки-ссылки на нужные вам социальные сети, страницы и т.д. и как их можно симпатично оформить.

Демонстрационный сайт: demo.moushe.ru (демо сайт обновляется вместе с выходом новых статей).

Встретимся в следующих статьях.