1. Как изменить шапку сайта?

Верхняя часть шаблона состоит из надписи названия сайта и пунктов меню, чтобы изменить ее требуется перейти в Панель управления → Дизайн → Редактор → Глобальные блоки → Верхняя часть сайта найти строку:

<a class="logo-lnk" href="$HOME_PAGE_LINK$" title="Site Home">$SITE_NAME$</a>

вместо $SITE_NAME$ пропишите нужное название Вашего сайта.

Если же вместо текста Вы хотите разместить изображение, тогда в этой же строке вместо "Мой сайт" пропишите код:

<img src="ссылка на логотип">

где "ссылка на логотип" – пропишите ссылку, которую вы можете получить, осуществляя:

1. Логотип загружается в файловый менеджер сайта (Панель управления → Инструменты.)
2. После загрузки изображения, просто кликните на название изображение и вы получите заветную ссылку.

Редактировать пункты меню Вы можете перейдя Дизайн → Конструкторе меню. В данного шаблона, изменена логика работы меню, вложенные пункты меню отображаются только при клике на пункты(но не саму ссылку пункта) которые имеют вложенность. Подобный функционал позволяет отображать меню  максимально допустимого уровня вложенности, так как вложенные меню использует слайдер для перехода в более вложенные пункты меню. 

2. Как изменить промо-блок?

Для редактирования промо-страницы нужно перейдите  в Панель управления → Дизайн → Редактор → PROMO.

Данная страница состоит из 7 так называемых блоков, изменение которых рассмотрим далее.

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

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

1).

Первый блок содержит слайдер из 3 слайдов, вам необходимо найти строки 3-34, там содержатся блоки слайдов они имеют одинаковою структуру: 

<div class="item">
<div class="left-itm">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet,no sea takimata sanctus est Lorem ipsum dolor sit amet. Stet clita kasd gubergren, Stet clita kasd gubergren, </p>
<a href="#" class="link-button">More</a>
</div>

<div class="right-itm">
<img class="first-img" src="/.s/t/1812/slide-img-1.png" alt="Image slide">
</div>
</div>

вы можете изменять структуру выше на свое усмотрение.

2) 

Второй блок состоит  из двух подблоков: блок с заголовком и блок с обычным текстом и доп. информацией, редактировать который можно на строках 35-46: 

<div class="land-block1">
<div class="wrapper flex-wrapper">
<div class="lf-side">
<h3>Lorem ipsum dolor sit amet,Stet clita kasd gubergren, sed diam voluptua.</h3>
</div>
<div class="rg-side">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehen derit in voluptate velit esse</p>
<a class="link-button" href="#">Contact</a>
<span>Or, call <a href="tel:+11234567890">+1 123 456 78 90</a></span>
</div>
</div>
</div>

3)

 

Третий блок содержит в себе структуру с заголовком и 3 карточки с изображением и текстом редактировать данный блок вы можете на строках 47-73. Карточки имеют структуру:

<li>
<img src="/.s/t/1812/download_app.png" alt="download_app">
<h4>Lorem ipsum dolor</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</li>

Где вы можете заменить, ссылки на свои изображения, добавить/изменить нужную вам информацию.

 

4)

Четвертый блок аналогичный первому блоку, содержит в себе слайдер с несколькими слайдами редактировать содержимое которого вы можете на строках 74-103.

Изменить цвет фона слайда  вы можете в таблице стилей найдя css правило:

.owl-two { background-color: #f3e7db; width: 100%; overflow: hidden; }

заменив #f3e7db на нужный Вам цвет.

5)

Пятый блок слайдер списков. Редактировать слайды вы можете на строках 103-147. Слайды имеют структуру:

<div class="item" data-hash="iPhone-price">
<ul class="price-list-device">
<li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. <span class="price-dv">100 usd</span></p></li>
<li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. <span class="price-dv">100 usd</span></p></li>
<li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. <span class="price-dv">100 usd</span></p></li>
<li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. <span class="price-dv">100 usd</span></p></li>
<li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. <span class="price-dv">100 usd</span></p></li>
<li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. <span class="price-dv">100 usd</span></p></li>
<li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. <span class="price-dv">100 usd</span></p></li>
</ul>
</div>

Чтобы добавить новый слайд с кнопкой переключателем на него, в слайда должен быть указан атрибут data-hash="якорь на ваш слайд”, после этого вы сможете  указать данную “ссылку-якорь” в кнопке управления слайдером по аналогии с стандартными кнопками:

<div class="control-button">
<a class="but-select" href="#iPhone-price">iPhone</a>
<a href="#iPad-price">iPad</a>
<a href="#Macbook-price">Macbook</a>
</div>

6)

Чтобы изменить фон данного блока в таблице стилей найдите свойство:  

.land-block5 {background-color: #f3e7db;}

вместо #f3e7db укажите нужный Вам цвет.

7)

Данный блок может быть заменен информером последних коментариев на сайте. Важно для корректной работы необходимо чтобы было разрешено комментирование к материалам.

Если Вы желаете изменить "Вид информера" перейдите в раздел "Инструменты" - "Информеры", где выберите необходимый информер и измените его шаблон, например блоком из верстки шаблона:

<div class='item'>
<p class='mess-com'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
<a href='#'>Lorem ipsum</a>
</div>

заменив стандартный текст на переменные которые доступные в шаблоне информер.

3. Как изменить фон шаблона?

Изменить фон сайта можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется найти css-правило: 

body { margin: 0; font-size: 14px; line-height: 1.5; font-family: 'Istok Web', sans-serif; color: #333333; background-color: #ffffff; }

#ffffff; – фон сайта. Его можно изменить на любой другой html-цвет.

4. Как изменить цвет  sidebar?

Правый блок не имеет каких либо особенностей. Чтобы изменить цвет блока нужно перейти в Панель управления → Дизайн → Редактор → Таблица стилей (CSS) найти сss-правило: 

#sidebar { width: 28%; float: right; padding-top: 30px; background-color: #f2f2f2; }

#f2f2f2 – это и есть цвет блока. #f2f2f2 можете заменить на любой другой цвет. 

5. Как изменить нижнюю часть сайта?

Изменить фон нижней части сайта можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). найдя css-правило:

footer.footer { background: #ebebed; }

#ebebed - цвет фона, Вы можете заменить на любой другой цвет.

Для изменения нижней части перейдите в Панель управления → Дизайн → Редактор → Глобальные блоки → Нижняя часть сайта.  

Она состоит из дополнительной информации о сайте и контактов. Для того чтобы изменить информацию о сайте перейдите к строкам 3-27 и замените информацию и ссылки на свои.

Для изменения второй части - контактной информации перейдите к строкам строки 22-48 и аналогичным образом измените контактную информацию.

6. Какой основной цвет сайта?

Основным цветом сайта является #067ab5

Если требуется сменить цветовую гамму, то воспользуйтесь заменой #067ab5 на любой свой html-цвет, используя замену внутри шаблона Таблица стилей CSS. Аналогичным способом вы можете заменить другие второстепенные цвета сайта.