Como alinhar seções e colunas Elementor

Enquanto você trabalha com Elementor , você notará que é um pouco complicado posicionar suas seções e colunas de forma personalizada. Você precisa alinhar colunas e seções vertical e horizontalmente, para obter um layout responsivo “esticar para preencher”. Sem esse alinhamento, os elementos das colunas com alturas variadas não serão ajustados na tela.

• Por que precisamos alinhar?
• Como colunas ou seções funcionam para um design responsivo?
• Como alinhar seções e colunas Elementor?
• Para corrigir problemas de largura de resposta, use o estouro oculto
• Cuidando do Posicionamento
• Unidades Relativas
• Controlar a profundidade de cada elemento usando o Z-Index
• O truque sobre a funcionalidade duplicada
• Offsets
• A regra de ouro
• Conclusão

Por que precisamos alinhar?

Em cada coluna ou seção, o conteúdo pode ser de categorias diferentes. Pode ser na forma de imagens, texto e classificações. Para uma aparência montada, é recomendável que haja uniformidade na aparência do conteúdo. Não deve ser apenas jogado lá - despejado - apenas para o inferno.

Com um bom alinhamento, você pode fazer o site parecer mais limpo e elegante - para que não pareça desordenado. Com a opção de alinhamento, você pode ajustar vários widgets de tamanhos variados próximos uns dos outros na mesma coluna.

Como colunas ou seções funcionam para um design responsivo?

O Elementor 2.5 permite que você posicione seu design e conteúdo de forma personalizada. Com o novo recurso de posicionamento personalizado, você pode mover os widgets para qualquer local. Mas, você realmente não pode fazê-lo além de uma determinada seção. Esses widgets são relativos à coluna em que estão. Isso pode causar um problema na capacidade de resposta do design.

Suponha que você tenha um layout de três colunas. Com a ajuda do posicionamento personalizado, você pode arrastar e soltar um widget da coluna da direita para a coluna central, ou como desejar.

Mas fazer isso beneficiará apenas os visitantes da área de trabalho porque parecerá bom para eles. No entanto, isso causará um problema se o site for acessado a partir do celular, porque o Elementor empilha as colunas verticalmente no celular.

Portanto, em vez de ter três colunas lado a lado, você poderá experimentar todas as três colunas empilhadas uma na outra. O elemento não aparecerá mais na coluna do meio, como acontece nas áreas de trabalho.

No entanto, você pode ajustar inteligentemente a visualização móvel com uma configuração oculta, mas não há garantia de que a maioria das pessoas possa encontrá-la. Então, por que frustrar os usuários? Tornar o design responsivo e adaptável é a solução certa. Para que não caia em lugar nenhum.

Nesse caso, você precisa prestar atenção à relação do widget com a coluna que está dentro.

Como alinhar seções e colunas Elementor?

Para cada seção / coluna, acesse a seção de layout e defina as seguintes opções de alinhamento conforme seus requisitos:

• Alinhamento vertical: você pode escolher as configurações para os widgets a seguir. Mas uma coisa que você deve ter em mente é que o conteúdo de uma coluna não pode ser alinhado com as três primeiras opções verticais da coluna, como superior, média e inferior.
• Topo
• Meio
• Inferior

Para esse efeito, existem ^* três novas opções que tornam realmente conveniente alinhar o conteúdo de acordo com a sua preferência.

• ^*Espaço entre - define o espaço entre os widgets no início e no final na borda da coluna. Os widgets são equi-espaçados, ou seja, há espaço igual entre eles.
• ^*Espaço ao redor - o espaço entre os widgets é igual e as bordas são metade do tamanho do espaço entre os widgets.
• ^*Espaço uniformemente - o espaço entre os widgets é uniforme - é igual entre, antes e depois deles.

• Alinhamento horizontal: com esta opção você pode realizar o posicionamento embutido e alinhar os widgets embutidos, que estão na mesma linha, horizontalmente. Você pode alinhar o conteúdo das colunas horizontalmente usando estas opções:
• Iniciar - alinha todos os ícones à esquerda
• Centro: posiciona os ícones no meio da coluna
• Finaliza todos os ícones para a direita
• Espaço entre - o espaço entre os widgets no início e no final na borda da coluna. Os widgets têm espaçamento igual, ou seja, há espaço igual entre eles
• Espaço ao redor - o espaço entre os widgets é igual e as bordas têm metade do tamanho do espaço entre os widgets
• Espaço uniformemente - o espaço entre os widgets é uniforme - é igual entre, antes e depois deles

Para corrigir problemas de largura de resposta, use o estouro oculto

Quando se trata da aparência de um site no celular, existe uma grande probabilidade de você encontrar um problema em que um widget com posicionamento personalizado excede a largura de uma coluna.  

Isso causa uma situação realmente frustrante para os visitantes móveis, onde eles podem rolar horizontalmente. E isso não é algo que você queria para o seu site. Isso pode ser corrigido por:

Configurações de layout > Defina a opção Estouro Oculto

Ao fazer isso, a área excedente será cortada, e não haverá necessidade de rolar horizontalmente

Cuidando do Posicionamento

Você também precisa cuidar do posicionamento das colunas. Você pode definir o posicionamento personalizado com o Elementor 2.5 - absoluto e fixo.

A posição absoluta é o posicionamento do elemento em relação à seção ou coluna que você está dentro. Portanto, se você usar o posicionamento absoluto para um elemento ou uma seção, essa seção não se moverá ao longo da janela do visitante.

A posição fixa é diferente de absoluta, pois permite que a seção / elemento permaneça fixo no ponto de vista do visitante. Portanto, se o usuário rolar pela página, o elemento ficará lá.

Unidades Relativas

Ao projetar sua página da Web, você descobrirá que existem várias maneiras de posicionar os elementos. Para um posicionamento absoluto, é uma boa ideia usar unidades relativas, pois isso tornará o design responsivo mais funcional quando se trata de tamanhos de tela diferentes.

A unidade relativa se ajusta com base na largura e altura relativas da tela, permitindo assim que os elementos ou seções se redimensionem e um design com melhor resposta. Se você optar por usar pixels, precisará criar várias seções responsivas para diferentes tamanhos de tela.

Controlar a profundidade de cada elemento usando o Z-Index

Se você for usar o posicionamento 'absoluto' ou 'fixo' para os widgets, haverá muitas situações em que dois ou mais widgets podem se sobrepor, ou seja, eles são empilhados “em cima” um do outro. Você pode evitar isso usando a configuração normal do Z-index. Isso permitirá que você controle a profundidade e escolha quais widgets aparecem em primeiro plano.

O truque sobre a funcionalidade duplicada

Se você estiver usando o clique com o botão direito para duplicar um elemento com posicionamento personalizado, pode parecer que o clique com o botão direito não funcionou.

Mas, veja. Isso não é verdade. A funcionalidade duplicada funcionou perfeitamente bem e duplicou o elemento. É que, como cada elemento tem exatamente o mesmo posicionamento personalizado, o elemento duplicado é empilhado EXATAMENTE em cima do outro elemento (dando a impressão de que nenhuma duplicata foi criada).

Em termos simples, se você criar uma coluna com sucesso, você pode duplicar a coluna sempre que necessário. Além disso, certifique-se de que as colunas que você cria não usam posicionamento personalizado. Se isso acontecer, a duplicação não funcionará com a opção de clique com o botão direito. No entanto, você pode usar a função duplicar para superar a limitação e copiar a coluna.

Arraste o elemento superior um pouco e ele revelará o outro. Ambos os elementos estão muito presentes. Além disso, quando você duplica uma coluna, ela se sobrepõe à antiga. Você pode ficar confuso. Mas não se preocupe, você pode simplesmente arrastá-lo e usá-lo no design de sua página da web.

Offsets

Há casos em que você precisa definir deslocamentos para o conteúdo da sua página da web. Com o Elementor, você pode definir facilmente o deslocamento. Portanto, se você definir um deslocamento de 500 px a partir da esquerda, o espaço será deixado ao redor do conteúdo com base em sua entrada. Da mesma forma, você também pode definir o deslocamento no lado direito. É uma boa prática definir o deslocamento esquerdo e direito em um valor semelhante, pois o conteúdo será alinhado corretamente na tela.

Há casos em que você precisa definir deslocamentos para o conteúdo da sua página da web. Com o Elementor, você pode definir facilmente o deslocamento. Portanto, se você definir um deslocamento de 500 px a partir da esquerda, o espaço será deixado ao redor do conteúdo com base em sua entrada. Da mesma forma, você também pode definir o deslocamento no lado direito. É uma boa prática definir o deslocamento esquerdo e direito em um valor semelhante, pois o conteúdo será alinhado corretamente na tela.

A regra de ouro

Para um design responsivo melhor, use unidades relativas. Isso ocorre porque o posicionamento absoluto pode ser complicado quando o site é acessado de uma plataforma diferente. O uso de unidades relativas para projetar suas seções resultará em um projeto mais responsivo. A mudança na largura pode ser tratada perfeitamente com a ajuda das unidades relativas. Por “relativo”, queremos dizer unidades variáveis ​​como porcentagem ou largura de visualização (VW), ao invés de unidades fixas como pixels.

Conclusão

Elementor é um construtor de sites super amigável. Às vezes, pode representar desafios na exibição do site se o site for acessado de um celular ou tablet. Com a ajuda do alinhamento de seções e colunas, você pode tornar seus sites perfeitos com real facilidade.