Introdu\u00e7\u00e3o do Bricks Builder<\/h2>\n
O Bricks Builder<\/a> \u00e9 um construtor de sites visual que permite aos usu\u00e1rios criar sites responsivos<\/a> e personalizados diretamente no ambiente WordPress. Foi projetado para aprimorar a experi\u00eancia do usu\u00e1rio, pois se integra perfeitamente ao WordPress, permitindo que desenvolvedores<\/a> iniciantes e experientes criem sites visualmente por meio de uma interface drag and drop.<\/p>\n Ao contr\u00e1rio do Elementor<\/a> e de outros construtores de sites, o Bricks \u00e9 um tema, n\u00e3o um plugin. Praticamente incorpora todos os recursos, enquanto outros construtores de sites usam plugins adicionais.<\/p>\n Ele apresenta uma experi\u00eancia de edi\u00e7\u00e3o de frontend em tempo real, o que significa que voc\u00ea pode ver suas altera\u00e7\u00f5es em tempo real \u00e0 medida que ajusta elementos de design e layouts.<\/p>\n Ele oferece um kit de ferramentas abrangente que inclui templates predefinidos, uma vasta gama de elementos de design e op\u00e7\u00f5es avan\u00e7adas de personaliza\u00e7\u00e3o para um desenvolvimento web mais detalhado.<\/p>\n Al\u00e9m disso, o Bricks Builder oferece suporte a dados din\u00e2micos, permitindo que os usu\u00e1rios criem sites orientados por dados com facilidade e integrem conte\u00fado dinamicamente em seus templates.<\/p>\n O Bricks Builder se destaca por seu desempenho e flexibilidade. \u00c9 uma alternativa mais nova e robusta a outros construtores, oferecendo:<\/p>\n O Bricks \u00e9 um tema premium que requer uma assinatura paga. Para us\u00e1-lo, voc\u00ea precisa adquirir um de seus planos. Ap\u00f3s efetuar o pagamento, voc\u00ea 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\u00e7a que ativa o Bricks em sua instala\u00e7\u00e3o WordPress<\/a>.<\/p>\n Ap\u00f3s instalar o tema Bricks, voc\u00ea ver\u00e1 um novo item de menu Bricks<\/strong> em seu painel WordPress<\/a>.<\/p>\n Para ativar sua licen\u00e7a, v\u00e1 para o painel, clique em Activate license<\/strong>, insira a chave de licen\u00e7a de sua conta no Bricks e clique em Activate<\/strong>. Isso ativar\u00e1 a funcionalidade completa do tema Bricks.<\/p>\n Se voc\u00ea quiser experimentar o Bricks antes de se comprometer com a compra, poder\u00e1 configurar uma conta de avalia\u00e7\u00e3o em try.bricksbuilder.io<\/a>. Essa plataforma fornece acesso a um site WordPress pr\u00e9-configurado com o Bricks instalado, permitindo que voc\u00ea explore seus recursos e capacidades sem nenhum custo inicial.<\/p>\n Para projetar uma nova p\u00e1gina com o construtor de p\u00e1ginas Bricks, navegue at\u00e9 Pages<\/strong> > Add New<\/strong>\u00a0ou clique em uma p\u00e1gina existente. Voc\u00ea pode iniciar o editor do Bricks clicando em Edit with Bricks<\/strong>.<\/p>\n Agora voc\u00ea pode arrastar elementos do painel Elements<\/strong> para projetar sua p\u00e1gina.<\/p>\n A interface do Bricks oferece uma integra\u00e7\u00e3o perfeita com o ambiente WordPress.<\/p>\n Aqui voc\u00ea encontra um detalhamento da sua interface principal:<\/p>\n O Bricks oferece o interessante recurso de permitir que voc\u00ea fa\u00e7a upload de fontes<\/a> personalizadas para o seu site WordPress. Para isso, acesse Bricks<\/strong>\u00a0>\u00a0Custom Fonts<\/strong>.<\/p>\n Essa se\u00e7\u00e3o permite que voc\u00ea carregue seus arquivos de fonte em v\u00e1rios formatos, incluindo WOFF2, WOFF ou TTF. Voc\u00ea tamb\u00e9m pode carregar diferentes varia\u00e7\u00f5es de fontes, como fina, semi-negrito, normal e negrito.<\/p>\n Para adicionar uma fonte personalizada, clique em Add New<\/strong>. Em seguida, digite um nome para a fonte no campo\u00a0Add title<\/strong>. Em seguida, selecione a variante da fonte que voc\u00ea deseja carregar, escolha o estilo da fonte e clique em Edit<\/strong>.<\/p>\n Ser\u00e1 exibido um menu suspenso com campos para voc\u00ea carregar o arquivo da fonte. Selecione o arquivo da fonte e fa\u00e7a o upload. Voc\u00ea pode repetir esse processo clicando em Add a font variant <\/strong>para o maior n\u00famero poss\u00edvel de variantes. Por fim, clique em Publish<\/strong>.<\/p>\n Para aplicar sua fonte personalizada rec\u00e9m-carregada ao texto em seu site WordPress, siga estas etapas:<\/p>\n Agora, seu texto ser\u00e1 exibido usando sua fonte personalizada, dando \u00e0 sua p\u00e1gina um toque pessoal.<\/p>\n Os templates s\u00e3o um recurso fundamental do Bricks e v\u00eam em v\u00e1rios tipos, incluindo cabe\u00e7alhos, rodap\u00e9s e layouts de publica\u00e7\u00f5es de blog. Esses templates podem variar de uma \u00fanica se\u00e7\u00e3o, como o cabe\u00e7alho de um site ou uma se\u00e7\u00e3o de her\u00f3i, at\u00e9 o conte\u00fado de p\u00e1gina inteira, como layouts de publica\u00e7\u00e3o de blog, p\u00e1ginas de arquivo, resultados de pesquisa e p\u00e1ginas de erro.<\/p>\n Para criar um template:<\/p>\n Para aplicar um template a uma p\u00e1gina:<\/p>\n Os templates do Bricks oferecem recursos exclusivos n\u00e3o encontrados em outros construtores de sites. Os templates remotos significam templates criados e usados em outros sites que voc\u00ea deseja usar em seu site.<\/p>\n Para permitir que outros sites usem seus templates do Bricks, v\u00e1 para Bricks<\/strong>\u00a0>\u00a0Settings<\/strong>\u00a0>\u00a0Templates<\/strong> no painel WordPress e ative a caixa de sele\u00e7\u00e3o My Templates Access<\/strong>.<\/p>\n Use Whitelist URLs<\/strong> e Password Protection<\/strong> para restringir o acesso aos templates a pessoas que saibam a senha correta.<\/p>\n Para usar templates de outros sites, v\u00e1 para Bricks<\/strong> > Settings<\/strong>\u00a0>\u00a0Templates<\/strong>, role at\u00e9 a se\u00e7\u00e3o Remote t<\/strong>emplates <\/strong>e cole a URL do site do Bricks do qual voc\u00ea deseja recuperar os templates no campo URL<\/strong>.<\/p>\n Se voc\u00ea definir uma senha, deve certificar-se de escrev\u00ea-la em Password<\/strong>. Ent\u00e3o clique em Save Settings<\/strong>.<\/p>\n Para usar esses templates, navegue at\u00e9 o construtor de p\u00e1ginas e clique em Templates<\/strong> como antes; uma nova se\u00e7\u00e3o Remote templates <\/strong>aparecer\u00e1 com todos os templates do site remoto.<\/p>\n O Bricks permite que voc\u00ea incorpore dados din\u00e2micos<\/a> em seus templates e p\u00e1ginas, tornando-o uma ferramenta vers\u00e1til para a cria\u00e7\u00e3o de sites din\u00e2micos.<\/p>\n Voc\u00ea pode incluir v\u00e1rios elementos din\u00e2micos, como imagens em destaque, t\u00edtulos de publica\u00e7\u00f5es, datas de publica\u00e7\u00e3o, nomes de autores, categorias, tags, t\u00edtulos de sites e todos os seus campos personalizados.<\/p>\n Os dados din\u00e2micos s\u00e3o particularmente \u00fateis quando voc\u00ea cria templates espec\u00edficos no Bricks, como o template de publica\u00e7\u00e3o do seu blog ou templates para tipos personalizados de publica\u00e7\u00f5es, como uma listagem de propriedade \u00fanica.<\/p>\n Para adicionar dados din\u00e2micos, comece a digitar Veja como criar um template de artigo \u00fanico usando dados din\u00e2micos com o Bricks:<\/p>\n Para definir esse template como padr\u00e3o para todas as publica\u00e7\u00f5es:<\/p>\n Para simplificar a defini\u00e7\u00e3o do estilo desse template, adicione uma publica\u00e7\u00e3o padr\u00e3o para usar como refer\u00eancia para os elementos din\u00e2micos:<\/p>\n Al\u00e9m disso, o Bricks suporta o uso de conte\u00fado de campos personalizados avan\u00e7ados (ACF), habilitando voc\u00ea a criar p\u00e1ginas detalhadas e personalizadas.<\/p>\n O recurso de envio de formul\u00e1rio foi introduzido no Bricks 1.9.2 para permitir que voc\u00ea capture os envios de formul\u00e1rios. Isso permite que voc\u00ea crie uma tabela personalizada chamada <\/span> Voc\u00ea pode ativar a nova configura\u00e7\u00e3o Save form submissions in database <\/strong>(Salvar envios de formul\u00e1rios no banco de dados) em Bricks<\/strong> > Settings<\/strong>\u00a0>\u00a0General<\/strong>\u00a0>\u00a0Miscellaneous<\/strong>.<\/p>\n Em seguida, clique em Save Settings<\/strong>. Voc\u00ea ver\u00e1 a aba Form Submissions (Bricks<\/strong> > Form Submissions<\/strong>), que cont\u00e9m as suas v\u00e1rias tabelas de envio de formul\u00e1rios.<\/p>\n Coletar os envios de formul\u00e1rios no Bricks n\u00e3o requer um plugin adicional. Voc\u00ea s\u00f3 precisa usar o elemento Form<\/strong> para criar um formul\u00e1rio e definir os campos corretamente.<\/p>\n No painel de configura\u00e7\u00f5es, clique em Actions<\/strong>\u00a0e selecione a a\u00e7\u00e3o Save Submission<\/strong>.<\/p>\n Em seguida, clique nas configura\u00e7\u00f5es de Save Submission <\/strong>para dar ao formul\u00e1rio um nome descritivo. Esse nome ser\u00e1 usado para acessar os dados do formul\u00e1rio.<\/p>\n Agora, quando voc\u00ea salvar e abrir a p\u00e1gina, poder\u00e1 preencher o formul\u00e1rio e, em seguida, navegar de volta para Bricks<\/strong> > Form submission<\/strong>\u00a0para ver os dados do formul\u00e1rio.<\/p>\n Voc\u00ea tamb\u00e9m pode fazer download de um arquivo CSV dos v\u00e1rios envios de formul\u00e1rios. Na se\u00e7\u00e3o Bricks<\/strong> > Settings<\/strong> > General<\/strong> > Miscellaneous<\/strong> onde voc\u00ea configurou esse recurso \u00e9 poss\u00edvel redefinir ou excluir a tabela do banco de dados.<\/p>\n O WooCommerce<\/a> \u00e9 um plugin gratuito que aprimora seu site WordPress com recursos de eCommerce. \u00c9 reconhecido mundialmente como a principal solu\u00e7\u00e3o de c\u00f3digo aberto<\/a> para configurar e gerenciar uma loja on-line.<\/p>\n O Bricks se integra perfeitamente ao WooCommerce, fornecendo um construtor de temas robusto para a cria\u00e7\u00e3o de toda a sua loja, desde a p\u00e1gina principal at\u00e9 as p\u00e1ginas de produtos individuais, arquivos de produtos, carrinhos, checkouts e p\u00e1ginas de conta.<\/p>\n O Bricks oferece elementos e templates elaborados especialmente para o WooCommerce, permitindo que voc\u00ea crie o layout da sua loja.<\/p>\n Para come\u00e7ar a usar o construtor de WooCommerce no Bricks, instale e ative o plugin WooCommerce. Depois de ativado, voc\u00ea pode usar o Bricks para projetar e personalizar visualmente v\u00e1rios templates de WooCommerce, de forma semelhante a como voc\u00ea gerenciaria layouts de artigo \u00fanico.<\/p>\n Para criar uma p\u00e1gina de loja simples:<\/p>\n Usando esses elementos, voc\u00ea pode organizar e estilizar sua p\u00e1gina como desejar.<\/li>\n<\/ol>\n Assim como na cria\u00e7\u00e3o de um template de artigo \u00fanico, voc\u00ea pode criar um template de produto \u00fanico e definir suas condi\u00e7\u00f5es para trabalhar com todos os produtos.<\/p>\n O construtor Query Loop permite que voc\u00ea consulte seu banco de dados de acordo com seus par\u00e2metros 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.<\/p>\n Voc\u00ea pode consultar tipos de publica\u00e7\u00f5es, termos de taxonomia e usu\u00e1rios. Por exemplo, voc\u00ea pode consultar uma lista de autores de blogs, membros da comunidade e membros da equipe.<\/p>\n Para usar o loop de consulta, adicione um elemento Container \u00e0 tela. Ative a configura\u00e7\u00e3o Use Query Loop<\/strong>\u00a0para transformar seu cont\u00eainer em um item de loop.<\/p>\n Depois de ativar a configura\u00e7\u00e3o Use Query Loop<\/strong>, voc\u00ea ver\u00e1 um controle de consulta (\u00edcone de infinito). Clique no \u00edcone para abrir o controle de consulta e defina os par\u00e2metros de consulta para recuperar o conte\u00fado do seu banco de dados.<\/p>\n O cont\u00eainer agora serve como item repetidor. Todos os elementos dentro desse cont\u00eainer s\u00e3o repetidos sempre que houver resultados de consulta. ![\"Interface](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/bricks-editing-interface-1.png\")
Benef\u00edcios do uso do Bricks para WordPress<\/h3>\n
\n
Como come\u00e7ar a usar o Bricks<\/h2>\n
![\"No](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/bricks-dashboard.jpg\")
![\"Configure](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/bricks-license-1.png\")
![\"Interface](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/welcome-bricks-1.png\")
Como iniciar o construtor de p\u00e1ginas Bricks<\/h3>\n
![\"Voc\u00ea](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/launch-bricks.png\")
Entendendo a interface do Bricks<\/h3>\n
![\"Etiquetas](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/bricks-interface-label.png\")
\n
Usando fontes personalizadas no Bricks<\/h2>\n
![\"Usando](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/custom-font-bricks.png\")
![\"Adicione](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/add-font-1.png\")
![\"P\u00e1gina](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/fonts-page-1.png\")
\n
![\"Use](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/use-custom-font-1.png\")
Usando templates no Bricks<\/h2>\n
Criando um template<\/h3>\n
\n
![\"Criando](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/new-template.png\")
Aplica\u00e7\u00e3o de templates<\/h3>\n
\n
![\"Aplica\u00e7\u00e3o](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/apply-template.png\")
![\"Armazenamento](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/templates-store.png\")
![\"Voc\u00ea](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/use-template-from-community.png\")
Templates remotos<\/h3>\n
![\"Permita](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/remote-templates.png\")
![\"Use](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/Use-remote-templates-1.png\")
Usando dados din\u00e2micos no Bricks<\/h2>\n
{<\/code> na tela ou clique no \u00edcone bolt ao lado da maioria dos campos no painel de configura\u00e7\u00f5es.<\/p>\n\n
{post_title}<\/code> em um elemento Heading<\/strong> e {post_content}<\/code> em um elemento Basic text<\/strong>.\n![\"Usando](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/dynamic-data-1.png\")
\n
![\"Defina](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/default-post-template-1.png\")
![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/post-template.png\")
\n
![\"Adicione](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/defualt-post-1.png\")
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/customize-dynamic-page-1.png\")
Manuseando envios de formul\u00e1rios com o Bricks<\/h2>\n
bricks_form_submissions<\/code> em seu banco de dados (mais o prefixo do seu banco de dados WP).<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n![\"Manuseio](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/form-submissions-bricks.png\")
Coletando os envios de formul\u00e1rios<\/h3>\n
![\"Elemento](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/form-element.png\")
![\"Defina](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/save-submission-action.png\")
![\"Defina](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/form-name-1.png\")
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/bricks-form-submission-page.png\")
![\"Redefina](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/reset-delete-database-table.png\")
Usando o WooCommerce com o Bricks<\/h2>\n
![\"Elementos](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/product-elements.png\")
\n
![\"Usando](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/bricks-wocommerce.png\")
Loops de consulta no Bricks<\/h2>\n
![\"Usando](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/05\/query-loops-1.png\")