Новый конструктор страниц только что приземлился в пространстве WordPress, и он не похож на другие. Mosaic Builder использует классовый, дизайн-системный подход к построению сайтов WordPress, ближе к Webflow, чем к Elementor.Мы провели время с этим, следовали официальному прохождению начала, и построили сайт с нуля, чтобы увидеть, что он на самом деле делает хорошо.
Так вот наш полный обзор Mosaic Builder: что это такое, как чувствует себя редактор, и стоит ли пока доверять ему реальный проект.
Быстрая заметка перед началом: мы строим Мастер-аддоны для Elementor, так что мы живем в экосистеме Элементор каждый день, Это дает нам полезный объектив для оценки нового строителя, и мы будем отмечать везде, где наша перспектива раскрашивает вердикт.
Что такое конструктор мозаики?
Мозаика конструктор страниц WordPress и конструктор тем свернут в одно. Его высота проста: “Устал от ограничений дизайна в WordPress? Знакомьтесь, Mosaic.”
Вместо того, чтобы опускать виджеты на холст и укладывать каждый по отдельности, Mosaic строится вокруг системы дизайна Вы получаете
- А система классов с классами элементов и классами утилит, аналогично тому, как разработчики пишут CSS
- Руководства стиля это контролирует цвета и типографику на всем сайте
- Компонентымногоразовые элементы, которые вы редактируете один раз и обновляете повсюду
- Мастера и шаблоны он обрабатывает макеты уровня темы (заголовки, нижние колонтитулы, архивы, отдельные сообщения)
- Ан конструктор взаимодействия для прокрутки, наведения и щелчка анимации
- А конструктор петель для динамического контента, такого как архивы блогов и пользовательские типы сообщений
Он поставляется с тремя стартовыми темами: Гибралтар (жирный, современный), Монолит (чистый, минималистский), и Бланк для строительства с нуля. если вы использовали Webflow или Bricks Builder, эта модель будет чувствовать себя знакомым. если вы идете прямо из Elementor, ожидайте умственного сдвига.
Начало работы: мастер настройки
Инкорпорирование Mosaic лучше, чем у большинства протестированных нами плагинов. после активации четырехшаговый мастер проведет вас по настройкам, мастеру, шаблонам и страницам.
Умная часть - система снятия шкур. выберите тему, как Monolith, затем выберите цветную кожу (Cyan, Violet, Rose, Teal, и шесть других) и кожу шрифта (Neutral, Elegant, Timeless, Geometric, Modern, Futuristic).Весь демо-сайт рестайлирует мгновенно, включая светлый или темный переключатель цветового режима.
Это работает, потому что все в теме ссылается на переменные стиля вместо жестко закодированных значений Изменить цвет бренда раз и каждый кнопка, ссылка, и значок следует. Elementor имеет Global Colors, которые делают что-то подобное, но реализация Mosaic идет глубже, так как стартовые темы полностью построены на переменной системе с первого дня.
В течение нескольких минут у нас был установлен полный демо-сайт: домашняя страница, архив блога, сообщение в блоге, страница контактов с картой, страница 404 и результаты поиска, все редактируемые.
Редактор: Холст "Структура прежде всего"
Откройте страницу в Мозаика и макет узнаваем: дерево элементов слева, живой холст посередине, стиль управления справа Но философия отличается от философии Элементора.
Навигатор Mosaic показывает вашу страницу как вложенную структуру: Раздел, Контейнер, Строки, затем элементы, как заголовки, абзацы, кнопки, значки, и divs.Вы выбираете элементы из дерева так же часто, как и из холста. правая панель обнажает реальные понятия CSS: ширина с значениями min/max, положение с z-индексом, гибкие элементы управления, преобразования (перевод, масштаб, вращение), тени коробки, и переполнение.
Для разработчиков это освежает, Управление отображает один к одному с CSS вы бы написали от руки, так что ничего не чувствует скрытый или переименованный Для начинающих, это более крутой холм.Elementor позволяет вам стиль заголовок, не зная, что гибкий контейнер.Mosaic тихо предполагает, что вы делаете.
Мы оценили одну вещь: редактор оставался отзывчивым на протяжении всей нашей тестовой сборки, даже несмотря на полную загруженную демо-версию Monolith.
Классовая система: самая большая идея Mosaic
Здесь Mosaic отделяется от большинства создателей страниц WordPress. Каждый элемент может нести классы, а классы бывают двух вкусов:
- Классы элементов определите, что что-то такое: Кнопка, Карта, Нав-ссылка
- Классы полезности определите отдельные свойства, которые вы можете сложить: интервал, цвет текста, размер
Классы также гнезд. класс Кнопки темы Монолит имеет Первичный и Вторичный варианты, каждый с размерами S, M, и L. Выберите любую кнопку, поменяйте местами ее подкласс, и она мгновенно изменит стиль.Редактируйте сам Класс Первичный и каждую первичную кнопку на сайте обновляет.
Если вы когда-либо унаследовали сайт Elementor, где каждая кнопка была стилизована вручную, немного по-разному, вы понимаете проблему, которую это решает. вы перестаете полагаться на дисциплину, чтобы поддерживать последовательность стилей; структура делает это за вас.
Компромисс реален, однако. система классов требует планирования. Вам нужно подумать об именах, иерархии и повторном использовании, прежде чем строить, а это именно те накладные расходы, которые фрилансер, выбивающий сайт с пятистраничной брошюрой, может не захотеть.
Компоненты, магистры и тематическое строительство
Mosaic обрабатывает макеты всего сайта с помощью двух взаимосвязанных идей:
Мастера ваша внешняя оболочка: заголовок, нижний колонтитул и все, что охватывает каждую страницу. Отредактируйте мастера один раз, и изменение появится повсюду.
Шаблоны живите внутри мастер-классов и контролируйте области контента.Демо-версия Mosaic включает шаблоны домашней страницы, архива блога, отдельных постов, контактов, архива, 404 и результатов поиска.
При создании новой страницы в диалоговом окне задается вопрос, назначать ли новый шаблон, существующий или автоматический шаблон, который применяет изменения в каждом экземпляре.
Компоненты являются многоразовыми блоками: ценовая карта, отзыв, раздел CTA. Бросайте экземпляры куда угодно, редактируйте компонент и синхронизируйте все экземпляры.
Это настоящее тематическое здание, и оно работает без отдельной темы. Для сравнения, пользователи Elementor получают такое же освещение через Мастер-создатель тем аддонов, который добавляет пользовательские заголовки, нижние колонтитулы, архивы, одиночные шаблоны, и 404 страницы поверх редактора Elementor. конечный результат аналогичен; Mosaic просто запекает его в основной продукт, а не рассматривает как дополнительный слой.
Взаимодействия и анимации
Mosaic включает в себя конструктор взаимодействия с двумя триггерными категориями:
- Простые триггеры: прокрутите в поле зрения, наведите указатель мыши, щелкните, загрузите страницу, измените направление прокрутки
- Непрерывные триггеры: перемещение мыши и прокрутка
Прикрепите триггер к любому разделу или элементу, затем определите, что оживляет. Он охватывает основные элементы современной посадочной страницы: затухание при прокрутке, движение в стиле параллакса, состояния наведения за пределами простых цветовых замен.
Способная система, хоть и не революционная. у пользователей Elementor годами были подобные опции через эффекты движения и аддоны. только главные аддоны покрывают входная анимация, плавающие эффекты и движения на основе прокрутки, плюс дополнительные, как фон частиц. что предлагает Mosaic более плотная интеграция: взаимодействия живут в той же панели, что и все остальное, вместо того, чтобы быть разбросанными по вкладкам.
Петли и динамический контент
Конструктор циклов хорошо справился с тестом архива нашего блога Вы проектируете один элемент (изображение, категорию, название, отрывок, автор, дата), и Mosaic повторяет его для каждого поста, в комплекте с элементами управления нумерацией страниц и состоянием “no results”.
Циклы соединяются с сообщениями, страницами и пользовательскими типами сообщений и сочетаются с условиями шаблона, поэтому каждый архив, категория и результаты поиска получают правильный макет. В сочетании с логикой условной видимости вы можете показывать или скрывать контент на основе контекста, аналогично тому, что условия отображения в Элементоре.
Если вы создаете сайты с большим содержанием контента, это одна из самых сильных областей Mosaic. построение индивидуального макета блога здесь ощущалось быстрее, чем в большинстве строителей, которые мы тестировали. пользователи Elementor обычно стремятся к такому виджету, как Blog Element создайте страницу блога, что доставит и вас туда, но подход Mosaic дает более тонкий структурный контроль над каждым элементом цикла.
Мозаика Строитель Цены
Стартовое ценообразование Mosaic агрессивно, явно рассчитано на быстрое построение пользовательской базы:
| План | Цена | Сайты | Лицензия |
|---|---|---|---|
| Личный | Бесплатно в первый год, затем 39 долларов в год | 1 сайт | Ежегодный |
| Создатель | Бесплатно в первый год, затем 149 долларов в год | 10 сайтов | Ежегодный |
| Агентство | 199 долларов за всю жизнь (ранняя птица, обычная 499 долларов) | Неограниченный | Пожизненное |
Несколько деталей, которые стоит знать:
- The бесплатный первый год в планах Personal и Creator - это раннее предложение, которое продлится до конца 2026 года. Сейчас вы ничего не платите, а подписка начнется во втором году.
- Все планы включают в себя каждую функцию Pro.Уровни различаются только количеством сайтов и лимитами активации (2 в год на Personal, 15 на Creator, неограниченно на Agency).
- Постоянной бесплатной версии нет.
Свободный год с неограниченными функциями Pro примерно так же низок, как барьер для входа получает. Сделка Агентства на срок 199 долларов также имеет высокую стоимость, если продукт выживет и созреет.
Вердикт: многообещающий строитель, которому нужно время
Mosaic Builder - один из наиболее интересных строителей WordPress, которые мы видели в запуске за последние годы. Классовая система хорошо выполнена, адаптация превосходна, тематическое здание встроено, а не закреплено болтами, а цены на бесплатный первый год устраняют любые предлоги, чтобы не пробовать это.
Наша рекомендация:
- Попробуй на стадии или побочный проект, особенно если вы знаете CSS и как Webflow модель Свободный год делает это эксперимент с нулевым риском.
- Придерживайтесь Элементора если вы полагаетесь на экосистему аддонов, вам нужен свободный уровень или хотите самый безопасный путь для работы клиента. хорошо подобранный стек охватывает почти все, что обещает Mosaic сегодня, поэтому Elementor по-прежнему превосходит наш сравнение конструкторов страниц.
Мы обновим этот обзор Mosaic Builder, когда будет поставляться стабильный релиз. если система классов выдержит на реальных клиентских сайтах, у Elementor появится соперник, к которому стоит отнестись серьезно, и это давление, как правило, делает каждого строителя лучше.
Часто задаваемые вопросы
Что такое Mosaic Builder?
Мозаичный строитель - это новый конструктор страниц WordPress и конструктор тем. Он использует систему проектирования на основе классов с многоразовыми компонентами, переменными стиля, конструктором взаимодействия и динамическими циклами, используя подход, более близкий к Webflow, чем к традиционным конструкторам WordPress.
Мозаичный строитель бесплатен?
Постоянной бесплатной версии нет, но годовые планы Personal и Creator бесплатны на первый год в качестве предложения для ранних птиц до конца 2026 г. После этого планы начинаются с 39 долларов в год за один сайт, при этом пожизненная сделка с агентством составляет 199 долларов.
Могут ли новички использовать Mosaic Builder?
Новички могут им пользоваться, но кривая обучения круче, чем у Elementor.Мозаика построена вокруг концепций разработчиков вроде классов, контейнеров, флексбокса.Включенный видеокурс помогает, но нетехнические пользователи должны закладывать в бюджет реальное время обучения.
Работает ли Mosaic Builder с существующими темами WordPress?
Мозаика заменяет ваш тематический слой собственной системой Мастера и шаблоны. Он поставляется с двумя разработанными темами, Гибралтар и Монолит, плюс пустой стартер для построения полностью с нуля.
Связанное чтение: Если вы взвешиваете свои варианты, посмотрите наши обзоры лучшие темы Элементора и лучшие легкие темы WordPress для Elementorили проверить что нового в Master Addons v3.
