Главное меню
Рассмотрим все сервисные блоки по порядку. Начнем с самого простого. А именно, осознания того, что любые элементы с данной страницы не терпят вмешательства визуального редактора. Другими словами, использовать их можно либо при использовании персонального шаблона страницы, либо открывая редактирование страницы в HTML-редакторе.

Как только мы усволи это простое правило, переходим к установке и персонализации всех сервисных блоков.

Пример вывода текстовых блоков с иконкой



Как разместить или редактировать:
Нажмите "Редактировать HTML код" и вставьте данный код.
<div class="row clr">

<div class="col-3 service_box">
<a href="#">
<i class="fa fa-paint-brush"></i>
<h6>Уникальный дизайн</h6>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus earum atque sit minus labore quaerat enim, velit magni quasi quibusdam.</span>
</a>
</div>

<div class="col-3 service_box">
. . .
</div>

<div class="col-3 service_box">
. . .
</div>

</div>
Где красным цветом выделена заменяемая часть, ссылка на страницу или сайт (#), заголовок и основной текст. Зеленым цветом выделены количество блоков на одной строке (например: col-1 - 1 блок, col-2 - 2 блока, col-3 - 3 блока и col-4 - 4 блока) и непосредственно иконка. Как заменить иконку - читайте тут.

Пример вывода блоков процесса работы с иконками



Как разместить или редактировать:
Нажмите "Редактировать HTML код" и вставьте данный код.
<ul class="service_process quan_4">
<li><a href="#"><i class="fa fa-file-text-o"></i><span>Планирование</span></a></li>
<li><a href="#"><i class="fa fa-paint-brush"></i><span>Дизайн</span></a></li>
<li><a href="#"><i class="fa fa-cog"></i><span>Разработка</span></a></li>
<li><a href="#"><i class="fa fa-life-ring"></i><span>Поддержка</span></a></li>
</ul>
Где красным цветом выделена заменяемая часть, ссылка на страницу или сайт (#) и основной текст. Зеленым цветом выделены количество блоков на одной строке (например: quan_3 - 3 блока, quan_4 - 4 блока, quan_5 - 5 блоков и quan_6 - 6 блоков) и непосредственно иконка. Если количество блоков не указано, будет установлена фиксированная ширина. Как заменить иконку - читайте тут.

Стиль оформления меняется в зависимости от их расположения. При размещении кода внутри блока с паралакс-прокруткой, его внешний вид станет таким:



Подробнее о работе с Parallax scrolling читайте тут.


Пример вывода блоков с достижениями

Довольных клиентов

Проаддно товаров

Чашек кофе

Разбитых авто

Как разместить или редактировать:
Нажмите "Редактировать HTML код" и вставьте данный код.
<div class="row rw clr">

<div class="col-4">
<div class="ccounter">
<i class="fa fa-users"></i>
<h2 class="timer count-title" id="count-number" data-to="1920" data-speed="1920"></h2>
<p class="count-text ">Довольных клиентов</p>
</div>
</div>

<div class="col-4">
...
</div>

<div class="col-4">
...
</div>

</div>
Где красным цветом выделена заменяемая часть, основной текст и параметры. Задайте data-to="1920" для установка значения и data-speed="2000" - для скорости отсчета от 0 до заданного числи (data-speed="2000" - 2 секунды). Зеленым цветом выделены количество блоков на одной строке (например: col-1 - 1 блок, col-2 - 2 блока, col-3 - 3 блока и col-4 - 4 блока) и непосредственно иконка. Как заменить иконку - читайте тут.