A partir do WordPress 5.0, os usuários deste sistema CMS têm um novo editor de autoria de conteúdo web. Ao criar um site, ele usa o chamado blocos. Blocos individuais podem ser editados. No tutorial a seguir, falaremos sobre como usar o editor Gutenberg para criar conteúdo do site.
Obsah
O que é Gutemberg?
Gutenberg é o novo editor padrão do WordPress . Ele funciona em um princípio diferente do editor TinyMCE usado até agora. Ele oferece uma experiência totalmente nova de web design criando blocos usando blocos. Em blocos individuais é possível trabalhar com texto como em um editor de texto.
Os blocos podem ser movidos e agrupados na página de acordo com as ideias específicas do usuário. Graças ao Gutenberg, o usuário tem a oportunidade de personalizar melhor a aparência e o layout da página.
O que é um bloco?
Blocos são pedaços de conteúdo em uma página . Você pode criar um bloco para texto, widgets, imagens, vídeos, citações e afins. É possível continuar trabalhando com cada bloco. O benefício de criar um site é a função de arrastar e soltar , que pode ser usada para mover blocos facilmente.
Como criar uma página no editor Gutenberg
Para criar uma nova página, vá para Páginas ›Adicionar novo na administração da página. A seguinte página será aberta:
Escreva um título no bloco exibido. Você também encontrará a opção de editar o serviço do site . Você pode editar o slug a qualquer momento clicando no título. Basta clicar no botão Editar ao lado do URL da página.
Criando blocos
Depois de digitar o título, você pode adicionar mais texto ao bloco de entrada de texto predefinido ou pode inserir seu próprio bloco. Para isso, clique no ícone de mais:
. Aqui você pode selecionar o tipo de conteúdo que deseja adicionar.
No meu exemplo, optei por adicionar um parágrafo. No bloco de parágrafos, você encontrará opções de fonte, alinhamento e um ícone para inserir um link. No final da barra de ferramentas de edição de blocos, você encontrará um botão para mais opções de edição
. Por exemplo, você pode usá-lo para ocultar configurações de bloco, duplicar, editar como HTML, adicionar blocos reutilizáveis e remover um bloco.
Você pode encontrar mais opções para o texto no lado direito da tela . As configurações de fonte estão disponíveis. Você pode escolher um tamanho de fonte entre várias opções predefinidas ou definir seu próprio tamanho. Você também pode escolher uma cor de fundo, cor de texto ou definir seus próprios ajustes avançados.
As opções para editar blocos diretamente acima do bloco, bem como na parte direita da tela, diferem de acordo com os tipos de blocos individuais.
Alterar tipo de bloco
Você pode alterar o tipo de bloco a qualquer momento durante a criação da página. Você faz isso clicando no primeiro botão acima do bloco ativo. O caractere para o tipo de bloco ativo sempre é exibido aqui. Depois de clicar, aparecerá uma lista de blocos a partir da qual você pode escolher.
Tipos de bloco
Existem vários tipos de blocos disponíveis ao criar páginas. Eles estão organizados em uma lista clara, dividida em várias partes:
Mais usados – os tipos de bloco mais usados, como parágrafo, imagem, galeria e similares, são exibidos aqui.
Elementos diretos – há um bloco para imagem direta.
Blocos Comuns – Aqui você encontrará blocos para imagens, vídeo, arquivo, lista, citação e outras partes da página comumente usadas.
Formatação – permite adicionar conteúdo formatado, como tabela, código, HTML personalizado, mas também um bloco em um editor de texto clássico do WordPress.
Elementos de Layout – Aqui você encontrará blocos para quebras de página, botões, colunas ou um bloco com layout pré-criado para mídia e texto.
Widgets – graças às opções disponíveis, você pode adicionar códigos de acesso, categorias, uma lista de comentários recentes e afins.
Incorporado – Permite incorporar conteúdo externo, como YouTube, Twitter, Instagram, Facebook e outros conteúdos.
Como criar um layout básico em uma página
Vamos começar com uma página simples. Será suficiente se tiver um título, texto, imagem, lista com marcadores e galeria de imagens.
Adicione texto
Depois de inserir o título, basta começar a escrever no bloco predefinido. Gutenberg cria um bloco separado para cada parágrafo. Você não precisa adicioná-lo à página todas as vezes. Tudo o que você precisa fazer é pressionar Enter. O novo bloco de parágrafo é criado sozinho.
Adicionar uma imagem
Para adicionar uma imagem, selecione o bloco apropriado na lista de blocos. A lista de blocos é exibida clicando na imagem do ícone de adição no canto superior esquerdo da tela. Você pode selecionar uma imagem da biblioteca de mídia ou carregá-la na página.
Ele aparecerá no layout da página assim que for carregado. Na parte direita da tela, defina o tamanho da imagem, preencha o texto alternativo ou insira um link.
Adicionar uma lista com marcadores
Selecione o bloco apropriado na lista. Ao editar o texto, você também tem a opção de escolher uma lista numerada, inserir um link e assim por diante.
Adicionar galeria de imagens
Selecione um bloco para a galeria na lista de blocos. Em seguida, envie as fotos. No bloco da galeria, você pode ajustar o alinhamento, inserir ou remover uma imagem. Na parte direita da tela você encontrará funções para definir o número de colunas e recortar imagens na galeria.
Como mover blocos
Blocos individuais podem ser movidos na página. Os botões necessários aparecem quando você passa o mouse sobre o bloco que deseja mover. Existem duas setas para cima e para baixo para mover. Estes sempre movem o bloco selecionado uma posição para cima ou para baixo. Entre as setas encontrará um ícone para a função de arrastar e largar
. Ao passar o mouse sobre ele, aparecerá uma mão, que você pode simplesmente segurar o bloco e movê-lo para o local desejado.
Como reutilizar blocos criados
Se você criou um bloco que gostaria de usar novamente mais tarde, clique no ícone Mais opções. Você o encontrará no menu de funções na parte superior do bloco. Selecione Adicionar a blocos reutilizáveis aqui.
Assim você terá acesso aos blocos criados toda vez que criar um novo post. Os blocos salvos aparecem na lista de tipos de bloco em Reutilizável . Eles também podem ser gerenciados. Você pode convertê-los de volta em um bloco normal ou removê-los do menu.
Características adicionais
Existem vários recursos mais úteis disponíveis para criar páginas ou artigos. Primeiro, vamos ver os botões na parte superior da página.
Já mencionei o primeiro dos ícones. Usado para adicionar um bloco a uma página.
As setas para trás e para frente não precisam ser representadas – elas o levarão um passo para frente ou para trás.
i – aqui você pode ver a estrutura do conteúdo.
Uma função interessante é oferecida pela navegação por último bloco de botões. Além de exibir a ordem dos blocos individuais, também é usado para pular rapidamente para o bloco selecionado.
Você encontrará mais recursos no lado direito da página. Você já deve conhecer alguns de trabalhos anteriores com o WordPress. Outros são novos.
Documento – Permite acessar as configurações do documento, como editar o URL da página, adicionar uma imagem de ilustração e ativar comentários. A atribuição de categorias e tags também está disponível na página de postagem. Você também pode adicionar texto para o resumo.
Bloco – Já mencionei algumas das funções deste botão na seção Criando blocos. Eles diferem dependendo do tipo de bloco selecionado.
Visualização – O botão de visualização exibe uma visualização ao vivo da página ou postagem.
Publicar – Use este botão para publicar a página. Se você estiver editando uma página existente, um botão Atualizar aparecerá em vez do botão Publicar.
Permalink – Edite a parte de texto do URL aqui.
Propriedades da página – Usado para configurar um modelo de página e atribuir uma página pai.
Mostrar mais ferramentas e opções – o último botão no canto superior direito da página é Mostrar mais ferramentas e opções . Aqui estão alguns recursos, como o modo de destaque, para ajudá-lo a se concentrar no conteúdo de um bloco específico ao criar uma página.
Você também encontrará a alternância entre o editor visual e o editor de código, bem como o modo de tela cheia. Além disso, você encontrará atalhos de teclado, a capacidade de gerenciar blocos reutilizáveis e outras opções de configuração de página.
Dicas avançadas
Também mencionarei algumas funções de editor mais avançadas:
Criação rápida de blocos
Você pode facilitar seu trabalho para que nem sempre precise procurar um bloco específico na lista. Tudo o que você precisa fazer é inserir uma barra e as primeiras letras do nome do bloco no bloco predefinido :
/názov bloku
Assim que você começar a digitar, verá uma lista de opções correspondentes.
Editando o código-fonte
Você pode editar o código-fonte de uma página em cada etapa de sua criação. Você pode fazer isso clicando no ícone . Procure a opção do editor de código aqui.
Ativar o modo de tela cheia
No editor Gutenberg, você pode trabalhar sem distrações desnecessárias, oferecendo o menu de páginas. Role até o canto superior direito da página e clique em . Aqui você encontrará a função Full Screen Mode. Você também pode selecionar o Modo Spotlight para focar ainda melhor em um bloco específico.
Usando atalhos de teclado
Gutenberg permite que você use muitos atalhos de teclado especiais além dos atalhos usuais. Por exemplo:
- Mostrar ou ocultar as configurações da barra lateral Ctrl + Shift +
- desfaça suas alterações recentes Ctrl + Z
- fazer alterações revogadas novamente Ctrl + Shift + Z
Use Ctrl + Shift + H para abrir uma lista de atalhos.
Estender opções com plugins
Para expandir suas opções de design, instale um dos plugins do Gutenberg. O plugin Stackable , por exemplo, oferece uma coleção de blocos pré-preparados. Você criará páginas principais interessantes. Otter Blocks também é um ótimo plugin. Crie blocos como preços, Google Maps e muito mais.
Aqui estão algumas respostas para perguntas frequentes
E se eu não quiser usar o Gutenberg?
Alguns usuários perguntam se o WordPress permite que você use o editor TinyMCE anterior. Sim, é possível. O Gutenberg pode ser desativado neste caso. Tudo o que você precisa fazer é instalar o plugin WordPress Classic Editor .
O conteúdo antigo será alterado?
Todo o conteúdo que você já possui no site permanecerá inalterado. Gutenberg coloca uma página ou artigo específico em um bloco. Gutenberg está disponível para este fim chamado bloco clássico. Isso permite que você trabalhe com o conteúdo original como no clássico editor TinyMCE.
Você pode simplesmente editar o conteúdo original em um bloco clássico ou convertê-lo em blocos . Você encontrará a função necessária no ícone Mais opções . Você também pode trabalhar com o conteúdo como se o tivesse criado em um editor de blocos.
