Se você já tentou mover elementos no WordPress, mas não conseguiu descobrir como adicionar mais espaço, você não está sozinho. Uma das perguntas mais comuns sobre layout que recebo é como alterar as margens de uma página.
As margens ajudam a criar espaço entre blocos, imagens e seções. Elas tornam seu conteúdo mais fácil de ler e suas páginas mais polidas.
Neste tutorial, vou guiá-lo por como alterar as margens no WordPress – passo a passo e de forma amigável para iniciantes.
Neste Guia:
O que é uma Margem no WordPress?
No WordPress, uma margem é o espaço nas bordas dos elementos da página, separando-o de outros. Esses elementos podem incluir imagens, títulos, widgets e botões, entre outros.
Da mesma forma, as margens também se aplicam ao espaço ao redor do layout de uma página, como o cabeçalho, rodapé e área de conteúdo.
Alterar as margens de uma página ou elemento é uma parte crucial do design de sites e pode afetar drasticamente a funcionalidade e a aparência do seu site.
A Diferença Entre Margens e Preenchimento (Padding)
Margens e preenchimento estão ambos ligados ao espaçamento em seu design, mas cada um serve a um propósito único.
Margens são os espaços que ficam do lado de fora de um elemento.
Eles criam um buffer ao redor do seu conteúdo, separando-o de outros elementos na página. Isso pode ajudar a aumentar a legibilidade e organizar seu design de forma eficaz.
Por outro lado, preenchimento (padding) refere-se ao espaço que fica dentro de um elemento.
O preenchimento pode ser pensado como o 'amortecedor' entre o conteúdo (como texto ou uma imagem) e a borda de seu elemento contêiner. Isso geralmente torna seu conteúdo mais agradável aos olhos.
Em essência, se você deseja uma zona de buffer ao redor da borda externa do seu elemento, você ajustará a margem. Mas, se é o espaçamento dentro de um elemento que precisa de ajuste, você estará olhando para o preenchimento.
Dito isso, vamos ver como alterar as margens no WordPress.
Como Alterar Margens no WordPress com SeedProd
Primeiro, vamos ver como usar o SeedProd para alterar suas margens do WordPress.
SeedProd é um dos melhores construtores de sites de arrastar e soltar. Com seu editor visual, você pode criar páginas personalizadas para seu site e até mesmo criar um tema WordPress personalizado sem codificação.
As configurações de clicar e apontar do construtor de páginas do SeedProd permitem que você altere as configurações de margem para qualquer elemento com alguns cliques.
Para começar, você precisará instalar e ativar o plugin SeedProd.
Se precisar de ajuda com isso, você pode ver nosso guia sobre como instalar o SeedProd Pro. Ele o guiará pelo processo de instalação e como ativar sua chave de licença.
Após a instalação, navegue até SeedProd » Landing Pages no seu painel do WordPress e clique no botão Adicionar Nova Landing Page.
Agora você verá uma biblioteca de modelos de landing page pré-fabricados para usar como ponto de partida para sua página. Se preferir começar do zero, também há um modelo de página em branco.
Após escolher um modelo, nomeie sua página e clique no botão Salvar e Começar a Editar a Página. Isso abrirá o modelo dentro do construtor de páginas de arrastar e soltar do SeedProd.
Ao abrir a página, você verá uma prévia do design no lado direito e os elementos da página à esquerda. Você pode adicionar qualquer elemento à sua página clicando em um e arrastando-o para a prévia.
Além disso, clicar em um elemento na prévia abre suas configurações na barra lateral esquerda.
Na aba ‘Avançado’ de qualquer elemento, você pode ver mais opções de personalização. Isso inclui opções para ajustar o espaçamento, preenchimento, visibilidade do dispositivo e mais do elemento.
Neste painel, clique para expandir a aba Espaçamento. Aqui, digite seus valores personalizados nos campos de margem para alterar as margens desse elemento.
Faça isso para cada elemento para o qual você deseja alterar as margens. Você também pode ver nosso guia passo a passo para mais detalhes sobre como criar uma landing page no WordPress.
Quando estiver satisfeito com as alterações, salve e publique sua página.
Agora, você pode visitar a página para ver como suas novas margens ficaram.
Métodos Alternativos para Alterar Margens no WordPress
A beleza do WordPress está em sua versatilidade. Se, por qualquer motivo, você não quiser ou não puder usar o SeedProd, não se preocupe.
Em seguida, veremos alguns métodos alternativos para alterar as margens do seu site WordPress.
Editando Margens com o Editor de Blocos do WordPress
Desde a introdução do Gutenberg, editar as margens do site ficou muito mais fácil. Não há necessidade de conhecimento em codificação ou de baixar plugins do WordPress extras.
Primeiro, vá para Páginas » Todas as Páginas no seu painel do WordPress e edite a página com as margens que você deseja alterar.
Em seguida, clique no bloco desejado para abrir o painel de configurações do bloco na barra lateral direita. Neste exemplo, queremos alterar as margens do bloco de botão.
Na barra lateral de Configurações, mude para a aba de estilos clicando em seu ícone. Em seguida, na seção de dimensões, clique na opção de margem para alterar as margens do botão.
Após fazer seus ajustes, não se esqueça de clicar no botão Atualizar para salvar suas alterações.
Alterando Margens no WordPress com Código CSS
Para este método, você precisará de um entendimento geral de HTML e CSS. Também requer que você adicione código ao seu tema do WordPress. Para uma revisão, você pode ver este guia sobre: como adicionar CSS personalizado no WordPress.
No entanto, se você se sentir confortável com um pouco de codificação, o CSS pode lhe dar controle incomparável sobre o design do seu site.
Identificando a Classe CSS de um Elemento
Antes de alterar margens com CSS, você precisará decidir qual elemento será o alvo do seu código. A maneira mais fácil de fazer isso é usando a ferramenta de inspeção do seu navegador.
Comece clicando com o botão direito no elemento da página para o qual você deseja personalizar as margens. No menu que aparece, selecione 'Inspecionar'. Isso abrirá o painel de ferramentas de desenvolvimento no seu navegador.
Você verá o código HTML da sua página da web e o CSS da página aqui. Você pode destacar o elemento em que clicou movendo o cursor do mouse sobre o código.
Na seção 'Estilos' do painel, você verá o elemento HTML ou a classe CSS para direcionar com seu CSS personalizado.
Neste exemplo, simplesmente precisamos copiar o seguinte código e alterar o valor da margem em pixels:
.wp-block-buttons>.wp-block-button {
display: inline-block;
margin: 0;
}
Para este guia, alteraremos o valor para 100px.
Agora, salve este código em um documento em branco ou bloco de notas e passe para a próxima etapa: adicionar o código CSS personalizado ao seu site.
Adicionando e Alterando Margens com CSS no Editor de Site
Se você usa um tema WordPress baseado em blocos que suporta o editor de site do WordPress, você pode adicionar seu código CSS ao painel CSS Adicional.
Para encontrá-lo, vá em Aparência » Editor e mude para a aba Estilos do editor de site. Em seguida, clique nos três pontos na barra lateral direita para ver mais configurações e clique na opção 'CSS Adicional'.
Na caixa que aparece, cole seu CSS personalizado e clique em Salvar para salvar suas alterações.
Ao visualizar seu site, você verá as alterações de margem imediatamente.
Alterando Margens com CSS usando o Personalizador de Tema
Se você estiver usando um tema clássico do WordPress que não inclui suporte ao Editor de Site, você pode adicionar seu CSS personalizado usando o personalizador de tema do WordPress.
Para fazer isso, navegue até Aparência » Temas e clique em Personalizar.
Você verá várias opções aqui, dependendo do tema que você usa. A opção que você precisa é a rotulada como CSS Adicional.
Cole seu CSS personalizado na caixa e você verá as margens sendo alteradas no WordPress na pré-visualização ao vivo.
Agora, clique no botão Publicar para salvar suas alterações.
Próximo, Mais Dicas de Design para WordPress
Alterar margens no WordPress pode levar o design do seu site para o próximo nível. Se você usa SeedProd ou um destes métodos alternativos, você agora está equipado com o conhecimento para fazê-lo.
Lembre-se, todo bom design começa com um bom layout. É por isso que controlar as margens do seu site será sempre crucial para alcançar um design de site responsivo e agradável aos olhos.
Para mais dicas de design para WordPress, por favor, veja nossos outros guias:
- Como Tornar uma Página de Largura Total no WordPress
- Como Alterar Fontes em Temas do WordPress
- Como Criar Fundos Animados com Particle.js no WordPress
- Como Criar uma Barra de Navegação Vertical no WordPress
- Como Adicionar uma Barra de Pesquisa Personalizada ao WordPress
Obrigado por ler! Adoraríamos saber sua opinião, então sinta-se à vontade para participar da conversa no YouTube, X e Facebook para mais conselhos e conteúdo úteis para expandir seus negócios.
