Como Adicionar ou Remover Espaço em Branco Entre Blocos do WordPress (4 Maneiras)

Um bom espaçamento pode fazer uma grande diferença na aparência e na sensação do seu conteúdo. Quando os espaços entre os blocos do WordPress estão muito apertados ou muito largos, isso pode prejudicar a legibilidade e fazer com que seu layout pareça inacabado.

Já vimos muitos usuários do WordPress se depararem com os mesmos problemas de espaçamento repetidamente, o que faz sentido, pois as opções de espaçamento de blocos nem sempre são óbvias à primeira vista.

A boa notícia é que o WordPress oferece várias maneiras de ajustar o espaçamento dos blocos sem precisar mexer em nenhum código.

Neste guia, vamos mostrar quatro métodos simples para corrigir problemas de espaçamento entre blocos do WordPress. Essas dicas ajudarão você a criar conteúdo com aparência mais profissional e a manter os leitores engajados.

Por que Adicionar ou Remover Espaço em Branco Entre Blocos do WordPress?

Embora o editor de blocos do WordPress facilite a criação de conteúdo, você pode achar que o espaçamento padrão nem sempre é perfeito.

Ajustar o espaço em branco entre seus blocos é uma maneira simples de melhorar o design e a experiência do usuário do seu site.

O controle adequado do espaçamento entre blocos ajuda você a:

• Criar um Design Profissional: Ter controle total sobre seu layout permite que você crie um visual mais polido e personalizado para seu site.
• Guiar a Atenção do Visitante: Use o espaço para agrupar visualmente conteúdos relacionados ou para separar seções diferentes, tornando seu layout mais intuitivo.
• Melhorar a Legibilidade: Dividir longos blocos de texto com espaço em branco torna seu conteúdo menos intimidador e mais fácil para os visitantes lerem.

Agora, vamos ver como adicionar ou remover espaço em branco entre blocos do WordPress em seu site.

Simplesmente use os links rápidos abaixo para pular diretamente para o método que você deseja usar:

• Método 1: Adicionando Espaço em Branco Entre Blocos do WordPress Com o Editor de Blocos
• Method 2: Adding or Removing Blank Space Between WordPress Blocks by Adding Custom CSS
• Método 3: Adicionando ou Removendo Espaço em Branco Entre Blocos do WordPress Com o CSS Hero
• Método 4: Adicionando ou Removendo Espaço em Branco Entre Blocos do WordPress Com o SeedProd
• Perguntas Frequentes Sobre Espaçamento de Blocos

Método 1: Adicionando Espaço em Branco Entre Blocos do WordPress Com o Editor de Blocos

A maneira mais fácil de adicionar espaço em branco entre seus blocos é usando o editor de blocos Gutenberg. Existe um bloco de espaçamento integrado que permite adicionar espaço em branco com alguns cliques.

Para usar isso, abra a postagem ou página que você deseja editar e clique no botão ‘Mais’ para adicionar um bloco.

Em seguida, pesquise por ‘Espaçador’ e selecione o bloco.

Isso inserirá automaticamente um espaçador na página. 

Você pode torná-lo maior ou menor arrastando o bloco para cima ou para baixo.

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

Se você estiver usando um tema de blocos, você também pode usar o Editor de Site Completo para ajustar o espaçamento dos blocos em seus modelos de tema.

Confira nosso guia para iniciantes sobre Edição Completa de Site no WordPress para mais informações.

Além de inserir blocos Spacer, você também pode aumentar a margem dos seus blocos para adicionar mais espaço entre eles e outros blocos. Você pode explorar essas opções na barra lateral de configurações do bloco.

Você também pode ajustar o preenchimento (padding) do bloco. O preenchimento é o espaço dentro da borda do bloco, entre a borda e o próprio conteúdo.

Reduzir isso diminuirá o espaço vazio dentro do bloco, o que é diferente de ajustar a margem entre os blocos.

Lembre-se de que esses controles de margem e preenchimento são mais comumente disponíveis em temas de bloco que usam o Editor de Site Completo e podem não ser visíveis para todos os blocos ao usar temas clássicos.

Para mais detalhes, você pode consultar nosso guia sobre preenchimento vs. margem no WordPress.

Você também pode conferir estes guias para mais maneiras de aproveitar ao máximo o editor de blocos:

• Como Usar Corretamente o Bloco Mais no WordPress
• Como Adicionar uma Quebra de Linha no WordPress (Espaçamento de Nova Linha)
• Como Selecionar e Usar Blocos Aninhados no WordPress
• Como Adicionar Conteúdo em Múltiplas Colunas em Posts do WordPress (Sem Necessidade de HTML)

Método 2: Adicionando ou Removendo Espaço em Branco Entre Blocos do WordPress Adicionando CSS Personalizado

Outra forma de adicionar e remover espaço em branco entre seus blocos é adicionando código CSS personalizado ao seu tema.

Se você nunca fez isso antes, recomendamos que dê uma olhada em nosso guia sobre como adicionar facilmente CSS personalizado ao seu site WordPress antes de começar.

Em seguida, abra a página ou postagem que você deseja editar e clique no bloco onde deseja adicionar ou remover o espaço em branco.

Em seguida, clique no item de menu 'Bloco' no painel de opções à direita.

Depois disso, role para baixo até o menu suspenso 'Avançado' e clique nele. Isso exibirá um conjunto de opções adicionais para esse bloco.

Na caixa ‘Classes CSS adicionais’, digite o seguinte nome de classe:

.add-remove-bottom-space

Essa ação dá ao bloco um nome exclusivo, permitindo que você o selecione com CSS personalizado.

Depois disso, clique no botão 'Atualizar' para salvar suas alterações.

Em seguida, navegue até Aparência » Personalizar para abrir o personalizador de temas do WordPress.

Em seguida, role para baixo e clique na opção de menu 'CSS adicional'.

Isso exibirá um campo onde você pode adicionar código CSS.

Em seguida, cole o seguinte trecho de código na caixa:

.add-remove-bottom-space {
 margin-bottom: 0;
}

Este trecho de código define a margem inferior como zero e removerá o espaço em branco do bloco.

Observe o ponto (.) antes do nome. Em CSS, o ponto é usado para direcionar qualquer elemento que tenha esse nome de classe específico.

Se você quiser adicionar espaço na parte inferior, basta alterar o '0' para algo como '20px'.

Depois de fazer suas alterações, certifique-se de clicar no botão 'Publicar' para tornar suas alterações visíveis. 

Se você estiver usando um tema de bloco, pode ler nosso guia sobre como corrigir o Personalizador de Temas ausente no WordPress para saber onde adicionar o código CSS.

Salvando Código CSS Personalizado Usando um Plugin

Ao adicionar CSS personalizado ao personalizador de temas do WordPress, ele será salvo apenas para o tema que você está usando atualmente. Se você mudar o tema do WordPress, precisará copiar o código CSS para o seu novo tema.

Se você deseja que seu CSS personalizado se aplique independentemente do tema que você está usando, precisará usar um plugin.

WPCode é o melhor plugin de snippets de código que permite adicionar PHP, CSS e mais ao seu site WordPress sem quebrar nada.

Nós mesmos usamos o WPCode e descobrimos que é a maneira mais fácil e segura de adicionar código personalizado. Para saber mais, veja nossa análise detalhada do WPCode.

A primeira coisa que você precisa fazer é instalar e ativar o plugin gratuito WPCode. Para mais detalhes, veja nosso guia sobre como instalar um plugin do WordPress.

Após a ativação, você precisa ir para Snippets de Código » + Adicionar Snippet no painel de administração do WordPress.

Aqui, passe o mouse sobre a opção ‘Adicionar Seu Código Personalizado (Novo Snippet)’ na biblioteca de snippets de código e clique no botão ‘Usar snippet’.

Você precisa inserir um nome para o seu snippet de código e, em seguida, colar seu CSS personalizado na caixa ‘Pré-visualização do Código’.

Certifique-se de escolher ‘Snippet de CSS’ no menu suspenso ‘Tipo de Código’.

Em seguida, basta garantir que você clique no controle deslizante na parte superior para tornar seu trecho ‘Ativar’ e clique em ‘Salvar Trecho’ para executá-lo em seu site WordPress.

Para mais detalhes, você pode ver nosso guia sobre como adicionar facilmente CSS personalizado ao seu site WordPress.

Alternativamente, você pode usar o plugin Simple Custom CSS. Após a ativação, basta ir em Aparência » CSS Personalizado e adicionar seu código CSS personalizado.

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

Método 3: Adicionando ou Removendo Espaço em Branco Entre Blocos do WordPress Com o CSS Hero

Outra forma fácil para iniciantes de adicionar ou remover espaço em branco entre blocos do WordPress é usando um plugin de CSS personalizado do WordPress. Isso permite que você faça alterações visuais no seu blog WordPress sem editar nenhum código CSS.

Recomendamos o uso do plugin CSS Hero. Ele permite que você edite quase todos os estilos CSS do seu site WordPress sem escrever uma única linha de código. 

A primeira coisa que você precisa fazer é instalar e ativar o plugin. Para mais detalhes, consulte nosso guia para iniciantes sobre como instalar um plugin do WordPress.

Após a ativação, você precisa clicar no botão ‘Prosseguir para Ativação do Produto’ para ativar o plugin. Você encontrará o botão diretamente acima da sua lista de plugins instalados.

Isso o levará a uma tela onde você precisa inserir seu nome de usuário e senha. Em seguida, siga as instruções na tela e você será redirecionado de volta ao seu painel assim que sua conta for verificada.

Em seguida, você precisa abrir a página ou postagem que deseja editar e, em seguida, clicar no botão ‘CSS Hero’ na parte superior da sua barra de ferramentas de administrador do WordPress.

Isso abrirá a mesma página com o CSS Hero rodando sobre ela. O plugin usa um editor visual, então você poderá fazer suas alterações em tempo real.

Ao clicar em qualquer elemento da sua página, uma barra de ferramentas aparecerá no lado esquerdo da página para você fazer personalizações.

Para remover ou adicionar espaço em branco entre seus blocos, basta clicar na opção ‘Espaçamentos’ e, em seguida, rolar para baixo até a seção ‘Margem Inferior’.

Aqui você pode mover o controle deslizante para cima ou para baixo para adicionar ou remover espaço em branco.

Quaisquer alterações que você fizer aparecerão automaticamente em sua página.

Assim que terminar de fazer as alterações, você precisará clicar no botão ‘Salvar’ para que suas alterações fiquem ativas. 

Método 4: Adicionando ou Removendo Espaço em Branco Entre Blocos do WordPress Com o SeedProd

SeedProd é o melhor construtor de páginas com arrastar e soltar, usado por mais de 1 milhão de sites.

Na verdade, nós mesmos usamos o SeedProd em muitos projetos, e algumas de nossas marcas parceiras criaram seus sites inteiros usando a ferramenta. Para mais detalhes, veja nossa análise completa do SeedProd.

O plugin possui uma biblioteca de mais de 300 modelos para criar páginas 404 personalizadas, páginas de vendas, páginas de destino e muito mais.

Você pode até usá-lo para criar um tema WordPress personalizado sem escrever nenhum código.

Com o construtor de arrastar e soltar, você tem controle total sobre o design do seu site e pode facilmente remover ou adicionar espaçamento a qualquer elemento do site.

Para saber mais, veja nosso guia sobre como criar uma página personalizada no WordPress.

Enquanto você personaliza sua página, pode adicionar espaço em qualquer lugar usando o bloco Espaçador.

Simplesmente arraste e solte-o em qualquer lugar da página onde você queira adicionar mais espaço entre os blocos.

Em seguida, você pode usar o controle deslizante para ajustar sua altura.

Você também pode controlar o espaçamento entre qualquer bloco. Para fazer isso, basta clicar em qualquer bloco do qual você queira adicionar ou remover espaço.

Isso abrirá o painel de opções à esquerda. Em seguida, clique na aba ‘Avançado’.

Em seguida, role para baixo até o menu suspenso ‘Espaçamento’ e clique nele.

Isso abre um menu onde você pode controlar a ‘Margem’. Simplesmente insira um número na caixa de margem inferior para adicionar espaço ou exclua o número para remover qualquer espaço em branco existente.

Depois de terminar de fazer as alterações, clique no botão ‘Salvar’.

Em seguida, selecione o menu suspenso ‘Publicar’ para tornar suas alterações visíveis.

Tutorial em Vídeo

Se você não prefere instruções escritas, então apenas assista ao nosso tutorial em vídeo.

Perguntas Frequentes Sobre Espaçamento de Blocos

Aqui estão algumas perguntas que nossos leitores frequentemente fazem sobre adicionar ou remover espaço em branco entre blocos no WordPress:

Qual é a diferença entre margem e preenchimento (padding) no WordPress?

Pense em um bloco como uma moldura. O preenchimento é o espaço entre a imagem e a própria moldura (dentro da borda). A margem é o espaço na parede entre essa moldura e quaisquer outras molduras penduradas ao lado dela (fora da borda).

Como adiciono espaço horizontalmente entre colunas no WordPress?

Os métodos acima são principalmente para espaçamento vertical. Para ajustar o espaço horizontal, você deve usar o bloco Colunas do WordPress integrado.

Após adicionar suas colunas, você pode selecionar o bloco principal de Colunas e, nas configurações do bloco à direita, encontrará a opção “Espaçamento entre blocos” que permite controlar o espaço entre as colunas.

Perderei minhas alterações de CSS se eu mudar meu tema do WordPress?

Sim, se você adicionar o código CSS diretamente ao personalizador do seu tema (em Aparência » Personalizar » CSS Adicional), esse código está vinculado ao tema. Se você trocar de tema, precisará copiar esse código.

Para tornar seu CSS independente de tema, recomendamos usar o WPCode para adicionar seus snippets.

Esperamos que este artigo tenha ajudado você a aprender como adicionar ou remover espaço em branco entre blocos do WordPress. Você também pode querer ver nosso guia sobre revisões de posts do WordPress e nossas escolhas de especialistas dos melhores plugins de blocos 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.