Оформляем главную и другие страницы сайта на дефолтном шаблоне с русифицированной сборкой 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 class="row"></div>
Это div с классом row – один ряд.
<div class="col-md-4"></div>
Это div с классом col-md-4 – три раза (создает три колонки в ряду row).
<p></p>
Параграф – текст «обернут» в тег ‘
‘ чтобы выровнять его по ширине с помощью служебного класса Bootstrap text-justify.
<span></span>
Тег span – нужен для того чтобы обернуть часть текста в параграфе для применения к нему вспомогательных классов Bootstrap text-danger и text-success.
<h3></h3>
Заголовки третьего уровня – 3 штуки.
<b></b>
Выделяет текст жирным шрифтом.
Применяемые Классы Bootstrap Css
class=»row»
Ряд, строка-контейнер в котором будет размещен контент.
class=»col-md-4″
Колонка в ряду.
class=»text-center»
Выравниваем заголовок по центру блока.
class=»text-justify»
Выравниваем параграф по краям блока.
class=»text-success»
Выделяем текст зелеными буквами для обозначения успешного действия.
class=»text-danger»
Выделяем текст, делая шрифт красным цветом для обозначения опасности.
Делаем вывод Модуля в шаблоне
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.
Дополнительный шрифт можно подключить и по-другому. В строку с подключением шрифта OpenSans через плюс добавляем свой. Вот так:
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,400i,300,700+ Lora:400,700" rel="stylesheet" type="text/css" />
Назначаем всем 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/icons?d=gallery&m=free
Выберем из списка иконок те, которые нам наиболее подходят. Например: иконку с листом, с грузовиком и с мегафоном. Вот их код:
<i class="fa fa-truck"></i> <i class="fa fa-bullhorn"></i> <i class="fa fa-leaf "></i>
Оборачиваем каждый тег
<i> тегом <p>
чтобы выровнять иконки по центру родительского блока с помощью служебного класса выравнивания text-center. Код получился такой:
<p class="text-center"><i class="fa fa-leaf"></i></p> <p class="text-center"><i class="fa fa-bullhorn"></i></p> <p class="text-center"><i class="fa fa-truck"></i></p>
Так же увеличим каждую иконку с 14 до 20px, покрасив их в красный цвет, сделаем им круглую границу красного цвета, внутреннюю тень и отодвинув все их вниз, прописав им вот такие стили:
Добавим еще тег
<hr>
— горизонтальную строку, после каждого заголовка
<h3>
и назначим для него такие стили.
div > div:nth-child(1) > hr, div > div:nth-child(2) > hr, div > div:nth-child(3) > hr {
max-width: 22%;
margin: 10px auto 20px auto;
color: red!important;
border-top: 1px solid #1e1e1e;
}Тем самым сократили ширину
<hr>
до 22% и выровняли его по центру. В итоге получился такой seo-блок:
Рекламный баннер.
Нам понадобится модуль html и библиотека bootstrap.
В качестве примера приготовим фото размером 1220 на 290. Будет лучше, если высота фото будет небольшой, пикселов 200, может даже меньше, так как этот html block не должен быть слишком высоким.
Выводим рекламный баннер на главной странице сайта с помощью этого кода:
<div class="row hidden-xs mar-top fade"> <div class="col-md-12"> <a href="http://vash-magazin.com/"> <img src="https://test.loc/image/catalog/demo/naz-70.png" class="img-responsive" title="Носимый аварийный запас НАЗ-70"> </a> </div> </div>
Описание:
<div class="row hidden-xs mar-top fade">
— это ряд с классом hidden-xs, который скрывает блок на маленьких устройствах. Класс mar-top отодвигает его сверху вниз. Класс fade дает эффект затухания, картинка выглядит несколько замутненной, а при наведении курсора эффект становится четче.
<div class="col-md-12">
— Это строка, разбитая на 12 колонок.
Картинка обрамлена ссылкой, тегом Ссылка открывается в новом окне.
И наконец, сама картинка с классом img-responsive, который делает ее «резиновой». Она сжимается, подстраиваясь под размер экрана.
<img class="img-responsive" title="Носимый аварийный запас НАЗ-70" src="http://test.loc/image/catalog/demo/mebel-dlya-doma.png" />
А вот классы, которые были использованы, чтобы появился эффект затухания при наведении курсора на изображение.
.fade {
opacity: 0.9;
}
.fade:hover {
opacity: 1;
}В итоге появилось два баннера. Ими можно разбавить ряды с карточками товара или вывести рядом друг с другом.
Материал с сайта https://wp-oleg.in.ua/ru/kastomizatsiya-opencart-s-pomoshhyu-modulya-html-i-bootstrap/
