Sem sombra de dúvidas, o Gutenberg facilitou o uso do WordPress: além de criar um fluxo de trabalho mais linear, visto que cada bloco é como uma peça formando o conteúdo todo, a ideia dos blocos também tornou o editor mais intuitivo e visualmente limpo. Ao abrir um novo post, por exemplo, tudo é como uma tela em branco. Não há botões para distrair ou confundir o autor. O conteúdo, seja ele texto ou mídia, é inserido gradativamente, no mesmo ritmo em que o post ganha forma.
Conhecendo os blocos do Gutenberg
Conforme explicamos acima, a principal característica do Gutenberg é que nele as publicações são produzidas em blocos. Cada bloco é uma parte do conteúdo que aparecerá no post, podendo ser texto, mídia (como fotos, músicas e vídeos), elementos de formatação, elementos de layout ou widgets – que, por sua vez, variam conforme os plugins que o administrador do site optou por adicionar. Entendendo a premissa básica do Gutenberg, agora é necessário se familiarizar com cada um dos blocos, o que faremos a seguir:
Parágrafo / Paragraph
Com nome autoexplicativo, o bloco de parágrafo permite que o autor adicione conteúdo escrito ao post, um parágrafo mesmo, tal qual esse que você está lendo agora. Ao utilizar esse bloco, ainda é possível personalizar algumas opções do texto, como o alinhamento do parágrafo, se algo estará escrito em negrito ou itálico, além de ser possível adicionar links a uma determinada palavra ou frase. As demais opções do bloco de parágrafo, acessíveis pelo menu drop-down, são igualmente úteis, embora seja mais raro utilizá-las. Lá é possível alterar a cor do texto, sublinhar as palavras, tachá-las ou até mesmo justificar o parágrafo.
Título / Heading
Seguindo a estrutura padrão de um post, partimos para o bloco de títulos. Também como o nome já diz, este bloco permite transformar um determinado texto em um título, o que costuma ser útil para organizar as ideias e a estrutura do post como um todo. No Showmetech, os títulos são especialmente importantes pois refletem diretamente no índice exibido no topo de cada página. Já reparou nisso?
Exemplo de um título H2 (padrão)
Exemplo de um título H3
Exemplo de um título H4
Ao transformar um texto em um título no nível padrão, o H2, o autor ainda pode transformá-lo num título nível H3 ou H4, dependendo da ênfase que deseja dar ao conteúdo, já que estes dois últimos são menores. Uma vez utilizando o bloco de título, para escolher uma dentre estas três opções de nível, basta clicar no botão “H2″ no topo do bloco e alterar para o desejado.
Lista / List
As listas são especialmente úteis quando é necessário indicar muitos itens num determinado trecho do post. Elas costumam ser utilizadas em recomendações de produtos, por exemplo, ou para elencar os passos de um tutorial. Ao ativar o bloco de lista, o conteúdo escrito passa a ser exibido da seguinte forma:
Tópico 1;Tópico 2;Sub-tópico 2.1;Tópico 3;
Para finalizar a lista, basta pular duas linhas e você automaticamente abrirá um bloco de parágrafo para continuar escrevendo. Caso deseje mudar a estrutura da lista – adicionar sub-tópicos ou trocar os pontinhos que separam cada item por números, por exemplo – basta clicar no bloco onde está a lista e usar um dos quatro botões exibidos logo acima.
Imagem / Image
A frase “Uma imagem vale mais que mil palavras” pode ser clichê, mas não deixa de ser verdade, não é mesmo? Por isso, rechear o seu post de imagens é sempre uma ótima ideia, desde que elas tenham qualidade e sejam úteis ao propósito da publicação, é claro. Para te ajudar a fazer isso, o bloco de imagens permite adicionar mídias que estejam no seu computador, na própria biblioteca de mídia do site ou em qualquer lugar da internet, a partir do link da foto. A melhor forma de adicionar uma imagem ao seu post é a partir da opção Biblioteca de mídia, pois a através dela é possível enviar imagens que estão salvas no seu computador, e logo em seguida preencher seus atributos (legenda, texto alternativo, descrição e título), que são essenciais para melhorar o SEO da publicação. Caso adicione a imagem a partir da URL ou clicando na opção Enviar, ela será incluída de imediato no post, o que te faz ter mais trabalho para acessá-la na biblioteca de mídia e preencher os atributos citados. Ao trabalhar com imagens, inclusive, vale se atentar ao menu lateral exibido à direita da tela. Embora não seja tão utilizado com os blocos de texto, ele exibe configurações interessantes no caso da imagens: é possível, por exemplo, escolher a proporção em que a figura é exibida.
Cobertura / Cover
O bloco de cobertura é um bloco de imagem que pode conter outros blocos sobrepostos a ele. Ele é muito utilizado em sites que pretendem usar um fundo de tela dinâmico, com a imagem de fundo surgindo e alterando conforme a rolagem da tela. Você pode adicionar ao bloco de cobertura qualquer bloco disponível no WordPress, como título, parágrafo, ou até uma outra imagem. O seu uso deve estar condicionado ao estilo de cada website. Esse bloco costuma aparecer no início de trechos importantes do post, para dar ênfase a um parágrafo importante, por exemplo. É válido citar ainda que quanto ao texto que sobrepõe a imagem, também é possível deixá-lo em negrito ou itálico, adicionar links ou alterá-lo da mesma forma que é possível fazer com parágrafos. Uma característica interessante é que a imagem pode ser configurada como fundo fixo, ou seja, ela ficará fixa no fundo da janela durante a rolagem da tela, como no exemplo abaixo:
Caso o autor deseje alterar a posição do texto sobre a imagem, é possível efetuar o ajuste a partir do painel lateral à direita, exibido sempre que se clica no bloco da imagem de cobertura. No mesmo painel, também é possível personalizar a opacidade em que a imagem de fundo é exibida.
Vídeos / Videos
Outro bloco bastante autoexplicativo é o de vídeos: assim como o bloco de imagens, ele permite adicionar um conteúdo de mídia, neste caso um vídeo, que esteja no computador do autor ou que já se encontre na biblioteca de mídia do site, além de também ser possível adicioná-los a partir do link. Na hora de adicionar vídeos aos seus posts, lembre-se de preencher os atributos do conteúdo (título, descrição e texto alternativo) e dê preferência aos conteúdos nos formatos .mov e .mp4. Exemplo de uso do bloco de vídeo: Além disso, caso o vídeo não preencha toda a largura da página, também é indicado que o autor centralize-o utilizando os controles de alinhamento exibidos no topo do bloco. Dessa forma, você evita que um vídeo mais estreito que a página fique alinhado à esquerda, deixando uma sensação de desproporcionalidade no conteúdo.
Galeria
Utilizar o bloco de galerias é a melhor forma de adicionar várias imagens em um determinado post sem deixá-lo com uma aparência poluída. O WordPress organiza as imagens automaticamente conforme o tamanho da sua tela, seja um monitor widescreen ou a tela do celular. Seu uso mais recomendado é em reviews e análises, mas isso não impede que você as inclua em qualquer post demonstrativo, utilizando a galeria para expor o máximo de fotos possível, sem ter de espalhá-las ao longo do texto. Assim como para adicionar outras mídias, é possível criar galerias a partir das fotos salvas no computador ou na biblioteca de mídia do site. Após enviar as fotos, o autor deve preencher os atributos de cada uma e então selecioná-las, clicando então em Criar nova galeria. Na tela que se abre em seguida, é possível definir uma legenda para cada imagem e inserir a galeria no post. Exemplo de uso de um bloco de galeria: Com a galeria incluída no post, clique na galeria que você adicionou e, em seguida, no botão com o ícone de uma engrenagem, localizado no canto superior direito do editor, logo ao lado do botão “Publicar”. Isso fará com que o painel lateral com os controles do bloco seja ativado. Nele, você pode alterar como as imagens serão exibidas na galeria, em quantas colunas, por exemplo, além do tamanho das miniaturas.
Citar / Quote
O bloco de citações permite destacar citações de pessoas relacionadas à matéria, sendo especialmente útil em posts mais longos, quando há muitos parágrafos seguidos e, por algum motivo, não convém separá-los com uma imagem. Além de proporcionar dinamismo à publicação, as citações te ajudam a dar ênfase a um determinado trecho. O bloco possui um campo para o texto da citação, e um campo para identificarmos seu autor. Caso utilize o bloco de citações, o conteúdo escrito nele tomará a seguinte forma:
Arquivos / Files
Seguindo a mesma lógica dos blocos de imagem, galeria e vídeo, o bloco de arquivo permite adicionar diferentes formatos de arquivos ao post. Apesar de bastante funcional, pode ser raro precisar usá-lo, principalmente porque conteúdos desse gênero normalmente são adicionados a partir de links, que por sua vez levam o leitor até o site apropriado para baixar o arquivo em questão. Ainda assim, caso seja necessário adicionar um arquivo em um post, o autor também poderá escolher um item que esteja no seu computador, a partir do botão Enviar, ou escolher um conteúdo que já esteja na biblioteca de mídia do site. Uma vez inserido, o item aparecerá com seu título (que inclusive pode ser alterado pelo autor) seguido pelo botão Baixar, com o qual o leitor poderá fazer o download. Exemplo de uso de um bloco de arquivos:
Tabela / Table
As tabelas são as melhores amigas do autor quando se trata de organizar informação. Por isso, elas são especialmente úteis na hora de listar muitos itens – as especificações do dispositivo, como neste artigo, por exemplo, ou uma série de links separados por categoria. Seja qual for a utilidade que você encontrar pra tabela, o importante é saber utilizá-la. Felizmente, o editor Gutenberg também traz um bloco para elas. Ao selecionar o bloco de tabela, a primeira coisa que o autor deve fazer em seguida é definir o número de linha e colunas que a tabela deve ter. Feito isso, a tabela aparece logo abaixo e é possível preenchê-las com texto, inclusive formatando para negrito, itálico e adicionando links nas palavras se preciso. Exemplo de uso de um bloco de tabela: Outra função interessante das tabelas é que a largura das colunas e a espessura das linhas se ajustam automaticamente para comportar o texto digitado, o que facilita e muito a formatação. Caso o autor deseje, também é possível clicar em alguma das células para invocar o menu do bloco e ajustar algumas propriedades da tabela, como o posicionamento dela na página e o posicionamento das colunas dentro da própria tabela, além de também ser possível excluir e adicionar colunas ou linhas. No painel de configurações à direita, aquele acessível pelo ícone de engrenagem, ainda é possível definir uma área de cabeçalho e rodapé para a tabela, bem como definir sua cor de fundo. No mesmo painel, o autor também pode desabilitar o ajuste automático de largura para as colunas da tabela, de forma que cada coluna tenha exatamente o mesmo tamanho. Uma dica muito importante: sempre veja na página de visualização como ficou a sua tabela, pois no layout do seu site seu visual pode ficar diferente do que esperava.
Códigos Incorporados / Embeds
As incorporação de mídia permite que parte do conteúdo de uma determinada plataforma ou site, normalmente redes sociais, seja incorporada no post. Na prática, é essa incorporação que nos permite adicionar um vídeo do YouTube, do Facebook, um tweet ou um mapa do Google Maps num texto. É como se uma pequena janela para o conteúdo que está na plataforma fosse aberta no texto, permitindo visualizar esse conteúdo dentro do post. Para incorporar um conteúdo ao seu post, a maneira mais prática é usar um bloco de parágrafo normal e copiar o link do conteúdo, seja ele um tweet, uma postagem ou um vídeo, e colar diretamente no editor. O editor automaticamente vai incorporar a mídia ao post, exibindo o tweet, postagem ou vídeo, e transforma em um bloco de códigos incorporados. Este método funciona com as plataformas mais utilizadas, como Twitter, Facebook, Instagram e YouTube. E se o método não funcionar? Você pode utilizar o bloco específico para a mídia que você deseja incorporar, mas fique atento ao escolher o bloco, pois ele só funciona para a mídia selecionada. Quer um exemplo? Se você quiser adicionar um conteúdo do YouTube em um bloco do Vimeo, ele não vai funcionar. Esse tipo de incorporação funciona para a maioria dos links, até músicas do Spotify podem ser incorporadas dessa forma. Outros conteúdos, no entanto, podem não funcionar por meio da simples incorporação de links, exigindo que o autor não só utilize o bloco de incorporação correto para aquela plataforma, como também o código de incorporação (ou link) do conteúdo que deseja importar. Exemplo de uso de um bloco de incorporação:
Mídia e texto / Media & Text
Por fim, um bloco do Gutenberg que você talvez não conheça mas que pode servir como um diferencial para o seu post, dependendo da criatividade com a qual você utilizá-lo, é o bloco de Mídia e Texto. Basicamente, como o nome já esclarece, esse bloco permite unir um conteúdo multimídia (um vídeo ou imagem) a um parágrafo escrito, fazendo com que o bloco tenha destaque – ideal para comentários pontuais em uma análise, por exemplo. O painel de configurações do bloco também permite alguns ajustes: você pode escolher uma cor de fundo para o bloco, além de poder permitir que o conteúdo seja empilhado em dispositivos móv Exemplo de uso do bloco de mídia e texto: Esta foi a nossa lista com os principais blocos utilizados no WordPress, com eles é possível produzir suas publicações com alta qualidade e personalização. Lembre-se que há opções de blocos com funções mais avançadas, além de blocos que podem acompanhar plugins instalados no seu WordPress, adicionando novas funcionalidades. E caso você tenha curtido as dicas acima, é provável que também goste de conhecer 18 extensões para Google Chrome que podem turbinar a sua experiência com o WordPress, 5 dicas do Showmetech para usar a plataforma da maneira mais eficiente no seu blog, seja ele pessoal ou de negócios, além do guia completo que preparamos para iniciantes em SEO – um conjunto de técnicas e estratégias que buscam aumentar a visibilidade do seu site em mecanismos de busca da web.
