Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Como alterar a altura e a largura do bloco no WordPress

Por padrão, o WordPress facilita a criação de belos layouts de conteúdo para seus posts e páginas usando blocos. No entanto, às vezes, você pode querer redimensionar esses blocos para melhorar a aparência deles.

Seja para refinar a aparência da página ou para garantir a consistência em diferentes dispositivos, aprender a personalizar as dimensões dos blocos pode melhorar a estética e a usabilidade do seu site.

Na WPBeginner, usamos o editor de blocos há vários anos e nos deparamos com situações em que precisávamos ajustar os tamanhos dos blocos para tornar nosso site visualmente atraente. Ao longo do caminho, adquirimos várias dicas e truques para redimensionar facilmente os blocos, ajudando-nos a manter um design consistente e atraente.

Neste artigo, mostraremos a você como alterar facilmente a altura e a largura do bloco no WordPress.

How to change block height and width in WordPress

Por que alterar a altura e a largura do bloco no WordPress?

O editor de blocos permite que você adicione conteúdo ao seu site WordPress usando diferentes blocos, inclusive 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 do conteúdo geral.

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

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

Preview of an image

Talvez você também queira alterar o tamanho do bloco de título para alinhá-lo melhor com o conteúdo.

Ajustando a largura e a altura dos blocos, você pode fazer com que suas postagens e páginas tenham uma aparência esteticamente mais agradável.

Dito isso, vamos ver como você pode alterar facilmente a altura e a largura do bloco no WordPress. Abordaremos alguns métodos diferentes, e você pode usar os links rápidos abaixo para ir para o método 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. Entretanto, o editor de blocos oferece muitas maneiras de redimensionar a altura e a largura de diferentes blocos.

Vamos começar com o bloco Image (Imagem) no WordPress.

Primeiro, você pode alterar o alinhamento do bloco Image clicando no botão “Align” (Alinhar) na barra de ferramentas acima do bloco.

Aqui, a escolha da opção “Wide Width” fará com que o bloco tenha a mesma largura do contêiner. Ou, a opção de alinhamento “Full Width” (Largura total) fará com que o bloco ocupe toda a largura da página.

Use alignment settings to resize an image

Você também pode redimensionar um bloco acessando o painel “Block Settings” (Configurações do bloco) à direita e rolando para baixo até a seção “Settings” (Configurações). A partir daí, você pode redimensionar um bloco no menu suspenso “Image Size” (Tamanho da imagem).

Também é possível ajustar a largura e a altura do bloco digitando o tamanho de pixel preferido nas caixas “Width” (Largura) e “Height” (Altura) na seção “Image dimensions” (Dimensões da imagem).

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

Resize an image using block panel settings

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

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

Resize Image block using anchors

Quando terminar, clique no botão “Update” (Atualizar) ou “Publish” (Publicar) para armazenar suas configurações.

Método 2: Alterar a altura e a largura do bloco usando o bloco Columns

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

Para esse método, colocaremos nosso bloco dentro do bloco Columns. Ele funciona como um contêiner no qual 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 “Add Block” (+) no canto superior esquerdo da tela.

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

Choose the column block

Depois disso, o layout da coluna será exibido na tela, e agora você pode adicionar o bloco desejado clicando no botão “Add Block (+)” dentro de uma coluna.

Depois que o bloco for adicionado, você poderá redimensioná-lo usando as “Configurações de coluna” localizadas no painel direito.

Add Block using column

Quando terminar, basta clicar no botão “Publicar” para armazenar suas alterações.

Esta é a aparência do conteúdo em nosso site de demonstração após redimensionar e alinhar dois blocos de parágrafos dentro de um bloco de duas colunas.

Column block preview

Método 3: Alterar a altura e a largura do bloco usando o bloco de grupo

Você também pode ajustar a largura e a altura dos blocos usando o bloco Group. Ele permite que você agrupe os blocos desejados e os estilize juntos.

Primeiro, você deve clicar no botão “Add Block” (+) na parte superior. Em seguida, localize e adicione o bloco Group ao editor de conteúdo.

Depois de fazer isso, o bloco Group exibirá três opções de layout diferentes. Para este tutorial, usaremos o layout “Group”.

Choose the Group block and select a layout

Depois disso, o botão “Add Block” 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.

Add a heading block to the Group block

Para adicionar vários blocos ao grupo, clique no botão “Select Group” (Selecionar grupo) na barra de ferramentas de blocos.

Depois que o grupo for selecionado, basta clicar no botão “Add Block” (+) na parte inferior.

Add multiple blocks in Group

Depois de fazer isso, a barra lateral de configurações do bloco à direita será aberta. A partir daí, você pode ajustar facilmente o layout, a justificação e a orientação de todos os blocos.

A alteração do layout também alterará os diferentes tamanhos de blocos. Você pode definir essas configurações até ficar satisfeito com o resultado.

Configure the block settings of the Group block

Quando terminar, clique no botão “Update” (Atualizar) ou “Publish” (Publicar) para armazenar suas configurações.

Esta é a aparência do bloco Group em nosso site de demonstração.

Group block preview

Método 4: Alterar a altura do bloco usando o bloco de cobertura

Esse método de redimensionamento é para você se quiser usar o bloco Cover. Ele permite que você exiba texto e outros conteúdos sobre uma imagem ou vídeo.

Primeiro, clique no botão “Add Block” (+) na parte superior e localize o bloco Cover.

Depois de fazer isso, você será solicitado a escolher uma cor ou carregar uma imagem da biblioteca de mídia do WordPress. Essa imagem ou cor será usada como plano de fundo para o bloco Cover.

Add the Cover block

Em seguida, basta arrastar e soltar qualquer bloco que você queira no bloco Cover.

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

A partir daí, role para baixo até o painel “Dimensions” (Dimensões), onde você pode ajustar a altura do bloco Cover usando pixels.

Change the Cover block height

Por fim, não se esqueça de clicar no botão “Save Changes” (Salvar alterações) para armazenar suas configurações.

Para obter instruções mais detalhadas sobre como usar o bloco Cover, consulte nosso guia para iniciantes sobre Cover Image vs. Featured Image 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 plug-in SeedProd .

É o melhor construtor de páginas do WordPress no mercado. Ele permite que você crie páginas de destino usando blocos, que são muito fáceis de personalizar e redimensionar de acordo com suas necessidades.

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

Observação: o SeedProd também oferece uma versão gratuita, mas usaremos a versão premium para este tutorial.

Após a ativação, você deve ir para a página SeedProd ” Settings (Configurações ) no painel do WordPress e inserir a chave de licença na caixa “License Key” (Chave de licença).

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

Paste license key in field

Em seguida, acesse a tela SeedProd ” Landing Pages na barra lateral do administrador para começar a criar uma página de destino.

A partir daí, basta clicar no botão “Add New Landing Page” (Adicionar nova página de destino).

Click the Add New Landing Page button

Agora você será levado à tela “Choose a New Page Template” (Escolha 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 página de destino.

Depois de adicionar esses detalhes, basta clicar no botão “Save and Start Editing the Page” (Salvar e começar a editar a página) para continuar.

Enter your page details

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

Neste tutorial, adicionaremos e redimensionaremos um bloco de imagem e um bloco de botão.

Primeiro, você precisará arrastar o bloco Image do painel de blocos à esquerda e soltá-lo em qualquer lugar da página que desejar.

Choose the image block in the SeedProd

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

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

Change the block size in SeedProd

Você também pode ajustar o tamanho e a posição da imagem alternando para a guia “Advanced” (Avançado) na parte superior do painel de configurações.

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

Visit the Spacing panel by switching to the Advanced tab

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

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

Ajust the margin and padding of the block

Com o Seedprod, você também pode adicionar um bloco Spacer entre dois blocos diferentes para colocar algum espaço entre eles.

Primeiro, você precisará localizar e adicionar o bloco “Spacer” na coluna da esquerda. Em seguida, clique nele para abrir suas configurações.

Add the Spacer block

Agora, você pode controlar a altura do espaçador usando o controle deslizante “Height” (Altura).

O bloco espaçador pode ajudá-lo a criar um site sem desordem.

Use the height slider to adjust Spacer block

Você também pode alterar a largura e a altura de outros blocos da mesma forma, incluindo os blocos Video, Heading e Button.

Basta localizar o bloco Button na coluna da esquerda e arrastá-lo para sua página.

Add the Button block to the website

Em seguida, você precisará clicar no botão para abrir suas configurações de bloqueio.

A partir daí, mude para a guia “Advanced” (Avançado) na parte superior. Você pode alterar a altura do bloco arrastando o controle deslizante “Vertical Padding”.

Changing height of the button block

Para alterar a largura, arraste o controle deslizante “Horizontal Padding” (Preenchimento horizontal) na coluna da esquerda.

Quando terminar, não se esqueça de clicar no botão “Save” (Salvar).

Change width of the button block

Esperamos que este artigo tenha ajudado você a aprender como alterar a largura e a altura do bloco no WordPress. Talvez você também queira ver nosso artigo sobre como adicionar e alinhar imagens no editor de blocos do WordPress e nossas principais opções dos melhores temas para WordPress compatíveis com Gutenberg.

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

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Veja como o WPBeginner é financiado, por que isso é importante e como você pode nos apoiar. Aqui está nosso processo editorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

O kit de ferramentas definitivo WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Reader Interactions

1 comentárioDeixe uma resposta

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

Deixe uma resposta

Obrigado por deixar um comentário. Lembre-se de que todos os comentários são moderados de acordo com nossos política de comentários, e seu endereço de e-mail NÃO será publicado. NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.