Blog

O senhor deseja alterar as margens no WordPress?

As margens são um dos elementos de design mais importantes que podem melhorar significativamente a experiência do usuário e o apelo estético de qualquer design. Elas adicionam espaçamento entre os elementos para que seu conteúdo seja legível e tudo seja facilmente identificável.

Neste guia para iniciantes, mostraremos aos senhores como adicionar e alterar as margens no WordPress. Mostraremos vários métodos para alterar as margens em diferentes á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 dentro de 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 de 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, o senhor pode alterar as margens em torno 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 grande quantidade de assuntos. Clique nos links abaixo para ir para qualquer seção que desejar.

Qual é a diferença entre Margin e Padding?

Tanto a margem quanto o padding 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 padding adiciona espaço vazio dentro dele.

As margens são usadas para adicionar espaço fora de um elemento. Elas permitem que o senhor garanta que haja bastante espaço entre os elementos em uma página da Web.

Exemplos:

1. Adicionar 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.

Exemplos:

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

2. Aumentar o preenchimento em uma coluna de texto

Tanto o padding quanto as margens são amplamente usados em web design.

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.

Por que o senhor pode precisar adicionar ou alterar as margens no WordPress?

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

Os temas do WordPress lidam com o aspecto de design do seu site. site do 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 seu tema.

Entretanto, ocasionalmente, o senhor pode precisar adicionar margens para ajustar as coisas.

Por exemplo, talvez o senhor não goste da margem em torno do seu menus de navegação ou deseja adicionar mais margem em torno de seus botões de call-to-action.

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

Nesse caso, o senhor 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, será necessário 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 o senhor usar um tema baseado em blocos com editor de site completo o senhor pode usar o editor de sites integrado para alterar as margens em qualquer lugar do seu site WordPress.

Primeiro, o senhor precisa visitar a página Appearance ” Editor para abrir o editor do site.

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 deseja alterar as margens. Na coluna da direita, o senhor verá a opção de ajustar as margens na guia Style (Estilo).

À medida que o senhor ajustar as margens, o editor destacará a área da margem.

O senhor 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, o senhor usará o editor de blocos.

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

Basta clicar no bloco em que o senhor deseja adicionar/ajustar as margens. Nas configurações do bloco, alterne 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

SeedProd é o melhor plugin de criação de páginas do WordPress no mercado. Ele permite que o senhor crie facilmente páginas personalizadas para seu site. O senhor 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 o senhor ajuste facilmente as margens de qualquer elemento dentro do editor.

Primeiro, o senhor precisa instalar e ativar o SeedProd plugin. Para obter mais detalhes, consulte nosso tutorial sobre Como instalar um plug-in do WordPress.

Em seguida, o senhor precisa visitar o site SeedProd ” Páginas de destino e, em seguida, clique no botão Add New Landing Page (Adicionar nova página de destino).

Depois disso, o senhor 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 o senhor pode começar com um modelo em branco.

Clique para escolher seu modelo e, em seguida, forneça um nome para sua landing page.

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

O senhor verá uma visualização ao vivo da sua página no lado direito. E os elementos que o senhor pode adicionar à sua página na coluna da esquerda.

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

Ao clicar em um elemento, ele será selecionado e o senhor 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).

O senhor 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 no botão Save and Publish (Salvar e publicar) no canto superior direito.

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

Alterar as margens usando o Thrive Architect

Arquiteto Thrive é uma das melhores ferramentas de criação de páginas do WordPress que permite que o senhor use uma interface de arrastar e soltar para criar páginas do WordPress.

Ele vem com mais de 300 modelos que podem ser usados como ponto de partida. Além disso, o senhor também pode usá-lo para editar seus posts e páginas do WordPress, emprestando o layout e o estilo do seu tema existente do WordPress.

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

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

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

Clique no botão “Log into my account” (Fazer login em minha conta) para conectar o WordPress à sua conta do Thrive Themes.

Uma vez conectado, o senhor 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 o senhor.

Depois disso, o senhor pode editar ou criar um novo post ou página do WordPress e clicar no botão Edit with Thrive Architect (Editar com o Thrive Architect).

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

O senhor pode usar seu modelo de tema para criar uma página normal ou um modelo de página de destino pré-construído.

Se o senhor escolher a opção Pre-built Landing Page, o plugin mostrará vários modelos para o senhor escolher.

Basta clicar para selecionar aquele que se assemelha ao que o senhor 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.

O senhor verá uma visualização ao vivo da sua página com uma barra de ferramentas à direita e um painel de configurações à esquerda.

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

Quando o senhor 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.

O senhor 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.

O senhor 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 o senhor pode clicar no botão Publish ou Save para salvar seu post ou página do WordPress.

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

Esse método requer que o senhor adicione código CSS ao seu tema do WordPress. O senhor também precisará de um conhecimento muito básico de HTML e CSS.

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

Como adicionar e alterar margens usando CSS personalizado no tema do WordPress

O WordPress permite que o senhor salve CSS personalizado nas opções de tema do WordPress. No entanto, 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 precisa ser direcionado com seu código CSS.

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

A maneira mais fácil de descobrir qual elemento deve ser direcionado é por meio do usando 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 Inspect (Inspecionar) no menu do navegador.

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

O senhor pode mover o mouse sobre o código e o navegador destacará a área afetada por ele.

No código, o senhor pode ver o elemento HTML ou a classe CSS que precisa ser direcionada com seu CSS personalizado.

O senhor pode até mesmo testar suas margens aqui para visualizar como ficará.

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

Vamos examinar as diferentes maneiras pelas quais o senhor pode salvar esse CSS personalizado no WordPress.

Uso de CSS personalizado para alterar as margens no Editor do site

Se o senhor estiver usando um tema de blocos com suporte total ao editor de sites. Então, veja como o senhor pode adicionar CSS personalizado ao seu tema.

Primeiro, vá para a seção Appearance ” Editor para abrir o editor do site e, em seguida, alternar para o painel Styles.

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

Isso abrirá um editor de texto no qual o senhor poderá adicionar seu código CSS personalizado. O código CSS será aplicado imediatamente e o senhor 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 as 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), o senhor poderá salvar seu CSS personalizado no personalizador de temas.

Vá para a seção Appearance ” Personalizar para abrir o personalizador de temas.

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

O senhor precisa clicar na guia Additional CSS para expandi-la.

A guia deslizará para mostrar uma caixa simples onde o senhor pode adicionar seu CSS personalizado.

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

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

Alterar margens com código CSS personalizado usando o WPCode

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

É 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 o senhor não perderá suas alterações de CSS ao trocar de tema do WordPress.

Observação: Há também um versão gratuita do WPCode que o senhor pode usar.

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

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

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 o senhor 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” no menu suspenso.

Por exemplo, se o senhor quiser adicionar ou alterar as margens ao redor de todo o corpo da página da Web, poderá usar o seguinte código CSS:

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 site do WordPress.

Se quiser executar o código somente em determinadas páginas ou posts, o senhor pode escolher o método “Shortcode”.

Agora, o senhor 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 o senhor pode visitar seu site para ver o CSS personalizado em ação.

Esperamos que este artigo tenha ajudado o senhor a aprender como adicionar ou alterar margens no WordPress. Talvez o senhor também queira ver nosso artigo completo sobre Folha de dicas de desenvolvimento de temas do WordPress ou dê uma olhada em nosso guia sobre Personalização de temas do WordPress.

Se o senhor gostou deste artigo, por favor, assine o nosso Canal do YouTube para tutoriais em vídeo sobre o WordPress. O senhor também pode nos encontrar em Twitter e Facebook.