post

Flexibilizar (flex) colunas no Elementor de forma automática com CSS

Publicado em: 05/07/2022

Categorias: BlogCSSElementorWordpress

É 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.


Link de compartilhamento

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/1816

ID de Referência: 1816

Sugira uma publicação

Envie uma mensagem para mim, e sugira alguma publicação de algum tema que tenha dificuldades de resolver.

Clique aqui e entre em contato


Comentários