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

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

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

Универсальный блок это полноценный редактор для веб-дизайна внутри Salebot. Он позволяет создавать уникальный дизайн блоков или всего сайта без каких-либо ограничений.

Чтобы добавить универсальный блок на страницу кликните на кнопку "Универсальный блок" в конструкторе сайтов или кнопку + (плюс) между уже созданных блоков сайта:

Давайте подробно разберем меню настроек блока.

Первое это высота вашего блока
Масштабирование Grid-области (стандартно 12 колонок, 1200px)
Настройка фона блока
Загрузка изображение и его расположение на блоке

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

Кнопка Добавить элемент создает новый слой с выбранным элементом:

Текст
Изображение
Фигура
Кнопка
Видео
Подсказка
Галерея

Для каждого элемента открывается свое меню настроек.

После настройки элемента нажмите кнопку "Сохранить"

Также, кликнув правой кнопкой мыши по фону универсального блока, можно вызвать контекстное меню:

Также вы можете использовать сочетание клавиш (горячие клавиши) для удобства работы в универсальном блоке (например, ctrl + c или ctrl + v).

Текст

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

Изображение

Добавить изображение на страницу:

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

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

Также изображение можно добавить ссылку на изображение в поле ссылка: вставьте URL необходимого изображения и выберите, каким образом оно будет открываться: в новом окне или с переходом на новую страницу.

Фигура

Добавить фигуру в блок, по стандарту прямоугольник, в меню настроек вы можете выбрать фигуру ( прямоугольник, круг, линия)

Кнопка

Добавление кнопки на страницу. В меню настроек есть отдельный инструмент для редактирования текста и кнопки отдельно. Для работы кнопки необходимо указать ссылку куда она будет ввести пользователя при нажатии.

Видео

С помощью этого инструмента вы можете добавлять видео на свои страницы.

В универсальный блок можно добавить видео из различных ресурсов:

Для этого достаточно выбрать, где именно расположено видео (Youtube, Kinescope и пр.), а затем вставить URL в поле ссылки.

Подсказка - этот элемент поможет разместить подсказку или любой текст при нажатии или наведении на фигуру.

Не забывайте сохранять действия в меню настроек по кнопке "Сохранить"

Галерея

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

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

Как видно из примера выше, автоматически добавляются два изображения от 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) Размах тени определяет соответственно ее размер в универсальном блоке относительно самого элемента.

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

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