Como alterar as margens no WordPress (guia para iniciantes)

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

Como prática recomendada geral, sempre usamos muitas margens e espaçamento nos designs de nossos sites. Percebemos que isso tem um impacto positivo na forma como os usuários se envolvem com nossas páginas e conteúdo da Web.

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

O que são margens no WordPress e no web design?

As margens são o espaço adicionado ao redor de uma página da Web ou de outros elementos em uma página da Web.

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

O objetivo do uso das margens é garantir que os elementos de uma página da Web não pareçam esmagados.

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

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

Neste artigo, abordaremos uma série de informações. Clique nos links abaixo para ir para qualquer seção que desejar.

Qual é a diferença entre margem e preenchimento?

Tanto a margem quanto o preenchimento são usados para adicionar espaço em branco no design da Web. No entanto, eles são usados de forma muito diferente.

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

As margens são usadas para adicionar espaço fora de um elemento. Elas permitem garantir 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 as margens.

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

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

O preenchimento, 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 um preenchimento extra.

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

2. Aumento do preenchimento em uma coluna de texto

Tanto o preenchimento quanto as margens são amplamente usados no design da Web.

O uso de espaços vazios adiciona espaço para respirar a qualquer design, o que o torna mais fácil de usar e elegante.

Para obter mais detalhes, consulte nosso tutorial sobre a diferença entre padding e margins no WordPress.

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

As margens são um aspecto crucial do web design. Elas fazem com que seu site pareça agradável e fácil de usar.

Executamos testes A/B em todos os nossos sites para entender como os usuários interagem com um design. Os resultados sempre mostram que adicionar margens tem um grande efeito sobre as conversões.

Quando você cria um design mais limpo e organizado, é mais provável que os usuários permaneçam no site por mais tempo e concluam as ações desejadas.

Os temas do WordPress cuidam do aspecto de design do seu site WordPress. A maioria deles já faz um excelente trabalho de configuração de regras CSS para garantir bastante espaço em branco usando margens no layout do tema.

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

Por exemplo, talvez você não goste da margem em torno dos menus de navegação ou queira adicionar mais margem em torno dos botões de chamada para ação.

Da mesma forma, às vezes você pode achar 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?

Há várias maneiras de adicionar margens no WordPress.

Dependendo de onde deseja adicionar a 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 incorporadas no próprio WordPress, pois elas são as mais fáceis para iniciantes.

Como adicionar margens no WordPress usando o Full Site Editor

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

Primeiro, você precisa ir para Appearance ” Editor para abrir o editor de sites.

Uma vez dentro do editor de sites, 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 no elemento em que você deseja alterar as margens. Na coluna da direita, você verá a opção de ajustar as margens na guia “Estilo”.

À medida que você 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.

Adição de margens no Block Editor

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

O editor de blocos do WordPress permite que você adicione e altere as margens de vários blocos.

Basta clicar no bloco em que você deseja adicionar/ajustar as margens. Nas configurações do bloco, vá para a guia “Style” (Estilo) e role para baixo até a opção “Dimensions” (Dimensões) ou “Margins” (Margens).

Como adicionar margens no WordPress usando o SeedProd

O SeedProd é o melhor plug-in de criação de páginas do WordPress no mercado. Ele permite que você crie facilmente páginas personalizadas para seu site. Você pode até mesmo usá-lo para criar um tema WordPress personalizado do zero.

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

Primeiro, você precisa instalar e ativar o plug-in SeedProd. Para obter mais detalhes, consulte nosso tutorial sobre como instalar um plug-in do WordPress.

Em seguida, você precisa acessar SeedProd ” Landing Pages e clicar no botão “Add New Landing Page”.

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

O SeedProd vem com dezenas de modelos prontos que podem ser usados 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 visualização ao vivo da sua página no lado direito. E elementos que você pode adicionar à sua página na coluna da esquerda.

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

Ao clicar em um elemento, ele será selecionado e você verá suas opções na coluna da esquerda. A partir daí, vá para a guia “Advanced” (Avançado) e clique na opção “Spacing” (Espaçamento).

Você pode alterar as margens e o preenchimento do elemento selecionado a partir daqui.

Quando terminar de editar sua página, não se esqueça de clicar nos botões “Salvar” e “Publicar” no canto superior direito.

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

Alterar margens usando o Thrive Architect

OThrive Architect é uma das melhores ferramentas de criação de páginas do WordPress que permite que você use uma interface de arrastar e soltar para criar páginas do WordPress.

Ele vem com 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, emprestando o layout e o estilo do seu tema existente do WordPress.

Para instalar o Thrive Architect, primeiro você precisa fazer login em sua conta no site do Thrive Themes.

A partir daí, você precisa fazer o download e instalar o plug-in Thrive Product Manager. Para obter mais detalhes, consulte nosso tutorial sobre como instalar um plug-in do WordPress.

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

Clique no botão “Entrar em minha conta” para conectar o WordPress à sua conta Thrive Themes.

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

Vá em frente e clique na caixa de seleção “Install Product” (Instalar produto) em Thrive Architect e, em seguida, clique no botão “Install selected products” (Instalar produtos selecionados) na parte inferior.

O Thrive Product Manager agora instalará o plug-in Thrive Architect para você.

Depois disso, você pode editar ou criar um novo post ou página do WordPress e clicar no botão “Edit with Thrive Architect” ou “Launch Thrive Architect”.

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

Você pode usar seu modelo de tema para criar uma “Página normal” ou um modelo de “Página de destino pré-construída”.

Se você escolher a opção “Pre-built Landing Page”, o plug-in mostrará vários modelos para você escolher.

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

Quer 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 visualização ao vivo da sua página com uma barra de ferramentas à direita e um painel de configurações à esquerda.

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

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

A partir daí, clique na guia “Layout & Position” (Layout e posição) para alterar as margens e o preenchimento.

Você verá uma representação visual da margem e do 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 Save Work e, em seguida, selecionar a opção Save and Exit to Post Editor.

Agora você pode clicar no botão “Publicar” ou “Salvar” para salvar seu post ou página do WordPress.

Como alterar as margens no WordPress usando o código CSS

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

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

Adição e alteração de margens usando CSS personalizado no tema do WordPress

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

Antes de adicionar ou alterar as margens usando CSS, talvez seja necessário descobrir qual elemento você precisa direcionar com seu código CSS.

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

body { 
margin:50px; 
}

A maneira mais fácil de descobrir qual elemento deve ser direcionado é usar a ferramenta Inspecionar em seu navegador.

Abra o site em uma nova guia do navegador e passe o mouse sobre o elemento no qual deseja alterar as margens. Depois disso, clique com o botão direito do mouse e selecione “Inspecionar” no menu do navegador.

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

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

No código, você pode ver o elemento HTML ou a classe CSS que precisa direcionar com seu CSS personalizado.

Você pode até mesmo testar suas margens aqui para visualizar como ficará.

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

Vamos examinar as diferentes maneiras de salvar esse CSS personalizado no WordPress.

Uso de CSS personalizado para alterar as margens no Site Editor

Se você estiver usando um tema de blocos com suporte total ao editor de sites. Veja como você pode adicionar CSS personalizado ao seu tema.

Primeiro, vá para a página Appearance ” Editor para iniciar o editor do site e, em seguida, alterne para o painel “Styles” (Estilos).

Na parte inferior do painel “Styles” (Estilos), clique na guia “Additional CSS” (CSS adicional).

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

Quando estiver satisfeito com as alterações, não se esqueça de clicar no botão “Save” (Salvar) para armazenar suas alterações.

Adição de margens com CSS no personalizador de temas

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

Vá para a página Appearance ” Customize para abrir o personalizador de temas.

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

Você precisa clicar na guia Additional CSS para expandi-la.

A guia deslizará para mostrar uma caixa simples na qual você poderá adicionar seu CSS personalizado.

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

Quando estiver satisfeito com as alterações, clique no botão “Publish” (Publicar) para armazenar suas alterações.

Alterar margens com código CSS personalizado usando WPCode

A maneira mais fácil de adicionar código CSS personalizado no WordPress é usar o plug-in WPCode.

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

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

A primeira coisa que você precisa fazer é instalar e ativar o plug-in WPCode. Para obter mais detalhes, consulte nosso tutorial sobre como instalar um plug-in do WordPress.

Após a ativação, vá para a página Code Snippets ” + Add New.

Passe o mouse sobre a opção “Add Your Custom Code (New Snippet)” (Adicionar seu código personalizado (novo snippet)) na biblioteca de snippets de código e clique no botão “Use snippet” (Usar snippet).

Em seguida, na parte superior da página, adicione um título para 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 “Code Preview” (Visualização de código) e defina o “Code Type” (Tipo de código) escolhendo a opção “CSS Snippet” (Snippet de CSS) no menu suspenso.

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

body { 
margin:50px;
}

Em seguida, role para baixo até a seção “Insertion” (Inserção) e selecione o método “Auto-Insert” (Inserção automática) para executar o código em todo o seu site WordPress.

Se você quiser executar o código somente em determinadas páginas ou postagens, poderá escolher o método “Shortcode”.

Agora, você precisa voltar à parte superior da página e alternar o botão para “Active” (Ativo).

Por fim, clique no botão “Save Snippet” para armazenar suas alterações.

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

Esperamos que este artigo tenha ajudado você a aprender como adicionar ou alterar as margens no WordPress. Talvez você também queira saber como colocar imagens lado a lado no WordPress ou como adicionar botões de texto sublinhados e justificados no WordPress.

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.