5 exemplos de layouts de seção de estilo editorial criados com Divi

As novas opções Divi oferecem inúmeras possibilidades. Módulos, linhas e colunas, mais do que nunca, capacitam uns aos outros no caminho para um design web impressionante e fácil de usar. Uma das coisas que ele pode fazer é criar seções de estilo editorial notáveis. E é exatamente isso que mostraremos neste post; 5 layouts de seção de estilo editorial diferente que você pode usar em diferentes sites. A melhor parte? A postagem é feita usando as configurações corretas para cada módulo, linha e coluna apenas.

Vamos dar uma olhada nos cinco exemplos que mostraremos como criar.

Primeiro exemplo

Área de Trabalho

Móvel

Segundo exemplo

Área de Trabalho

Móvel

Terceiro exemplo

Área de Trabalho

Móvel

Quarto exemplo

Área de Trabalho

Móvel

Quinto Exemplo

Área de Trabalho

Móvel

5 exemplos de layouts de seção de estilo editorial criados com Divi

Inscreva-se no nosso canal no Youtube

Comece a criar o primeiro exemplo

Vamos começar criando nosso primeiro layout de estilo de editor.

Adicionar nova seção

Adicione uma nova página, ative o Divi Builder e mude para o Visual Builder. Quando estiver no Visual Builder, adicione uma seção padrão.

Adicionar linha de três colunas

Dentro dessa seção padrão, precisaremos de uma linha de três colunas.

Fundo Gradiente

Abra as configurações de linha e adicione o seguinte fundo gradiente a ela:

• Primeira cor: # 636363
• Segunda cor: rgba (255,255,255,0)
• Tipo de gradiente: radial
• Direção Radial: Centro
• Posição inicial: 0%
• Posição final: 47%

Cor de fundo da coluna 2

Também precisaremos definir '# d8d8d8' como a cor de fundo da coluna 2.

Dimensionamento

Vá para a guia Design e use as seguintes configurações para a subcategoria Dimensionamento:

• Usar largura personalizada: Sim
• Largura personalizada: 100%
• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Espaçamento

Abra a subcategoria Spacing e adicione '50px' ao preenchimento superior, direito, inferior e esquerdo da segunda coluna.

Módulo de imagem da primeira coluna

Fundo Gradiente

Adicione uma imagem à primeira coluna da linha e use o seguinte fundo gradiente para ela:

• Primeira cor: rgba (255,255,255,0)
• Segunda cor: # 086191
• Tipo de gradiente: Linear
• Direção do gradiente: 107 graus
• Posição inicial: 60%
• Posição final: 60%

Alinhamento

Vá para a guia Design, use o alinhamento de imagem à esquerda e habilite a opção 'Always Center Image on Mobile'.

Espaçamento

Em seguida, abra a subcategoria Espaçamento e use as seguintes configurações de margem e preenchimento:

• Margem superior: 100px (desktop), 0px (tablet e telefone)
• Enchimento superior: 20 px
• Preenchimento inferior: 20 px

Módulo de Texto da Segunda Coluna

Configurações de texto

Em seguida, adicione um Módulo de Texto à segunda coluna da linha. Vá para a guia Design e use as seguintes configurações para a subcategoria Texto:

• Tamanho da fonte do texto: 12px
• Cor do texto: # 000000
• Orientação do Texto: Centro

Dimensionamento

Abra a subcategoria Sizing, use uma largura de '84% 'e selecione o Alinhamento do módulo central.

Espaçamento

Por último, adicione '50px' às margens superior e inferior.

Módulo de imagem da terceira coluna

Fundo Gradiente

Adicione outro Módulo de imagem à terceira coluna e use o seguinte fundo gradiente:

• Primeira cor: # a36100
• Segunda cor: rgba (255,255,255,0)
• Tipo de gradiente: Linear
• Direção do gradiente: 73 graus
• Posição inicial: 40%
• Posição final: 40%

Alinhamento

Vá para a guia Design, selecione o alinhamento de imagem à esquerda e ative a opção 'Always Center Image on Mobile'.

Espaçamento

Por último, adicione a seguinte margem e preenchimento personalizados:

• Margem superior: 300px (desktop), 0px (tablet e telefone)
• Enchimento superior: 20 px
• Preenchimento inferior: 20 px

Resultado

Vamos dar outra olhada no resultado no desktop:

E no celular:

Comece a criar um segundo exemplo

O segundo exemplo tem a seguinte aparência no desktop:

Adicionar nova seção

Em primeiro lugar, adicione uma nova seção padrão.

Adicionar linha de duas colunas

Em seguida, adicione uma linha de duas colunas a ele.

Cor de fundo da coluna 2

Abra as configurações de linha e adicione '#ededed' como a Cor de fundo da coluna 2.

Dimensionamento

Vá para a guia Design e faça as seguintes alterações aplicadas à subcategoria Dimensionamento:

• Usar largura personalizada: Sim
• Largura personalizada: 100%
• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Módulo de imagem da primeira coluna

Alinhamento

Adicione um Módulo de Imagem à primeira coluna, use o Alinhamento de Imagem à esquerda e habilite a opção 'Always Center Image on Mobile'.

Espaçamento

Abra a subcategoria Espaçamento e use as seguintes configurações:

• Margem superior: 100 px (desktop), 0 px (tablet e telefone)
• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Módulo de Texto da Segunda Coluna

Configurações de texto

Em seguida, adicione um Módulo de Texto à segunda coluna e aplique as seguintes configurações à subcategoria Texto:

• Fonte do texto: Lato
• Tamanho da fonte do texto: 12px
• Cor do texto: # 000000
• Altura da linha de texto: 2.2em
• Orientação do Texto: Centro

Dimensionamento

Abra a subcategoria Sizing e aplique uma largura de '75% '.

Espaçamento

Por último, certifique-se de que as seguintes configurações se apliquem à subcategoria Espaçamento:

• Margem superior: 120 px (desktop), -80 (tablet e telefone)
• Margem esquerda: -240 px (desktop), 80 (tablet), 45 (telefone)
• Preenchimento superior, direito, inferior e esquerdo: 50 px (desktop e tablet), 20 px (telefone)

Resultado

Uma vez feito isso, você notará o seguinte design no desktop:

E no celular:

Comece a criar o terceiro exemplo

A seguir, temos o seguinte exemplo que se parece com isto:

Adicionar nova seção

Mais uma vez, adicione uma nova seção padrão.

Adicionar linha de duas colunas

A estrutura da coluna de que precisaremos para esta linha é a seguinte:

Cor de fundo da coluna 1

Abra as configurações de linha e use '# e8e8e8' como a cor de fundo da coluna 1.

Fundo Gradiente da Coluna 2

O fundo gradiente necessário para a segunda coluna é o seguinte:

• Primeira cor: # e8e8e8
• Segunda cor: rgba (255,255,255,0)
• Tipo de gradiente da coluna 2: Linear
• Direção do gradiente da coluna 2: 147 graus
• Posição inicial da coluna 2: 25%
• Posição final da coluna 2: 9%

Dimensionamento

Abra a subcategoria Dimensionamento e use as seguintes configurações:

• Usar largura personalizada: Sim
• Largura personalizada: 100%
• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Espaçamento

Por último, adicione '70px' ao preenchimento superior e inferior da primeira coluna.

Módulo de imagem da primeira coluna

Alinhamento

Adicione um Módulo de Imagem à primeira coluna, use o Alinhamento de Imagem à esquerda e habilite a opção 'Always Center Image on Mobile'.

Espaçamento

Abra a subcategoria Espaçamento e adicione '-300px' à margem esquerda.

Módulo de Texto da Segunda Coluna

Cor de fundo

Adicione um módulo de texto à segunda coluna e use '# 3d3d3d' como cor de fundo.

Configurações de texto

Vá para a guia Design e use as seguintes configurações para a subcategoria Texto:

• Fonte do texto: Lato
• Tamanho da fonte do texto: 12px
• Cor do texto: #FFFFFF
• Altura da linha de texto: 2.2em
• Orientação do Texto: Centro

Dimensionamento

Abra a subcategoria Sizing e use '75% 'para Width.

Espaçamento

Por último, use as seguintes configurações para a subcategoria Espaçamento:

• Margem superior: 130px (desktop), -200 (tablet e telefone)
• Margem esquerda: -180 px (desktop), 80 (tablet), 50 (telefone)
• Preenchimento superior, direito, inferior e esquerdo: 50 px (desktop e tablet), 20 px (telefone)

Resultado

Depois de terminar, o resultado na área de trabalho ficará assim:

E assim no celular:

Comece a criar o quarto exemplo

O quarto exemplo que criaremos se parece com este:

Adicionar nova seção

Comece adicionando uma seção padrão à página em que você está trabalhando.

Adicionar linha de duas colunas

Em seguida, adicione uma linha de duas colunas a ele.

Dimensionamento

Abra a subcategoria Dimensionamento e faça as seguintes alterações:

• Usar largura personalizada: Sim
• Largura personalizada: 60%
• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Módulo da primeira coluna da primeira imagem

Alinhamento

Adicione um Módulo de Imagem à primeira coluna, use o Alinhamento de Imagem correto e habilite a opção 'Always Center Image on Mobile'.

Dimensionamento

Vá para a subcategoria de dimensionamento desse módulo de imagem, use uma largura de '89% 'e selecione o alinhamento de módulo correto.

Visibilidade

Vá para a guia Avançado e desative o Módulo de imagem no telefone e tablet. Faremos isso para 3 dos Módulos de imagem que estão sendo usados. Você pode decidir por si mesmo qual deseja que apareça no tablet e telefone, no nosso caso, essa será a imagem no canto superior direito.

Módulo de segunda imagem da primeira coluna

Alinhamento

Adicione outro Módulo de imagem, use o alinhamento de imagem correto e ative a opção 'Always Center Image on Mobile'.

Fronteira

Role para baixo e use a seguinte borda:

• Borda de uso: Sim
• Cor da borda: #FFFFFF
• Largura da borda: 5px
• Estilo de borda: sólido

Visibilidade

Por último, vá para a guia Avançado e desative o Módulo de imagem no telefone e tablet.

Módulo de primeira imagem da segunda coluna

Alinhamento

Adicione o próximo Módulo de imagem à segunda coluna, use o alinhamento de imagem à esquerda e habilite a opção 'Always Center Image on Mobile'.

Fronteira

Role para baixo, abra a subcategoria Borda e aplique as seguintes configurações:

• Borda de uso: Sim
• Cor da borda: #FFFFFF
• Largura da borda: 4px
• Estilo de borda: sólido

Módulo de segunda coluna de segunda imagem

Alinhamento

Adicione o último Módulo de imagem à segunda coluna, use o alinhamento de imagem à esquerda e habilite a opção 'Always Center Image on Mobile'.

Dimensionamento

Em seguida, abra a subcategoria de dimensionamento, use uma largura de '89% 'e selecione o alinhamento do módulo à esquerda.

Visibilidade

Desative este Módulo de imagem no telefone e no tablet também.

Adicionar linha de uma coluna

Depois de terminar a linha anterior, vá em frente e adicione outra. Desta vez, a linha precisará apenas de uma coluna.

Dimensionamento

Vá para a guia Design das configurações de linha, ative a opção 'Usar largura personalizada' e use '581px' como a largura personalizada.

Módulo de Texto

Cor de fundo

Adicione um Módulo de Texto a essa nova linha e selecione 'rgba (255,255,255,0,92)' como a cor de fundo.

Configurações de texto

Vá para a guia Design e faça com que as seguintes configurações se apliquem à subcategoria Texto:

• Fonte do texto: Lato
• Tamanho da fonte do texto: 12px
• Cor do texto: # 000000
• Altura da linha de texto: 2.2em
• Orientação do Texto: Centro

Dimensionamento

Em seguida, abra a subcategoria Sizing, adicione '75% 'à largura e selecione o Alinhamento do módulo central.

Espaçamento

Por último, faça com que as seguintes configurações se apliquem à subcategoria Espaçamento:

• Margem superior: -580px (desktop), -200 (tablet e telefone)
• Margem esquerda: - 180 px (desktop), 80 (tablet), 50 (telefone)
• Preenchimento superior, direito, inferior e esquerdo: 50 px

Resultado

Uma vez feito isso, você poderá testemunhar o seguinte resultado no desktop:

E o seguinte no celular:

Comece a criar o quinto exemplo

O último exemplo que mostraremos como recriar é o seguinte:

Adicionar seção de largura total

Comece adicionando uma seção de largura total à sua página.

Módulo de imagem de largura total

Dentro dessa seção Fullwidth, adicione um Módulo de imagem Fullwidth.

Adicionar nova seção

Logo abaixo da seção anterior, adicione outra seção. Desta vez, a seção deve ser padrão em vez de largura total.

Adicionar linha de três colunas

Adicione uma linha de três colunas a essa nova seção padrão.

Cor de fundo das colunas 1, 2 e 3

Abra as configurações de linha e atribua as seguintes cores de fundo às colunas:

• Coluna 1: #eaeaea
• Coluna 2: rgba (12.113.195,0,17)
• Coluna 3: rgba (131,0,233,0,09)

Dimensionamento

Vá para a guia Design e faça as seguintes alterações na subcategoria Dimensionamento:

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Espaçamento

Em seguida, abra a subcategoria Espaçamento, adicione '-60px' à margem superior e '50px' ao preenchimento inferior de cada coluna.

Módulo de Texto da Primeira Coluna

Cor de fundo

Continue adicionando um Módulo de Texto à Primeira Coluna e usando 'rgba (255,255,255,0,89)' como cor de fundo.

Configurações de texto

Vá para a guia Design e faça com que as seguintes configurações se apliquem à subcategoria Texto:

• Fonte do texto: Lato
• Tamanho da fonte do texto: 12px
• Cor do texto: # 000000
• Altura da linha de texto: 2.2em
• Orientação do Texto: Centro

Fronteira

Abra a subcategoria Borda e use as seguintes configurações:

• Borda de uso: Sim
• Cor da borda: #FFFFFF
• Largura da borda: 17 px
• Estilo de borda: sólido

Dimensionamento

Em seguida, use uma largura de '75% 'e selecione o Alinhamento do módulo central dentro da subcategoria Dimensionamento.

Espaçamento

Por último, abra a subcategoria Espaçamento e aplique as seguintes configurações:

• Margem superior: -300px (desktop), 0px (tablet e telefone)
• Superior, direito, inferior, acolchoamento esquerdo: 50 px (desktop e tablet), 20 px (telefone)

Clone o módulo de texto duas vezes e coloque em outras duas colunas

Vá em frente e clone o Módulo de Texto duas vezes. Em seguida, coloque cada um dos clones nas duas colunas restantes.

Alterar Módulo de Texto da Segunda Coluna de Espaçamento

Teremos que alterar a margem superior do módulo de texto colocado na segunda coluna para '-220px'.

Alterar Módulo de Texto da Terceira Coluna de Espaçamento

A mesma conta para o Módulo de texto na terceira coluna, mas o valor é '-140px'.

Resultado

E aqui você tem o resultado no desktop:

E no celular:

Pensamentos finais

Neste post, mostramos alguns layouts de seção de estilo editorial lindos e divertidos que você pode usar em seu próprio site. Esses exemplos mostram como as opções do Divi são flexíveis e como você pode ser criativo. Se você tiver dúvidas ou sugestões; certifique-se de deixar um comentário na seção de comentários abaixo!

Certifique-se de se inscrever em nosso boletim informativo por e-mail e canal no YouTube para que você nunca perca um grande anúncio, dica útil ou brinde Divi!

Imagem em destaque por Julia Tim / shutterstock.com