Editar espaçamento (margem e preenchimento)

Este tutorial em vídeo ajudará você a entender mais sobre margem e preenchimento

Neste artigo, você aprenderá como controlar o espaçamento entre elementos com margem e preenchimento.

O que são margem e preenchimento?

Todos os elementos da web possuem atributos de espaçamento como estes.

Margin O espaçamento ao redor de um elemento. Empurra outros elementos para mais longe.
Border Uma borda que circunda o preenchimento e o conteúdo.
Padding Preenchimento é o espaçamento dentro de um elemento. Empurra o conteúdo dentro do elemento ainda mais para dentro.
Content O conteúdo da caixa.

Para ler mais sobre margem e preenchimento, confira este artigo em w3school.

Como editar margem e preenchimento

Antes de seguir as etapas específicas, você pode assistir a este vídeo para saber como ajustar o elemento de espaçamento no PageFly

Para editar a margem e o preenchimento de um elemento PageFly, primeiro selecione o elemento> Styling tab > seção SPACING.

As 4 caixas vazias permitem que você preencha o valor para 4 lados: superior – direito – inferior – esquerdo. Por exemplo, com o elemento Image.

edit spacing

Quando você adiciona um número no campo do meio, o mesmo número será aplicado a todos os lados – superior, direito, inferior e esquerdo.

Casos frequentemente usados

Caso 1: Editar espaçamento dentro de um elemento usando preenchimento

Para editar o espaçamento dentro de um elemento, edite o preenchimento. No exemplo, queremos empurrar o “RING COLLECTION” descendo um pouco, portanto, adicionamos preenchimento superior à coluna que contém o cabeçalho.

Escolha Column > aba Styling > seção SPACING > adicione 50px ao preenchimento superior. A alteração no preenchimento ou na margem na Column é sempre preferível em relação a alteração do preenchimento ou margem de em elemento. Será mais fácil para você editar o layout depois.

Optimize o design móvel

Primeiro, mude para a visualização móvel: Navegue até a barra superior > vamos para Device switcher > selecione Mobile.

Em seguida, selecione Column > aba Styling > seção SPACING. Você pode ver que ele tem 50px para preenchimento superior, que foi adicionado quando o definimos em All Devices.

Como o espaço em dispositivos móveis é significativamente menor que o desktop, convém modificar esses valores.

Caso 2: Edite o espaçamento entre 2 elementos vizinhos usando a margem

Para editar o espaçamento de 2 elementos vizinhos, edite a margem lateral de um elemento.

Neste exemplo, queremos colocar o botão mais longe do título “RING COLLECTION”, então adicionamos valores à margem inferior do título.

Escolha o elemento Heading > aba Styling > seção SPACING > adicione 45px à margem inferior.

A margem inferior cria mais espaço e empurra o elemento do botão para mais longe do cabeçalho.

Optimize o design móvel

Primeiro, mude para a visualização móvel: Navegue até a barra superior > vamos para Device switcher > selecione Mobile.

Em seguida, selecione o Heading > aba Styling > seção SPACING. Você pode ver que ele tem 45px para a margem inferior, que foi adicionada quando a definimos em All Devices.

Como o espaço em dispositivos móveis é significativamente menor do que no desktop, convém modificar esses valores.

Caso 3: Editar espaçamento nos lados esquerdo / direito

Para editar o espaçamento nos lados esquerdo / direito de um elemento, use a unidade “%” em vez de “pixel” para que ele possa responder em diferentes tamanhos de tela.

No exemplo, queremos mover o parágrafo para mais perto do centro, então adicionamos valores ao preenchimento à direita e preenchimento à esquerda da seção que contém o parágrafo.

Escolha Section > aba Styling > seção SPACING > adicione 10% ao preenchimento à direita e à esquerda.

Optimize o design móvel

Primeiro, mude para a visualização móvel: Navegue até a barra superior > vá para Device switcher > selecione Mobile.

Em seguida, selecione Section > aba Styling > seção SPACING. Esses valores são adicionados quando o definimos em All Devices.

Como o espaço em dispositivos móveis é significativamente menor que no desktop, convém modificar esses valores.

Caso 4: Editar espaçamento entre colunas na linha

Para editar o espaçamento entre colunas em uma linha, selecione o Row > aba General > seção CONTENT > ajuste o valor do Columns Spacing.

edit spacing 2

Optimize o design móvel

Primeiro, mude para a visualização móvel: Navegue até a barra superior > vá para Device switcher > selecione Mobile.

Em seguida, selecione Section > aba Styling > seção SPACING. Você pode ver que o Columns Spacing do Tablet, e do Mobile também tem 30px.

edit spacing pagefly

Como o espaço em dispositivos móveis é significativamente menor do que no desktop, convém modificar esse valor.

Do you want to get more sales from the same amount of traffic?

PageFly can help you. We are the best page builder app to give you the freedom to customize your page, build trust and gain more sales.

Explore PageFly
PageFly Languagues

PageFly Help Center is now available in French, Portuguese and Chinese. Please check the flags on the page header.

I got it!