Сообщество строителей сайтов на Joomla + Gridbox
Gridbox 3.0 уже вышел — как безопасно обновиться
Gridbox всегда был инструментом творческой свободы. Но любая свобода строится на структуре. В Gridbox этой структурой является сетка — фундамент, на котором построена каждая страница, каждый макет и каждое дизайнерское решение.
Мы не просто обновили сетку — мы переосмыслили весь способ взаимодействия с ней. Код стал чище, управление — логичнее, а интерфейс — спокойнее и современнее.
В этой статье мы подробно рассмотрим, как изменилась сетка и связанные с ней инструменты, и почему эти улучшения делают вашу работу быстрее, удобнее и профессиональнее.
Сетка — это основа конструктора сайтов Joomla Gridbox. Она удерживает всю структуру страницы. В Gridbox 3 мы провели масштабную модернизацию сетки, приведя её к современным стандартам.
Если сравнить код текущей версии Gridbox с Gridbox 3, разница очевидна. Мы не просто уменьшили объём кода — мы применили современные подходы и перевели сетку на актуальный формат. Gridbox 3 даёт вам в руки современные технологии, позволяя работать продуктивнее, быстрее и с большим удовольствием.
Одно из самых заметных изменений в Gridbox 3 — новая модель управления сеткой. В текущих версиях Gridbox управление сеткой осуществляется через иконки шестерёнок (панели управления элементами). Секции, строки, колонки и вложенные строки имеют свои панели управления, которые иногда могут перекрываться, создавая визуальный и функциональный дискомфорт.
В Gridbox 3 мы полностью отказались от этой модели. Иконки шестерёнок с действиями, такими как копирование, редактирование и подобными, больше не используются.
Как же теперь работает управление сеткой? Модель взаимодействия с редактором была полностью переработана. Всё управление теперь основано на прямом взаимодействии:
Никаких лишних движений или перекрывающихся элементов интерфейса. Такой подход делает работу быстрее, интуитивнее и удобнее. Вы взаимодействуете с редактором так же естественно, как с любым профессиональным программным обеспечением.
Мы хотели бы ещё раз обратить ваше внимание на часто недооцениваемый инструмент Gridbox — горячие клавиши. Копирование, вставка, закрытие модальных окон, копирование стилей и многое другое теперь работают ещё более плавно и быстро.
Мы обновили цвета модели бокса. Теперь они стали мягче, элегантнее и визуально спокойнее. Новая цветовая гамма меньше напрягает глаза и не отвлекает от работы с контентом.
В текущих версиях Gridbox на мобильных устройствах отсутствуют промежутки между колонками. Это было слабым местом, и в Gridbox 3 это изменено. Теперь вы можете задавать промежуток между колонками и управлять им отдельно для каждого мобильного устройства.
В результате ваши мобильные макеты выглядят чище и предсказуемее, без необходимости в дополнительных обходных решениях.
Наша цель была сохранить предсказуемое поведение Gridbox, поэтому базовый принцип создания секций, строк и колонок остался неизменным. Ранее создание секции открывало отдельное модальное окно для выбора количества колонок с собственными кастомными стилями.
Поскольку одной из ключевых целей Gridbox 3 является унификация интерфейса, мы отказались от этого подхода. Gridbox 3 теперь использует классическое нативное модальное окно с простым и понятным выпадающим списком для выбора количества колонок.
На первый взгляд может показаться, что панель управления в Gridbox 3 почти не изменилась. Это впечатление обманчиво. На самом деле мы полностью перестроили панель управления — от структуры до кода. Мы прошлись по ней сверху донизу, строка за строкой.
Ранее для переключения макетов требовалось нажать на иконку, а затем выбрать нужный вариант. В Gridbox 3 этот процесс был упрощён. Теперь переключение между макетами выполняется с помощью одной изменяющейся иконки. Меньше кликов — меньше отвлекающих факторов. Эти небольшие оптимизации со временем значительно ускоряют работу.
Мы переработали вкладки, сделав их ещё более минималистичными. Текстовые метки были заменены на аккуратные иконки с всплывающими подсказками. Интерфейс стал чище, оставаясь при этом простым для навигации.
Ранее некоторым плагинам (например, «Текст») не хватало места в панели управления, что привело нас к добавлению специальной кнопки развёртывания. В Gridbox 3 мы полностью отказались от этого подхода. Теперь панель управления любого плагина можно изменять по размеру. Нужно больше места для настройки параметров? Легко! Просто растяните панель до нужного вам размера.
Мы систематически реорганизовали все опции. Другими словами, мы сделали их расположение максимально логичным, аккуратным и визуально сбалансированным. Всё структурировано и выровнено. Честно говоря, наши внутренние перфекционисты в восторге от результата.
Подпанель была введена для унификации дизайна и уменьшения количества несовместимых элементов интерфейса. Многие настройки теперь открываются как вложенные панели, сохраняя основной интерфейс чистым и сфокусированным.
Ранее опции были разделены на отдельные группы: «Отключить на», «Пресеты» и «Расширенные». В Gridbox 3 они объединены в единую логическую группу «Расширенные».
Возьмём, к примеру, опцию «Отключить на». Теперь при клике на эту опцию появляется подпанель, где вы можете указать, на каких устройствах вы не хотите отображать элемент.
Панель пресетов в предыдущих версиях Gridbox была оформлена иначе и следовала более ранней модели взаимодействия. Логика пресетов осталась прежней, но выбор пресета теперь осуществляется через поле ввода, открывающее подпанель. Управление пресетами в Gridbox 3 стало более логичным и интуитивным.
Ранее настройки анимации отображались в пользовательском окне с дополнительными стилями. В Gridbox 3 все настройки анимации также были перемещены в подпанель.
В целом, как вы видите, новая подпанель оказалась очень эффективной. Она позволяет нам сократить код редактора и привести модальные окна к единому стандарту Gridbox 3.
Как мы уже упоминали ранее, Gridbox 3 теперь использует нативные браузерные выпадающие списки. Поля ввода, такие как выбор цвета и выбор изображения, также были обновлены. Давайте подробнее рассмотрим эти изменения.
Выбор цвета в Gridbox 3 теперь является нативным для браузера, что значительно сократило объём кода. Цветовые переменные отображаются в подпанели в виде удобного списка, что позволяет быстрее и легче найти нужную.
В Gridbox 3 мы добавили небольшое, но полезное улучшение — превью изображений. Эта тонкая деталь помогает вам быстрее и увереннее ориентироваться в контенте.
Мы убрали модальное окно предпросмотра шрифтов. Gridbox 3 — это инструмент для профессионалов, а не витрина визуальных эффектов. В реальных проектах обычно используется ограниченное количество семейств шрифтов. Выбор шрифта — это рабочая задача, а не демонстрация.
Именно поэтому выбор шрифта теперь представлен в виде простого и понятного выпадающего списка в нативном стиле Gridbox 3.
Панель разделителей форм была радикально переработана. Ранее она выглядела перегруженной. В Gridbox 3 все разделители форм были перемещены в подпанель. Мы убрали превью.
Теперь выбор осуществляется через выпадающий список, а визуальный результат сразу виден после добавления. Интерфейс стал более компактным и чистым.
Подпанель поддерживает несколько уровней вложенности. Например, при выборе цветовой переменной для разделителя формы открывается третий уровень панели. Практично и интуитивно.
Мы снова отошли от кастомных модальных окон, чтобы сохранить единый дизайн. Настройки теней теперь также отображаются в подпанели.
Мы реорганизовали настройки наведения и привели их в соответствие с общим стилем Gridbox 3. Чтобы включить состояния, просто нажмите на иконку шестерёнки, чтобы открыть подпанель, и настройте необходимые параметры. Управление переходами состояний в Gridbox 3 стало ещё проще.
Мы полностью переработали модальное окно выбора плагинов. Мы отказались от тёмного окна, чтобы интерфейс Gridbox больше не казался несогласованным. Новое модальное окно сдержанное, просторное, отображает больше плагинов и выглядит более профессионально.
Модальные окна выбора модулей Joomla и Balbooa Forms также были обновлены и приведены в соответствие со стилем Gridbox 3 — минимализм и только необходимая информация.
То же самое относится и к модальному окну выбора Balbooa Gallery. Галерея и категория теперь выбираются через удобные браузерные выпадающие списки, которые не тратят ваше время на лишнюю прокрутку.
В этой статье мы показали, как изменилась одна из самых важных частей Gridbox. Модернизация сетки, новое управление элементами, переработанная панель управления, подпанели, обновлённые поля ввода и унифицированные модальные окна не существуют по отдельности. Они работают как единая экосистема.
Мы упростили и модернизировали код, унифицировали интерфейс, убрали ненужные модальные окна и визуальный шум и, самое главное, переосмыслили логику взаимодействия с самим редактором.
Работа с сеткой, настройками и состояниями теперь стала более прямой, предсказуемой и быстрой. Gridbox 3 фокусируется на качестве рабочего процесса.
Меньше кликов, меньше отвлекающих факторов, больше контроля и ясности на каждом этапе создания страницы.
Это расширение, которое не навязывается, а тихо поддерживает вашу работу.