Como Alterar Altura e Largura de Blocos no WordPress

Fazer com que seus blocos do WordPress tenham exatamente o tamanho certo costumava exigir CSS personalizado ou soluções alternativas complexas.

Sabemos disso porque passamos incontáveis horas ajudando usuários com esse exato problema. Mas, graças às atualizações recentes do WordPress, controlar as dimensões dos blocos tornou-se muito mais simples.

O que surpreende muitas pessoas é que existem, na verdade, várias maneiras integradas de ajustar os tamanhos dos blocos no WordPress. Através de muita experimentação, identificamos os métodos mais confiáveis que funcionam em diferentes situações e temas.

Neste guia, compartilharemos as maneiras mais fáceis de alterar a altura e a largura dos blocos no WordPress.

Por que Alterar a Altura e a Largura dos Blocos no WordPress?

O editor de blocos permite que você adicione conteúdo ao seu site WordPress usando diferentes blocos, incluindo títulos, parágrafos, imagens, vídeos, áudio e muito mais.

No entanto, às vezes você pode querer alterar a largura ou a altura de um bloco específico para melhorar sua aparência ou o layout geral do conteúdo.

Ajustar os tamanhos dos blocos também pode garantir que seu conteúdo seja responsivo e seja exibido corretamente em todos os dispositivos, incluindo telefones, tablets e laptops.

Por exemplo, você pode ter carregado uma imagem no editor de conteúdo, mas ela está muito grande e faz com que a página pareça desagradável no front-end.

Você também pode querer alterar o tamanho do bloco de título para alinhá-lo melhor com o conteúdo.

Ao ajustar a largura e a altura dos blocos, você pode tornar suas posts e páginas mais esteticamente agradáveis.

Dito isso, vamos ver como você pode facilmente alterar a altura e a largura dos blocos no WordPress. Abordaremos alguns métodos diferentes, e você pode usar os links rápidos abaixo para pular para o que deseja usar:

Método 1: Alterar a Altura e a Largura do Bloco Usando as Configurações do Bloco

Neste método, mostraremos como alterar a altura e a largura de um bloco usando as configurações padrão do WordPress.

Atualmente, o WordPress não oferece as mesmas opções de redimensionamento para todos os blocos. No entanto, o editor de blocos oferece muitas maneiras de redimensionar a altura e a largura de diferentes blocos.

Vamos começar com o bloco de Imagem no WordPress.

Primeiro, você pode alterar o alinhamento do bloco de Imagem clicando no botão 'Alinhar' na barra de ferramentas acima do bloco.

Aqui, escolher a opção 'Largura Ampliada' fará com que o bloco tenha a mesma largura do contêiner. Ou, a opção de alinhamento 'Largura Total' fará com que o bloco ocupe toda a largura da página.

Você também pode redimensionar um bloco indo para o painel 'Configurações do Bloco' à direita e rolando para baixo até a seção 'Configurações'. A partir daqui, você pode redimensionar um bloco no menu suspenso 'Tamanho da Imagem'.

Você também pode ajustar a largura e a altura do bloco digitando o tamanho em pixels preferido nas caixas 'Largura' e 'Altura' na seção 'Dimensões da imagem'.

Abaixo disso, você também pode ajustar o tamanho do bloco por porcentagem.

Outra maneira de redimensionar um bloco de Imagem é clicar na própria imagem, o que exibirá uma borda azul com âncoras circulares.

Em seguida, basta arrastar essas âncoras para alterar a altura e a largura do bloco de imagem.

Quando terminar, clique no botão ‘Atualizar’ ou ‘Publicar’ para salvar suas configurações.

Método 2: Alterar a Altura e a Largura do Bloco Usando o Bloco de Colunas

Se o bloco que você deseja redimensionar não vier com botões de alinhamento ou configurações de redimensionamento, então este método é para você.

Para este método, colocaremos nosso bloco dentro do bloco Colunas. Ele atua como um contêiner onde você pode adicionar diferentes blocos em cada coluna. Em seguida, você pode redimensionar esses blocos ajustando a altura e a largura das colunas.

Primeiro, clique no botão ‘Adicionar Bloco’ (+) no canto superior esquerdo da tela.

A partir daqui, localize e adicione o bloco Colunas ao editor Gutenberg. Em seguida, você será solicitado a escolher uma variação.

Depois disso, o layout da coluna será exibido na tela, e você poderá adicionar o bloco desejado clicando no botão ‘Adicionar Bloco (+)’ dentro de uma coluna.

Assim que o bloco for adicionado, você poderá redimensioná-lo usando as ‘Configurações da Coluna’ localizadas no painel direito.

Quando terminar, basta clicar no botão ‘Publicar’ para salvar suas alterações.

É assim que o conteúdo ficou em nosso site de demonstração após redimensionar e alinhar dois blocos de parágrafo dentro de um bloco de duas colunas.

Método 3: Alterar a Altura e a Largura do Bloco Usando o Bloco de Agrupamento

Você também pode ajustar a largura e a altura dos blocos usando o bloco Agrupar. Ele permite agrupar seus blocos desejados e estilizá-los juntos.

Primeiro, você deve clicar no botão ‘Adicionar Bloco’ (+) na parte superior. Em seguida, localize e adicione o bloco Agrupar ao editor de conteúdo.

Assim que fizer isso, o bloco Agrupar exibirá três opções de layout diferentes. Para este tutorial, usaremos o layout ‘Agrupar’.

Depois disso, o botão ‘Adicionar Bloco’ será exibido na tela. Agora você pode adicionar qualquer bloco que desejar.

Neste tutorial, adicionaremos e redimensionaremos um bloco de Título, um bloco de Parágrafo e um bloco de Imagem.

Para adicionar vários blocos ao Agrupar, clique no botão ‘Selecionar Grupo’ na barra de ferramentas do bloco.

Uma vez que o Grupo esteja selecionado, basta clicar no botão ‘Adicionar Bloco’ (+) na parte inferior.

Assim que você fizer isso, a barra lateral de configurações do bloco à direita será aberta. A partir daqui, você pode ajustar facilmente o layout, o alinhamento e a orientação de todos os blocos.

Alterar o layout também mudará os diferentes tamanhos dos blocos. Você pode configurar essas configurações até ficar satisfeito com o resultado.

Quando terminar, clique no botão ‘Atualizar’ ou ‘Publicar’ para salvar suas configurações.

É assim que o bloco Grupo apareceu em nosso site de demonstração.

Método 4: Alterar a Altura do Bloco Usando o Bloco de Capa

Este método de redimensionamento é para você se quiser usar o bloco Capa. Ele permite que você exiba texto e outro conteúdo sobre uma imagem ou vídeo.

Primeiro, clique no botão ‘Adicionar Bloco’ (+) na parte superior e encontre o bloco Capa.

Assim que fizer isso, você será solicitado a escolher uma cor ou fazer upload de uma imagem da biblioteca de mídia do WordPress. Essa imagem ou cor será usada como plano de fundo para o bloco Capa.

Em seguida, basta arrastar e soltar qualquer bloco que desejar dentro do bloco Capa.

Depois disso, você precisa clicar no bloco Capa para abrir suas configurações de bloco na coluna da direita.

A partir daqui, role para baixo até o painel ‘Dimensões’, onde você pode ajustar a altura do bloco Capa usando pixels.

Finalmente, não se esqueça de clicar no botão 'Salvar Alterações' para armazenar suas configurações.

Para instruções mais detalhadas sobre como usar o bloco Capa, você pode consultar nosso guia para iniciantes sobre Imagem de Capa vs. Imagem Destacada no editor de blocos do WordPress.

Bônus: Crie Páginas Bonitas Usando Blocos Avançados no SeedProd

Você pode criar facilmente páginas bonitas e esteticamente agradáveis usando o plugin SeedProd.

É o melhor construtor de páginas WordPress do mercado que permite criar landing pages usando blocos, que são super fáceis de personalizar e redimensionar de acordo com suas necessidades.

Várias de nossas marcas parceiras usaram esta ferramenta para projetar todo o seu site, e seus usuários adoraram o visual moderno e atual. Para saber mais, veja nossa análise do SeedProd.

Primeiro, você precisará instalar e ativar o plugin SeedProd. Para mais detalhes, você pode ler nosso guia sobre como instalar um plugin do WordPress.

Após a ativação, você deve ir para a página SeedProd » Configurações no seu painel do WordPress e inserir a chave de licença na caixa ‘Chave de Licença’.

Você pode encontrar a chave de licença na página da sua conta no site do SeedProd.

Em seguida, visite a tela SeedProd » Landing Pages na barra lateral de administração para começar a criar uma landing page.

A partir daqui, basta clicar no botão ‘Adicionar Nova Landing Page’.

Agora você será levado para a tela ‘Escolher um Novo Modelo de Página’. O SeedProd oferece muitos modelos pré-fabricados que você pode escolher.

Depois de selecionar um modelo, você será solicitado a fornecer um nome e um URL para sua landing page.

Após adicionar esses detalhes, simplesmente clique no botão ‘Salvar e Começar a Editar a Página’ para continuar.

Isso iniciará o construtor de páginas de arrastar e soltar do SeedProd, onde você pode começar a editar sua página. Para instruções detalhadas, consulte nosso guia sobre como criar uma landing page com WordPress.

Para este tutorial, adicionaremos e redimensionaremos um bloco de Imagem e um bloco de Botão.

Primeiro, você precisará arrastar o bloco de Imagem do painel de blocos à esquerda e soltá-lo onde quiser na página.

Em seguida, clique no bloco de Imagem para abrir suas configurações de bloco na coluna esquerda. A partir daqui, você pode fazer upload de uma imagem da sua biblioteca de mídia.

Em seguida, você pode alterar a altura e a largura do bloco usando pixels ou porcentagens.

Você também pode ajustar o tamanho e a posição da imagem alternando para a aba ‘Avançado’ na parte superior do painel de configurações.

Em seguida, basta clicar no painel Espaçamento para expandir suas configurações.

Aqui, simplesmente adicione valores para ajustar a margem e o preenchimento do bloco de acordo com suas necessidades.

Você pode ajustar a margem e o preenchimento para as áreas superior, inferior, esquerda e direita do bloco.

Com o Seedprod, você também pode adicionar um bloco Espaçador entre dois blocos diferentes para criar um espaço entre eles.

Primeiro, você precisará localizar e adicionar o bloco ‘Espaçador’ da coluna esquerda. Em seguida, clique nele para abrir suas configurações.

Agora, você pode controlar a altura do espaçador usando o controle deslizante ‘Altura’.

O bloco espaçador pode ajudar você a criar um site sem bagunça.

Você também pode alterar a largura e a altura de outros blocos da mesma maneira, incluindo os blocos de Vídeo, Título e Botão.

Simplesmente encontre o bloco Botão na coluna esquerda e arraste-o para sua página.

Em seguida, você precisará clicar no Botão para abrir as configurações do bloco.

A partir daqui, alterne para a aba ‘Avançado’ na parte superior. Você pode alterar a altura do bloco arrastando o controle deslizante ‘Preenchimento Vertical’.

Para alterar a largura, arraste o controle deslizante ‘Preenchimento Horizontal’ na coluna esquerda.

Quando terminar, não se esqueça de clicar no botão ‘Salvar’.

Esperamos que este artigo tenha ajudado você a aprender como alterar a largura e a altura dos blocos no WordPress. Você também pode querer ver nosso artigo sobre como adicionar e alinhar imagens no editor de blocos do WordPress e nossas principais escolhas para os melhores temas do WordPress compatíveis com Gutenberg.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.