Универсальный блок
В этой статье разберемся как с помощью Универсального блока создавать сайты со своим собственным дизайном. Рассмотрим как устроен редактор блока, как добавлять и редактировать элементы
Кликнем на "Галерею" для ее добавления в блок.

Как видно из примера выше, автоматически добавляются два изображения от Salebot, однако вы можете самостоятельно загрузить необходимые для галереи изображения. В таком случае перейдите на слой с галерей (кнопка слоя слева на вашем экране либо кликните непосредственно на изображение):

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

В настройках элемента с помощью доступного функционала при необходимости можно выровнять галерею относительно левого/правого края или середины.
Позиционирование служит для настройки размера и положения слоя в блоке:

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

Для размера изображений в галерее доступны два значения: cover и contain:

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

На примере выше видно, что при включении функции "Без зацикливания" нам приходится собственноручно кликать по стрелкам, чтобы вновь перейти к первому изображению.
Также можно выбрать скорость прокрутки изображений и автоплей для автоматического перелистывания галереи.
Настройки для кнопок галереи содержат в себе функционал изменения цвета кнопок, формы (треугольника/стрелок), размера и других настроек.

Можно расположить кнопки для перелистывания внутри/снаружи, сверху/снизу изображений.
В настройках рамки и закругления настройке стиль и цвет рамки, если она необходима, ее ширину, а также скругление галереи:

Также для галереи доступен функционал настройки теней (цвет, смещение, размытие и размер):

Аккордеон
Элемент универсального блока "Аккордеон" представляет собой удобное графическое решение для сайта в виде списка текстовых заметок с выпадающими элементами:

"Аккордеон" достаточно просто внедрить в ваш сайт и настроить под собственные нужды: он может отлично вписаться под любые необходимые запросы.
Как добавить и настроить "Аккордеон"?
Чтобы добавить элемент в ваш сайт, перейдите в настройки универсального блока, где в выпадающем списке со всеми доступными элементами найдете "Аккордеон":

Далее вы увидите добавленный новый слой в универсальном блоке с выпадающим списком: вам не нужно будет заново совмещать что-либо - все необходимые настройки функционала уже сделаны за вас. Остается лишь выбрать необходимый стиль и написать нужный текст.

Чтобы применить к элементу необходимые настройки стиля, необходимо кликнуть по нему: справа появится конструктор настроек "Аккордеона" аналогично другим элементам универсального блока.
Если нажать на кнопку на элементе в виде стрелки, откроется выпадающее окошко, например, с ответом на вопрос:


Итак, чтобы ввести в элемент свой необходимый текст необходимо на созданном шаблоне два раза левой кнопкой мыши кликнуть на уже существующий:

Таким же образом можно изменить текст в выпадающем поле. Также (после нажатия на текст для его редактирования) вы можете заметить вверху экрана настройки для текста, аналогичные любому текстовому редактору:

Такое дополнительное меню для редактирования текста поможет настроить толщину шрифта, курсив, высоту и пр.
Теперь перейдем к правому меню основных настроек элемента:

Для начала настроим выравнивание и позиционирование шаблона:
Выравнивание позволяет расположить элемент относительно середины, центра и бокового края универсального блока.
Поля с названиями X и Y помогут также с точностью установить элемент в любом необходимом для вас месте в блоке.
Поля с названиями W и H отвечают за ширину и высоту элемента: можно редактировать их с помощью шкалы либо с помощью зажатой левой кнопки мыши углы самого объекта:

Следующее, что можно изменить в конструкторе элемента, - это шрифт:

Шрифтов по умолчанию для редактирования текста - несколько, однако при необходимости воспользуйтесь функцией "+ добавить свой":


В новом открывшемся окне доступны любые виды шрифтов, которые можно применить как к кириллице, так и к латинице, к тому же доступно отображения вида текста для большей наглядности.
После того как вами был выбран необходимый шрифт, также попробуйте настроить интервалы текста, его цвет или толщину букв:
Толщина букв текста регулируется с помощью данной настройки и варьируется от 100 до 800:

Для цвета текста существует обширная цветовая палитра с регулировкой прозрачности и с сохранением используемых оттенков:

Интервал можно скорректировать относительно расстояния между словами в длину (первая шкала), а также - между строк (вторая шкала):

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

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

Далее расположены кнопки быстрых команд, где можно скопировать элемент, заблокировать его или вовсе удалить; затем прописать название класса элемента и выбрать название слоя.
Чтобы добавить еще одно текстовое поле с выпадающим ответом (с изменением иконки для него) в списке элемента и применить настройки цвета, потребуется следующий блок настроек:

Подробнее рассмотрим его:
Кнопка "+ добавить" добавляет еще одно поле для текста с выпадающим списком: можно сделать любое необходимое вам количество "аккордеонов".

Фон вопросов/фон ответов: данная настройка также представлена в виде цветовой палитры, где настраивается прозрачность элемента, а также сохраняется уже примененный ранее цвет:

Hex, RGB, HSL - способы определения цвета в цветовой палитре в зависимости от их смешения,
HEX и RGB чаще используются в различных браузерах, поэтому во избежания ошибок при отображении прозрачности и иных характеристик использования палитры рекомендуем использовать именно их.
Иконку для кнопки выпадающего списка можно выбрать в виде стрелки или +, а также настроить ее цвет и размер:

Для примера мы оставили кнопку в виде стрелки, установили ей цвет и прозрачность, а также выбрали маленький размер: так наша кнопка не выбивается из общей картины самого элемента.

Далее в конструкторе элемента существуют настройки для рамки и тени элемента:
Рамка
a) В функционале имеется несколько стилей для рамки: можно выбрать сплошную линию, пунктирную или точечную:



b) Цвет рамки и ее прозрачность также доступны для настройки в виде круговой цветовой палитры следом за стилем.
c) Настройка ширины и закругления доступно в виде шкалы с числовыми значениями.
Тень
a) Цвет тени настраивается с помощью палитры (здесь же можно увидеть шкалу прозрачности).
b) Расположение тени: в данном случае нам помогут поля X и Y, где можно передать числовое значение тени, чтобы расположить ее справа или слева, а также сверху либо снизу:
Чтобы расположить тень справа, передайте в поле любое положительное число в поле X:

Чтобы расположить тень справа, передайте ей отрицательное значение в поле X:

Аналогично с полем Y: если тень нужна снизу, то введите положительное число, если сверху - отрицательное.
Если вам нужно равномерное распределение тени относительно всего элемента, то не передавайте никаких значений в поля X и Y.
c) Размытие тени определяет четкость ее границ: чем выше значение в данной шкале, тем менее видна ее граница.
d) Размах тени определяет соответственно ее размер в универсальном блоке относительно самого элемента.

Элементы в универсальном блоке можно и нужно сочетать друг с другом: так вы сможете создать свой уникальный и узнаваемый стиль сайта, а также удивлять клиентов интересными решениями дизайна вашего проекта.
Видео-инструкция:
Last updated
Was this helpful?