Универсальный блок

Кликнем на "Галерею" для ее добавления в блок.

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

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

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

Позиционирование служит для настройки размера и положения слоя в блоке:

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

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

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

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

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

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

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

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

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

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

Аккордеон

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

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

Как добавить и настроить "Аккордеон"?

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

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

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

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

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

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

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

Теперь перейдем к правому меню основных настроек элемента:

Для начала настроим выравнивание и позиционирование шаблона:

1. Выравнивание позволяет расположить элемент относительно середины, центра и бокового края универсального блока.

2. Поля с названиями X и Y помогут также с точностью установить элемент в любом необходимом для вас месте в блоке.

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

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

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

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

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

1. Толщина букв текста регулируется с помощью данной настройки и варьируется от 100 до 800:

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

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

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

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

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

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

Подробнее рассмотрим его:

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

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

Иконку для кнопки выпадающего списка можно выбрать в виде стрелки или +, а также настроить ее цвет и размер:

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

Далее в конструкторе элемента существуют настройки для рамки и тени элемента:

1. Рамка

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

b) Цвет рамки и ее прозрачность также доступны для настройки в виде круговой цветовой палитры следом за стилем.

c) Настройка ширины и закругления доступно в виде шкалы с числовыми значениями.

1. Тень

a) Цвет тени настраивается с помощью палитры (здесь же можно увидеть шкалу прозрачности).

b) Расположение тени: в данном случае нам помогут поля X и Y, где можно передать числовое значение тени, чтобы расположить ее справа или слева, а также сверху либо снизу:

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

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

Аналогично с полем Y: если тень нужна снизу, то введите положительное число, если сверху - отрицательное.

Если вам нужно равномерное распределение тени относительно всего элемента, то не передавайте никаких значений в поля X и Y.

c) Размытие тени определяет четкость ее границ: чем выше значение в данной шкале, тем менее видна ее граница.

d) Размах тени определяет соответственно ее размер в универсальном блоке относительно самого элемента.

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

Видео-инструкция: