1. Как изменить левый блок меню сайта?

Левый блок шаблона состоит из надписи названия сайта, меню и иконок социальных сетей.

Название вашего сайта — текст, который будет отображаться в переменной $SITE_NAME$. Чтобы изменить его требуется перейти в Панель управления → Настройки → Общие настройки и изменить поле “Название вашего сайта” на необходимое.

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

<a href="$HOME_PAGE_LINK$"><!-- <logo> -->$SITE_NAME$<!-- </logo> --></a>

и вместо $SITE_NAME$ пропишите:

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

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

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

2) После загрузки изображения, просто кликните на название изображение и вы получите заветную ссылку.

Для указания своих ссылок к социальным сетям перейдите к строкам 18-25:

<div class="menu-soc-block 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://plus.google.com" target="_blank" class="fa fa-google-plus"></a></span>
<span><a href="https://ok.ru/" target="_blank" class="fa fa-odnoklassniki"></a></span>
</div>

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

header { background-color: #1b1a21 }

#1b1a21 – цвет фона. Его можно изменить на любой другой цвет.

2. Как изменить промо-страницу?

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

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

1)

Первый блок содержит слайдер из 3 слайдов, вам необходимо найти строки 4-18, где для каждого слайда можно изменить:

Текст:

<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
<p>At vero eos et accusam et justo duo dolores et ea rebum. 
Lorem ipsum dolor sit amet, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

Кнопку:

<a href="#" class="info-btn">More</a>

где More – можете изменить на любой свой текст, а вместо # укажите ссылку для перехода.

2)

Изменить название данного блока и содержимое (текст) можно в строке 37-52:

<h6>About us</h6>
<h3 class="title">Creative startups make classic businesses effective and profitable</h3>
<div class="text-wrap">
<p>Digital marketing’s development since the 1990s and 2000s has changed the way
brands and businesses use technology for marketing. Digital platforms are
increasingly incorporated into marketing plans and everyday life as people switch to
digital devices en masse.</p>
<p>Chief among the new methods are search engine optimization (SEO), search engine
marketing (SEM), content marketing, influencer marketing and content automation.</p>
</div>

3)

Вданном блоке находится 3 информативных блока.

Текст изменяется в строках 56-78 для блоков соответственно можно изменить:

<li>
<span class="step-number">01.</span>
<p class="step-title">Lorem ipsum<br> dolor sit amet</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac porttitor elit. Praesent at mi efficitur, laoreet nisi nec, condimentum nisi.</p>
<a class="more-link" href="#">arrow_forward</a>
</li>

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

.step-wrap { background-color: #f3fffc}

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

4)

Данный блок является информером материалов модуля "Видео". Для его корректной работы Вам необходимо в Панели Управления подключить данный модуль.

После чего здесь будут транслироваться последние материалы модуля.

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

Справа от видео информера вы можете изменить заголовок, текст и ссылку для перехода в строках 86-93:

<h6>Lorem ipsum </h6>
<h3 class="title">Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac porttitor elit. Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Fusce ac porttitor elit. Praesent at mi efficitur, laoreet
nisi nec, condimentum nisi.</p>
<a class="more-link" href="#">arrow_forward</a>

Также Вы можете удалить данный блок если не желаете использовать этот модуль. Найдите строки 8195 и удалите их.

5)

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

.achievement-wrap{background:url(/.s/t/1803/back.png) no-repeat;background-size:cover;text-align:center}

где “/.s/t/1803/back.png” ссылка на новое фоновое изображение.

Содержание блоков Вы можете изменить в строках 96-116. Конструкция каждого из блоков имеет вид:

<li>
<p class="achiv-title">502</p>
<p>Lorem ipsum</p>
</li>

6)

Данный блок содержит слайдер с 4 карточками в виде изображение/текст/ссылки к соц. сетям, строки 118-298. Каждая карточка имеет следующею структуру:

<div class="slide-c">
<figure>
<div class="img-wrapp">
<img src="/s/t/1711/team-1.png" alt="cover">
<div class="hover-block">
<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>
</div>
</div>
</div>
<figcaption>
<p class="name">Lorem ipsum</p>
<p class="position">Lorem</p>
</figcaption>
</figure>
</div>

где укажите свои ссылки на изображение, вместо /s/t/1711/team-1.png, ссылки к соц. сетям и текст.

7)

Данный блок визуально разделим на 3 части: заголовок, описания левой части блока и правой, чтобы изменить их перейдите к строке 327-384:

Заголовок измените в строках 329-330:

<h2 class="title">Lorem ipsum <span>dolor</span></h2>
<p class="after-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

Чтобы изменить левый блок перейдите к строке 332-369, каждий из подблоков имеет видимый и скрытый текст:

<div class="question">
<div class="question-part">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="answer">
<p>Donec varius magna eu lectus sollicitudin, ut fermentum nibh consequat. Proin sit amet gravida turpis, eget finibus eros. Sed cursus tellus quam</p>
</div>
</div>

где видимая часть:

<div class="question-part">

скрытая часть

<div class="answer">

Правую часть данного блока Вы можете изменить перейдя к строкам 370-383 глобального блока PROMO:

<div class="info-block">
<div class="info">
<h5>Lorem ipsum dolor</h5>
<p>Donec varius magna eu lectus sollicitudin, ut fermentum nibh consequat.</p>
<a href="#">More</a>
</div>

где замените заголовок, текст и укажите ссылку для перехода.

8)

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

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

Чтобы изменить заголовок блока, перейдите к строке 387:

<h3 class="title">Lorem ipsum dolor <span>sit amet</span></h3>

Также Вы можете удалить данный блок если не желаете использовать этот модуль. Найдите строки 385-392.

9)

Данный блок состоит из информационных карточек, изменить которые можно перейдя к строкам: 393-439.

Чтобы изменить заголовок блока, перейдите к строке 395:

<h3 class="title">Lorem ipsum dolor <span>sit amet</span></h3>

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

<div class="img-part">
<img src="/s/t/1711/new-1.png" alt="news">
</div>
<div class="text-part">
<div class="news-title">Lorem ipsum dolor sit amet</div>
<div class="news-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<a class="more" href="#">More</a>
</div>

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

Чтобы изменить цвет фона, перейдите в Панель управления → Дизайн → Редактор → Таблица стилей (CSS), после чего необходимо найдите там 8 строку:

body.tmpl_body { background-color: #f3f6fe}

#f3f6fe – является цветом фона. Вместо него можно указать свой цвет или ссылку на свое изображение, предварительно загрузив его в Файловый менеджер сайта.

4. Как изменить цвет блоков?

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

aside{width:300px;box-shadow:0 0 7px rgba(218,229,246,.84);background-color:#fff}

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

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

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

footer .footer-bottom { padding: 20px 0; background-color: #049aa7}

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

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

Основным цветом елементов сайта является #34b3b7.

Если требуется сменить цветовую гамму, то воспользуйтесь заменой #34b3b7 на любой свой html-цвет, используя замену внутри шаблона Таблица стилей CSS.