Раздел Design Presets в конструкторе сайтов Gridbox для Joomla посвящен созданию и управлению пресетами визуального оформления. Пресеты дизайна позволяют централизованно настраивать и многократно применять готовые стили (шрифты, цвета, отступы, скругления, тени и анимации) к любым плагинам, колонкам, строкам и секциям, обеспечивая абсолютную визуальную согласованность всего проекта.
1. Управление пресетами дизайна (Managing Design Presets)
В Gridbox реализована централизованная панель управления всеми пресетами сайта:
- ■ Доступ к менеджеру пресетов: Открыть панель пресетов можно через глобальные настройки темы (Theme Settings ➝ Presets) или кликнув на иконку пресетов в заголовке модального окна настроек любого плагина.
- ■ Категоризация по элементам: Все пресеты четко сгруппированы по типам плагинов (Кнопки, Заголовки, Иконки, Формы, Сетки постов и т.д.), что исключает путаницу при оформлении.
- ■ Пресет по умолчанию (Default Preset): Для каждого типа плагина можно назначить пресет по умолчанию. Все вновь добавляемые на страницу элементы этого типа будут автоматически создаваться с оформлением данного пресета.
- ■ Редактирование, клонирование и удаление: В менеджере вы можете легко переименовывать существующие пресеты, дублировать их для создания вариаций или удалять устаревшие наборы стилей.
2. Создание нового пресета (Creating a New Preset)
Создать новый пресет дизайна можно прямо в процессе визуальной верстки страницы:
- 1. Откройте панель настроек нужного плагина или элемента на холсте страницы.
- 2. Настройте визуальные параметры: типографику, цветовую палитру, внутренние и внешние отступы, границы, скругления (Border Radius), тени (Box Shadow) и состояния при наведении (Hover).
- 3. В верхней части панели настроек нажмите на кнопку/иконку Presets ➝ выберите Save as Preset (Сохранить как пресет).
- 4. Введите понятное название нового пресета (например, Primary Button, Dark Card, Accent Title) и нажмите Save.
3. Назначение пресета элементам (Assigning a Preset to Elements)
Чтобы применить сохраненный стиль к любому существующему элементу на странице:
- 1. Откройте панель настроек целевого плагина или секции.
- 2. В заголовке окна нажмите на иконку Presets для открытия выпадающего списка сохраненных стилей.
- 3. Кликните по желаемому пресету — все визуальные параметры элемента обновятся мгновенно.
- 4. Глобальная синхронизация: Если в дальнейшем вы отредактируете настройки самого пресета в менеджере, все элементы на сайте, которым назначен данный пресет, автоматически обновят свой внешний вид.
4. Сводная таблица параметров и возможностей Design Presets
Полный перечень действий, опций и инструментов системы пресетов дизайна:
| Параметр / Действие | Описание и функциональное назначение | Тип / Область |
|---|---|---|
| Save as Preset | Сохранение текущей комбинации CSS-стилей элемента в именованный пресет. | Диалоговое окно / Кнопка |
| Assign Preset | Привязка сохраненного набора стилей к выбранному элементу страницы. | Выпадающий список / Клик |
| Set as Default | Назначение базового пресета по умолчанию для автоматического применения к новым элементам. | Иконка-переключатель |
| Duplicate Preset | Клонирование существующего пресета для создания альтернативного цветового или размерного варианта. | Иконка клонирования |
| Rename Preset | Изменение названия пресета в списке менеджера стилей. | Текстовое поле ввода |
| Delete Preset | Удаление пресета из системы (элементы с назначенным ранее стилем сохраняют текущий inline-вид). | Иконка корзины |
Пресеты дизайна действуют как CSS-классы на стероидах. Они исключают рутину ручной подгонки каждого блока под общую концепцию и позволяют выполнить глобальный ребрендинг сайта (смену скруглений, теней или шрифтов) буквально за 5 минут простой правкой базовых пресетов.
Начинай любой проект с создания 2–3 пресетов кнопок (Btn Primary, Btn Secondary, Btn Outline) и 2 пресетов карточек контента. Это не только ускорит сборку лендингов в несколько раз, но и гарантирует, что заказчик при самостоятельном наполнении не сломает фирменный стиль случайными цветами или нестандартными шрифтами.