Библиотека готовых блоков TBlocks
TBlocks — это бесплатная библиотека, которая доступна во всех проектах по умолчанию. В нее входят более 700 готовых блоков, собранных по единым принципам: чистая верстка, корректная адаптация под любые устройства и удобная структура для дальнейшей настройки.
Каждый блок в TBlocks — это полностью готовая секция, которую можно сразу использовать в проекте: шапки, подвали, обложки, блоки услуг, карточки, галереи, формы — всего более 30 категорий. Блоки собраны так, чтобы их можно было комбинировать между собой без конфликта стилей и легко дорабатывать под свои задачи.
Как работать с готовыми блоками
- Откройте вкладку Блоки на левой панели и кликните на библиотеку TBlocks.
- Выберите категорию (например, Шапки, Обложки, Преимущества) — справа будут отображаться блоки из этой категории.
Для удобства просмотра можно развернуть список блоков, нажав на стрелку вправо.
Откроется расширенная панель просмотра блоков.
- Найдите подходящий блок и добавьте его на холст одним из двух способов:
- Перетащите блок мышкой в нужную область холста.
- Выберите слой, в который хотите добавить блок — обычно готовые секции добавляют в корневой слой Root. Кликните по блоку — он будет добавлен в выбранный слой (последним слоем).
- Последовательно добавляйте их на страницу подходящие блоки, чтобы собрать ее полную структуру.
Важно: Перед добавлением следующего блока убедитесь, что выбран нужный слой (например, Root). Если оставить выделенным предыдущий блок, новый блок добавится внутрь него, а не на уровень страницы.
- Расположите блоки в нужном порядке, перемещая их прямо на холсте. Для перемещения удобно использовать синие стрелки в правом верхнем углу блока.
- При необходимости измените структуру блоков, добавив дополнительные элементы или удалив лишние. Для этого переключитесь на вкладку Элементы и перетащите нужный элемент на холст.
- Добавьте свой контент — замените в блоках тексты, изображения и видео.
- Адаптируйте дизайн под свой проект, настроив стили элементов на странице или в UI Kit. Выберите элемент, на правой панели в разделе Источники стилей переключитесь на нужный класс и измените стили.
UI Kit в библиотеке TBlocks
В TBlocks встроен UI Kit — набор стилевых настроек, который помогает быстро привести весь проект к единому виду. Он управляет основными параметрами оформления: цветами, типографикой, кнопками и другими элементами интерфейса.
Как работать с UI Kit
- Создайте новую страницу для UI Kit.
- Добавьте на эту страницу блок из категории Гайдлайн библиотеки TBlocks.
В этом блоке собраны все базовые элементы интерфейса — заголовки, текстовые стили, кнопки и т.д.
- Изучите элементы и их классы.
У каждого элемента есть один или несколько классов, в которых заданы стили — цвета, размеры, отступы, границы, скругления и т.п.
Например, у основной кнопки есть класс button--primary, задающий цвет фона и текста, радиус углов и внутренние отступы.
- Настройте стили элемента через классы.
Выберите элемент, на правой панели в разделе Источники стилей переключитесь на нужный класс.
Измените стили элемента в классе — они автоматически применятся ко всем аналогичным элементам на всем сайте.
Например, если изменить цвет фона в классе button--primary, то обновится внешний вид всех основных кнопок в проекте.
- Настраивайте UI-элементы последовательно.
Пройдитесь по всем элементам в UI Kit — заголовкам, текстам, кнопкам, ссылкам и т.д. Чтобы изменить стили элемента, выберите его на холсте и переключитесь на нужный класс на правой панели.
Важно: Работайте именно с классами. Если изменить локальные стили элемента (без выбора класса), правка затронет только один конкретный элемент и не применится к другим.
UI Kit позволяет быстро адаптировать все готовые блоки под бренд, поддерживать единый визуальный стиль и избавляет от ручных правок отдельных элементов на каждой странице сайта.
Как применять библиотеку TBlocks в работе
- Вы можете быстро собирать страницы для прототипов, используя готовые блоки.
- Вы можете использовать блоки как основу для коммерческих проектов и дорабатывать их под нужды клиента.
- Вы можете создавать собственные библиотеки на базе TBlocks — адаптировать блоки под свои задачи, сохранить их как компоненты и объединить в библиотеку для команды.
Библиотеку готовых блоков очень удобно использовать для быстрого создания сайта, даже без навыков дизайна и верстки. Для этого можно использовать Режим клиента, который позволяет собирать сайты без риска нарушить их структуру и сломать верстку. Подробнее — Работа с готовыми блоками в Режиме клиента.