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?

Embora o editor de blocos do WordPress facilite a adição de conteúdo, os tamanhos de bloco padrão podem nem sempre se adequar ao design que você tem em mente. Ajustar a altura e a largura de um bloco é uma maneira simples de obter mais controle sobre a aparência da sua página.

Aqui estão alguns motivos importantes pelos quais você pode querer alterar o tamanho de um bloco:

• Melhorar o Layout Visual: Você pode criar designs mais equilibrados e com aparência profissional controlando o tamanho exato dos seus elementos.
• Aumentar a Legibilidade: Ajustar a largura dos blocos de texto pode tornar seu conteúdo mais fácil de ler, especialmente em telas largas.
• Garanta a Responsividade: Dimensionar blocos corretamente ajuda seu conteúdo a ter uma ótima aparência em todos os dispositivos, de desktops a celulares.
• Criar Ênfase: Tornar um bloco maior ou menor pode chamar a atenção para chamadas para ação importantes ou informações-chave.

Entendendo o Dimensionamento de Blocos no WordPress

Antes de mergulhar nos métodos, é útil entender as diferentes maneiras que o WordPress permite definir as dimensões dos blocos:

Termo	O que significa	Quando Usá-lo
Pixels (px)	Uma unidade de tamanho fixo que não muda com base no tamanho da tela.	Use pixels quando quiser que algo permaneça exatamente do mesmo tamanho em todos os lugares.
Porcentagens (%)	Uma unidade flexível que se ajusta com base no contêiner pai.	Use porcentagens para fazer seu layout ficar bom em todos os tamanhos de tela.
Largura Ampla	Um alinhamento do WordPress que torna um bloco mais largo que a área de conteúdo, mas não em tela cheia.	Use isso para fazer seções se destacarem sem se estender por toda a página.
Largura total	Um alinhamento do WordPress que estende um bloco de ponta a ponta na tela.	Experimente isso para seções principais, banners ou grandes imagens de fundo.
Altura Mínima	Define a menor altura que um bloco pode ter, mas permite que ele cresça se necessário.	Opte por isso quando quiser que seções (como blocos de Capa) mantenham uma altura consistente.

Agora, vamos ver como você pode alterar facilmente a altura e a largura dos blocos no WordPress.

Cobriremos 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.

Embora o WordPress não ofereça exatamente as mesmas opções de redimensionamento para todos os blocos, o editor de blocos fornece várias maneiras poderosas de ajustar a altura e a largura de vários blocos.

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

Para um bloco de Imagem, você pode ajustar sua largura usando as opções de alinhamento. Clique no botão 'Alinhar' na barra de ferramentas acima do bloco.

Escolher 'Largura Ampla' fará com que a imagem ocupe a maior parte da sua área de conteúdo, enquanto 'Largura Total' fará com que ela se estenda por toda a página.

Você também pode ajustar o tamanho de exibição da imagem acessando o painel 'Configurações do Bloco' à direita.

Na seção 'Configurações', use o menu suspenso 'Tamanho da Imagem' para escolher entre opções predefinidas como Miniatura, Médio, Grande ou Tamanho Completo.

Isso alterará as dimensões da imagem para corresponder à predefinição selecionada.

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 Largura do Bloco Usando o Bloco de Colunas

Se o bloco que você deseja redimensionar não tiver controles de tamanho integrados, como o bloco de Parágrafo, este método é para você. Ele funciona como uma solução alternativa, colocando seu bloco dentro de um contêiner que você pode controlar.

Para este método, colocaremos nosso bloco dentro do bloco Colunas. É um contêiner onde você pode adicionar diferentes blocos em cada coluna.

Em seguida, você pode controlar principalmente a largura dos blocos internos ajustando a largura das colunas. A altura da coluna se ajustará automaticamente para caber em seu conteúdo.

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.

Uma vez que o bloco tenha sido adicionado, você pode controlar sua largura ajustando a coluna em que ele está.

Simplesmente selecione a coluna e, no painel de configurações do bloco à direita, você pode alterar a largura da coluna na seção 'Configurações'. Isso, por sua vez, redimensionará o bloco dentro dela.

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

O bloco Agrupar é excelente para organizar vários blocos e gerenciar seu layout e espaçamento. Embora não defina diretamente a altura e a largura dos blocos individuais dentro dele, você pode controlar as dimensões gerais do grupo e como seu conteúdo é organizado.

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.

Depois de adicioná-lo, o bloco Agrupar oferecerá opções de layout como ‘Agrupar’, ‘Linha’ ou ‘Pilha’. Para este tutorial, usaremos o layout padrão ‘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.

Ajustar essas configurações de layout influenciará como os blocos são organizados e quanto espaço eles ocupam dentro do grupo. 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 e definir uma altura mínima específica para uma seção. É ideal para criar banners de largura total ou imagens de destaque que tenham texto e outro conteúdo por cima.

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

Depois de fazer 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 de 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 obter instruções mais detalhadas sobre como usar o bloco de 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 do 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 essa ferramenta para projetar todo o seu site, e seus usuários adoraram o visual moderno e atual. Para saber mais, consulte nossa análise do SeedProd.

Etapa 1: Instalar e Ativar o 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.

Etapa 2: Crie uma Nova Landing Page

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’.

Você será levado para a tela 'Escolha um Novo Modelo de Página'. O SeedProd oferece muitos modelos pré-fabricados dos quais 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.

Etapa 3: Redimensionar Dimensões do Bloco de Imagem

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 espaçamento ao redor e dentro do bloco de imagem alternando para a guia ‘Avançado’ na parte superior do painel de configurações.

Em seguida, clique no painel ‘Espaçamento’ para expandir suas configurações.

Aqui, você pode adicionar valores para ajustar a margem do bloco (espaço fora do bloco) e o preenchimento (espaço dentro 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.

Etapa 4: Ajustar Altura do Bloco Espaçador

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.

Etapa 5: Configurar Preenchimento do Bloco de Botão

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, mude para a guia ‘Avançado’ na parte superior. Você pode aumentar o tamanho vertical do botão arrastando o controle deslizante ‘Preenchimento Vertical’, que adiciona espaço acima e abaixo do texto do botão.

Para aumentar seu tamanho horizontal, arraste o controle deslizante ‘Preenchimento Horizontal’, adicionando espaço à esquerda e à direita do texto.

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

Perguntas Frequentes sobre Como Alterar a Largura e Altura de Blocos

Aqui estão algumas perguntas que nossos leitores fizeram com frequência sobre como alterar a largura e a altura dos blocos no WordPress:

Como reduzir o tamanho de um bloco no WordPress?

Você pode reduzir o tamanho de um bloco no WordPress ajustando sua largura, preenchimento ou tamanho da fonte nas configurações do bloco. Comece selecionando o bloco e diminuindo as dimensões ou o espaçamento até que pareça correto.

Como redimensionar um bloco de texto no WordPress?

Você pode redimensionar um bloco de texto no WordPress alterando o tamanho da fonte nas configurações de Tipografia. Você também pode ajustar a altura da linha ou o espaçamento se o texto ainda parecer muito grande.

Como ajustar o espaçamento de blocos no WordPress?

Você pode ajustar o espaçamento de blocos no WordPress editando as configurações de margem e preenchimento. Recomendamos reduzir o preenchimento primeiro se houver muito espaço dentro do bloco.

Como redimensionar uma página de site no WordPress?

Você pode redimensionar uma página de site no WordPress alterando as configurações de layout em seu tema ou construtor de páginas. Você pode tentar alternar entre layouts em caixa e de largura total, dependendo do design que deseja.

Como encolher o tamanho de um site no WordPress?

Você pode reduzir o tamanho de um site no WordPress diminuindo os tamanhos das fontes, o espaçamento e as larguras dos contêineres. Comece fazendo pequenos ajustes em diferentes elementos em vez de mudar tudo de uma vez.

Esperamos que este artigo tenha ajudado você a aprender como alterar a largura e a altura dos blocos no WordPress. Você também pode consultar 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.