Como alinhar seções e colunas do Elementor

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

• Por que precisamos nos alinhar?
• Como funcionam as colunas ou seções para um design responsivo?
• Como alinhar seções e colunas do Elementor?
• Para corrigir problemas de largura responsiva, use overflow oculto
• Cuidando do Posicionamento
• Unidades Relativas
• Controle a profundidade de cada elemento usando Z-Index
• O truque sobre 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 organizada, é recomendável que haja uniformidade na aparência do conteúdo. Não deveria ser simplesmente jogado lá, descartado, só por diversão.

Com um bom alinhamento, você pode fazer com que o site pareça mais organizado 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 funcionam as colunas ou seções para um design responsivo?

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 fazer isso 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 direita para a coluna central ou como desejar.

Mas fazer isso só beneficiará os visitantes de desktop porque lhes parecerá bom. No entanto, causará um problema se o site for acessado de um celular porque o Elementor empilha as colunas verticalmente no celular.

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

Embora você possa ajustar de forma inteligente a visualização móvel com uma configuração oculta, 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 trave em lugar nenhum.

Por falar nisso, você precisa prestar atenção na relação do widget com a coluna dentro dele.

Como alinhar seções e colunas do Elementor?

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

• Alinhamento vertical: você pode escolher as configurações dos 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, ou seja, superior, intermediário 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 na borda da coluna. Os widgets são igualmente espaçados, 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 uniforme – o espaço entre os widgets é uniforme – é igual entre, antes e depois deles.

• Alinhamento horizontal: com esta opção você pode realizar o posicionamento inline e alinhar os widgets inline, 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 à direita
• Espaço entre – o espaço entre os widgets no início e no final na borda da coluna. Os widgets são igualmente espaçados, 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 uniforme – o espaço entre os widgets é uniforme – é igual entre, antes e depois deles

Para corrigir problemas de largura responsiva, use overflow oculto

Quando se trata da aparência de um site no celular, há uma grande probabilidade de você se deparar com um problema onde um widget com posicionamento personalizado ultrapassa 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 > Definir a Overflow como 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 Elementor 2.5 – absoluto e fixo.

O posicionamento absoluto é 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 seção, essa seção não se moverá ao longo da janela do visitante.

A posição fixa é diferente da absoluta, pois permite que a seção/elemento permaneça fixa ao ponto de vista do visitante. Assim, se o usuário rolar a página, o elemento permanecerá lá.

Unidades Relativas

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

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 tenham um design melhor 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 Z-Index

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, eles serão empilhados “em cima” um do outro. Você pode evitar isso usando a configuração normal do índice Z. Isso permitirá que você controle a profundidade e escolha quais widgets aparecem em primeiro plano.

O truque sobre funcionalidade duplicada

Se você estiver clicando 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 espere. Isso não é verdade. A funcionalidade duplicada funcionou perfeitamente e duplicou o elemento. Acontece 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, poderá duplicá-la sempre que necessário. Além disso, certifique-se de que as colunas criadas não usem posicionamento personalizado. Se isso acontecer, a duplicação não funcionará com a opção de clicar com o botão direito. No entanto, você pode usar a função duplicar para superar a limitação e copiar a coluna.

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

Deslocamentos

Há casos em que você precisa definir compensações no conteúdo da sua página da web. Com Elementor, você pode definir facilmente o deslocamento. Portanto, se você definir um deslocamento de 500px da esquerda, será deixado espaço ao redor do conteúdo com base na 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 ficará devidamente alinhado na tela.

Há casos em que você precisa definir compensações no conteúdo da sua página da web. Com Elementor, você pode definir facilmente o deslocamento. Portanto, se você definir um deslocamento de 500px da esquerda, será deixado espaço ao redor do conteúdo com base na 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 ficará devidamente alinhado na tela.

A regra de ouro

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

Conclusão

Elementor é um construtor de sites super fácil de usar. Às vezes, isso 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 muita facilidade.