Задать вопрос

Стандартный вариант блоков

Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.

Заголовок

Классический текст Lorem Ipsum, используемый с XVI века.

Заголовок

Классический текст Lorem Ipsum, используемый с XVI века.

Заголовок

Классический текст Lorem Ipsum, используемый с XVI века.

Заголовок

Классический текст Lorem Ipsum, используемый с XVI века.

Заголовок

Классический текст Lorem Ipsum, используемый с XVI века.

Заголовок

Классический текст Lorem Ipsum, используемый с XVI века.

Вариант с фоном цветовой схемы

Возможно использовать до шести плиток.

  • Заголовок

    Классический текст Lorem Ipsum, используемый с XVI века.

  • Заголовок

    Классический текст Lorem Ipsum, используемый с XVI века.

  • Заголовок

    Классический текст Lorem Ipsum, используемый с XVI века.

  • Заголовок

    Классический текст Lorem Ipsum, используемый с XVI века.

  • Заголовок

    Классический текст Lorem Ipsum, используемый с XVI века.

  • Заголовок

    Классический текст Lorem Ipsum, используемый с XVI века.

Вариант с «каруселью»

Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.

Код блока «Плитки» (первый вариант)

<!-- В качестве иллюстраций можно использовать Fontawesome иконки или стандартные изображения <img src="ссылка на изображение"> -->
<section class="bg-blue why-people-chose-us">
    <div class="container">
        <div class="heading text-center">
            <h2>Стандартный вариант блоков</h2>
            <p>Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
        </div>
        <div class="text-center">
            <div class="row">
                <div class="col-md-4">
                    <div class="service-box three">
                        <i class="fa fa-rocket"></i>
                        <h4>Заголовок</h4>
                        <p>Классический текст Lorem Ipsum, используемый с XVI века.</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="service-box three">
                        <i class="fa fa-server"></i>
                        <h4>Заголовок</h4>
                        <p>Классический текст Lorem Ipsum, используемый с XVI века.</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="service-box three">
                        <i class="fa fa-linux"></i>
                        <h4>Заголовок</h4>
                        <p>Классический текст Lorem Ipsum, используемый с XVI века.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Код блока «Плитки» (второй вариант)

<section>
    <div class="container">
        <div class="heading text-center">
            <h2>Вариант с фоном цветовой схемы</h2>
            <p>Возможно использовать до шести плиток.</p>
        </div>
        <div class="height-50"></div>
        <ul class="highlighted-sec clearfix">
            <li>
                <div class="text-box">
                    <i class="fa fa-vk white"></i>
                    <h4>Заголовок</h4>
                    <p>Классический текст Lorem Ipsum, используемый с XVI века.</p>
                </div>
            </li>
            <li>
                <div class="text-box">
                    <i class="fa fa-facebook white"></i>
                    <h4>Заголовок</h4>
                    <p>Классический текст Lorem Ipsum, используемый с XVI века.</p>
                </div>
            </li>
            <li>
                <div class="text-box">
                    <i class="fa fa-twitter white"></i>
                    <h4>Заголовок</h4>
                    <p>Классический текст Lorem Ipsum, используемый с XVI века.</p>
                </div>
            </li>
        </ul>
    </div>
</section>

Код блока «Плитки» (третий вариант)

<section class="bg-blue">
    <div class="container">
        <div class="heading text-center">
            <h2>Вариант с «каруселью»</h2>
            <p>Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
        </div>
        <div class="height-50"></div>
        <div class="services text-center margin-0">
            <div class="three-items-carousel owl-carousel">
                <div class="service-box">
                    <i class="fa fa-vk"></i>
                    <h4>Заголовок</h4>
                    <p>Классический текст Lorem Ipsum, используемый с XVI века.</p>
                </div>
                <div class="service-box">
                    <i class="fa fa-facebook"></i>
                    <h4>Заголовок</h4>
                    <p>Классический текст Lorem Ipsum, используемый с XVI века.</p>
                </div>
                <div class="service-box">
                    <i class="fa fa-twitter"></i>
                    <h4>Заголовок</h4>
                    <p>Классический текст Lorem Ipsum, используемый с XVI века.</p>
                </div>
            </div>
        </div>
    </div>
</section>

Первоначальная настройка

Перейдите в приложение СайтБлокисоздайте новый блок . В поле ID введите например: «home.block», добавьте описание (необязательно) и вставьте полученный код в поле для ввода. Отредактируйте блок по своему усмотрению и сохраните его.

После создания блока появится пункт «Встроить на страницу или в шаблон:». Скопируйте код и вставьте его на страницу.

Важно! При вставке кода на страницу редактор должен быть в режиме HTML. Не забудьте что для кастомных страниц, должен быть указан дополнительный параметр страницы custom=1