Padrões de bloco são uma ótima maneira de levar o editor de blocos para outro nível e esquecer lentamente os construtores de páginas.
Embora esse recurso tenha sido introduzido no WordPress há 2 anos, só comecei a dar mais importância recentemente. Acho que é uma ótima maneira de criar páginas com layouts complexos sem usar plugins adicionais. Esta é uma grande vantagem, especialmente se a velocidade de carregamento do seu site for uma das suas principais prioridades.
Introdução aos padrões de bloco
Atualmente, o WordPress fornece acesso a vários padrões para adicionar seções ou layouts com designs simples em suas páginas.
Para acessar a tela acima, você precisa clicar no botão “+” botão no canto superior esquerdo do editor.
Clique no Padrões guia e, em seguida, na Explorar botão.
Mais padrões estão disponíveis em wordpress.org/patterns, mas eles não são muito diferentes dos incluídos no WordPress e, para alguns, podem ser muito simples.
Copiar um padrão da biblioteca de padrões é uma questão de um simples atalho de copiar e colar. Não são necessários plugins ou etapas adicionais. Basta copiar o padrão necessário e usar o atalho de teclado para inseri-lo no editor.
O que você pode construir usando Padrões de Bloco
Para ter uma ideia do que é possível criar usando Block Patterns e Gutenberg, dê uma olhada nesta demonstração do tema Inspiro Lite. Esta demonstração é inteiramente construída usando Blocos de Gutenbergentão você não precisa de nenhum construtor de páginas.
Também atualizamos recentemente os temas Inspiro PRO e Inspiro Classic com alguns padrões de blocos. Se você estiver usando algum desses temas, basta atualizá-lo para a versão mais recente para experimentar os Padrões de bloco integrados.
Ver demonstração →
Você também pode encontrar outros temas com Block Patterns no repositório oficial de temas do WordPress.
Aino, um tema de edição de site completo por Estúdio Elma apresenta alguns padrões exclusivos para ajudar a construir um site com um estilo minimalista:
Belos padrões de blocos também podem ser encontrados em outro tema de edição de site completo, projetado por Tove Anders Norén:
Construindo um site de restaurante? O tema Tove pode ajudá-lo a fazer isso sem nenhum plugin adicional:
Plugins recomendados para aprimorar o editor de blocos
Gutenberg pode parecer limitado quando se trata de criar layouts avançados ou ter controle sobre todos os detalhes.
É aqui que você precisará instalar plugins adicionais para aprimorar o editor.
A demonstração excêntrica do Inspiro PRO foi construído usando Elementor.
Em uma tentativa de recriar um layout semelhante usando o Gutenberg, tive que usar o plugin Editor Plus para obter controle sobre coisas básicas, como tamanho de fonte responsivo para títulos como texto. Tal recurso ainda não está disponível no Gutenberg, mas acredito que será adicionado no futuro.
O Editor Plus aprimora o Gutenberg com muitas opções adicionais
A página final criada usando o Gutenberg pode ser vista aqui.
Comparado com a primeira página criada usando Elementor, você pode notar que algumas seções estão faltando. Ainda assim, encontrar os blocos necessários para criar seções mostrando produtos WooCommerce ou um vídeo em segundo plano não deve ser um problema.
Como o projeto Gutenberg está disponível no WordPress e como um plug-in separado, provavelmente faz sentido instalar o plug-in também em seu site para obter acesso muito mais rápido a novos recursos e melhorias. Caso contrário, você precisará aguardar as principais atualizações do WordPress para receber as atualizações do Gutenberg dos últimos meses.
Se você estiver procurando por blocos específicos, verifique a seção de plugins baseados em blocos do WordPress.org, pois já inclui uma dúzia de plugins com blocos de qualquer complexidade.
Minhas dicas favoritas ao construir layouts usando Gutenberg
Como estamos interagindo muito com o editor de blocos diariamente ao trabalhar em nossos temas e plugins existentes ou novos, quero compartilhar com vocês meus “segredos” favoritos para construir layouts muito mais facilmente usando o Gutenberg.
Às vezes eu compartilho essas dicas no meu Twitter conta, mas vou compartilhar alguns aqui.
Mantenha o navegador ligado
Eu sempre gosto de manter o Navegador (List View) para que eu possa ver muito mais rapidamente onde um elemento específico está localizado.
A Visualização de lista oferece uma melhor compreensão do seu layout e, às vezes, facilita a seleção de um grupo ou elemento específico.
Se você não estiver agrupando elementos de cada seção, recomendo fazê-lo.
Seções de altura total
Usando o Bloco de coberturavocê pode criar facilmente belas seções de altura total com uma imagem ou vídeo em segundo plano.
Acima, você pode ver que, usando este bloco, você pode criar uma seção muito semelhante à área do herói no tema Inspiro Lite.
Para obter o resultado necessário, você também pode jogar com outras configurações como Posição do conteúdo ou defina uma altura mínima para este bloco se quiser visualizar o bloco abaixo dele.
O que você quer construir hoje usando Gutenberg?
Depois de ler este artigo, esperamos que você esteja mais familiarizado com o Gutenberg e pronto para usar o editor de blocos na próxima vez que criar uma nova página de destino.
Se você precisa de um ponto de partida, você sempre pode usar a versão gratuita do nosso Inspiro tema que é muito amigável com blocos e inclui vários padrões de blocos.
Assine a newsletter WPZOOM.
Junte-se 75.000 pessoas. Receba nossas últimas notícias e lançamentos em sua caixa de entrada.
