WordPres Gutenberg Editor Inserção de texto, imagens, vídeos e links

O editor do Gutenberg está centrado no "Bloco"; ao inserir conteúdo como texto, imagens etc., a essência é adicionar um tipo de bloco correspondente e editá-lo. Essa abordagem é altamente flexível e oferece controle preciso sobre o estilo e a posição de cada elemento. Aqui estão as etapas detalhadas:

I. Inserção de texto: criação de conteúdo com blocos de parágrafos e cabeçalhos

O texto é o corpo principal do artigo e o Gutenberg consegue a disposição do texto através dos blocos "Parágrafo" e "Título", que funcionam da seguinte forma:

1. inserir texto de parágrafo (conteúdo do corpo)

• Método 1Quando você entrar na página de edição do artigo, o prompt "Start writing or type / to add block" (Comece a escrever ou digite / para adicionar bloco) será exibido por padrão. Quando você digitar o texto diretamente, o sistema criará o bloco "Paragraph" (Parágrafo) automaticamente.
• 
• Método 2Clique no ícone "+" (inseridor de bloco) na área de edição, procure por "parágrafo" e clique nele para gerar um bloco de parágrafo em branco e, em seguida, insira o conteúdo.
• 

formatação：

Selecione um bloco de parágrafo e o painel Block (Block Settings) será exibido à direita para defini-lo:

• Alinhamento (justificado à esquerda, centralizado, justificado à direita, justificado nas extremidades);
• Tamanho do texto (pequeno, normal, grande, extragrande);
• Cor do texto (clique no quadrado de cor para escolher, tendo o cuidado de contrastar com a cor de fundo para garantir a legibilidade);
• Cor de fundo (para adicionar uma cor de base aos parágrafos e destacar o conteúdo importante).

2. inserção de títulos (hierarquia de conteúdo)

O título é usado para distinguir a estrutura do artigo (por exemplo, capítulo, seção), e recomenda-se usá-lo de acordo com a hierarquia "H1-H6" (H1 é geralmente o título principal do artigo, que foi colocado por padrão na parte superior da página de edição, portanto, não há necessidade de adicioná-lo repetidamente).

Procedimento：

1. Clique no ícone "+" na área de edição, procure por "Title" (Título) e selecione-o para gerar um bloco de título.
2. Digite o texto do título (por exemplo, "I. Preparação para a instalação").
3. Selecione o bloco e escolha H2-H6 (H2 para o subtítulo de nível 1, H3 para o subtítulo de nível 2 e assim por diante) em "Heading Level" (Nível do título) no painel direito.

delicadezaApós digitar o texto, selecione-o e pressione a tecla Ctrl+B(negrito) ou Ctrl+I(em itálico) para estilizar rapidamente o texto.

II. inserção de imagens: uso do bloco "Imagens" para adicionar imagens e otimizá-las

As imagens dão vida às postagens, e o bloco "Imagens" do Gutenberg oferece suporte ao carregamento, redimensionamento e otimização nas etapas a seguir:

1. 3 maneiras de inserir imagens

• Maneira 1: Fazer upload de uma nova imagemClique no ícone "+" → Procure por "Pictures" → Clique em "Upload" → Selecione um arquivo de imagem em seu computador → Aguarde a conclusão do upload.
• Maneira 2: Usando imagens da biblioteca de mídiaSe uma imagem já tiver sido carregada (por exemplo, uma imagem que tenha sido inserida anteriormente), clique no bloco "Pictures" (Imagens) e selecione "Media Library" (Biblioteca de mídia) → Marque a imagem de destino → Clique em "Select" (Selecionar).
• Maneira 3: Colar a imagem diretamenteCopie a imagem em seu computador (clique com o botão direito do mouse em "Copiar"), volte para a área de edição e clique com o botão direito do mouse em "Colar"; o sistema criará automaticamente o bloco de imagem e o carregará.

2. ajuste de estilos de imagem (deve ser otimizado)

Com o bloco de imagem selecionado, o painel direito permite que você defina os seguintes parâmetros principais:

• alinhamento：
  • Alinhado à esquerda / Alinhado à direita: as imagens são exibidas na lateral e o texto é exibido ao redor delas;
  • Alinhamento central: as imagens são exibidas centralmente com o texto acima e abaixo;
  • Alinhamento amplo: a imagem ocupa toda a largura da área de edição (adequado para imagens grandes).
• magnitudeLargura: Arraste o controle deslizante "Width" (Largura) para ajustar a escala (é recomendável manter a opção "Constrain Scale" (Restringir escala) marcada para evitar distorção da imagem).
• linkLink: Clique na caixa de entrada "Link" para vincular a imagem a outras páginas (por exemplo, clique na imagem para ir para a página da imagem em alta resolução); não é necessário vincular, mas pode ser deixado em branco.
• Texto alternativo (Alt Text)Descrição da imagem: Digite uma descrição da imagem (por exemplo, "Screenshot of WordPress Installation Steps" (Captura de tela das etapas de instalação do WordPress)) para ajudar os mecanismos de pesquisa a reconhecer o conteúdo da imagem, melhorar o SEO e facilitar a acessibilidade.

3. resolução de problemas comuns

• Falha ao carregar imagens: verifique o tamanho da imagem (recomenda-se não mais que 5 MB), o formato (compatível com JPG, PNG, WebP) ou atualize a página e tente novamente.
• Imagens borradas: certifique-se de carregar a imagem original (resolução de pelo menos 1.000 px de largura) e evite aplicar zoom além do tamanho original.

Inserir vídeo: adicione vídeo local ou on-line com o bloco "Video" (Vídeo)

Seja um vídeo gravado por você mesmo ou um vídeo do YouTube, Station B ou de outras plataformas, você pode inseri-lo no bloco "Vídeo":

1. insira um vídeo local (um que você mesmo tenha carregado)

1. Clique no ícone "+" → procure por "Video" → selecione "Upload" → selecione o arquivo de vídeo em seu computador (os formatos MP4 e WebM são compatíveis).
2. Após a conclusão do upload, o vídeo é exibido automaticamente no bloco e pode ser testado clicando em reproduzir.

tomar nota deOs arquivos de vídeo locais são grandes e podem ocupar espaço no servidor e diminuir a velocidade de carregamento. Recomenda-se usar esse método somente para vídeos pequenos (até 100 MB) e dar prioridade às plataformas on-line para vídeos grandes.

2. insira um vídeo on-line (recomendado!)

Inserido por meio de um link de plataforma de vídeo, ele não ocupa espaço no servidor e carrega mais rapidamente:

1. Abra a plataforma de vídeo (por exemplo, YouTube, B Station, Tencent Video), encontre o vídeo de destino e copie o link de compartilhamento (por exemplo https://www.bilibili.com/video/BV123456）。
2. Na área de edição do Gutenberg, cole diretamente o link → o sistema reconhecerá e criará automaticamente o bloco de vídeo e exibirá o player de vídeo.

Plataformas suportadasVocê pode usar o YouTube, o B-Site, o Tencent Video, o Youku, o Aqiyi e outras plataformas convencionais e aguardar de 2 a 3 segundos para que o link seja carregado depois de colado.

3. ajuste do estilo do vídeo

Selecione o bloco de vídeo e o painel direito pode ser definido:

• Alinhamento (igual ao da imagem, o alinhamento à esquerda/direita permite que o texto seja envolvido);
• Largura (redimensione o player de vídeo; recomenda-se não exceder 1000px de largura para evitar exibição incompleta em telefones celulares);
• Reprodução automática: não recomendada (a maioria dos navegadores bloqueia a reprodução automática, afetando a experiência).

Quarto, insira links: deixe o texto e as imagens associados a outro conteúdo

Os links são os "vasos sanguíneos" de um site, que podem associar o conteúdo a outras páginas e sites externos, e o Gutenberg suporta a adição de links a textos e imagens:

1. adição de links ao texto (hiperlinks)

1. Selecione o texto ao qual você precisa adicionar um link (por exemplo, "Click for detailed tutorial").
2. Clique no ícone "Link" (formato de corrente) na barra de ferramentas que aparece acima ou pressione a tecla de atalho Ctrl+K。
3. Cole o endereço do link (por exemplo, um link para uma página do site) na caixa de entrada. https://你的域名/教程 ou links externos https://example.com）。
4. Configurações opcionais:
   • Marque "Abrir em uma nova guia" (recomenda-se o uso de links externos para evitar que os visitantes saiam do seu site);
   • Clique no ícone "Link Settings" (pequena roda dentada) para adicionar um título de link (texto de dica exibido ao passar o mouse).
5. Clique em "Enter" ou "Apply" para concluir a configuração. O texto ficará azul e sublinhado, indicando que o link foi adicionado com sucesso.

2. adicionar links às imagens

1. Selecione o bloco de imagem e localize a caixa de entrada "Link" no painel direito.
2. Digite o endereço do link (por exemplo, clique na imagem para ir para a página de detalhes do produto).
3. Marque "Abrir em nova guia" (conforme desejado) e clique no espaço em branco para salvar.

3. remoção de links

• Link de texto: selecione o texto com link, clique no ícone "Remove Link" (corrente com cruz) na barra de ferramentas ou pressione Ctrl+K Exclua o endereço do link depois.
• Link da imagem: Selecione a imagem e exclua o endereço na caixa de entrada "Link" no lado direito.

V. Dicas para operadores iniciantes

1. Atalhos de operação de bloco：
   • Adicione rapidamente um bloco: digite / + nome do bloco (por exemplo. /图片 (Abra diretamente o bloco de imagens);
   • Para mover um bloco: selecione o bloco e pressione ↑/↓ ou arraste o ícone "⋮⋮" para a esquerda do bloco;
   • Excluir bloco: Selecione o bloco e pressione Delete ou clique no ícone "Excluir" na barra de ferramentas do bloco.
2. Visualização em tempo realClique no botão "Preview" (Visualizar) no canto superior direito da página de edição para verificar se o link está funcionando e se a imagem/vídeo está sendo exibido corretamente.
3. Evite tipografia excessivaA cor do texto e a cor do plano de fundo não devem ser excessivas (não mais do que 3), para manter a página limpa e organizada; o tamanho das imagens e dos vídeos é uniforme (por exemplo, a largura é definida como 800px), para aprimorar a estética.

Com as etapas acima, você pode inserir e editar facilmente textos, imagens, vídeos e links no Gutenberg Editor. Lembre-se: cada elemento é um "bloco" separado, selecione-o e ajuste as configurações no painel direito para obter um layout preciso. Pratique mais algumas vezes e você logo pegará o jeito!