Como alinhar seções e colunas no Elementor

Ao trabalhar com o Elementor , você perceberá que posicionar seções e colunas de forma personalizada pode ser um pouco complicado. É necessário alinhar colunas e seções vertical e horizontalmente para obter um layout responsivo que se ajuste ao espaço disponível. Sem esse alinhamento, os elementos de colunas com alturas variáveis ​​não se ajustarão corretamente na tela.

• Por que precisamos nos alinhar?
• Como as colunas ou seções funcionam em um design responsivo?
• Como alinhar seções e colunas no Elementor?
• Para corrigir problemas de largura responsiva, use `overflow: hidden`
• Cuidando do posicionamento
• Unidades Relativas
• Controle a profundidade de cada elemento usando o índice Z
• O truque da funcionalidade duplicada
• Deslocamentos
• A Regra de Ouro
• Conclusão

Por que precisamos nos alinhar?

Em cada coluna ou seção, o conteúdo pode ser de diferentes categorias. Pode ser na forma de imagens, texto e avaliações. Para uma aparência harmoniosa, recomenda-se uniformidade na apresentação do conteúdo. Não deve ser simplesmente jogado ali, sem qualquer critério.

Com um bom alinhamento, você pode deixar o site com uma aparência mais organizada e elegante, evitando que pareça desorganizado. A opção de alinhamento permite ajustar diversos widgets de tamanhos variados lado a lado na mesma coluna.

Como as colunas ou seções funcionam em 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 lugar. No entanto, você não pode fazer isso além de uma determinada seção. Esses widgets são relativos à coluna em que estão inseridos. Isso pode causar problemas na responsividade do design.

Imagine que você tenha um layout de três colunas. Com o auxílio do posicionamento personalizado, você pode arrastar e soltar um widget da coluna da direita para a coluna central, ou da maneira que preferir.

Mas fazer isso só beneficiará os visitantes que acessam o site de computador, pois a aparência ficará boa para eles. No entanto, causará um problema se o site for acessado de um dispositivo móvel, porque o Elementor empilha as colunas verticalmente nesses dispositivos.

Assim, em vez de ter três colunas lado a lado, você poderá ver as três colunas empilhadas umas sobre as outras. O elemento não aparecerá mais na coluna do meio, como acontece em computadores.

Embora seja possível ajustar a visualização para dispositivos móveis de forma inteligente com uma configuração oculta, não há garantia de que a maioria das pessoas a encontrará. Então, por que frustrar os usuários? Tornar o design responsivo e adaptável é a solução ideal, para que não apresente problemas em nenhuma versão.

Aliás, é preciso prestar atenção à relação do widget com a coluna em que ele está inserido.

Como alinhar seções e colunas no Elementor?

Para cada seção/coluna, acesse a seção de layout e defina as seguintes opções de alinhamento de acordo com suas necessidades:

• Alinhamento vertical: você pode escolher as configurações para os widgets a seguir. Mas lembre-se de que o conteúdo de uma coluna não pode ser alinhado com as três primeiras opções de alinhamento vertical da coluna, ou seja, superior, central e inferior.
• Principal
• Meio
• Fundo

Aliás, existem ^três novas opções que tornam muito conveniente alinhar o conteúdo de acordo com sua preferência.

• ^*Espaço entre – define o espaço entre os widgets no início e no final da coluna. Os widgets ficam equidistantes, ou seja, há o mesmo espaço 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çamento uniforme – o espaço entre os widgets é uniforme, sendo igual entre eles, antes e depois deles.

• Alinhamento horizontal: com esta opção, você pode posicionar e alinhar horizontalmente os widgets embutidos que estão na mesma linha. Você pode alinhar o conteúdo das colunas horizontalmente usando estas opções:
• Iniciar - alinha todos os ícones à esquerda
• Centralizar: posiciona os ícones no meio da coluna
• Fim - posiciona todos os ícones à direita
• Espaço entre widgets – o espaço entre os widgets no início e no final da coluna. Os widgets estão equidistantes, ou seja, há o mesmo espaço 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çamento uniforme – o espaço entre os widgets é uniforme, sendo igual entre eles, antes e depois deles

Para corrigir problemas de largura responsiva, use `overflow: hidden`

Quando se trata da aparência de um site em dispositivos móveis, há uma grande probabilidade de você se deparar com um problema em que um widget com posicionamento personalizado ultrapassa a largura de uma coluna.  

Isso causa uma situação realmente frustrante para visitantes de dispositivos móveis, que precisam rolar a página horizontalmente. E isso não é algo que você deseja para o seu site. Isso pode ser resolvido da seguinte forma:

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

Fazendo isso, a área excedente será cortada e não haverá necessidade de rolagem horizontal

Cuidando do posicionamento

Você também precisa se atentar ao posicionamento das colunas. Com o Elementor 2.5, é possível definir posicionamentos personalizados — absoluto e fixo.

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

A posição fixa difere da posição absoluta, pois permite que a seção/elemento permaneça fixo no ponto de vista do visitante. Assim, se o usuário rolar a página, o elemento permanecerá no mesmo lugar.

Unidades Relativas

Ao projetar sua página web, você descobrirá que existem várias maneiras de posicionar os elementos. Para posicionamento absoluto, é uma boa prática usar unidades relativas, pois isso tornará o design responsivo mais funcional em diferentes tamanhos de tela.

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

Controle a profundidade de cada elemento usando o índice Z

Se você for usar posicionamento 'absoluto' ou 'fixo' para os widgets, haverá muitas situações em que dois ou mais widgets poderão se sobrepor, ou seja, ficarão empilhados uns sobre os outros. Você pode evitar isso usando a configuração normal de Z-index. Isso permitirá que você controle a profundidade e escolha quais widgets aparecem em primeiro plano.

O truque da funcionalidade duplicada

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

Mas, veja só. Isso não é verdade. A funcionalidade de duplicação funcionou perfeitamente e duplicou o elemento. Acontece que, como cada elemento tem exatamente o mesmo posicionamento personalizado, o elemento duplicado ficou exatamente empilhado sobre o outro (dando a impressão de que nenhuma duplicata foi criada).

Em termos simples, se você criar uma coluna com sucesso, poderá duplicá-la sempre que necessário. Além disso, certifique-se de que as colunas criadas não utilizem posicionamento personalizado. Caso contrário, a duplicação não funcionará com a opção de clicar com o botão direito do mouse. No entanto, você pode usar a função de duplicação para contornar essa limitação e copiar a coluna.

Arraste um pouco o elemento superior e o outro será revelado. Ambos os elementos estão presentes. Além disso, ao duplicar uma coluna, ela se sobreporá à anterior. Isso pode causar alguma confusão. Mas não se preocupe, basta arrastá-la e usá-la no design da sua página web.

Deslocamentos

Existem casos em que você precisa definir deslocamentos para o conteúdo da sua página web. Com o Elementor, você pode fazer isso facilmente. Por exemplo, se você definir um deslocamento de 500px à esquerda, o espaço ao redor do conteúdo será definido de acordo com o valor inserido. Da mesma forma, você também pode definir um deslocamento à direita. É uma boa prática definir os deslocamentos à esquerda e à direita com valores semelhantes, pois assim o conteúdo ficará alinhado corretamente na tela.

Existem casos em que você precisa definir deslocamentos para o conteúdo da sua página web. Com o Elementor, você pode fazer isso facilmente. Por exemplo, se você definir um deslocamento de 500px à esquerda, o espaço ao redor do conteúdo será definido de acordo com o valor inserido. Da mesma forma, você também pode definir um deslocamento à direita. É uma boa prática definir os deslocamentos à esquerda e à direita com valores semelhantes, pois assim o conteúdo ficará alinhado corretamente na tela.

A Regra de Ouro

Para um design responsivo melhor, use unidades relativas. Isso porque o posicionamento absoluto pode ser problemático quando o site é acessado de uma plataforma diferente. Usar unidades relativas para projetar suas seções resultará em um design mais responsivo. A variação na largura pode ser gerenciada perfeitamente com a ajuda de unidades relativas. Por "relativas", queremos dizer unidades variáveis, como porcentagem ou largura da visualização (VW), em vez de unidades fixas, como pixels.

Conclusão

O Elementor é um construtor de sites extremamente fácil de usar. Às vezes, ele pode apresentar desafios na exibição do site se o acesso for feito por dispositivos móveis ou tablets. Com a ajuda do alinhamento de seções e colunas, você pode deixar seus sites perfeitos com muita facilidade.