Модульные Блоки — Собирайте Страницы Как из Конструктора Lego
Главная страница Loomix полностью построена на базе Dynamic Zones в Strapi 5; это позволяет редакторам менять порядок секций или добавлять новые блоки без написания кода.
Что Такое Модульный Блок?
Это независимый UI-компонент с четкой схемой данных в Strapi. Его можно многократно использовать и свободно перемещать на любых страницах.
- 1. Редакторы компонуют страницы с помощью перетаскиваемых модульных блоков.
- 2. Strapi CMS сохраняет структуру Dynamic Zones в базе PostgreSQL.
- 3. Изменения вызывают вебхуки ревалидации кэша Next.js.
- 4. Next.js 16 BlockRenderer рендерит соответствующие компоненты React.
- 5. Посетители получают сверхбыстрый отклик страниц со 100/100 баллами Lighthouse.
Жизненный Цикл Блока от Strapi до Фронтенда
Выбор Вариантов Стилизации в Strapi
Для изменения оформления любого блока используйте меню Storefront Management.
- 1. 1. Редактор добавляет новый блок (напр. Рекомендуемые Товары) в Strapi.
- 2. 2. Strapi отправляет вебхук мгновенной ревалидации (On-Demand Revalidation) в Next.js.
- 3. 3. BlockRenderer в Next.js 16 моментально отображает обновленный компонент посетителям.
Каталог Готовых Блоков
Ознакомьтесь со всеми готовыми блоками с их вариантами стилей и предпросмотром.
Главный Баннер (Hero Banner)
Первое впечатление: сильные заголовки, качественные промо-фото и кнопки быстрого заказа.
- Введите главный заголовок и текст акции.
- Настройте ссылки для основной и дополнительной кнопок.
Витрина Товара (Product Showcase)
Интерактивный блок для эффектной презентации ключевого товара со всеми деталями.
- Выберите стиль макета (слайдер, сетка или 3D-карточка).
- Укажите идентификатор товара из Medusa.
Совет для Редакторов:
Визуальный Стиль (Style):
Горизонтальная Лента Товаров (Scroll Products)
Плавная карусель для горячих новинок или акционных товаров.
- Задайте скорость и направление прокрутки.
- Выберите категорию товаров для отображения.
Визуальный Стиль (Style):
Преимущества и Особенности (Features)
Подчеркните гарантии магазина ('Бесплатная доставка', 'Безопасная оплата') стильными иконками.
- Выберите один из 3 вариантов дизайна карточек.
- Задайте иконку, заголовок и описание для каждого преимущества.
- Примените фоновые цвета и границы в тон фирменного стиля.
Визуальный Стиль (Style):
Сетка Навигации по Категориям (Categories Grid)
Отображение ключевых разделов магазина в виде современных карточек или круговых фото.
- Выберите главные категории для показа на первом экране.
Визуальный Стиль (Style):
Свежие Статьи Блога (Recent Blog Posts)
Вывод последних публикаций для вовлечения пользователей и усиления SEO.
- Укажите количество статей для показа (3 или 4 статьи).
Визуальный Стиль (Style):
Следующий Шаг: Глобальные Настройки
Узнайте, как управлять цветовой палитрой, логотипами и айдентикой бренда из Strapi.