Визуальный редактор Gridbox работает непосредственно во фронтенде сайта по принципу WYSIWYG. Интерфейс спроектирован так, чтобы предоставить полный контроль над версткой, стилями и структурой страницы, сохраняя максимум свободного пространства для визуального контроля макета.
1. Верхняя панель управления (Admin Toolbar)
Расположена в самой верхней части экрана и содержит глобальные инструменты управления текущей страницей и сайтом:
- ■ Иконка Gridbox (левый угол): Быстрый возврат в административную панель Joomla или переключение между другими страницами и приложениями сайта.
- ■ Переключатель адаптивности (Responsive Device Icons): Иконки ПК, планшета и смартфонов. Позволяют мгновенно переключать режим отображения для настройки индивидуальных отступов и размеров под разные экраны.
- ■ Кнопки «Отмена/Повтор» (Undo/Redo): Стрелочки для быстрой отмены ошибочного действия или возврата удаленного элемента.
- ■ Инструменты сохранения (правый угол): Кнопка Save (Сохранить изменения) и индикатор статуса публикации страницы.
2. Левая панель инструментов (Sidebar)
Компактная вертикальная панель, открывающая доступ к архитектурным настройкам дизайн-системы:
- ■ Add New Element (Плюс): Библиотека всех доступных плагинов Gridbox (текст, картинки, кнопки, формы, карусели), разделенная на категории.
- ■ Theme Options (Шестеренка/Палитра): Центр управления глобальными стилями. Здесь настраивается единая цветовая палитра сайта, шрифты для всех тегов заголовков, а также кастомные CSS/JS коды проекта.
- ■ Page Settings: Управление мета-тегами (SEO), уровнем доступа и тегами конкретно открытой страницы.
В левом сайдбаре расположена иконка в виде слоев — Page Tree. Это интерактивное дерево элементов страницы. Если у вас сложный лендинг с глубокой вложенностью строк, мелкие плагины бывает трудно поймать курсором мыши. Страничное дерево показывает чистую DOM-структуру (Секция -> Строка -> Колонка -> Плагин), позволяя мгновенно находить, скрывать, переименовывать или перемещать любой скрытый узел макета.
3. Контекстные панели элементов (Context Menus)
При наведении на любой объект на странице (секцию, строку или плагин) вокруг него появляется цветная рамка с быстрыми кнопками управления:
- ■ Синяя рамка (Sections): Отвечает за глобальные блоки страницы (фоны, видео-подложки, сквозные секции).
- ■ Зеленая рамка (Rows): Управляет сеткой разметки, количеством колонок и внутренними отступами контейнера.
- ■ Черная/Серая рамка (Plugins): Управляет настройками конкретного виджета (текст, кнопка, иконка).
Каждое контекстное меню содержит 4 обязательных инструмента: Edit (иконка шестеренки — открывает детальные настройки), Copy (копировать стиль/элемент), Duplicate (клонировать элемент в один клик) и Delete (удалить в корзину).
В Gridbox реализована нативная поддержка горячих клавиш (Shortcuts). Чтобы ускорить верстку в разы, используйте стандартные комбинации: Ctrl + S для моментального сохранения, Ctrl + Z для отмены действия, а также зажимайте клавишу Alt при клике на иконку настроек любого плагина, чтобы сразу открыть режим редактирования его кастомных CSS-стилей.