Como Alterar Margens no WordPress (Guia para Iniciantes)

Alterar as margens no WordPress é uma maneira simples de melhorar o design do seu site. As margens criam espaço entre os elementos, tornando seu conteúdo mais legível e visualmente atraente.

Como uma boa prática geral, sempre usamos margens e espaçamento ao projetar nossos sites WordPress. Percebemos que isso tem um impacto positivo na forma como os usuários interagem com nossas páginas da web e conteúdo.

Neste guia para iniciantes, mostraremos como adicionar e ajustar margens no WordPress. Ensinaremos diferentes métodos para alterar margens em várias áreas do seu site WordPress.

O que são Margens no WordPress e Design Web?

Margens são o espaço adicionado ao redor de uma página da web ou outros elementos dentro de uma página da web.

Pense em uma página da web típica como uma folha de papel em branco. As margens são o espaço branco ou em branco ao redor das bordas do papel.

O propósito de usar margens é garantir que os elementos dentro de uma página da web não pareçam espremidos juntos.

Da mesma forma, as margens podem ser usadas ao redor de diferentes elementos dentro do layout da página.

Por exemplo, você pode alterar as margens ao redor de imagens para que elas não fiquem muito próximas ao texto ou adicionar uma margem para deixar espaço entre sua área de conteúdo e a barra lateral.

Neste artigo, cobriremos muitas informações. Clique nos links abaixo para pular para qualquer seção que você desejar.

• Qual é a Diferença Entre Margem e Preenchimento (Padding)?
• Por que você pode precisar adicionar ou alterar margens no WordPress?
• Como Adicionar Margens no WordPress?
• Adicionando Margens no WordPress Usando o Editor Completo do Site
• Adicionando Margens no Editor de Blocos
• Adicionando Margens no WordPress Usando SeedProd
• Alterar Margens Usando Thrive Architect
• Alterando Margens no WordPress Usando Código CSS
• Adicionando e Alterando Margens Usando CSS Personalizado no Tema WordPress
• Usando CSS Personalizado para Alterar Margens no Editor do Site
• Adicionando Margens com CSS no Personalizador de Temas
• Altere Margens com Código CSS Personalizado Usando WPCode
• Perguntas Frequentes Sobre Margens no WordPress

Qual é a Diferença Entre Margem e Preenchimento (Padding)?

Margem e preenchimento são ambos usados para adicionar espaço em branco no design da web. No entanto, eles são usados de maneiras muito diferentes.

Margens adicionam espaço vazio fora de um elemento, e preenchimento adiciona espaço vazio dentro dele.

Margens são usadas para adicionar espaço fora de um elemento. Elas permitem que você garanta que haja bastante espaço entre os elementos em uma página da web.

Agora, vamos dar uma olhada em alguns exemplos de quando usar margens.

1. Adicionando margens para aumentar o espaço entre uma imagem e o texto em um artigo.

2. Ajustando margens para adicionar espaço entre seções, como o cabeçalho e a área de conteúdo.

O preenchimento (padding), no entanto, é usado para adicionar espaço de amortecimento entre o conteúdo e as bordas de uma caixa ou elemento.

Aqui estão alguns exemplos de quando você pode querer usar preenchimento extra.

1. Ajustando o preenchimento para aumentar o espaço de amortecimento em seus botões de call-to-action.

2. Aumentando o Preenchimento em uma Coluna de Texto

Tanto o preenchimento quanto as margens são amplamente utilizados no design de sites.

O uso de espaços vazios adiciona respiro a qualquer design, tornando-o mais amigável e elegante.

Para mais detalhes, veja nosso tutorial sobre a diferença entre preenchimento e margens no WordPress.

Por que você pode precisar adicionar ou alterar margens no WordPress?

As margens são um aspecto crucial do design de sites. Elas tornam seu site agradável e fácil de usar.

Em nossa experiência com testes A/B, descobrimos que o uso estratégico de espaço em branco geralmente tem um impacto positivo nas conversões.

Quando você cria um design mais limpo e organizado, os usuários são mais propensos a permanecer no site por mais tempo e a completar as ações desejadas.

Temas do WordPress cuidam do aspecto de design do seu site WordPress. A maioria deles já faz um excelente trabalho ao definir regras CSS para garantir bastante espaço em branco usando margens em todo o layout do seu tema.

Dito isso, você pode ocasionalmente precisar adicionar margens para ajustar as coisas.

Por exemplo, você pode não gostar da margem em torno dos seus menus de navegação ou querer adicionar mais margem em torno dos seus botões de call-to-action.

Da mesma forma, às vezes você pode sentir que os itens estão muito próximos uns dos outros ou muito distantes.

Nesse caso, você precisará alterar as margens no WordPress por conta própria.

Como Adicionar Margens no WordPress?

Existem muitas maneiras de adicionar margens no WordPress.

Dependendo de onde você deseja adicionar margem e das opções disponíveis no seu tema do WordPress, você precisará escolher um método que funcione para você.

Vamos começar com as opções padrão integradas no próprio WordPress, pois elas são as mais fáceis para iniciantes.

Adicionando Margens no WordPress Usando o Editor Completo do Site

Se você usar um tema baseado em blocos com suporte ao editor completo do site, poderá usar o editor de site integrado para alterar margens em qualquer lugar do seu site WordPress.

Uma maneira fácil de verificar é olhando no painel do seu WordPress. Se você vir Aparência » Editor, então você tem um tema baseado em blocos. Se você vir Aparência » Personalizar em vez disso, então você pode pular para outro método abaixo.

Primeiro, você precisa ir para Aparência » Editor para iniciar o editor de site.

Uma vez dentro do editor de site, clique para escolher um modelo na coluna da esquerda ou clique em qualquer lugar na janela de visualização.

Em seguida, clique na área ou elemento onde você deseja alterar as margens. Na coluna da direita, você verá a opção de ajustar as margens na aba 'Estilo'.

Ao ajustar as margens, o editor destacará a área da margem.

Você também pode optar por adicionar margens na parte superior, inferior, direita ou esquerda.

Adicionando Margens no Editor de Blocos

Se você estiver trabalhando em uma postagem de blog ou em uma página, usará o editor de blocos.

O editor de blocos no WordPress permite adicionar e alterar margens para vários blocos.

Simplesmente clique no bloco onde você deseja adicionar/ajustar margens. Em Configurações do bloco, mude para a aba ‘Estilo’ e role para baixo até a opção ‘Dimensões’ ou ‘Margens’.

Adicionando Margens no WordPress Usando SeedProd

SeedProd é o melhor plugin construtor de páginas do WordPress do mercado. Ele permite que você crie páginas personalizadas para o seu site facilmente.

Você pode até usá-lo para criar um tema personalizado do WordPress do zero.

Várias de nossas marcas parceiras projetaram seus sites inteiros com o SeedProd, e elas adoram usá-lo. Para saber mais, veja nossa análise completa do SeedProd.

O construtor de páginas intuitivo com arrastar e soltar do SeedProd permite que você ajuste as margens de qualquer elemento dentro do editor facilmente.

Primeiro, você precisa instalar e ativar o plugin SeedProd. Para mais detalhes, veja nosso tutorial sobre como instalar um plugin do WordPress.

Em seguida, você precisa visitar SeedProd » Landing Pages e, em seguida, clicar no botão ‘Adicionar Nova Landing Page’.

Depois disso, você será solicitado a escolher um modelo para sua página.

O SeedProd vem com dezenas de modelos prontos que você pode usar como ponto de partida, ou você pode começar com um modelo em branco.

Clique para escolher seu modelo e, em seguida, forneça um nome para sua página de destino.

Isso iniciará o construtor de páginas do SeedProd.

Você verá uma prévia ao vivo da sua página no lado direito. E os elementos que você pode adicionar à sua página na coluna esquerda.

Você pode apontar e clicar em qualquer item da página para editá-lo.

Clicar em um elemento o selecionará, e você verá suas opções na coluna esquerda. A partir daqui, mude para a aba ‘Avançado’ e clique na opção ‘Espaçamento’.

Você pode alterar margens e preenchimentos para o elemento selecionado a partir daqui.

Assim que terminar de editar sua página, não se esqueça de clicar no botão ‘Salvar’ e ‘Publicar’ no canto superior direito.

Depois disso, você pode visitar seu site para ver as mudanças em ação.

Alterar Margens Usando Thrive Architect

Thrive Architect é um construtor de páginas WordPress fácil de usar que permite usar uma interface de arrastar e soltar para projetar páginas WordPress.

Durante os testes, descobrimos que ele tem mais de 300 modelos que você pode usar como ponto de partida. Além disso, você também pode usá-lo para editar suas postagens e páginas do WordPress, aproveitando o layout e o estilo do seu tema WordPress existente.

Para saber mais, veja nossa análise completa do Thrive Architect.

Para instalar o Thrive Architect, você primeiro precisará fazer login em sua conta no site da Thrive Themes.

A partir daí, você precisa baixar e instalar o plugin Thrive Product Manager. Para mais detalhes, veja nosso tutorial sobre como instalar um plugin do WordPress.

Após a ativação, você precisa visitar a página do Thrive Product Manager.

Clique no botão ‘Fazer login na minha conta’ para conectar o WordPress à sua conta Thrive Themes.

Uma vez conectado, você verá a lista de produtos Thrive Themes disponíveis em sua conta.

Clique na caixa de seleção ‘Instalar Produto’ em Thrive Architect e, em seguida, clique no botão ‘Instalar produtos selecionados’ na parte inferior.

O Thrive Product Manager agora instalará o plugin Thrive Architect para você.

Depois disso, você pode editar ou criar uma nova postagem ou página do WordPress e clicar no botão ‘Editar com Thrive Architect’ ou ‘Iniciar Thrive Architect’.

O Thrive Architect pedirá que você escolha um modelo se for uma nova página.

Você pode usar o modelo do seu tema para criar uma página ‘Normal’ ou um modelo de ‘Página de Destino Pré-construída’.

Se você escolher a opção ‘Página de Destino Pré-construída’, o plugin mostrará vários modelos para você escolher.

Basta clicar para selecionar aquele que se assemelha ao que você deseja criar.

Seja uma página normal (usando os estilos do seu tema) ou uma página de destino, o construtor de páginas do Thrive Architect teria os mesmos recursos.

Você verá uma pré-visualização ao vivo da sua página com uma barra de ferramentas à direita e um painel de configurações à esquerda.

Você pode apontar e clicar em um elemento para selecioná-lo. Ou clique no botão adicionar [+] na barra de ferramentas para adicionar um novo elemento.

Assim que você clicar para selecionar e editar um elemento, suas configurações aparecerão na coluna da esquerda.

A partir daqui, clique na aba ‘Layout & Posição’ para alterar as margens e o preenchimento.

Você verá uma representação visual de margem e preenchimento.

Passe o mouse sobre qualquer lado da margem e arraste a alça para aumentar ou diminuir a margem.

Você pode repetir o processo para alterar as margens em qualquer um dos quatro lados.

Quando terminar, não se esqueça de clicar no botão Salvar Trabalho e depois selecionar a opção Salvar e Sair para o Editor de Postagens.

Agora você pode clicar no botão ‘Publicar’ ou ‘Salvar’ para salvar sua postagem ou página do WordPress.

Alterando Margens no WordPress Usando Código CSS

Este método exige que você adicione código CSS ao seu tema do WordPress. Você também precisará de um conhecimento básico de HTML e CSS.

No entanto, este método oferece mais flexibilidade, pois você pode escolher manualmente a área onde deseja adicionar ou ajustar as margens.

Adicionando e Alterando Margens Usando CSS Personalizado no Tema WordPress

O WordPress permite que você salve CSS personalizado nas opções do seu tema do WordPress. No entanto, dependendo do seu tema do WordPress, existem várias maneiras de fazer isso.

Antes de adicionar ou alterar margens usando CSS, você pode precisar descobrir qual elemento você precisa direcionar com seu código CSS.

Por exemplo, se você quiser alterar as margens ao redor do corpo da página, você pode usar o seguinte código:

body { 
margin:50px; 
}

Neste código, ‘px’ significa pixels, uma unidade de medida comum para telas. Usar a propriedade margin com apenas um valor como este define a margem para todos os quatro lados (superior, direito, inferior e esquerdo) ao mesmo tempo.

A maneira mais fácil de encontrar qual elemento direcionar é usando a ferramenta Inspecionar no seu navegador.

Abra seu site em uma nova aba do navegador e passe o mouse sobre o elemento cujas margens você deseja alterar. Depois disso, clique com o botão direito e selecione 'Inspecionar' no menu do navegador.

Isso dividirá a tela do seu navegador, e você verá o código HTML e CSS por trás da página.

Você pode mover o mouse sobre o código, e seu navegador destacará a área afetada por ele.

No código, você pode ver o elemento HTML ou a classe CSS que você precisa direcionar com seu CSS personalizado. Pense nisso como o 'endereço' da parte específica da página que você deseja estilizar.

Você pode até experimentar suas margens aqui para ter uma prévia de como ficará.

No entanto, essas alterações não são salvas no seu tema e desaparecerão quando você recarregar ou fechar a aba do navegador.

Vamos passar por diferentes maneiras de salvar esse CSS personalizado no WordPress.

Usando CSS Personalizado para Alterar Margens no Editor do Site

Se você estiver usando um tema de blocos com suporte ao editor de site completo. Então, veja como você pode adicionar CSS personalizado ao seu tema.

Primeiro, vá para a página Aparência » Editor para iniciar o editor de site e, em seguida, mude para o painel 'Estilos'.

Na parte inferior do painel 'Estilos', clique na aba 'CSS Adicional'.

Isso abrirá um editor de texto onde você pode adicionar seu código CSS personalizado. Seu código CSS será aplicado imediatamente, e você poderá ver as alterações aparecerem na tela.

Assim que estiver satisfeito com as alterações, não se esqueça de clicar no botão ‘Salvar’ para armazenar suas alterações.

Adicionando Margens com CSS no Personalizador de Temas

Se você estiver usando um tema clássico (sem suporte ao editor de sites), poderá salvar seu CSS personalizado no personalizador de temas.

Vá para a página Aparência » Personalizar para iniciar o personalizador de temas.

O personalizador mostrará opções diferentes dependendo do seu tema WordPress.

Você precisa clicar na aba CSS Adicional para expandi-la.

A aba deslizará para mostrar uma caixa simples onde você pode adicionar seu CSS personalizado.

Assim que adicionar uma regra CSS válida, você poderá vê-la aplicada na visualização ao vivo do seu site.

Assim que estiver satisfeito com as alterações, clique no botão ‘Publicar’ para armazenar suas alterações.

Altere Margens com Código CSS Personalizado Usando WPCode

A maneira mais fácil de adicionar código CSS personalizado no WordPress é usando o plugin WPCode.

É o melhor plugin de trechos de código do WordPress que permite adicionar qualquer código CSS/HTML/PHP/JavaScript ao seu site WordPress sem quebrá-lo.

Durante nossa avaliação, achamos que ele é super fácil de usar. Para saber mais sobre nossa experiência, veja nossa análise detalhada do WPCode.

A vantagem de usar o WPCode é que você não perderá suas alterações de CSS ao trocar de tema no WordPress.

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

Após a ativação, vá para a página Snippets de Código » + Adicionar Novo.

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

Em seguida, na parte superior da página, adicione um título para o seu snippet de CSS personalizado. Pode ser qualquer coisa que ajude você a identificar o código.

Depois disso, escreva ou cole seu CSS personalizado na caixa ‘Pré-visualização do Código’ e defina o ‘Tipo de Código’ escolhendo a opção ‘Snippet CSS’ no menu suspenso.

Por exemplo, se você quiser adicionar ou alterar as margens em torno de todo o corpo da página da web, você pode usar o seguinte código CSS:

body { 
margin:50px;
}

Em seguida, role para baixo até a seção ‘Inserção’ e selecione o método ‘Inserção Automática’ para executar o código em todo o seu site WordPress.

Se você quiser executar o código apenas em páginas ou posts específicos, pode escolher o método ‘Shortcode’.

Agora, você precisa voltar ao topo da página e alternar o interruptor para ‘Ativo’.

Finalmente, clique no botão ‘Salvar Snippet’ para armazenar suas alterações.

Agora você pode visitar seu site para ver seu CSS personalizado em ação.

Perguntas Frequentes Sobre Margens no WordPress

Aqui estão algumas perguntas que nossos leitores frequentemente fazem sobre como adicionar margens no WordPress:

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

Margem é o espaço fora da borda de um elemento, que cria distância entre ele e outros elementos. Preenchimento (padding) é o espaço dentro da borda de um elemento, criando um amortecimento entre o conteúdo e a própria borda.

Pense na margem como o espaçamento entre molduras de quadros em uma parede, e no preenchimento (padding) como o passe-partout dentro de uma única moldura.

Para mais informações, você também pode conferir nosso guia sobre margem vs preenchimento (padding) no WordPress.

Como posso alterar as margens especificamente para dispositivos móveis?

Para ajustar margens para dispositivos móveis, você pode usar consultas de mídia CSS. Isso permite aplicar estilos específicos para diferentes tamanhos de tela.

Plugins de construtor de páginas como SeedProd também oferecem controles específicos para dispositivos, permitindo que você altere facilmente as margens para visualizações de desktop, tablet e celular.

Por que a opção de margem não está aparecendo para um bloco específico no editor do WordPress?

Nem todos os blocos do WordPress possuem controles de margem integrados, pois isso pode depender do seu tema.

Se a opção estiver faltando, você pode envolver o bloco em um bloco de Grupo, que possui configurações de margem e preenchimento. Você também pode usar um dos métodos de CSS personalizado para direcionar o bloco diretamente.

É melhor usar um plugin ou CSS personalizado para alterar as margens?

Para iniciantes, um plugin de construtor de páginas como o SeedProd é geralmente mais fácil porque oferece uma interface visual.

Para usuários mais avançados ou para fazer ajustes em todo o site, o CSS personalizado oferece um controle mais preciso.

Usar um plugin como o WPCode para adicionar seu CSS é uma ótima opção porque protege seu código quando você atualiza ou altera seu tema.

Esperamos que este artigo tenha ajudado você a aprender como adicionar ou alterar margens no WordPress. Você também pode querer aprender como colocar imagens lado a lado no WordPress ou como adicionar botões de sublinhado e justificar texto no WordPress.

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.