Работа с модулями-разделителями в Рег.сайте

Иногда на сайте нужны небольшие элементы, которые будут визуально отделять одну часть контента от другой. Сделать это можно с помощью линий-разделителей. В этой статье мы рассмотрим модули «Разделитель», «Разделитель с иконкой» и «Разделитель с текстом».

Как добавить модуль на сайт

Настройки каждого модуля находятся в трех вкладках: «Контент», «Дизайн», «Дополнительно». Во вкладке «Дополнительно» возможности настройки одинаковы в любом модуле. Они предназначены для опытных пользователей, которые умеют работать с CSS и HTML. Также здесь можно настроить видимость элемента на разных устройствах, например, модуль будет отображаться только на компьютерной версии сайта. Как посмотреть внешний вид сайт на разных устройствах, описано в статье. При обзоре настроек каждого модуля мы не будем останавливаться на вкладке «Дополнительно», а будем говорить только о вкладках «Контент» и «Дизайн».

Модуль «Разделитель»

Модуль «Разделитель» ― это простая линия, которая поможет заполнить пространство между смысловыми единицами текста. Сделаем простую разделительную линию:

Во вкладке «Контент» в блоке «Видимость» в пункте Показывать разделитель переведите переключатель в положение ДА:

Во вкладке «Дизайн» в блоке «Линия» можно настроить:

• цвет,
• стиль (сплошной, пунктирный, точечный, двойной и т. д.),
• положение в поле модуля (сверху, снизу, по центру).

В блоке «Размеры» можно настроить толщину линии. В блоке «Отступы» точечно настраивается положение разделителя. В блоке «Границы» можно настроить рамку для модуля. В блоке «Анимация» можно указать параметры появления модуля на странице (с затемнением, отскок, слайдер и др.).

Модуль «Разделитель с иконкой»

Для примера сделаем вот такой разделитель:

Во вкладке «Контент» в блоке «Изображение и значок» можно добавить иконку из списка, а можно вставить свое изображение.

Чтобы вставить иконку из списка, в параметре Использовать иконку переведите переключатель в положение ДА. Выберите иконку:

Если вы хотите вставить свою иконку или изображение, нажмите на знак плюса и загрузите свое изображение:

В блоке «Фон» можно добавить фон модуля (однотонный, градиент, изображение, видео).

Во вкладке «Дизайн» в блоке «Изображение и значок» можно закруглить границы изображения, добавить рамку и тени. В блоке «Выравнивание» можно разместить иконку слева, справа или по центру разделительной полосы. В блоке «Цвет» настраивается цвет разделительной линии. В блоке «Стиль» можно выбрать форму линии (сплошную, пунктирную, точечную, двойную и т. д.), а также расположение линии относительно иконки (сверху, снизу, по центру).

В блоке «Размеры» можно настроить:

• размер иконки или изображения,
• толщину линии,
• разрыв между иконкой и линиями.

В блоке «Отступы» точечно настраивается положение разделителя. В блоке «Границы» можно настроить рамку для модуля. В блоке «Анимация» можно указать параметры появления модуля на странице (с затемнением, отскок, слайдер и др.).

Модуль «Разделитель с текстом»

Этот вид разделителя может быть использован не только в качестве разделителя, но и как заголовок. Создадим вот такой разделительный элемент:

Во вкладке «Контент» в блоке «Текст» вводится текст, который должен отображаться между разделительными линиями.

Во вкладке «Дизайн» в блоке «Цвет» указывается цвет разделяющей линии. В блоке «Стиль» можно выбрать форму линии (сплошную, пунктирную, точечную, двойную и т. д.), а также настроить расположение линии относительно иконки (сверху, снизу, по центру).

В блоке «Текст» настраивается положение текста относительно линий (справа, слева, по центру). В блоке «Делитель Текст».

• HTML-тег заголовка,
• шрифт,
• цвет,
• размер,
• межбуквенный интервал,
• тень.

В блоке «Размеры» можно настроить:

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