Дизайн #1816
1. Как изменить шапку сайта?
Верхняя часть шаблона состоит из надписи названия сайта, пунктов меню и строки поиска.
Название вашего сайта — текст, который будет отображаться в переменной $SITE_NAME$. Чтобы изменить его требуется перейти в Панель управления → Настройки → Общие настройки и изменить поле “Название вашего сайта” на необходимое.
Если же вместо текста нужно изображение тогда перейдите в Панель управления → Дизайн → Редактор → Глобальные блоки → Верхняя часть сайта найдите 4 строку кода:
<a class="logo-lnk" href="$HOME_PAGE_LINK$" title="Home">$SITE_NAME$</a>
и вместо $SITE_NAME$ пропишите:
<img src="ссылка на логотип">
где "ссылка на логотип" – пропишите ссылку, которую вы можете получить, осуществляя:
- Логотип загружается в файловый менеджер сайта (Панель управления → Инструменты.)
- После загрузки изображения, просто кликните на название изображение и вы получите заветную ссылку.
Чтобы изменить фон шапки сайта, перейдите в Панель управления → Дизайн → Редактор → Таблица стилей (CSS), css-правило:
.header > .container { background-color: #000000; }
#000000 – является цветом верхней части сайта. Его можно изменить на любой другой html-цвет.
2. Как изменить промо-блок?
Для редактирования промо-страницы нужно перейдите в Панель управления → Дизайн → Редактор → Глобальные блоки → PROMO.
Блок Promo состоит из слайдера контента, рассмотрим структура слайда на примере стандартного:
<li class="item"> <div class="img-slide"> <img class="owl-lazy" data-src="/.s/t/14659/main-img1.png" alt="image"> </div> <div class="info-slide"> <div class="text-info"> <h2>Lorem ipsum dolor </h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusamus autem culpa facilis ipsa ipsam iste iure laudantium nam nemo non nulla, omnis perferendis quos reprehenderit sunt suscipit velit voluptas!</p> <a class="info-bnt" href="#">Watch</a> <a class="info-bnt btn-dark" href="#">More</a> </div> </div> </li>
В атрибут data-src="/.s/t/14659/main-img1.png" вы можете указать ссылку на свое изображение. в блоке <div class="text-info"> указать свой текстовый контент слайда.
3. Как изменить содержимое главной страницы сайта?
Для редактирования промо-страницы нужно перейдите в Панель управления → Дизайн → Редактор → Глобальные блоки → Страницы сайта.
Данная страница состоит из 6 так называемых блоков, 4 из данных блоков одинаковые мы рассмотрим только один из них и два других которые не повторяются.
1)
Блок содержит в себе заголовок и слайдер карточек оформленных под тематику шаблона, редактировать данный слайдер вы можете на строках 49 -180. структура карточек одинаковая, рассмотрим одну из них в качестве примера:
<li class="item"> <div class="top-card-text"> <span class="quality">HD</span> <span class="card-rating"> <i class="material-icons"> star_rate </i> <i class="material-icons"> star_rate </i> <i class="material-icons"> star_rate </i> <i class="material-icons"> star_rate </i> <i class="material-icons"> star_rate </i> </span> </div> <div class="card-poster"> <img class="owl-lazy" data-src="/.s/t/1816/prem1.jpg" alt="poster"> <a href="#" class="playBut"> </a> </div> <div class="bottom-card-text"> <h4 class="card-title"><a href="#">Lorem ipsum</a></h4> <span class="card-subtitle">Lorem ipsum</span> </div> </li>
<i class="material-icons"> star_rate </i> - иконка звезды рейтинга в верхней части. вы можете убрать лишние или добавить свой функционал для настройки рейтинга. Также вы можете использовать в данном блоке информер указав в качестве шаблона структуру выше заменив стандартную информацию на системные переменные которые выводят ту или иную информацию о материале.
<img class="owl-lazy" data-src="/.s/t/1816/prem1.jpg" alt="poster"> - изображение карточки вместо /.s/t/14659/prem1.jpg укажите ссылку на свое изображение. <div class="bottom-card-text"> <h4 class="card-title"><a href="#">Lorem ipsum</a></h4> <span class="card-subtitle">Lorem ipsum</span> </div>
блок с текстовым содержимым карточки. вы можете указать нужное вам содержимое или удалить.
2)
Блок содержит заголовок и карточки с изображениями и краткими атрибутами, редактировать данный блок вы можете на строках 282-468. Структура карточки в данном блоке следующая:
<li> <div class="img-block"> <img src="/.s/t/1816/ser1.jpg" alt="image"> </div> <div class="info-block"> <div class="info-block-top"> <h4 class="card-title"><a href="#">Lorem ipsum</a></h4> <span class="time-info">91 min</span> <span class="genre">lorem, ipsum, amet</span> </div> <div class="info-block-bottom"> <span class="rating"> <i class="material-icons"> star_rate </i> <i class="material-icons"> star_rate </i> <i class="material-icons"> star_rate </i> <i class="material-icons"> star_rate </i> <i class="material-icons"> star_rate </i> </span> <span class="grade">5.0</span> </div> </div> </li>
“/.s/t/1816/ser1.jpg” вы можете указать ссылку на свое изображение. В блоках с классами “info-block-bottom” и “info-block-top” вы можете указать нужные Вам данные или отредактировать стандартные.
3)
Последний блок страницы это блок с заголовком и с текстовым содержимым, редактировать которое вы можете на строках 700-734.
3. Как изменить фон шаблона?
Изменить фон сайта можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). css-правило:
body.base { background: #f2f2f2; }
#f2f2f2; – фон сайта. Его можно изменить на любой другой html-цвет.
4. Как изменить цвет блоков в sidebar?
Чтобы изменить вложенных блоков border или тень, нужно перейти в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). css-правило:
.sidebox { padding: 15px; box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.15); border: 1px solid #ededed; background-color: #ffffff; margin-bottom: 20px; }
ffffff – фон блоков sidebar. Его можно изменить на любой другой html-цвет.
box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.15) - тень блока вы можете установить другие параметры тени для блока.
Также в данном шаблоне используется отдельный блок в sidebar:
помимо системных, отредактировать его вы можете перейдя на строки 800-837, структура карточек данного блока:
<li> <div class="img-block"> <img src="/.s/t/14659/soon4.png" alt=""> <a href="#" class="playBut"></a> </div> <h4 class="card-title"><a href="#">Lorem ipsum</a></h4> </li>
в теге с классом “card-title” вы можете указать свой заголовок карточки, а в блоке “img-block” для тега img установить свою ссылку вместо стандартной.
5. Как изменить нижнюю часть сайта?
Изменить фон нижней части сайта можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). css-правило:
.footer .cont-wrap { max-width: 1268px; margin: 0 auto; padding: 30px 20px; background-color: #000; color: #fff; box-shadow: 0 5px 21px rgba(0, 0, 0, 0.28); }
#000 – фон нижней части сайта. Его можно изменить на любой другой html-цвет.
В правом углу расположены иконки социальных сетей, для их изменения перейдите в Панель управления → Дизайн → Редактор → Нижняя часть, где в строках 23-24 укажите свои ссылки на аккаунты в социальных сетях:
<div class="soc-block"> <span><a href="https://vk.com" target="_blank" class="fa fa-vk"></a></span> <span><a href="https://twitter.com" target="_blank" class="fa fa-twitter"></a></span> <span><a href="https://facebook.com" target="_blank" class="fa fa-facebook"></a></span> <span><a href="https://instagram.com" target="_blank" class="fa fa-instagram"></a></span> <span><a href="https://ok.ru/" target="_blank" class="fa fa-odnoklassniki"></a></span> </div>
Также футер содержит текстовый блок с ссылками:
изменить который вы можете на строках 2-14.
6. Какой основной цвет сайта?
Основным цветом элементов сайта является #ff5300 и #ff6600
Если требуется сменить цветовую гамму, то воспользуйтесь заменой #ff5300 или #ff6600 на любой свой html-цвет, используя замену внутри шаблона Таблица стилей CSS. Аналогичным способом вы можете заменить другие второстепенные цвета сайта.