Criar um site WordPress não precisa ser algo assustador, mesmo que você seja iniciante. Com as ferramentas e a orientação certas, você pode ter um site elegante e totalmente funcional instalado e funcionando rapidamente.

Este guia mostra a você como criar um site WordPress usando o Bricks Builder, um poderoso construtor de temas que oferece amplos recursos de personalização sem escrever uma única linha de código.

Introdução do Bricks Builder

O Bricks Builder é um construtor de sites visual que permite aos usuários criar sites responsivos e personalizados diretamente no ambiente WordPress. Foi projetado para aprimorar a experiência do usuário, pois se integra perfeitamente ao WordPress, permitindo que desenvolvedores iniciantes e experientes criem sites visualmente por meio de uma interface drag and drop.

Ao contrário do Elementor e de outros construtores de sites, o Bricks é um tema, não um plugin. Praticamente incorpora todos os recursos, enquanto outros construtores de sites usam plugins adicionais.

Ele apresenta uma experiência de edição de frontend em tempo real, o que significa que você pode ver suas alterações em tempo real à medida que ajusta elementos de design e layouts.

Interface de edição de frontend em tempo real do Bricks.
Interface de edição de frontend em tempo real do Bricks.

Ele oferece um kit de ferramentas abrangente que inclui templates predefinidos, uma vasta gama de elementos de design e opções avançadas de personalização para um desenvolvimento web mais detalhado.

Além disso, o Bricks Builder oferece suporte a dados dinâmicos, permitindo que os usuários criem sites orientados por dados com facilidade e integrem conteúdo dinamicamente em seus templates.

Benefícios do uso do Bricks para WordPress

O Bricks Builder se destaca por seu desempenho e flexibilidade. É uma alternativa mais nova e robusta a outros construtores, oferecendo:

  • Velocidade — O Bricks é incrivelmente rápido e leve.
  • Facilidade de uso — Sua interface é intuitiva, o que facilita para iniciantes e profissionais.
  • Personalização Oferece ampla capacidade de personalização por meio de CSS e JavaScript personalizados e é compatível com uma ampla gama de plugins de WordPress.

Como começar a usar o Bricks

O Bricks é um tema premium que requer uma assinatura paga. Para usá-lo, você precisa adquirir um de seus planos. Após efetuar o pagamento, você pode fazer o download de um arquivo zip em seu painel que pode ser carregado em seu site WordPress, juntamente com uma chave de licença que ativa o Bricks em sua instalação WordPress.

No painel de controle do Bricks, você pode fazer o download do tema Bricks.
No painel de controle do Bricks, você pode fazer o download do tema Bricks.

Após instalar o tema Bricks, você verá um novo item de menu Bricks em seu painel WordPress.

Para ativar sua licença, vá para o painel, clique em Activate license, insira a chave de licença de sua conta no Bricks e clique em Activate. Isso ativará a funcionalidade completa do tema Bricks.

Configure a licença do tema Bricks para ativar o tema.
Configure a licença do tema Bricks para ativar o tema.

Se você quiser experimentar o Bricks antes de se comprometer com a compra, poderá configurar uma conta de avaliação em try.bricksbuilder.io. Essa plataforma fornece acesso a um site WordPress pré-configurado com o Bricks instalado, permitindo que você explore seus recursos e capacidades sem nenhum custo inicial.

Interface de boas-vindas do Bricks no painel WordPress.
Interface de boas-vindas do Bricks no painel WordPress.

Como iniciar o construtor de páginas Bricks

Para projetar uma nova página com o construtor de páginas Bricks, navegue até Pages > Add New ou clique em uma página existente. Você pode iniciar o editor do Bricks clicando em Edit with Bricks.

Você pode iniciar o construtor de páginas Bricks clicando em Edit with Bricks.
Você pode iniciar o construtor de páginas Bricks clicando em Edit with Bricks.

Agora você pode arrastar elementos do painel Elements para projetar sua página.

Entendendo a interface do Bricks

A interface do Bricks oferece uma integração perfeita com o ambiente WordPress.

Etiquetas na interface do Bricks mostrando o que cada seção representa.
Etiquetas na interface do Bricks mostrando o que cada seção representa.

Aqui você encontra um detalhamento da sua interface principal:

  • Área de trabalho do construtor — A principal área do Bricks é a área de trabalho do construtor, que é uma representação visual do seu site. Aqui você pode interagir diretamente com suas páginas, arrastando elementos para suas posições, redimensionando e reorganizando componentes.
  • Barra de ferramentas — Na parte superior do espaço de trabalho, a barra de ferramentas fornece acesso rápido a funcionalidades essenciais, como salvar o trabalho, visualizar o site e acessar o menu de configurações e os controles responsivos.
  • Painel Elements — No lado esquerdo da interface, o painel de elementos é a sua caixa de ferramentas. Contém todos os blocos de construção que você pode usar em seu site, como caixas de texto, imagens, botões e muito mais. Você pode arrastar esses elementos diretamente do painel para a sua página.
  • Visualização da estrutura — Geralmente localizada ao lado ou como um botão de alternância no painel de elementos, a visualização da estrutura fornece um esboço hierárquico da sua página. Essa visualização é particularmente útil para entender o layout e a profundidade dos elementos da sua página, permitindo que você selecione e edite itens aninhados com facilidade.

Usando fontes personalizadas no Bricks

O Bricks oferece o interessante recurso de permitir que você faça upload de fontes personalizadas para o seu site WordPress. Para isso, acesse Bricks > Custom Fonts.

Usando fontes personalizadas no Bricks.
Usando fontes personalizadas no Bricks.

Essa seção permite que você carregue seus arquivos de fonte em vários formatos, incluindo WOFF2, WOFF ou TTF. Você também pode carregar diferentes variações de fontes, como fina, semi-negrito, normal e negrito.

Para adicionar uma fonte personalizada, clique em Add New. Em seguida, digite um nome para a fonte no campo Add title. Em seguida, selecione a variante da fonte que você deseja carregar, escolha o estilo da fonte e clique em Edit.

Adicione detalhes da fonte e carregue diferentes variações de fonte.
Adicione detalhes da fonte e carregue diferentes variações de fonte.

Será exibido um menu suspenso com campos para você carregar o arquivo da fonte. Selecione o arquivo da fonte e faça o upload. Você pode repetir esse processo clicando em Add a font variant para o maior número possível de variantes. Por fim, clique em Publish.

Página de fontes personalizadas do Bricks.
Página de fontes personalizadas do Bricks.

Para aplicar sua fonte personalizada recém-carregada ao texto em seu site WordPress, siga estas etapas:

  1. Vá para a página em que você deseja usar a nova fonte e clique em Edit with Bricks.
  2. Clique no texto que você deseja alterar.
  3. As informações sobre o texto selecionado serão exibidas no painel esquerdo. Clique em STYLE.
  4. Expanda o menu suspenso TYPOGRAPHY para exibir mais opções.
  5. No campo Font family, procure as fontes disponíveis, incluindo as fontes do Google e seus uploads personalizados.
  6. Selecione sua fonte personalizada na lista para atualizar seu texto imediatamente.

Agora, seu texto será exibido usando sua fonte personalizada, dando à sua página um toque pessoal.

Use fontes personalizadas na interface do Bricks.
Use fontes personalizadas na interface do Bricks.

Usando templates no Bricks

Os templates são um recurso fundamental do Bricks e vêm em vários tipos, incluindo cabeçalhos, rodapés e layouts de publicações de blog. Esses templates podem variar de uma única seção, como o cabeçalho de um site ou uma seção de herói, até o conteúdo de página inteira, como layouts de publicação de blog, páginas de arquivo, resultados de pesquisa e páginas de erro.

Criando um template

Para criar um template:

  1. Navegue até Bricks > Templates em seu painel.
  2. Opte por adicionar um novo template ou importar um existente.
  3. Clique em Add New, selecione o tipo de template, e escolha Edit with Bricks.

    Criando um novo template para o seu Bricks Builder.
    Criando um novo template para o seu Bricks Builder.

Aplicação de templates

Para aplicar um template a uma página:

  1. Navegue até a página em que você deseja usar o template.
  2. Clique no ícone Templates (uma pasta) na barra de ferramentas do construtor para abrir a seção de templates.

    Aplicação de templates a páginas do Bricks.
    Aplicação de templates a páginas do Bricks.

  3. Aqui você pode acessar os templates que criou e os templates da comunidade.
  4. Selecione o template desejado e visualize-o.

    Armazenamento de templates do Bricks — contém templates comunitários, locais e remotos.
    Armazenamento de templates do Bricks — contém templates comunitários, locais e remotos.

  5. Você pode finalmente clicar em Insert para aplicá-lo.

    Você pode escolher e usar um template de comunidade selecionado.
    Você pode escolher e usar um template de comunidade selecionado.

Templates remotos

Os templates do Bricks oferecem recursos exclusivos não encontrados em outros construtores de sites. Os templates remotos significam templates criados e usados em outros sites que você deseja usar em seu site.

Para permitir que outros sites usem seus templates do Bricks, vá para Bricks > Settings > Templates no painel WordPress e ative a caixa de seleção My Templates Access.

Use Whitelist URLs e Password Protection para restringir o acesso aos templates a pessoas que saibam a senha correta.

Permita que outros sites usem seus templates do Bricks como templates remotos.
Permita que outros sites usem seus templates do Bricks como templates remotos.

Para usar templates de outros sites, vá para Bricks > Settings > Templates, role até a seção Remote templates e cole a URL do site do Bricks do qual você deseja recuperar os templates no campo URL.

Use templates remotos de outros sites.
Use templates remotos de outros sites.

Se você definir uma senha, deve certificar-se de escrevê-la em Password. Então clique em Save Settings.

Para usar esses templates, navegue até o construtor de páginas e clique em Templates como antes; uma nova seção Remote templates aparecerá com todos os templates do site remoto.

Usando dados dinâmicos no Bricks

O Bricks permite que você incorpore dados dinâmicos em seus templates e páginas, tornando-o uma ferramenta versátil para a criação de sites dinâmicos.

Você pode incluir vários elementos dinâmicos, como imagens em destaque, títulos de publicações, datas de publicação, nomes de autores, categorias, tags, títulos de sites e todos os seus campos personalizados.

Os dados dinâmicos são particularmente úteis quando você cria templates específicos no Bricks, como o template de publicação do seu blog ou templates para tipos personalizados de publicações, como uma listagem de propriedade única.

Para adicionar dados dinâmicos, comece a digitar { na tela ou clique no ícone bolt ao lado da maioria dos campos no painel de configurações.

Veja como criar um template de artigo único usando dados dinâmicos com o Bricks:

  1. Navegue até Bricks > Template para criar um novo template. Atribua um título ao template, defina seu tipo como Single e, em seguida, clique em Publish ou Save as draft (Salvar como rascunho).
  2. Clique em Edit with Bricks para começar a configurar seu template para usar dados dinâmicos.
  3. Crie o estilo de página conforme desejar. Normalmente, você desejará que elementos como o título da publicação, a imagem de destaque, a data de publicação, o nome do autor e o conteúdo da publicação sejam todos definidos para ser exibidos dinamicamente.
  4. Em uma tela em branco, adicione um título e conteúdo inserindo {post_title} em um elemento Heading e {post_content} em um elemento Basic text.

    Usando dados dinâmicos no Bricks.
    Usando dados dinâmicos no Bricks.

Para definir esse template como padrão para todas as publicações:

  1. Clique no ícone de configurações na barra de ferramentas, vá para Template Settings > Conditions e clique no botão + ADD CONDITION.
  2. Selecione Post type e especifique Posts.

    Defina o template como padrão para todas as publicações.
    Defina o template como padrão para todas as publicações.

  3. Certifique-se de salvar e atualizar a página de template no WordPress. Em seguida, navegue até a página Posts para ver cada publicação formatada com o novo template sem estilo adicional.

    O template é usado para todas as publicações.
    O template é usado para todas as publicações.

Para simplificar a definição do estilo desse template, adicione uma publicação padrão para usar como referência para os elementos dinâmicos:

  1. Clique no ícone de configurações na barra de ferramentas e vá para Template Settings > POPULATE CONTENT.
  2. Escolha Single post/page como o tipo de conteúdo e selecione uma publicação específica como o conteúdo do template. Se não aparecer nenhum, certifique-se de procurar um e, em seguida, clique em APPLY PREVIEW.

    Adicione a publicação padrão para ser usada como referência para os elementos dinâmicos.
    Adicione a publicação padrão para ser usada como referência para os elementos dinâmicos.

  3. Agora você pode exibir facilmente elementos como o título e o conteúdo da publicação usando o template de publicação selecionado.

    A publicação padrão selecionada é exibida quando você personaliza a página com dados dinâmicos.
    A publicação padrão selecionada é exibida quando você personaliza a página com dados dinâmicos.

Além disso, o Bricks suporta o uso de conteúdo de campos personalizados avançados (ACF), habilitando você a criar páginas detalhadas e personalizadas.

Manuseando envios de formulários com o Bricks

O recurso de envio de formulário foi introduzido no Bricks 1.9.2 para permitir que você capture os envios de formulários. Isso permite que você crie uma tabela personalizada chamada bricks_form_submissions em seu banco de dados (mais o prefixo do seu banco de dados WP).

Você pode ativar a nova configuração Save form submissions in database (Salvar envios de formulários no banco de dados) em Bricks > Settings > General > Miscellaneous.

Manuseio de envios de formulários com o Bricks.
Manuseio de envios de formulários com o Bricks.

Em seguida, clique em Save Settings. Você verá a aba Form Submissions (Bricks > Form Submissions), que contém as suas várias tabelas de envio de formulários.

Coletando os envios de formulários

Coletar os envios de formulários no Bricks não requer um plugin adicional. Você só precisa usar o elemento Form para criar um formulário e definir os campos corretamente.

Elemento Add Form na página do Bricks.
Elemento Add Form na página do Bricks.

No painel de configurações, clique em Actions e selecione a ação Save Submission.

Defina a ação de salvar envio no elemento Form do Bricks.
Defina a ação de salvar envio no elemento Form do Bricks.

Em seguida, clique nas configurações de Save Submission para dar ao formulário um nome descritivo. Esse nome será usado para acessar os dados do formulário.

Defina um nome descritivo de formulário para a página de envio de formulário.
Defina um nome descritivo de formulário para a página de envio de formulário.

Agora, quando você salvar e abrir a página, poderá preencher o formulário e, em seguida, navegar de volta para Bricks > Form submission para ver os dados do formulário.

A página de envio de formulário do Bricks para acessar todos os formulários e seus dados.
A página de envio de formulário do Bricks para acessar todos os formulários e seus dados.

Você também pode fazer download de um arquivo CSV dos vários envios de formulários. Na seção Bricks > Settings > General > Miscellaneous onde você configurou esse recurso é possível redefinir ou excluir a tabela do banco de dados.

Redefina ou exclua a tabela do banco de dados de formulário.
Redefina ou exclua a tabela do banco de dados de formulário.

Usando o WooCommerce com o Bricks

O WooCommerce é um plugin gratuito que aprimora seu site WordPress com recursos de eCommerce. É reconhecido mundialmente como a principal solução de código aberto para configurar e gerenciar uma loja on-line.

O Bricks se integra perfeitamente ao WooCommerce, fornecendo um construtor de temas robusto para a criação de toda a sua loja, desde a página principal até as páginas de produtos individuais, arquivos de produtos, carrinhos, checkouts e páginas de conta.

O Bricks oferece elementos e templates elaborados especialmente para o WooCommerce, permitindo que você crie o layout da sua loja.

Elementos de produtos do Bricks para sites de WooCommerce.
Elementos de produtos do Bricks para sites de WooCommerce.

Para começar a usar o construtor de WooCommerce no Bricks, instale e ative o plugin WooCommerce. Depois de ativado, você pode usar o Bricks para projetar e personalizar visualmente vários templates de WooCommerce, de forma semelhante a como você gerenciaria layouts de artigo único.

Para criar uma página de loja simples:

  1. Navegue até Pages e selecione a página Shop.
  2. Clique em Edit with Bricks. O painel Elements contém vários elementos de produto. Eles permitem que você exiba produtos, títulos, descrições, preços e mais, facilitando a criação dinâmica de templates.
    Usando o WooCommerce com o Bricks Builder.
    Usando o WooCommerce com o Bricks Builder.

    Usando esses elementos, você pode organizar e estilizar sua página como desejar.

Assim como na criação de um template de artigo único, você pode criar um template de produto único e definir suas condições para trabalhar com todos os produtos.

Loops de consulta no Bricks

O construtor Query Loop permite que você consulte seu banco de dados de acordo com seus parâmetros de consulta e renderiza os resultados da consulta que deseja mostrar dentro do loop. Pode ser usado em elementos de layout como Container, Accordion e Slider.

Você pode consultar tipos de publicações, termos de taxonomia e usuários. Por exemplo, você pode consultar uma lista de autores de blogs, membros da comunidade e membros da equipe.

Para usar o loop de consulta, adicione um elemento Container à tela. Ative a configuração Use Query Loop para transformar seu contêiner em um item de loop.

Depois de ativar a configuração Use Query Loop, você verá um controle de consulta (ícone de infinito). Clique no ícone para abrir o controle de consulta e defina os parâmetros de consulta para recuperar o conteúdo do seu banco de dados.

Usando Query Loops no elemento Container do Bricks para publicações.
Usando Query Loops no elemento Container do Bricks para publicações.

O contêiner agora serve como item repetidor. Todos os elementos dentro desse contêiner são repetidos sempre que houver resultados de consulta. Este guia acadêmico explica como isso funciona.

Preços do Bricks

O Bricks não tem um plano gratuito. Eles só criam uma conta para permitir que você experimente o tema, mas você não pode usá-lo em seu site a menos que pague.

O Bricks oferece planos básicos e um plano vitalício. O plano vitalício oferece privilégios ilimitados, mas você decide o que deseja.

Eles oferecem a conveniência de ter quase tudo o que você precisa dentro da plataforma, contribuindo para um fluxo de trabalho contínuo e eficiente, tornando-o um investimento que vale a pena para aqueles que buscam uma solução de web design robusta e versátil.

Estrutura de preços do Bricks Builder.
Estrutura de preços do Bricks Builder.

Avaliação do Bricks: Vale a pena tentar?

Uma possível desvantagem é que o Bricks não oferece uma versão gratuita, ao contrário do Elementor. No entanto, o Bricks Builder vem ganhando atenção no setor com sua combinação de simplicidade e recursos poderosos.

Uma pesquisa de 2024 com 1.144 profissionais de WordPress realizada pelo The Admin Bar diz que “o Bricks foi o único construtor de páginas que aumentou seus números em relação ao ano passado, acumulando 32% do total”, conforme a seguinte tabela:

Dados mostrando os construtores de páginas usados pelos profissionais mais avançados de WordPress.
Dados mostrando os construtores de páginas usados pelos profissionais mais avançados de WordPress.

Isso mostra quantos profissionais de WordPress estão adotando o Bricks, embora ainda seja relativamente novato no mercado.

O Bricks funciona como um tema completo. Isso significa que você não pode misturar e combinar recursos de outros temas com seu construtor de páginas. Além disso, em termos de velocidade, como um construtor de páginas mais novo, projetado para sites de alto desempenho, o Bricks Builder tem a reputação de ser mais rápido do que o Elementor Pro.

Usar um construtor de páginas projetado apenas para velocidade não poderá garantir o melhor desempenho. Independentemente do tipo de site que você está criando, seu provedor de hospedagem desempenha um papel crucial no seu desempenho.

Na Kinsta, somos conhecidos por fornecer Hospedagem WordPress premium com dezenas de recursos premium, e nos orgulhamos disso!

Operamos em uma arquitetura totalmente conteinerizada alimentada exclusivamente pelo Google Cloud Platform na rede de nível premium do Google. Isso nos permite fornecer a você uma ampla seleção dos servidores de dados mais velozes, desempenho incrível, cache em nível de servidor, recursos dedicados e segurança aprimorada.

Confira o que nossos clientes dizem ou entre em contato conosco para saber mais sobre nossa solução de hospedagem gerenciada e como ela se destaca.

Resumo

Este artigo explorou o Bricks Builder, seu funcionamento, alguns de seus recursos e como usá-los. Examinamos sua abordagem abrangente baseada em temas, recursos de personalização e benefícios de desempenho.

Embora o Bricks não tenha uma versão gratuita como o Elementor, seu design integrado e suas atualizações frequentes podem proporcionar uma maior eficiência para otimizar o desempenho do seu site.

Você tem alguma dúvida sobre como usar o construtor de temas Bricks do WordPress? Conte-nos na seção de comentários abaixo!

Joel Olawanle Kinsta

Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 200 technical articles majorly around JavaScript and it's frameworks.