Библиотека готовых блоков TBlocks

TBlocks — это бесплатная библиотека, которая доступна во всех проектах по умолчанию. В нее входят более 700 готовых блоков, собранных по единым принципам: чистая верстка, корректная адаптация под любые устройства и удобная структура для дальнейшей настройки.

Каждый блок в TBlocks — это полностью готовая секция, которую можно сразу использовать в проекте: шапки, подвали, обложки, блоки услуг, карточки, галереи, формы — всего более 30 категорий. Блоки собраны так, чтобы их можно было комбинировать между собой без конфликта стилей и легко дорабатывать под свои задачи.

Как работать с готовыми блоками

Откройте вкладку Блоки на левой панели и кликните на библиотеку TBlocks.

Выберите категорию (например, Шапки, Обложки, Преимущества) — справа будут отображаться блоки из этой категории.

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

Откроется расширенная панель просмотра блоков.

Найдите подходящий блок и добавьте его на холст одним из двух способов:

Перетащите блок мышкой в нужную область холста.

Выберите слой, в который хотите добавить блок — обычно готовые секции добавляют в корневой слой Root. Кликните по блоку — он будет добавлен в выбранный слой (последним слоем).

Последовательно добавляйте их на страницу подходящие блоки, чтобы собрать ее полную структуру.

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

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

Добавьте свой контент — замените в блоках тексты, изображения и видео.

Адаптируйте дизайн под свой проект, настроив стили элементов на странице или в UI Kit. Выберите элемент, на правой панели в разделе Источники стилей переключитесь на нужный класс и измените стили.

UI Kit в библиотеке TBlocks

В TBlocks встроен UI Kit — набор стилевых настроек, который помогает быстро привести весь проект к единому виду. Он управляет основными параметрами оформления: цветами, типографикой, кнопками и другими элементами интерфейса.

Как работать с UI Kit

Создайте новую страницу для UI Kit.

Добавьте на эту страницу блок из категории Гайдлайн библиотеки TBlocks.

В этом блоке собраны все базовые элементы интерфейса — заголовки, текстовые стили, кнопки и т.д.

Изучите элементы и их классы.

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

Например, у основной кнопки есть класс button--primary, задающий цвет фона и текста, радиус углов и внутренние отступы.

Настройте стили элемента через классы.

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

Измените стили элемента в классе — они автоматически применятся ко всем аналогичным элементам на всем сайте.

Например, если изменить цвет фона в классе button--primary, то обновится внешний вид всех основных кнопок в проекте.

Настраивайте UI-элементы последовательно.

Пройдитесь по всем элементам в UI Kit — заголовкам, текстам, кнопкам, ссылкам и т.д. Чтобы изменить стили элемента, выберите его на холсте и переключитесь на нужный класс на правой панели.

Как применять библиотеку TBlocks в работе

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

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

Вы можете создавать собственные библиотеки на базе TBlocks — адаптировать блоки под свои задачи, сохранить их как компоненты и объединить в библиотеку для команды.

Библиотеку готовых блоков очень удобно использовать для быстрого создания сайта, даже без навыков дизайна и верстки. Для этого можно использовать Режим клиента, который позволяет собирать сайты без риска нарушить их структуру и сломать верстку. Подробнее —