Centrar Imagens e Vídeos no Gutenberg – Alterar Posicionamento de Elemento

Centrar imagens e vídeos no Gutenberg é essencial para melhorar a estética e a leitura do conteúdo. O editor Gutenberg, introduzido no WordPress 5.0, revolucionou a forma como conteúdo é criado e editado na plataforma, oferecendo um sistema baseado em blocos que permite aos utilizadores uma maior flexibilidade e controlo sobre o layout das suas páginas e artigos. Centrar elementos visuais, como imagens e vídeos, é uma prática comum para melhorar a estética e a leitura do conteúdo, destacando esses elementos no fluxo geral do texto.

Centrar Imagens e Vídeos no Gutenberg – Índice

Enquadramento Teórico

Explicação Detalhada

Passo a Passo

   1. Selecionar o Bloco de Imagem ou Vídeo

   2. Acessar as Opções de Alinhamento

   3. Centrar o Elemento

   4. Ajustar e Publicar

Dicas Técnicas Relacionadas

Enquadramento Teórico

Centrar imagens e vídeos no Gutenberg é essencial para melhorar a estética e a leitura do conteúdo. O editor Gutenberg, introduzido no WordPress 5.0, revolucionou a forma como conteúdo é criado e editado na plataforma, oferecendo um sistema baseado em blocos que permite aos utilizadores uma maior flexibilidade e controlo sobre o layout das suas páginas e artigos. Centrar elementos visuais, como imagens e vídeos, é uma prática comum para melhorar a estética e a leitura do conteúdo, destacando esses elementos no fluxo geral do texto.

Explicação Detalhada

Com o Gutenberg, o posicionamento de elementos visuais torna-se intuitivo, graças à sua interface de arrastar e soltar e às opções de alinhamento disponíveis diretamente na barra de ferramentas de cada bloco. O processo de centrar imagens e vídeos no Gutenberg pode ser realizado em poucos cliques, permitindo que mesmo utilizadores sem conhecimentos avançados de programação ou design possam facilmente ajustar o layout dos seus conteúdos.

Passo a Passo

1. Selecionar o Bloco de Imagem ou Vídeo

Adicione um novo bloco de imagem ou vídeo ao seu conteúdo, ou selecione um já existente. Para adicionar, clique no ícone de ‘+’ (mais) no local desejado e escolha ‘Imagem’ ou ‘Vídeo’ da lista de blocos disponíveis. Esse é o primeiro passo para centrar imagens e vídeos no Gutenberg.

2. Acessar as Opções de Alinhamento

Com o bloco selecionado, uma barra de ferramentas aparecerá acima do mesmo. Nesta barra, localize o ícone de alinhamento, que normalmente exibe diferentes opções de posicionamento, incluindo a opção ‘Centralizar’. Usar essas opções é fundamental para centrar imagens e vídeos no Gutenberg.

3. Centrar o Elemento –

Clique no ícone de ‘Centralizar’ para alinhar o bloco de imagem ou vídeo ao centro. Imediatamente, o elemento será ajustado para o centro do conteúdo, refletindo a mudança no editor visual. Assim, você terá sucesso ao centrar imagens e vídeos no Gutenberg.

4. Ajustar e Publicar

Após centrar o elemento, é possível ajustar outros aspectos como o tamanho e as margens, utilizando as opções adicionais na barra de ferramentas ou no painel de configurações do bloco, ao lado. Quando estiver satisfeito com o posicionamento e aparência, continue editando o seu conteúdo ou publique a página ou artigo. Assim, o processo de centrar imagens e vídeos no Gutenberg estará completo.

Dicas Técnicas Relacionadas

1 – Pré-visualização do Conteúdo: Sempre pré-visualize o seu conteúdo antes de publicá-lo, para garantir que os elementos estão corretamente alinhados e que o layout funciona bem em diferentes dispositivos e tamanhos de ecrã. Isso é especialmente importante ao centrar imagens e vídeos no Gutenberg.

2 – Utilização de Colunas: Para um controle mais preciso do posicionamento de imagens e vídeos, considere o uso do bloco de ‘Colunas’, que permite colocar elementos lado a lado e ajustar o alinhamento dentro de cada coluna individualmente. Isso pode ajudar a centrar imagens e vídeos no Gutenberg de forma mais eficaz.

3 – Customização CSS Adicional: Para necessidades de design mais específicas ou alinhamentos que não são possíveis apenas com as opções do Gutenberg, pode ser necessário adicionar customização CSS manualmente. Isto pode ser feito no editor de blocos, adicionando classes CSS personalizadas aos blocos e editando o CSS adicional nas opções de personalização do tema. Essa abordagem pode melhorar ainda mais a experiência de centrar imagens e vídeos no Gutenberg.


A sua mente inquieta pode inspirar um artigo. Encorajamo-lo a compartilhar as suas ideias connosco. Programação audaciosa? Faça acontecer por aqui.

As suas ideias inovadoras podem inspirar um novo projeto. Encorajamos a partilhar os seus conceitos para desenvolver projetos WordPress, WooCommerce e plugins WP, fazer manutenção de segurança e performance ao seu website WordPress ou criar novas funcionalidades num website WP atual aqui.

Centrar Imagens e Vídeos no Gutenberg