post #1816
Flexibilizar (flex) colunas no Elementor de forma automática com CSS
Publicado em: 05/07/2022 / Atualizado em: 27/02/2023
É possível fazer com que as colunas do Elementor sejam flexibilizadas de maneira automática.
Infelizmente, até o momento, não é possível direto pelo editor, porem, é possível via CSS.
Segue exemplo de código abaixo:
selector {
--largura-desktop: 20%;
--largura-tablet: 50%;
--largura-mobile: 100%;
--espaco-colunas: 10px;
--espaco-topo-mobile: 60px;
}
selector > .elementor-container { /* Ou use "selector .elementor-container" caso precise usar em uma "Seção Interna" do elementor */
flex-wrap: wrap;
justify-content: center;
}
selector > div > .elementor-column {
flex: 0 1 calc(var(--largura-desktop) - (var(--espaco-colunas) * 2)); /* Porcentagem Desktop que deseja dividir as colunas.
Ex: 33% = 3 colunas, 50% = 2 colunas, 25% = 4 colunas*/
}
selector > div > .elementor-column {
margin-left: var(--espaco-colunas);
margin-right: var(--espaco-colunas);
}
@media (max-width: 1024px) {
selector > div > .elementor-column {
flex: 0 1 calc(var(--largura-tablet) - (var(--espaco-colunas) * 2)); /* Porcentagem Tablet que deseja dividir as colunas.*/
}
selector > div > .elementor-column:nth-child(1n+3) { /* Ex: A partir da coluna X aplicar esse estilo personalizado.*/
margin-top: var(--espaco-topo-mobile);
}
}
@media (max-width: 767px) {
selector > div > .elementor-column {
flex: 0 1 calc(var(--largura-mobile) - (var(--espaco-colunas) * 2)); /* Porcentagem Mobile que deseja dividir as colunas.*/
}
selector > div > .elementor-column:nth-child(1n+0) { /* Ex: A partir da coluna X aplicar esse estilo personalizado.*/
margin-top: var(--espaco-topo-mobile);
}
}
Exemplo baseado no vídeo: https://www.youtube.com/watch?v=eiACQ-AIzqw
OBS: Fique atendo as versões do Elementor, por conta das class elementor-container e elementor-column, para saber se ainda estão sendo utilizadas em sua versão corretamente.
Publicações recomendadas:
Link Direto
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.
bruno.art.br/?p=1816
ID de Referência: 1816
Sugira uma publicação
Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.