Оформляем главную и другие страницы сайта на дефолтном шаблоне с русифицированной сборкой OcStore под целевые запросы.
Используя встроенный модуль html, делаем два блока. Первый это рекламный баннер на всю страницу со ссылкой на нужную страницу или сайт. Например:
Второй это текстовый блок с тремя колонками. Вверху колонки иконка с сайта Font Awesome, заголовок третьего уровня и текстовый блок. Блок дает возможность оптимизировать любую страницу под нужные поисковые запросы. Ключевые слова из своего семантического ядра, гармонично вставляете их и окружаете небольшим текстом.
Например:
В консоли управления заходим в меню «Дополнения», находим модуль «HTML содержимое», далее нажимаем «Добавить» и редактируем:
Название (будет отображаться в админпанели, для вас);
Заголовок (будет отображаться на сайте, для пользователей);
Описание (заполняется в режиме редактирования исходного кода html);
Статус (включить).
Для работы используем Сетку Библиотеки Bootstrap
Открываем официальный сайт getbootstrap.com в разделе сетки css https://getbootstrap.com/docs/3.3/css/#grid и выбираем из примера сетку, представляющую собой ряд с тремя равными колонками для мобильных устройств и планшетов. Любой контент, размещенный в этом ряду, автоматически подстроится под размер экрана устройства. Код:
<div class="row"> <div class="col-md-4">Ваш контент</div> <div class="col-md-4">Ваш контент</div> <div class="col-md-4">Ваш контент</div> </div>
Заголовки для примера: «Свежие поступления», «Акции и Скидки — 50%» и «Бесплатная доставка».
Текст в режиме исходного кода будет выглядеть так.
В режим визуального редактора будет выглядеть так:
Описание тегов
/*div с классом row – один ряд*/ <div class="row"></div> /*div с классом col-md-4 – три раза создает три колонки в ряду row*/ <div class="col-md-4"></div> /*Тег параграф выравнивает текст по ширине с помощью служебного класса библиотеки bootstrap text-justify*/ <p></p> /*Тег span – для применения к части текста в параграфе вспомогательных классов библиотеки bootstrap text-danger и text-success*/ <span></span> /*Заголовок третьего уровня <h3></h3>*/ /*Тег жирного шрифта*/ <b></b>
Делаем вывод Модуля в шаблоне
Cохраняем все изменения в текстовом блоке html в режиме визуального редактора. Заходим во вкладку «Дизайн» и далее «Схемы». Потом выбираем строку «Главная». Жмем на кнопку «Редактировать» и попадаем в настройки страницы. Настраиваем порядок вывода модулей.
Находим модуль html seo setka. Жмем на кнопку с карандашом и выбираем нужное. Его можно поднять на ряд выше, сместив предыдущий модуль ниже и т.д. Вставляем модуль в нужное нам место и сохраняем изменения.
Настройка html блока
Увеличим размер шрифта текста на несколько пикселей и сделаем его темнее. Также заголовок «Почему стоит заказать товар у нас» выровняем по центру и увеличим отступ между ним и верхним рядом текста.
Еще изменим семейство шрифтов для заголовков. По умолчанию в шаблоне OcStore для всех шрифтов применяется семейство OpenSans, шрифт без засечек. Оставим его для параграфов текста, а для заголовков назначим шрифт Lora с засечкам для контраста.
Для этого создадим собственный файл со стилями css custom.css. И подключим шрифты в файле header.tpl.
Подключаем собственный файл сss
Все css стили для дефолтного шаблона находятся в папке stylesheet.
catalog/view/theme/default/stylesheet/stylesheet.css
Стили библиотеки bootstrap подключены здесь:
catalog/view/javascript/bootstrap/css/bootstrap.min.css
Чтобы подключить собственный файл со стилями css, нужно найти файл header.tpl. Он находится в папке common.
catalog/view/theme/default/template/common/header.tpl
(Здесь же подключим шрифт из google fonts.)
В файле header.tpl записываются все служебные файлы и мета-теги для поисковых систем: таблицы стилей, java-скрипты и прочее.
Можно прописать собственные стили css в файле stylesheet.css, отделив их от стилей шаблона комментарием. Назвать его, к примеру, /*custom style */, а можно сделать отдельный файл со стилями.
Создаем файл custom.css и кладем его в папку stylesheet. Здесь будут все наши собственные стили. С их помощью мы по необходимости перебьем некоторые стили шаблона и стили библиотеки bootstrap.
Потом открываем файл header.tpl в любом редакторе кода.
Находим строку с кодом:
<link href="catalog/view/theme/default/stylesheet/stylesheet.css" rel="stylesheet">
Копируем ее и вставляем под строкой копию, изменив stylesheet.css на custom.css
Собственный файл css к opencart подключен.
Подключаем дополнительный шрифт.
В сервисе fonts.google.com выбираем кириллический шрифт Lora и там же копируем сформировавшуюся ссылку.
<link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i&subset=cyrillic" rel="stylesheet">
Ее вставляем в header.tpl под ссылкой, подключающей к шаблону шрифт OpenSans.
Назначаем всем h1-h6 заголовкам свойство font-family: со значением ‘Lora’, serif; в файле custom.css
Переопределяем стили шаблона
Чтобы изменить размер и цвет шрифта в дефолтном шаблоне, в файл custom.css скопируем и вставим из файла stylesheet.css стили, относящиеся к тегу body. В селекторе body настраиваются размер и цвет шрифта. Объявление для селектора body выглядит так:
body {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
color: #666;
font-size: 12px;
line-height: 20px;
width: 100%;
}
Изменим свойства font-size и color. Font-size увеличим на 2 px, а цвет сделаем темней. Вот так: color: #222;
body {
color: #222;
font-size: 14px;
}
Переопределяем стили для заголовков сайта
Скопируем их из файла stylesheet.css
h1, h2, h3, h4, h5, h6 {
color: #444;
}
Сделаем их темнее, жирнее и изменим семейство шрифта для заголовков, сменив OpenSans на Lora.
h1, h2, h3, h4, h5, h6 {
color: #111;
font-family: 'Lora', serif;
font-weight: 700;
}
Заголовок стал другим, но он по-прежнему выровнен по левому краю.
Редактируем файл модуля html содержимое
Данный модуль выводит любое html содержимое на страницу интернет-магазина. Заголовок у этого модуля второго уровня и по умолчанию он выравнивается по левому краю. Мы выровняем заголовок h2 по центру ряда, применив к нему в файле html.tpl class=”text-center”. Откроем файл модуля html в любом редакторе кода.
Файл модуля html html.tpl находится в папке:
catalog/view/theme/default/template/extension/module
Отредактируем его, вставив в тег h2 служебный стиль bootstrap class=»text-center». Тем самым мы сдвинем заголовок слева в центр
<div>
<?php if($heading_title) { ?>
<h2 class="text-center mar-top"><?php echo $heading_title; ?></h2>
<?php } ?>
<?php echo $html; ?>
</div>
Так же отодвинем заголовок от верхнего блока на 40px. Для этого класс .mar-top с правилом margin-top: 40px пропишите в файле custom.css, а в файле module.tpl к заголовку h2 добавьте еще один класс mar-top
Получится так
Заголовок теперь стоит по центру и имеет другой вид.
Вставляем иконки Font-Awesome в модуль Html
Чтобы еще больше индивидуализировать свой код в html расположим иконки шрифта font-awesome над заголовками h3. Шрифт font-awesome уже подключен в header.tpl, так что нам ничего не остается, как подключить его в html содержимом opencart. Сделаем это через тег .
Скопируем теги с прописанными в них классами иконок на сайте font-awesome.com
https://fontawesome.com/search?o=r&ic=free&s=solid&ip=classic
Выберем из списка иконок те, которые нам наиболее подходят. Например: иконку с листом, с грузовиком и с мегафоном. Вот их код
<i class="fa-regular fa-truck"></i> <i class="fa-regular fa-bullhorn"></i> <i class="fa-regular fa-leaf"></i>
Рекламный баннер.
Нам понадобится модуль html и библиотека bootstrap.
В качестве примера приготовим фото размером 1220 на 290. Будет лучше, если высота фото будет небольшой, пикселов 200, может даже меньше, так как этот html block не должен быть слишком высоким.
Выводим рекламный баннер на главной странице сайта с помощью этого кода:
&lt;div class=»row hidden-xs mar-top fade»&gt;
&lt;div class=»col-md-12″&gt;
&lt;a href=»http://vash-magazin.com/»&gt;
&lt;img src=»https://test.loc/image/catalog/demo/naz-70.png» class=»img-responsive» title=»Носимый аварийный запас НАЗ-70″&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
Описание:
[php]&amp;lt;div class=»row hidden-xs mar-top fade»&amp;gt;[/php]
— это ряд с классом hidden-xs, который скрывает блок на маленьких устройствах. Класс mar-top отодвигает его сверху вниз. Класс fade дает эффект затухания, картинка выглядит несколько замутненной, а при наведении курсора эффект становится четче.
[php]&amp;lt;div class=»col-md-12″&amp;gt;[/php]
— Это строка, разбитая на 12 колонок.
Картинка обрамлена ссылкой, тегом Ссылка открывается в новом окне.
И наконец, сама картинка с классом img-responsive, который делает ее «резиновой». Она сжимается, подстраиваясь под размер экрана.
[php]&amp;lt;img class=»img-responsive» title=»Носимый аварийный запас НАЗ-70″ src=»http://test.loc/image/catalog/demo/mebel-dlya-doma.png» /&amp;gt;[/php]
А вот классы, которые были использованы, чтобы появился эффект затухания при наведении курсора на изображение.
[php].fade {
opacity: 0.9;
}
.fade:hover {
opacity: 1;
}[/php]
В итоге появилось два баннера. Ими можно разбавить ряды с карточками товара или вывести рядом друг с другом.
Вас может заинтересовать
