Tutorial do WordPress Gutenberg sobre como criar um site personalizado usando blocos

Este é um tutorial do WordPress Gutenberg escrito por desenvolvedores da web que têm experiência significativa na criação de sites WordPress usando seu novo editor de blocos.

Neste guia, mostraremos como criar um site complexo que incluirá modelos de conteúdo, arquivos e uma pesquisa personalizada. Estaremos usando o WordPress Block Editor conhecido como Gutenberg e Toolset Blocks para construir o site.

Por que Gutenberg agora é uma ótima maneira de construir sites

Gutenberg está no mercado há quase um ano e é maduro o suficiente para ser uma maneira excelente e confiável de criar o site exato que você planejou.

Gutenberg usa blocos para construir suas páginas. Blocos são elementos que contêm diferentes tipos de conteúdo para que você possa criar seus layouts.

O editor de blocos ainda está evoluindo, mas já é incrivelmente intuitivo e flexível. Você não precisa ser um especialista em codificação para criar conteúdo. Além disso, ao combiná-lo com plug-ins como blocos de conjunto de ferramentas, você pode facilmente criar sites complexos de ótima aparência.

Gutenberg também é muito mais fácil de usar no celular do que seu antecessor. Dada a crescente quantidade de trabalho que fazemos em nossos celulares, é um passo importante na direção certa.

Os melhores tipos de temas para usar com Gutenberg

Existem vários temas WordPress premium que são compatíveis com o Gutenberg Block Editor e também suportam outros plug-ins premium.

Você pode pesquisar rapidamente os melhores temas verificando nossa lista dos mais de 30 temas WordPress que são compatíveis com Gutenberg.

O melhor plugin de blocos para usar com Gutenberg

Desde o lançamento do Gutenberg, há mais de um ano, vários plug-ins excelentes foram lançados, complementando o novo editor do WordPress.

Para nosso tutorial WordPress Gutenberg, usaremos blocos de conjunto de ferramentas junto com Gutenberg para construir nosso site WordPress. O conjunto de ferramentas Blocks oferece uma série de vantagens que tornarão mais fácil para codificadores e não codificadores projetar e implementar seus sites rapidamente:

• Seu fluxo de trabalho será muito mais simples . Agora não há necessidade de projetar suas páginas e implementá-las. Você pode simplesmente criá-los no WordPress e ver instantaneamente como ficarão.
• Não há necessidade de alternar entre o back-end e o front-end . Em vez disso, você pode simplesmente projetar seus modelos no back-end e ver instantaneamente como eles ficarão.
• Os não desenvolvedores podem construir os sites dos seus sonhos . Você não precisa mais ser um especialista em codificação para criar o site que deseja. Com blocos, você pode adicionar facilmente elementos complexos sem html ou css.
• Gaste menos tempo lendo a documentação . A natureza simples e intuitiva dos blocos de conjunto de ferramentas significa que você não precisa ler muita documentação para entender como construir certos elementos. Muitos dos blocos descrevem o que você pode alcançar e pode ser usado e experimentado facilmente.
• Nenhuma integração adicional com plug-ins de terceiros . Com o editor clássico do WordPress, você precisaria instalar um construtor de páginas e plug-ins compatíveis adicionais. Isso pode aumentar a velocidade do seu site, tornando-o significativamente mais lento. Você também depende de terceiros para atualizar seus plug-ins e mantê-los seguros. O conjunto de ferramentas Blocks está integrado ao Gutenberg e ao WordPress, portanto, não causará os mesmos problemas.
• Siga o mesmo fluxo de trabalho do núcleo do WordPress . Você não precisa se preocupar em mudar a forma como trabalha com o novo editor do WordPress.

Tutorial do WordPress Gutenberg sobre como construir um site personalizado usando blocos

Agora podemos começar a construir nosso site personalizado. Como exemplo, criaremos um site de demonstração que você pode usar para pesquisar a melhor academia ou personal trainer em sua área.

Aqui está o que iremos cobrir neste tutorial do WordPress Gutenberg:

• Adicionar, editar, mover e excluir blocos
• Exibir conteúdo lado a lado
• Navegando pelos seus blocos
• Exibindo campos em seus designs de editor de bloco
• Exibindo uma galeria de imagens
• Blocos do conjunto de ferramentas de estilo no editor
• Controles de tipografia
• Criação de um modelo
• Construindo suas páginas de arquivo
• Criação de listas personalizadas de conteúdo
• Adicionar uma pesquisa personalizada

Vamos começar!

Adicionar, editar, mover e excluir blocos

Em primeiro lugar, vamos examinar os princípios básicos de como criar e remover seus blocos. Os blocos são uma forma completamente nova de construir sites, mas deve levar apenas alguns minutos para se acostumar com eles.

1. Em uma página ou postagem, clique no botão +.
2. Procure e clique no bloco que deseja usar para inseri-lo.

3. Insira suas informações de conteúdo para o bloco. Por exemplo, aqui adicionamos o bloco “Título” e inseriremos um título para ele.
4. À esquerda de cada bloco, você verá um conjunto de controles que pode usar para mover os blocos.

5. Use a barra lateral direita para alterar as opções para o bloco que você selecionou. Por exemplo, você pode alterar a cor da fonte, tamanho da imagem ou alinhamento do texto.
6. Se você clicar na opção de três pontos, poderá ver opções adicionais, como o bloco Remover

Como exibir seu conteúdo lado a lado

Você pode exibir seu conteúdo um ao lado do outro em sua página facilmente usando o bloco de colunas.

1. Selecione o botão +.
2. Procure o bloco de colunas e insira-o.

3. Agora você pode ver duas colunas às quais pode adicionar blocos normalmente.

4. Aumente o número de colunas selecionando o bloco de colunas e alternando o número na barra à direita.

Navegando pelos seus blocos

Conforme você constrói seu site, alguns de seus designs e modelos terão muitos blocos. Uma das maneiras mais fáceis de selecionar aquele que deseja editar é usar o botão Block Navigation na parte superior do editor e selecionar o bloco com o qual deseja trabalhar.

Exibindo campos em seus designs de editor de bloco

Você pode exibir informações de campos de postagem (o título, corpo, etc.) ou de campos personalizados que você pode ter criado usando blocos de conjunto de ferramentas.

Existem três maneiras de exibir seus campos, que descreveremos a seguir como parte do Tutorial do WordPress Gutenberg:

1. Defina o conteúdo do bloco para vir de valores de campo

Cada bloco na biblioteca de blocos do conjunto de ferramentas permite definir seu conteúdo a partir dos campos. Por exemplo, você pode definir qualquer texto de título para vir de um campo de postagem ou de um campo personalizado do conjunto de ferramentas.

Vamos ver abaixo como funciona adicionando o texto do título de um campo de postagem ao bloco Título do conjunto de ferramentas para nossos treinadores pessoais.

1. Crie um novo modelo de conteúdo e escolha o tipo de postagem personalizada que deseja exibir.
2. Selecione o botão +.
3. Adicione o bloco de cabeçalho do conjunto de ferramentas .

4. Ative o Texto de Título Dinâmico.

5. Selecione o campo de postagem que deseja exibir. Abaixo, selecionei o Título do Post .

Agora você poderá ver o título correto para cada uma das postagens relacionadas a um determinado tipo de postagem personalizada.

2. Exibir campos como blocos individuais

Você pode exibir qualquer campo de postagem ou campo personalizado individual criado usando o conjunto de ferramentas como um bloco. Por exemplo, abaixo adicionamos o conteúdo da postagem principal ao nosso modelo para nossas academias.

1. Selecione o bloco de campo único .
2. Na barra do lado direito em Tipo de campo , selecione o campo Padrão .
3. Em Post Field, selecione a opção Post Content (body) .

A descrição de cada uma das academias agora aparecerá em seus respectivos posts.

3. Combine campos com texto em um bloco

Você pode precisar adicionar uma combinação de campos e textos aos seus projetos. Por exemplo, você pode precisar adicionar rótulos ao lado de seus campos personalizados.

1. Selecione os campos e o bloco de texto .

2. Digite o rótulo que deseja adicionar. Por exemplo, adicionei “Classificação” porque desejo exibir os resultados para o campo personalizado Classificação , que mostra a pontuação de cada academia em 5.

3. Selecione nos ícones o tipo de conteúdo que deseja adicionar. Você pode adicionar um campo, um formulário ou uma saída condicional. No nosso caso, queremos adicionar um campo.

4. Selecione o conteúdo que deseja adicionar (no meu caso é o campo Classificação ) e clique em Inserir Shortcode .

Exibir uma galeria de imagens

Você também pode adicionar várias imagens às suas postagens usando blocos.

1. Selecione o campo Repetição / bloco Galeria .

2. Selecione o grupo de campos personalizados que deseja exibir.
3. Escolha o campo personalizado que deseja exibir.

Estilizando seus blocos no editor

Ao criar o site que você tinha em mente, você precisará estilizar seus blocos. Por exemplo, você pode querer alterar a fonte, as cores, o plano de fundo ou as margens de seus blocos.

Existem duas maneiras de definir o estilo de seus blocos:

1. Itens de estilo usando a interface

1. Selecione o bloco que deseja estilizar. Por exemplo, selecionei o bloco de classificações que adicionei anteriormente.
2. Expanda a seção Configurações de estilo na barra lateral.
3. Aqui você pode ajustar a cor de fundo, preenchimento, borda e muito mais.

Obviamente, cada bloco oferecerá diferentes opções de estilo. Por exemplo, o bloco de imagem conterá uma série de recursos de personalização adicionais, como a capacidade de ajustar a posição da imagem, o desfoque ou o quanto ela gira.

2. Usando o bloco Container

O Container Block é um bloco que você só pode encontrar exclusivamente com os blocos do conjunto de ferramentas. Use o Bloco de contêineres para agrupar certos blocos e certos estilos para cada um deles que serão exibidos para cada uma das postagens.

Por exemplo, adicionei um Bloco de contêiner para exibir todas as informações relevantes para um personal trainer juntas em uma seção uniforme, incluindo imagem, título, classificação e muito mais. Agora posso estilizar o Bloco de contêiner de forma que cada uma das minhas postagens do Personal Trainer exiba os mesmos estilos.

Mais uma vez, posso fazer isso usando a barra lateral do lado direito.

Controles de tipografia

Com os blocos de conjunto de ferramentas, você pode estilizar e formatar facilmente seu texto usando sua seção de tipografia.

Aqui está uma lista do que você pode ajustar:

• Tipo de fonte - escolha entre uma grande seleção de fontes
• Tamanho da fonte, altura da linha e espaçamento entre letras
• Estilo de fonte
• Transformação de texto - maiúscula, maiúscula, minúscula
• Cor do texto
• Sombra do texto

Como criar modelos para exibir postagens personalizadas

Um dos recursos mais importantes que você precisa criar para um site personalizado é o modelo. Quando você cria um modelo, isso significa que todas as postagens do mesmo tipo de postagem personalizada terão o mesmo layout e design.

Por exemplo, podemos criar um modelo para cada uma das academias que desejamos exibir como parte de nosso tipo de postagem personalizada “Academias”.

1. Vá para Conjunto de ferramentas-> Painel e clique na opção Criar modelo de conteúdo para o tipo de postagem para o qual deseja criar um modelo.

2. Assim como fizemos antes de você começar a adicionar campos ao seu modelo. Abaixo, adicionei vários blocos diferentes, incluindo os blocos Título, Imagem e Campo Único, todos contendo campos.

3. Depois de salvar e publicar seu modelo, cada uma das suas postagens para aquele tipo de postagem personalizada exibirá o mesmo layout e estilo.

Construindo suas páginas de arquivo

Arquivos são a lista de conteúdo para cada tipo de postagem personalizada que o WordPress gera para você. Você pode usar blocos de conjunto de ferramentas e Gutenberg para personalizar a aparência de cada uma das páginas do arquivo.

Abaixo, como parte do tutorial do WordPress Gutenberg, criei um arquivo para o meu tipo de postagem personalizada “Ginásios”.

1. Vá para Conjunto de ferramentas-> Painel e clique na opção Criar arquivo ao lado do tipo de postagem para o qual deseja criar um arquivo.

2. No Editor de bloco, agora você pode adicionar os diferentes elementos que deseja exibir para cada uma de suas postagens. Por exemplo, você pode exibir todos os seus campos padrão e personalizados (como Avaliações, Endereço e Títulos de postagem que criei para meus tipos de postagem personalizados de “Ginásios”) usando os blocos de conjunto de ferramentas.

3. Para alterar o número de colunas, clique na opção Bloquear Navegação e selecione o loop de arquivo do WordPress .
4. Em Loop Style, você pode ajustar o número de colunas.

5. Você também pode fazer uma série de alterações nas configurações padrão dos arquivos, como paginação, ordenação e muito mais no bloco Arquivo do WordPress.

6. Você também pode adicionar textos personalizados e outros blocos antes ou depois do ciclo de arquivo principal que exibirá suas postagens. Basta clicar no ícone + antes ou depois do loop para adicionar seus blocos ou texto.

Exibir listas personalizadas de conteúdo

Você pode usar os blocos do conjunto de ferramentas e o Gutenberg para exibir qualquer uma das suas postagens como uma lista na ordem que desejar. Você também pode criar a lista da maneira que quiser, como em uma grade, HTML simples, uma tabela ou qualquer outra forma. No conjunto de ferramentas, esse tipo de lista é denominado Visualização.

Essa lista pode então ser adicionada a qualquer página. Por exemplo, abaixo, adicionei uma lista de academias em destaque à página inicial.

1. Clique no botão + na página à qual deseja adicionar sua Visualização.
2. Adicione o bloco de Visualizações e nomeie-o.
3. Selecione o conteúdo que deseja exibir em sua Visualização. Por exemplo, desejo exibir minhas academias.

4. Adicione os blocos que deseja exibir como parte de sua Visualização.
5. Você pode editar a ordem, qual conteúdo é exibido e muito mais quando você clica em Bloquear Navegação , selecione sua Visualização e use a barra lateral.

6. Em View Loop você pode alterar uma série de configurações para toda a View, incluindo o número de colunas.

Adicionar uma pesquisa personalizada

Você pode adicionar à sua Visualização sua própria pesquisa, o que permitirá que seus usuários restrinjam o conteúdo em que estão interessados ​​no front-end. Por exemplo, você pode criar uma pesquisa para seus usuários para encontrar a melhor academia mais próxima deles.

1. Insira o bloco de visualização em sua página.
2. Habilite a opção Pesquisar no assistente de criação de visualização.

3. Você pode adicionar campos de pesquisa, botões de pesquisa e muito mais na área de edição de visualizações.

4. Você pode usar a barra lateral direita para ajustar as opções para este campo de pesquisa. Isso inclui as configurações do campo principal e as opções de rótulo e estilo.

Aqui está como nossa busca personalizada pela melhor academia aparece no front-end.

Comece a construir seu site personalizado hoje!

Agora que você sabe o básico depois de ler este tutorial do WordPress Gutenberg, pode começar a projetar e construir seu próprio site personalizado. Você pode baixar WordPress e blocos de conjunto de ferramentas hoje para ver como é fácil para você criar seu próprio site.

Se você tiver alguma opinião ou pergunta, por favor, deixe-nos saber nos comentários abaixo!