Дата публикации: 29-08-2026 07:22:34

Canvas Palette — это модуль для Drupal, который добавляет в Drupal Canvas набор готовых визуальных компонентов для создания современных страниц без необходимости писать собственный код.
Модуль предназначен прежде всего для site builders, редакторов и разработчиков, которым нужен удобный визуальный способ собирать страницы из готовых элементов: секций, колонок, кнопок, изображений, видео, галерей, вкладок, аккордеонов, слайдеров и других компонентов.
Canvas Palette на Drupal.org
Live Demo
Демо Canvas Palette
Что такое Canvas Palette
Drupal Canvas предоставляет визуальный подход к созданию страниц, но сам по себе визуальный редактор нуждается в наборе качественных компонентов, из которых можно собирать реальные страницы.
Canvas Palette решает эту задачу, предоставляя готовую коллекцию Single Directory Components (SDC), совместимых с Canvas. Каждый компонент является обычным SDC-компонентом, а интерактивные элементы используют лёгкий JavaScript и остаются редактируемыми непосредственно в предварительном просмотре страницы.
Идея модуля проста:
не создавать каждый элемент страницы с нуля, а собрать страницу из готовых компонентов непосредственно в визуальном редакторе.
Это особенно удобно для лендингов, маркетинговых страниц, корпоративных сайтов, документации и редакционных проектов, где контент должен выглядеть современно и при этом соответствовать единой дизайн-системе.
Зачем нужен Canvas Palette
В обычном Drupal разработчик может создать практически любую структуру контента. Однако визуальное оформление страницы часто требует дополнительной работы: создания компонентов, CSS, JavaScript, Paragraph types или специальных шаблонов.
Canvas Palette переносит значительную часть этой работы в визуальный редактор.
Редактор может:
добавить секцию;
выбрать количество колонок;
добавить текст;
разместить изображение или видео;
создать CTA-блок;
добавить кнопки;
сделать галерею;
добавить Tabs или Accordion;
создать Carousel или Slider;
вывести существующий View;
встроить Webform.
При этом не требуется создавать отдельный Paragraph type для каждого подобного элемента.
Таким образом, Palette является своеобразным набором строительных блоков для Drupal Canvas.
Какие компоненты входят в Canvas Palette
На данный момент Palette включает компоненты для нескольких основных категорий.
Design & Layout
Основные компоненты для построения структуры страницы:
Section — универсальная секция-контейнер;
Columns — адаптивная многоколоночная структура;
Text — заголовок и форматированный текст.
Buttons & Calls to Action
Компоненты для кнопок и призывов к действию:
Basic Button — настраиваемая кнопка;
CTA — блок с изображением и до двух кнопок;
Hero — большой баннер с заголовком, изображением и кнопками;
Modal Dialog — кнопка, открывающая модальное окно;
Webform Popup — кнопка для открытия существующей Webform в popup.
Например, Basic Button позволяет настроить ссылку, цвета, цвет при наведении, форму, размер и выравнивание кнопки.
Media
Для работы с изображениями и видео:
Image;
Images;
Image Gallery;
Video;
Video Gallery.
Image Gallery может открывать изображения в GLightbox, а Video Gallery поддерживает как локальные видео, так и внешние источники вроде YouTube, Vimeo и MP4.
Interactive & Sliders
Для интерактивного контента:
Accordion;
Tabs;
Carousel;
Slider;
Sticky menu.
Tabs используют собственную реализацию переключения без jQuery. Slider работает на Splide, а Carousel — на tiny-slider.
Это позволяет создавать интерактивные элементы без необходимости подключать тяжёлые JavaScript-фреймворки.
Content & Data
Компоненты для представления контента и данных:
Quote;
Stats;
Counter;
Countdown;
Tiles;
Timeline.
Например, Counter позволяет создавать анимированные счётчики, а Timeline — вертикальную временную шкалу событий.
Интеграция с Drupal
Palette также умеет работать с существующим Drupal-контентом:
Webform — выбор и вставка существующей формы;
Views — вывод существующего View с возможностью передачи аргументов.
Это особенно важно для реальных проектов: Canvas Palette не ограничивается статическими декоративными компонентами, а может использовать существующую инфраструктуру Drupal.
Section — основа Canvas Palette
Одним из ключевых компонентов Palette является Section.
Вместо того чтобы добавлять настройки отступов, фона и границ в каждый компонент отдельно, Palette использует отдельный wrapper-компонент. Другие компоненты помещаются внутрь Section, а сама секция отвечает за внешний вид окружающего пространства.
Это позволяет, например, создать структуру:
Section → Columns → Text + Image + Button
и управлять дизайном всей секции из одного места.
Визуальная настройка отступов
Section предоставляет визуальную модель DOM Box, похожую на box model в инструментах разработчика браузера.
Можно настраивать:
margin;
padding;
border;
border radius;
отдельные значения для каждой стороны.
Такой подход значительно удобнее набора из множества полей с непонятными названиями: визуальная схема показывает, какое значение относится к какой стороне элемента.
Фон секции
Section также позволяет создавать более сложные визуальные блоки.
Можно использовать:
обычный цвет;
градиент;
фоновое изображение;
overlay поверх изображения;
фоновое видео;
настройки позиции и размера изображения;
повторение background image;
прозрачность overlay;
fallback-изображение для видео на мобильных устройствах.
Это позволяет создавать полноценные hero-секции и визуальные блоки непосредственно внутри Canvas.
Почему SDC
Canvas Palette построен вокруг Single Directory Components.
Это важная архитектурная особенность модуля.
Вместо создания большого количества специфических Paragraph types или Block types каждый элемент представлен самостоятельным SDC-компонентом.
Такой подход хорошо соответствует архитектуре современного Drupal и Canvas:
Component → настройки → визуальное редактирование → готовый результат
При этом компоненты можно использовать независимо друг от друга и комбинировать в различные композиции.
Canvas Palette и EPT / EBT
Canvas Palette вырос из идеи, которая уже использовалась в проектах Extra Paragraph Types (EPT) и Extra Block Types (EBT).
EPT предоставляет набор готовых Paragraph types, а EBT — набор готовых Drupal Block types.
Canvas Palette переносит похожую концепцию в мир визуального page builder, но использует нативные для Canvas Single Directory Components.
Получается три разных подхода к одной задаче:
EPT — готовые компоненты как Paragraphs;
EBT — готовые компоненты как Blocks;
Canvas Palette — готовые компоненты для визуального Canvas.
Это делает Palette особенно интересным вариантом для проектов, которые хотят перейти от традиционного контентного моделирования к визуальному созданию страниц.
Пример создания страницы
Представим, что нужно создать простой landing page.
С помощью Canvas Palette страницу можно собрать примерно так:
Section
├── Hero
│   ├── Заголовок
│   ├── Изображение
│   └── Button
│
Section
├── Columns
│   ├── Image
│   └── Text
│
Section
├── Stats
│   ├── Counter
│   ├── Counter
│   └── Counter
│
Section
├── Accordion
│   ├── FAQ
│   ├── FAQ
│   └── FAQ
│
Section
└── CTA
    ├── Image
    └── Buttons
При этом Section может использоваться как вокруг одного компонента, так и вокруг целой группы компонентов. Это позволяет создавать вложенные композиции и управлять дизайном на разных уровнях.
Нужен ли код?
Одна из главных целей Canvas Palette — уменьшить количество ситуаций, когда редактору или site builder приходится обращаться к коду.
Готовые компоненты можно добавлять и настраивать визуально.
Это особенно удобно для:
контент-менеджеров;
маркетологов;
редакторов;
site builders;
небольших команд без отдельного frontend-разработчика.
При этом разработчик по-прежнему контролирует архитектуру компонентов и может создавать собственные SDC-компоненты там, где стандартного набора недостаточно.
Таким образом, Palette не пытается заменить разработчика. Скорее, он позволяет разработчику заранее создать набор строительных блоков, которыми затем могут пользоваться другие участники команды.
Производительность и JavaScript
Canvas Palette не требует jQuery для своих интерактивных компонентов.
Например:
Tabs используют собственный JavaScript;
Accordion реализован без jQuery;
Slider использует Splide;
Carousel использует tiny-slider;
модальные окна используют собственную реализацию;
галереи используют GLightbox.
Это позволяет использовать современные интерактивные компоненты без необходимости строить весь frontend вокруг jQuery.
Установка Canvas Palette
Canvas Palette распространяется как обычный Drupal-модуль.
Установить его можно через Composer:
composer require 'drupal/canvas_palette:^1.0'
На странице проекта Drupal.org текущий стабильный релиз — 1.0.2, а модуль заявлен для Drupal 10.3 и Drupal 11.
После установки Palette предоставляет компоненты, которые можно использовать в Drupal Canvas.
Для каких проектов подходит Canvas Palette
Canvas Palette особенно хорошо подходит для проектов, где страницы должны создаваться быстро, но при этом необходимо сохранить контроль над визуальным стилем.
Например:
Landing pages
Можно быстро создавать hero-секции, CTA, изображения, кнопки, статистику и другие маркетинговые блоки.
Корпоративные сайты
Команда получает готовый набор компонентов, из которых можно собирать новые страницы без постоянного обращения к разработчикам.
Медиа и редакционные сайты
Tabs, Accordion, галереи, видео, цитаты, Timeline и другие компоненты позволяют создавать более сложные редакционные материалы.
Documentation
Можно комбинировать текст, изображения, таблицы контента, Accordion, Tabs и другие элементы, сохраняя единый визуальный стиль.
Design systems
Palette позволяет заранее определить набор разрешённых компонентов и тем самым уменьшить количество произвольных решений со стороны редакторов.
Canvas Palette как слой между Drupal и визуальным редактором
Одна из сильных сторон подхода Palette — разделение ответственности.
Drupal отвечает за контент, сущности, Views, Webform и другие данные.
Canvas отвечает за визуальное редактирование страницы.
Canvas Palette предоставляет готовые визуальные компоненты, связывающие эти два уровня.
В результате редактор получает визуальный интерфейс, а разработчик сохраняет контроль над компонентами и архитектурой сайта.
Это особенно важно для Drupal-проектов, где визуальная свобода должна сочетаться с контролем над структурой и дизайн-системой.
Заключение
Canvas Palette — это набор готовых SDC-компонентов для Drupal Canvas, предназначенный для визуального создания современных страниц.
Модуль объединяет привычную для Drupal концепцию переиспользуемых компонентов с визуальным page building и позволяет создавать страницы из готовых элементов без необходимости вручную разрабатывать каждый новый блок.
Главная идея Palette — дать редактору готовую палитру, а не пустой холст.
Вместо того чтобы каждый раз начинать с нуля, можно выбрать Section, добавить Columns, разместить Text, Image, Button, Gallery или другой компонент и сразу получить визуально полноценную страницу.
При этом разработчик сохраняет контроль над тем, какие компоненты доступны редакторам и как они реализованы.
Если вы используете Drupal Canvas и хотите расширить его стандартный набор компонентов, Canvas Palette может стать хорошей отправной точкой для построения полноценного визуального редактора страниц.
Полезные ссылки:
Canvas Palette на Drupal.org
Демо Canvas Palette
Документация Canvas Palette

Drupal11
Есть вопрос
Выставка модулей

Основное содержимое страницы с новостью.

composer require 'drupal/canvas_palette:^1.0'

Схожие новости