Você já se perguntou como alterar as margens no WordPress?
As margens adicionam espaço entre os elementos em seu site. Elas tornam o conteúdo mais fácil de usar e melhoram a aparência do design da Web.
Em uma conversa com um de nossos leitores, discutimos como alguns ajustes simples de margem poderiam melhorar a experiência do usuário e a estética geral do site.
Com isso em mente, elaboramos um tutorial fácil que mostra como alterar as margens no WordPress para iniciantes.
Neste guia
O que é uma margem no WordPress?
No WordPress, uma margem é o espaço em torno das bordas dos elementos da página, diferenciando-os dos demais. Esses elementos podem incluir imagens, cabeçalhos, widgets e botões, entre outros.
Da mesma forma, as margens também se aplicam ao espaço em torno do layout de uma página, como o cabeçalho, o rodapé e a área de conteúdo.
Alterar as margens de uma página ou elemento é uma parte crucial do design do site e pode afetar drasticamente a funcionalidade e a aparência do site.
A diferença entre margens e preenchimento
As margens e o preenchimento estão vinculados ao espaçamento em seu design, mas cada um deles tem uma finalidade específica.
As margens são os espaços que ficam na parte externa de um elemento.
Eles criam um buffer em torno do conteúdo, separando-o de outros elementos da página. Isso pode ajudar a aumentar a legibilidade e organizar seu design de forma eficaz.
Por outro lado, o preenchimento se refere ao espaço que fica na parte interna de um elemento.
O padding pode ser considerado como a "almofada" entre o conteúdo (como texto ou imagem) e a borda do elemento que o contém. Isso geralmente torna seu conteúdo mais agradável aos olhos.
Basicamente, se você quiser uma zona de amortecimento em torno da borda externa do seu elemento, deverá ajustar a margem. Porém, se for o espaçamento dentro de um elemento que precisa ser ajustado, você deverá analisar o padding.
Dito isso, vamos dar uma olhada em como alterar as margens no WordPress.
Como alterar as margens no WordPress com o SeedProd
Primeiro, vamos dar uma olhada em como usar o SeedProd para alterar as margens do WordPress.
O 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 apontar e clicar do construtor de páginas do SeedProd permitem que você altere as configurações de margem de qualquer elemento com apenas alguns cliques.
Para começar, você precisará instalar e ativar o plug-in SeedProd.
Se precisar de ajuda com isso, consulte nosso guia sobre como instalar o SeedProd Pro. Ele o orientará no processo de instalação e na ativação da chave de licença.
Após a instalação, navegue até SeedProd " Landing Pages no painel do WordPress e clique no botão Add New Landing Page (Adicionar nova página de destino).
Agora você verá uma biblioteca de modelos de landing page pré-criados para usar como ponto de partida para sua página. Se você preferir começar do zero, há também um modelo de página em branco.
Depois de escolher um modelo, dê um nome à sua página e clique no botão Save and Start Editing the Page (Salvar e começar a editar a página ). Isso iniciará o modelo dentro do construtor de páginas de arrastar e soltar do SeedProd.
Ao abrir a página, você verá uma visualização do design no lado direito e os elementos da página no lado esquerdo. Você pode adicionar qualquer elemento à sua página clicando em um deles e arrastando-o para a visualização.
Além disso, clicar em um elemento na visualização abre suas configurações na barra lateral esquerda.
Na guia "Advanced" de qualquer elemento, você pode ver mais opções de personalização. Isso inclui opções para ajustar o espaçamento do elemento, o preenchimento, a visibilidade do dispositivo e muito mais.
Nesse painel, clique para expandir a guia Spacing (Espaçamento ). Aqui, digite seus valores personalizados nos campos de margem para alterar as margens desse elemento.
Faça isso para cada elemento cujas margens você deseja alterar. Você também pode consultar nosso guia passo a passo para obter mais detalhes sobre como criar uma página de destino no WordPress.
Quando estiver satisfeito com as alterações, salve e publique sua página.
Agora, você pode visitar a página para ver a aparência de suas novas margens.
Métodos alternativos para alterar as margens no WordPress
A beleza do WordPress está em sua versatilidade. Se, por algum motivo, você não quiser ou não puder usar o SeedProd, não se preocupe.
A seguir, veremos alguns métodos alternativos para alterar as margens em seu site WordPress.
Edição de margens com o Block Editor do WordPress
Desde a introdução do Gutenberg, a edição das margens do site ficou muito mais fácil. Não há necessidade de conhecimento de codificação nem de baixar plug-ins extras do WordPress.
Primeiro, vá para Pages " All Pages (Páginas " Todas as páginas ) no 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ões.
Na barra lateral Settings (Configurações), alterne para a guia styles (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.
Depois de fazer seus ajustes, não se esqueça de clicar no botão Update (Atualizar ) para salvar as alterações.
Alteração de margens no WordPress com código CSS
Para esse método, você precisará de um conhecimento geral de HTML e CSS. Ele também requer que você adicione código ao seu tema do WordPress.
No entanto, se você se sentir confortável com um pouco de codificação, o CSS pode proporcionar um controle incomparável sobre o design do seu site.
Identificação da classe CSS de um elemento
Antes de alterar as margens com CSS, você precisará decidir qual elemento será o alvo do seu código. A maneira mais fácil de fazer isso é usar a ferramenta de inspeção do navegador.
Comece clicando com o botão direito do mouse 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 em seu navegador.
Você verá o código HTML da sua página da Web aqui e o CSS da página. Você pode destacar o elemento clicado movendo o cursor do mouse sobre o código.
Na seção "Styles" (Estilos) do painel, você verá o elemento HTML ou a classe CSS a ser direcionada com seu CSS personalizado.
Neste exemplo, basta copiar o código a seguir 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 esse código em um documento em branco ou no bloco de notas e passe para a próxima etapa: adicionar o código CSS personalizado ao seu site.
Adição e alteração de margens com CSS no Site Editor
Se você usar um tema WordPress baseado em blocos compatível com o editor de sites do WordPress, poderá adicionar seu código CSS ao painel CSS adicional.
Para encontrá-lo, vá para Appearance " Editor e alterne para a guia Styles (Estilos ) do editor do site. Em seguida, clique nos três pontos na barra lateral direita para exibir mais configurações e clique na opção "CSS adicional".
Na caixa que aparece, cole seu CSS personalizado e clique em Save (Salvar ) para salvar as alterações.
Ao visualizar seu site, você verá as alterações de margem imediatamente.
Alteração de margens com CSS usando o Theme Customizer
Se estiver usando um tema clássico do WordPress que não inclua suporte ao Site Editor, você poderá adicionar seu CSS personalizado usando o personalizador de temas do WordPress.
Para fazer isso, navegue até Appearance " Temas e clique em Personalizar.
Você verá várias opções aqui, dependendo do tema que estiver usando. A opção de que você precisa é a denominada Additional CSS.
Cole seu CSS personalizado na caixa e você verá a alteração das margens no WordPress na visualização ao vivo.
Agora, vá em frente e clique no botão Publish (Publicar ) para salvar suas alterações.
A seguir, mais dicas de design do WordPress
A alteração das margens no WordPress pode elevar o design do seu site a um novo patamar. Quer você use o SeedProd ou um desses métodos alternativos, agora você tem o conhecimento necessário para fazer isso.
Lembre-se de que todo bom design começa com um bom layout. É por isso que o controle das margens do seu site sempre será crucial para obter um design responsivo e agradável aos olhos.
Para obter mais dicas de design do WordPress, consulte nossos outros guias:
- Como tornar uma página de largura total no WordPress
- Como alterar fontes em temas do WordPress
- Como criar fundos animados de Particle.js no WordPress
- Como criar uma barra de navegação vertical no WordPress
- Como adicionar uma barra de pesquisa personalizada ao WordPress
Obrigado pela leitura! Gostaríamos muito de ouvir sua opinião, portanto, fique à vontade para deixar um comentário com perguntas e feedback.
Você também pode nos seguir no YouTube, no X (antigo Twitter) e no Facebook para obter mais conteúdo útil para expandir seus negócios.
