Como estender módulos para criar layouts de coluna exclusivos em Divi

Cada nova página que você cria com o Divi Builder é estruturada usando vários layouts de coluna diferentes. Divi inclui layouts de coluna integrados para cada linha, variando de uma coluna até seis colunas. Mas, às vezes, você pode sentir a necessidade de ajustar essas colunas para layouts ainda mais exclusivos. Hoje, vou mostrar a você uma maneira criativa de fazer exatamente isso.

Neste tutorial, vou mostrar uma técnica de design simples que permite estender módulos usando margens negativas para ocupar mais de uma coluna. Essa técnica permitirá que você projete alguns layouts personalizados exclusivos que você pode não ter considerado possíveis.

Vamos começar.

Espiada

Para obter uma melhor compreensão do que iremos construir, aqui está uma versão antes e depois do design usando esta técnica.

Antes

Este é o design do layout sem usar margens personalizadas para estender os módulos para outras colunas.

Depois de

Este é o layout depois de estender os dois módulos de imagem e os três módulos de texto marcados com os números “01”, “03” e “05”.

A mudança é sutil, mas você deve ser capaz de ver que os módulos foram estendidos para ocupar a coluna adjacente. E a única coisa necessária para conseguir isso é uma configuração de margem simples de -100%.

E o resultado no tablet é ainda mais emocionante.

Compreendendo o conceito

Por padrão, cada módulo Divi tem uma largura de 100%, o que significa que cada módulo que você colocar em uma coluna ocupará toda a largura da coluna em que se encontra. A largura da medianiz é o que Divi usa para determinar a quantidade de espaço entre cada coluna. Portanto, para este tutorial, é importante definir a largura da medianiz como 1 para eliminar esse espaço.

Aqui está uma ilustração de como cada módulo abrange toda a largura de uma coluna em uma linha com uma largura de medianiz definida como 1.

Agora, se você adicionar uma margem negativa (esquerda ou direita) a um módulo, você pode facilmente estender esse módulo para ocupar mais de uma coluna. Isso permite que você crie layouts de coluna personalizados para sua página que você pode não ter considerado.

Nesta ilustração, você pode ver que, ao adicionar uma margem esquerda de -100% ao módulo na coluna 5, ela estende o módulo para a esquerda para ocupar a coluna 5 e a coluna 4.

E um dos bônus de usar o layout de seis colunas é que o design é bem preservado no tablet.

Além disso, devido à forma como as colunas são ordenadas da esquerda para a direita, os módulos geralmente devem ser estendidos para a esquerda para que o conteúdo não fique oculto atrás da coluna. Isso é especialmente verdadeiro se você tiver um conjunto de cores de fundo. Portanto, se você tiver o problema de o conteúdo do módulo ficar oculto atrás de uma coluna, provavelmente você está estendendo o módulo na direção errada.

Por que usar um layout de seis colunas?

Existem três razões principais para usar um layout de seis colunas para esta técnica de design. A primeira razão é que oferece mais colunas para trabalhar. A segunda razão é que os layouts de seis colunas são convertidos em um layout de três colunas no tablet, o que preservará os elementos de design muito bem. O terceiro motivo é que as colunas manterão sua ordem no celular, de modo que as cores de fundo da coluna permanecerão as mesmas. Isso é útil para layouts de grade.

Este projeto também funciona com o layout de coluna 1/2 1/6 1/6 1/6 e o ​​layout de coluna 1/6 1/6 1/6 1/2, pois ambos preservarão as três colunas também no tablet.

Implementando o Design

Para mostrar como essa técnica de design funciona, vou guiá-lo pelo processo de construção de um layout de grade simples para apresentar produtos. Em seguida, mostrarei como estender os módulos em outras colunas para criar um design de layout personalizado.

Configurando sua seção e linhas

Para começar, crie uma nova página e implemente o construtor visual. Em seguida, escolha “Construir do zero”. Em seguida, vá em frente e adicione um layout de coluna 1/2 1/6 1/6 1/6 à sua primeira seção.

Em seguida, atualize as configurações de linha da seguinte forma:

Cor de fundo: # 222831
Largura da calha: 1
Equalize a altura das colunas: SIM
Margem personalizada: 0 px superior, 0 px inferior
Preenchimento personalizado: 0 px superior, 0 px inferior

Salvar configurações.

Uma vez que todas as três linhas para este projeto compartilharão essas configurações de linha. Duplique a linha para criar uma segunda linha. Em seguida, altere a segunda linha para ter um layout de seis colunas.

Para criar a terceira linha, simplesmente duplique a segunda linha.

Adicionando Módulos à Linha 1

Na primeira coluna da primeira linha superior, adicione um módulo de texto com as seguintes configurações:

Cor do Texto: Claro
Tamanho do texto do texto: 16px
Preenchimento personalizado: 2vw superior, 2vw inferior, 2vw esquerdo, 2vw direito

Na segunda coluna da primeira linha, adicione um módulo de sinopse com as seguintes configurações:

Título: [insira o título]
Conteúdo: [excluir]
Ícone: [escolher o ícone]
Cor do ícone: #eeeeee
Tamanho da fonte do ícone: 50px
Cor do Texto: Claro
Orientação do Texto: Centro
Preenchimento personalizado: 3vw superior, 2vw inferior

Salvar configurações

Na terceira coluna, adicione uma imagem.

Na última coluna, queremos deixá-lo vazio para que possamos estender o módulo de imagem para preencher essa coluna também. Mas não queremos deixá-lo completamente vazio para que a coluna fique ativa ao empilhar no celular. Portanto, a coisa mais simples a fazer é adicionar um módulo divisor e escolher não mostrar o divisor. Então, podemos ocultar a divisória para smartphone.

Atualize as configurações do divisor da seguinte forma:

Mostrar divisor: NÃO
Desativar em: telefone

Adicionando Módulos às Linhas 2 e 3

Agora vamos passar para a linha 2. Na primeira coluna, copie e cole o módulo blurb que você criou na segunda coluna da primeira linha. Em seguida, altere o ícone e o texto do título para a cor preta.

Em seguida, adicione um Módulo de Texto à segunda coluna com o seguinte:

Contente:

<h2>Product</h2>
01

Cor do texto do texto: #ffffff
Tamanho do texto do texto: 50px
Altura da linha de texto: 1em
Orientação do texto: direita
Alinhamento de Texto Título 2: Esquerda
Cor do texto do título 2: #ffffff
Altura da linha do título 2: 3em
Preenchimento personalizado: 2vw superior, 2vw inferior, 2vw esquerdo, 2vw direito

Próximo Copie o módulo de texto que você acabou de criar e cole-o nas colunas 4 e 6.

Você também pode colar o mesmo módulo de texto na coluna 3, coluna 5 e coluna 6 da linha 3. Depois disso, você pode usar o editor embutido para alterar os números de cada um dos módulos de texto para que possa ver como esses módulos estão empilhados móvel mais tarde.

Na coluna 2 da linha 3, adicione outra imagem.

Depois disso, preencha todas as colunas vazias em sua seção com um divisor, copiando e colando o divisor que você criou na linha 1.

Aqui está a aparência de seu layout neste ponto (os quadrados vazios representam um módulo divisor):

Adicionando Margem Negativa para Estender Módulos para Outras Colunas

Neste ponto, podemos começar a estender nossos módulos usando margem negativa. Esse processo é extremamente simples de fazer.

Abra as configurações do módulo de imagem para a imagem na primeira linha. Como queremos estender a imagem para a direita, vamos adicionar uma margem direita de -100%.

Em seguida, adicione uma Margem Esquerda de -100% ao Módulo de Texto na Linha 2, coluna 3.

Agora copie os estilos de módulo e cole-os nos módulos de texto na linha 2, coluna 6 e também no módulo de texto na linha 3, coluna 5.

Tudo o que resta é estender a imagem na linha 3, coluna 2. Atualize o módulo de imagem com uma margem personalizada de -100% à esquerda.

Adicionando cores de fundo às suas colunas

A última fase do design é adicionar cores de fundo às suas colunas. Para a primeira linha (superior), adicione o seguinte:

Cor de fundo da coluna 1: # 393e46

Para a segunda linha, adicione o seguinte:

Cor de fundo da coluna 1: #eeeeee
Cor de fundo da coluna 4: # 7971ea
Cor de fundo da coluna 5: # 393e46
Cor de fundo da coluna 6: # 393e46

E para a última linha, adicione o seguinte:

Cor de fundo da coluna 3: # 7971ea
Cor de fundo da coluna 6: # 7971ea

Isso é tudo para o design do desktop. Agora, vamos verificar se tudo está funcionando bem no celular.

Ajustando o Layout da Tela do Smartphone

No momento, o layout atual ficará ótimo no desktop e no tablet, mas as margens negativas que adicionamos precisarão ser ajustadas no smartphone.

Normalmente, se eu quisesse corrigir a margem negativa no smartphone, eu apenas definiria a margem esquerda para 0% nas configurações do módulo para dispositivos smartphone. No entanto, ainda haverá um ajuste necessário para tamanhos de tela entre 479 px e 767 px de largura. Por causa disso, a melhor maneira de corrigir a margem negativa no smartphone é fazer isso com um snippet de CSS personalizado.

Vá para as configurações da página e adicione o seguinte CSS personalizado na guia Avançado:

/** Fixes negative margins on smartphone**/

@media only screen and (max-width: 479px){
.et_pb_module {
    margin-left: 0%!important;
    margin-right: 0%!important;
}
}

O que este snippet CSS faz é definir as margens direita e esquerda de todos os módulos para 0% sempre que o tamanho da tela for igual ou menor que 479px de largura. Isso corrige o problema muito bem!

Agora vamos verificar o design final.

Pensamentos finais

Usar a margem negativa para estender os módulos pode ser uma maneira conveniente de obter designs de layout exclusivos em desktops e tablets sem ter que recorrer a um monte de CSS para alterar os layouts de coluna padrão do Divi. E uma das minhas coisas favoritas sobre essa técnica de design é a beleza do layout no tablet. Esperançosamente, será útil para seu próximo projeto. Na verdade, sempre ajuda a obter uma compreensão mais profunda do Divi.

Estou ansioso para ouvir de você nos comentários.

Saúde!