Revisão do Mosaic Builder: testamos o novo WordPress Page Builder

Um novo construtor de páginas acabou de pousar no espaço WordPress, e não se parece com os outros O Mosaic Builder adota uma abordagem baseada em classes e sistema de design para construir sites WordPress, mais perto do Webflow do que do Elementor Passamos um tempo com isso, seguimos o passo a passo oficial de começar e construímos um site do zero para ver o que ele realmente faz bem.

Então aqui está nossa revisão completa do Mosaic Builder: o que é, como o editor se sente e se você deve confiar nele com um projeto real ainda.

Nota rápida antes de começarmos: construímos Complementos Mestres para Elementor, então vivemos no ecossistema Elementor todos os dias Isso nos dá uma lente útil para julgar um novo construtor, e vamos sinalizar em qualquer lugar que nossa perspectiva colore o veredicto.

O que é o Mosaic Builder?

Mosaico um construtor de páginas e construtor de temas do WordPress está reunido em um. Seu tom é simples: “Cansado de limites de design no WordPress? Conheça Mosaic.”

Em vez de deixar cair widgets em uma tela e estilizar cada um individualmente, o Mosaic é construído em torno de um sistema de design Você obtém:

• A sistema classe com classes de elementos e classes de utilitários, semelhante à forma como os desenvolvedores escrevem CSS
• Guias estilo isso controla cores e tipografia em todo o site
• Componentes, elementos reutilizáveis que você edita uma vez e atualiza em todos os lugares
• Mestres e modelos que lidam com layouts de nível temático (cabeçalhos, rodapés, arquivos, postagens únicas)
• Um construtor interação para animações de rolagem, pairar e clicar
• A construtor loop para conteúdo dinâmico, como arquivos de blog e tipos de postagem personalizados

Ele vem com três temas iniciais: Gibraltar (negrito, moderno), Monolith (limpo, minimalista) e Blank para construir a partir de zero Se você usou o Webflow ou o Bricks Builder, esse modelo parecerá familiar Se você estiver vindo direto do Elementor, espere uma mudança mental.

Primeiros passos: o assistente de configuração

A integração do Mosaic é melhor do que a maioria dos plugins que testamos Após a ativação, um assistente de quatro etapas orienta você pelas Configurações, Mestre, Modelos e Páginas.

A parte inteligente é o sistema de skinning Escolha um tema como Monolith, depois escolha uma skin colorida (Cyan, Violet, Rose, Teal e seis outros) e uma skin de fonte (Neutro, Elegante, Atemporal, Geométrico, Moderno, Futurista).Todo o site de demonstração é reestilizado instantaneamente, incluindo uma alternância de modo de cor clara ou escura.

Isso funciona porque tudo no tema faz referência a variáveis de estilo em vez de valores codificados. Mude a cor da marca uma vez e todos os botões, links e ícones seguem Elementor tem Cores Globais que fazem algo semelhante, mas a implementação do Mosaic vai mais fundo, já que os temas iniciais são construídos inteiramente no sistema de variáveis desde o primeiro dia.

Em poucos minutos, tivemos um site de demonstração completo instalado: página inicial, arquivo do blog, postagem no blog, página de contato com um mapa, página 404 e resultados de pesquisa, todos editáveis.

O Editor: Uma Tela Estrutura-Primeira

Abra uma página no Mosaic e o layout é reconhecível: árvore de elementos à esquerda, tela ao vivo no meio, controles de estilo à direita Mas a filosofia é diferente da do Elementor.

O Navegador do Mosaic mostra sua página como uma estrutura aninhada: Seção, Contêiner, Linhas, depois elementos como títulos, parágrafos, botões, caixas de ícones e divs. Você seleciona elementos da árvore com a mesma frequência que da tela O painel direito expõe conceitos reais de CSS: largura com valores min/max, posição com índice z, controles flexíveis, transformações (traduzir, dimensionar, girar), sombras de caixa e estouro.

Para os desenvolvedores, isso é refrescante Os controles mapeiam um-para-um com o CSS que você escreveria à mão, então nada parece escondido ou renomeado Para iniciantes, é uma colina mais íngreme Elementor permite que você estilize um cabeçalho sem saber o que é um contêiner flexível Mosaic silenciosamente assume que você faz.

Uma coisa que apreciamos: o editor permaneceu responsivo durante toda a nossa compilação de teste, mesmo com a demonstração completa do Monolith carregada.

O Sistema de Classes: A Maior Ideia da Mosaic

É aqui que o Mosaic se separa da maioria dos construtores de páginas do WordPress Cada elemento pode transportar classes, e as classes vêm em dois sabores:

• Classes de elementos defina o que é algo: Botão, Cartão, Nav Link
• Classes utilitárias defina propriedades únicas que você pode empilhar: espaçamento, cor do texto, tamanho

As aulas também aninham A classe Botão do tema Monolith tem variantes Primárias e Secundárias, cada uma com tamanhos S, M e L. Selecione qualquer botão, troque sua sub-classe e ele é reestilizado instantaneamente Edite a própria classe Primária e cada botão primário no site é atualizado.

Se você já herdou um site Elementor onde cada botão foi estilizado à mão, de forma um pouco diferente, você entende o problema que isso resolve Você deixa de confiar na disciplina para manter os estilos consistentes; a estrutura faz isso por você.

O trade-off é real, embora Um sistema de classe exige planejamento Você precisa pensar em nomeação, hierarquia e reutilização antes de construir, que é exatamente o tipo de sobrecarga que um freelancer nocauteando um site de brochuras de cinco páginas pode não querer.

Componentes, Mestrados e Construção de Tema

O Mosaic lida com layouts em todo o site por meio de duas ideias conectadas:

Mestres são sua casca exterior: cabeçalho, rodapé, e qualquer coisa que envolva cada página Edite o mestre uma vez e a mudança aparece em todos os lugares.

Modelos viva dentro de masters e controle áreas de conteúdo A demonstração do Mosaic inclui modelos para a página inicial, arquivo do blog, postagens únicas, contato, arquivo, 404 e resultados de pesquisa.

Quando você cria uma nova página, uma caixa de diálogo pergunta se deve atribuir um novo modelo, um existente ou um modelo automático que aplique alterações em cada instância.

Componentes são blocos reutilizáveis: um cartão de preços, um testemunho, uma seção CTA. solte instâncias em qualquer lugar, edite o componente e todas as instâncias sincronizem.

Este é um edifício de tema real, e funciona sem um tema separado Para comparação, os usuários do Elementor obtêm a mesma cobertura através do Construtor de temas Master Addons, que adiciona cabeçalhos personalizados, rodapés, arquivos, modelos únicos e 404 páginas em cima do editor do Elementor O resultado final é semelhante; O Mosaic apenas o coloca no produto principal, em vez de tratá-lo como uma camada complementar.

Interações e Animações

Mosaic inclui um construtor de interação com duas categorias de gatilho:

• Gatilhos simples: role para a visualização, passe o mouse, clique, page load, mudança de direção de rolagem
• Gatilhos contínuos: movimento do rato e durante a rolagem

Anexe um gatilho a qualquer seção ou elemento e, em seguida, defina o que anima. Ele cobre o essencial da página de pouso moderna: fade-ins em rolagem, movimento no estilo paralaxe, estados de pairar além de simples trocas de cores.

É um sistema capaz, embora não revolucionário Os usuários do Elementor têm opções semelhantes há anos através de efeitos de movimento e addons Master Addons capas sozinhas animações de entrada, efeitos flutuantes e movimento baseado em rolagem, além de extras como fundos de partículas O que o Mosaic oferece é uma integração mais estreita: as interações vivem no mesmo painel que todo o resto, em vez de serem espalhadas pelas guias.

Loops e conteúdo dinâmico

O construtor de loop lidou bem com o teste de arquivo do nosso blog Você projeta um item (imagem, categoria, título, trecho, autor, data), e o Mosaic o repete para cada postagem, completo com controles de paginação e um estado “no results”.

Os loops se conectam a postagens, páginas e tipos de postagem personalizados e emparelham com as condições do modelo para que arquivos, categorias e resultados de pesquisa obtenham o layout certo. Combinado com a lógica de visibilidade condicional, você pode mostrar ou ocultar conteúdo com base no contexto, semelhante ao que as condições de exibição são feitas no Elementor.

Se você construir sites com conteúdo pesado, esta é uma das áreas mais fortes do Mosaic Construir um layout de blog personalizado parecia mais rápido aqui do que na maioria dos construtores que testamos Os usuários do Elementor normalmente buscam um widget como o Blog Element construir uma página de blog, o que leva você lá também, mas a abordagem da Mosaic lhe dá um controle estrutural mais fino sobre cada item do loop.

Preço do construtor de mosaico

O preço de lançamento da Mosaic é agressivo, claramente projetado para construir uma base de usuários rapidamente:

Alguns detalhes que vale a pena conhecer:

• O livre primeiro ano nos planos Pessoal e Criador há uma oferta inicial até o final de 2026. você não paga nada agora e a assinatura começa no segundo ano.
• Todos os planos incluem todos os recursos Pro. Os níveis diferem apenas na contagem de sites e nos limites de ativação (2 por ano no Personal, 15 no Creator, ilimitado na Agency).
• Não existe uma versão gratuita permanente.

Um ano livre com recursos Pro ilimitados é tão baixo quanto a barreira de entrada. O acordo vitalício da Agência de US$ 199 também tem um valor forte se o produto sobreviver e amadurecer.

Veredicto: um construtor promissor que precisa de tempo

O Mosaic Builder é um dos construtores de WordPress mais interessantes que vimos lançar em anos O sistema de classes é bem executado, a integração é excelente, a construção do tema é integrada em vez de aparafusada e o preço do primeiro ano gratuito remove qualquer desculpa para não experimentá-lo.

Nossa recomendação:

• Experimente em um projeto de encenação ou paralelo, especialmente se você conhece CSS e gosta do modelo Webflow O ano livre torna este um experimento de risco zero.
• Stick com Elementor se você confia no ecossistema de addon, precisa de um nível livre ou quer o caminho mais seguro para o trabalho do cliente Uma pilha bem escolhida cobre quase tudo o que o Mosaic promete hoje, e é por isso que o Elementor ainda supera o nosso comparação de construtor de páginas.

Atualizaremos esta revisão do Mosaic Builder quando um lançamento estável for lançado Se o sistema de classes se mantiver em sites de clientes reais, o Elementor terá um rival que vale a pena levar a sério, e essa pressão tende a tornar cada construtor melhor.

Perguntas frequentes

Leitura relacionada: Se você está avaliando suas opções, consulte nossos resumos do melhores temas Elementor e melhores temas WordPress leves para Elementor, ou verifique novidades em Master Addons v3.