5 maneiras de criar sites sem código usando o Gutenberg do WordPress

5 maneiras de criar sites sem código usando o Gutenberg do WordPress

5 de June, 2020 0 By António César de Andrade
Click to rate this post!
[Total: 0 Average: 0]


Web designers poderiam ser perdoados se seus olhos vissem a mera menção de construir um site personalizado. Criando um site avançado usado para exigir conhecimento de programação e horas de codificação.

Mas, graças a Gutenberg, mesmo aqueles que não conhecem o HTML a partir do CSS poderão criar sites profissionais que se destacam da concorrência.

O feedback inicial para o lançamento de Gutenberg certamente foi condenatório: “… Inútil … Uma piada … Terrível …”

Você pode argumentar sobre como o WordPress lidou com o lançamento do seu novo editor de bloco de conteúdo (e você pode estar certo ao pensar que não foi ótimo), mas o segredo é que, após várias atualizações, o Gutenberg evoluiu para uma excelente ferramenta para construção de sites.

Abaixo, mostrarei 5 maneiras pelas quais um web designer com experiência limitada em codificação pode aproveitar o Gutenberg para criar os tipos de sites personalizados que as empresas procuram.

Criei um site de viagens com vários recursos personalizados usando essas três ferramentas:

  • Gutenberg
  • Conjunto de ferramentas – Seus novos blocos de conjunto de ferramentas permitem adicionar recursos personalizados aos seus sites, incluindo tipos de postagem personalizados, uma pesquisa e conteúdo dinâmico.
  • GeneratePress – Um tema leve e rápido, fácil de usar para iniciantes.

Agora vou lhe contar um segredo. Eu não sou desenvolvedor. De fato, tenho pouca experiência em codificação. No entanto, pude usar o Gutenberg para criar um site profissional com vários recursos que os sites personalizados exigiriam. Abaixo, vou analisar cinco deles.

1. Você pode criar conteúdo dinâmico

Uma vantagem que ele tem sobre os criadores de páginas é que o Gutenberg vem com várias extensões de bloco para aprimorar seus sites. Um deles é o Toolset, que oferece recursos de conteúdo dinâmico.

Conteúdo dinâmico significa que você pode criar um elemento (como uma imagem) que extrairá o conteúdo correto do banco de dados. Portanto, quando você cria uma lista de postagens, você só precisa adicionar cada bloco para cada elemento uma vez, mas esse bloco exibirá conteúdo diferente para cada postagem.

Por exemplo, criei uma lista de postagens de passeios. Depois, mostrarei como você pode fazer isso com Gutenberg. Você percebe algo estranho nos títulos abaixo?

O título é exatamente o mesmo para cada uma das minhas turnês. Isso ocorre porque os cabeçalhos são estáticos, o oposto de dinâmico. Isso significa que, quando adiciono meus blocos, qualquer texto que eu inserir no cabeçalho será exibido para cada uma das postagens. No entanto, quando for dinâmico, você verá o cabeçalho correto em cada passeio.

Para ilustrar, aqui está o meu post sobre a visita à Cisjordânia no back-end. Você pode ver o título da postagem na parte superior.

Quero exibir esta postagem da turnê com o cabeçalho correto na minha lista de conteúdo. Tudo o que preciso fazer graças a Gutenberg e Toolset é o seguinte:

  1. Selecione o bloco de cabeçalho do conjunto de ferramentas – diferente dos blocos normais de Gutenberg, o conjunto de ferramentas permite que você faça seu conteúdo dinâmico;
  2. Selecione a opção dinâmica;
  3. Escolha a fonte para o seu cabeçalho;
  4. Confirme se o cabeçalho está correto.

Você pode criar conteúdo dinâmico para vários outros blocos disponíveis no Gutenberg, incluindo imagens, campos personalizados e o link para botões.

2. Exibir listas personalizadas de conteúdo

Em um site personalizado, haverá momentos em que você desejará listar seu conteúdo de um tipo de postagem específico em diferentes partes do site. Por exemplo, uma lista de propriedades à venda na sua página inicial de imóveis.

Cada uma dessas propriedades usa o mesmo layout, exibindo as mesmas informações, como preço, número de quartos e número de banheiros da mesma maneira. Essas informações são adicionadas usando campos personalizados, que são partes de informações que você pode adicionar ao conteúdo do WordPress. Os criadores de páginas por conta própria não podem criar campos personalizados. No entanto, você pode criá-los usando o Gutenberg e seus plugins de blocos.

Abaixo, para o meu site de viagens, exibi um controle deslizante com uma lista dos passeios em destaque. A lista inclui vários campos personalizados, incluindo preço, classificação e duração.

Usei Gutenberg e Toolset para criar os campos personalizados que você pode ver na minha lista acima. Aqui estão todos os campos personalizados que criei. Destacamos o campo do preço como exemplo.

No back-end, posso usar o bloco View do conjunto de ferramentas para criar uma lista de postagens. Posso escolher quais postagens quero exibir e como quero exibi-las.

Por exemplo, abaixo, você pode ver que consigo selecionar qual conteúdo quero exibir.

Também posso decidir como quero exibir minha lista, seja na forma de uma grade, lista ordenada, não formatada ou muito mais.

Agora posso selecionar quais campos quero exibir. Muitos desses campos serão os campos personalizados que eu criei anteriormente. Cada um dos meus passeios exibirá os campos no mesmo layout. Mais uma vez, destaquei o campo personalizado de preço abaixo. Para cada campo, crio um bloco e, em seguida, escolho a fonte do conteúdo (como o preço) na barra lateral direita.

Depois de organizar o layout das minhas postagens, posso decidir exatamente quais postagens serão exibidas e em que ordem. Usando Gutenberg e Toolset, posso selecionar:

  • A ordem em que eu mostro postagens como a postagem mais recente do blog;
  • O número de postagens que eu mostro;
  • Se eu quiser um filtro nas minhas postagens, por exemplo, exiba apenas os passeios que custam menos que um determinado valor.

Adicionei um filtro para exibir apenas os passeios em destaque. Como parte dos meus campos personalizados, criei um campo para “Tours em destaque”, no qual você pode clicar em cada postagem no back-end.

Posso usar o Gutenberg e o Toolset para criar um filtro usando a barra lateral direita, que informa a minha lista de conteúdo para exibir apenas as postagens dos passeios que estão em destaque.

Observe como eu posso personalizar completamente minhas listas de postagens no Gutenberg sem usar nenhuma codificação. Até designers sem nenhuma experiência em programação poderão adicionar uma lista de postagens ao site.

3. Crie um modelo para o seu conteúdo

Um modelo é o seu modelo para os tipos de postagem que fornece uma estrutura a cada uma das postagens. Por exemplo, criei um modelo para os tipos de postagens de meus passeios, o que significa que cada post de excursão terá exatamente a mesma estrutura quando você o olhar no front-end.

Como você pode ver, as duas postagens são do mesmo modelo. Você sabe disso porque cada postagem tem o mesmo layout, com o conteúdo seguindo a mesma estrutura.

Tudo o que eu precisava para criar meu modelo no meu Editor Gutenberg foi inserir meus blocos e adicionar conteúdo dinâmico. Enquanto adiciono o conteúdo, posso usar o menu suspenso na parte superior da página para alternar entre as postagens e ver como o modelo se parece com o conteúdo da postagem.

4. Crie uma pesquisa personalizada

Um dos recursos mais importantes em um site personalizado é uma pesquisa.

Se você estiver projetando um site de diretório que vende itens, por exemplo, convém facilitar o máximo possível para que os clientes em potencial encontrem seus produtos. A melhor maneira é com uma pesquisa que contenha filtros para que eles possam restringir os resultados e encontrar exatamente o que estão procurando.

Abaixo, você pode ver a pesquisa personalizada que criei usando o Gutenberg e o Toolset para meus passeios. Ele contém vários filtros. Um dos filtros é mostrar apenas os passeios com uma classificação de 3 a 5 estrelas.

A criação de uma pesquisa personalizada consiste em duas etapas. Primeiro, criando a pesquisa (que você pode ver acima) e depois, projetando os resultados.

Criei a pesquisa usando o bloco View do conjunto de ferramentas em uma nova página. Abaixo estão as opções para aprimorar o bloco. Posso selecionar a opção de pesquisa, adicionar classificação front-end para que o usuário possa classificar os resultados quando aparecerem (preço mais baixo ao mais alto, por exemplo) e paginação para dividir o conteúdo em páginas.

Depois de adicionar o bloco, posso adicionar filtros adicionais, como o preço máximo. Também posso incluir um mapa e marcadores para exibir os resultados. Mais uma vez, graças ao Gutenberg e suas extensões, não preciso usar codificação. Apenas seleciono os blocos e ajusto as opções na barra lateral direita.

Para os resultados, adicionei blocos como fiz para o modelo e a lista personalizada de conteúdo.

E assim, tenho uma pesquisa personalizada para meus passeios. Agora posso inserir pesquisas usando os filtros no front-end.

5. Crie um arquivo de postagens similares

Um arquivo torna mais fácil para os usuários encontrarem todas as postagens que você publicou. Se você deseja um arquivo com campos padrão, como cabeçalho e conteúdo da postagem, um construtor de páginas como o Elementor é uma ótima opção. No entanto, se você deseja incluir campos personalizados com conteúdo dinâmico, precisará usar o Gutenberg,

Criei um arquivo para todos os meus passeios no meu site de viagens. Quando alguém clica no arquivo, ele vê todos os passeios que eu criei. Você pode criar um tour para qualquer uma das suas postagens.

Assim como na lista personalizada de conteúdo, posso adicionar os blocos para o conteúdo e organizar as postagens como desejar.

Também posso estilizar os blocos alterando a cor do texto, adicionando um preenchimento / margem, adicionando a cor de fundo e muito mais.

Você não precisa ser um desenvolvedor profissional para criar sites profissionais

Agora que você já viu como até mesmo um iniciante em codificação pode criar sites personalizados completos, é hora de você experimentar. Aqui estão alguns tutoriais e documentação que vale a pena passar:

  • Se você é novo no Gutenberg, o Colorlib oferece um bom tutorial sobre WordPress Gutenberg, que apresentará como você pode criar blocos.
  • O plug-in que usei com o Gutenberg, Toolset, oferece um curso de treinamento sobre como você pode usar as duas ferramentas para criar sites de diretório do WordPress. É uma ótima maneira de entender exatamente quais recursos você pode criar e como para qualquer tipo de site.
  • Para manter-se atualizado sobre quaisquer alterações no Gutenberg, também vale a pena ficar de olho no manual do editor de blocos.

Gutenberg ainda está na infância e está longe do produto final. Mas isso não significa que não pode revolucionar os contratos de construção de sites que você pode assumir. Se você tirar proveito de sua interface visual e bloquear plugins, poderá criar sites personalizados que você nunca imaginou serem possíveis.



Fonte