Como projetar seções exclusivas com várias colunas de heróis com a seção especializada da Divi

Ao longo de todas as tendências de design, a maneira como você projeta suas seções de herói permanece extremamente importante. Com Divi, você pode adotar diferentes abordagens e criar uma seção de heróis que se destaque e incentive as pessoas a estender sua permanência em seu site. Para ajudá-lo a se inspirar para seus próximos projetos Divi, vamos mostrar a você como projetar seções exclusivas de heróis com várias colunas usando apenas as opções integradas do Divi. Não apenas as seções de heróis com várias colunas parecem ótimas, mas também ajudam você a colocar estrategicamente mais conteúdo na seção de heróis sem sobrecarregar seus visitantes.

Vamos lá!

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.

Baixe o Layout da Seção Multi-Column Hero GRATUITAMENTE

Para colocar suas mãos no layout da seção do herói de várias colunas, primeiro você precisa fazer o download usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.

Baixe os arquivos

Download de graça

Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.

DOWNLOAD

Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!

Vamos começar a recriar!

Adicionar nova seção de especialidade

Estrutura da Coluna

Para criar uma seção de herói de várias colunas contínua, vamos usar uma das seções de especialidade Divi que você tem acesso dentro do Visual Builder. Ir para uma seção de especialidade permite que você tenha um melhor controle da estrutura de grade que você procura quando está projetando uma seção de herói de várias colunas. Para este exemplo específico, estamos selecionando a seguinte estrutura de coluna:

Cor de fundo

Abra as configurações da seção e adicione uma cor de fundo branca.

• Cor de fundo: #ffffff

Dimensionamento

Estamos garantindo que não haja lacunas entre as colunas da seção, alterando as configurações de dimensionamento.

• Equalize Alturas de Coluna: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Largura: 100%
• Largura máxima: 100%
• Largura interna: 100%
• Largura máxima interna: 100%

Espaçamento

Também estamos removendo todo o preenchimento padrão superior e inferior das linhas e colunas.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px
• Preenchimento superior da coluna 1: 0 px
• Preenchimento inferior da coluna 1: 0 px
• Preenchimento superior da coluna 2: 0 px
• Preenchimento inferior da coluna 2: 0 px
• Preenchimento superior da coluna 3: 0 px
• Preenchimento inferior da coluna 3: 0 px

Adicionar linha # 1

Estrutura da Coluna

Continue adicionando uma nova linha à primeira coluna da seção usando a seguinte estrutura de coluna:

Espaçamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e remova todo o preenchimento padrão superior e inferior.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Adicionar Módulo de Texto à Coluna

Adicionar parágrafo e conteúdo H1

É hora de começar a adicionar módulos! Adicione um novo Módulo de Texto com algum parágrafo e conteúdo H1 de sua escolha.

Configurações de texto

Vá para a guia de design e altere as configurações de texto.

• Fonte do texto: Open Sans
• Tamanho do texto: 0,9vw (desktop), 1,6vw (tablet), 2,2vw (telefone)

Configurações de texto H1

Modifique as configurações de texto H1 também.

• Fonte do cabeçalho: Open Sans
• Peso da fonte do cabeçalho: Semi negrito
• Estilo da fonte do título: maiúscula
• Cor do texto do título: # 000000
• Tamanho do texto do título: 4vw
• Altura da linha de direção: 1.1em

Espaçamento

Adicione alguns valores de preenchimento personalizados também.

• Preenchimento superior: 10,8vw
• Preenchimento esquerdo: 4vw
• Preenchimento direito: 4vw

Adicionar linha # 2

Estrutura da Coluna

A segunda linha de que precisamos na coluna da primeira seção usa a seguinte estrutura de coluna:

Espaçamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e modifique os valores de preenchimento.

• Preenchimento superior: 3vw
• Preenchimento esquerdo: 4vw
• Preenchimento direito: 4vw

Adicione o Módulo de Texto # 1 à Coluna 1

Adicionar conteúdo H3

Depois de concluir as configurações de linha, você pode prosseguir e adicionar um novo Módulo de texto à primeira coluna. Insira algum conteúdo H3 de sua escolha.

Configurações de texto H3

Vá para a guia de design e altere as configurações de texto H3 de acordo:

• Fonte do título 3: Open Sans
• Cabeçalho 3 Peso da fonte: Semi negrito
• Estilo da fonte do título 3: maiúsculas
• Cor do texto do título 3: # 000000
• Cabeçalho 3 Tamanho do texto: 1,5 vw (desktop), 2vw (tablet), 2,5vw (telefone)

Espaçamento

Continue adicionando alguma margem superior no telefone.

• Margem superior: 2vw (apenas telefone)

Adicionar Módulo Divisor à Coluna 1

Visibilidade

O segundo módulo de que precisamos na primeira coluna é um Módulo Divisor. Certifique-se de que a opção 'Mostrar divisor' esteja habilitada.

• Mostrar divisor: Sim

Linha

Altere a cor da linha a seguir.

• Cor da linha: # 000000

Espaçamento

Adicione alguns valores de margem personalizados para criar espaço ao redor do divisor.

• Margem superior: 2vw
• Margem inferior: 2vw
• Margem direita: 2vw

Adicione o Módulo de Texto # 2 à Coluna 1

Adicionar conteúdo

O próximo e último módulo de que precisamos nesta coluna é outro Módulo de Texto. Insira algum conteúdo de parágrafo de sua escolha.

Configurações de texto

Vá para a guia de design e altere as configurações de texto de acordo:

• Fonte do texto: Open Sans
• Tamanho do texto: 0,6vw (desktop), 1,1vw (tablet), 2vw (telefone)
• Altura da linha de texto: 2em

Espaçamento

Adicione um pouco de preenchimento inferior e direito também.

• Margem inferior: 5vw (apenas telefone)
• Margem direita: 2vw

Clonar todos os módulos na coluna 1 duas vezes e colocar duplicatas nas colunas restantes

Depois de concluir todos os módulos da coluna 1, você pode prosseguir e clonar cada um deles duas vezes. Coloque as duplicatas nas duas colunas restantes da linha.

Mudar o Conteúdo

Certifique-se de alterar todo o conteúdo nos Módulos de Texto.

Adicionar linha # 3

Estrutura da Coluna

A próxima e última linha de que precisamos na coluna da primeira seção usa a seguinte estrutura de coluna:

Espaçamento

Abra as configurações de linha e modifique os valores de espaçamento.

• Margem superior: 2vw
• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Adicionar Módulo de Texto à Coluna 1

Adicionar conteúdo

Continue adicionando um Módulo de Texto à primeira coluna com alguma cópia do CTA de sua escolha.

Adicionar Link

Adicione um link para o módulo inteiro também.

Cor de fundo

Também estamos mudando a cor de fundo do Módulo de Texto.

• Cor de fundo: # 000000

Configurações de texto

Vá para a guia de design e altere as configurações de texto de acordo:

• Fonte do texto: Open Sans
• Peso da fonte do texto: ultra negrito
• Estilo da fonte do texto: maiúsculas
• Alinhamento de Texto: Centro
• Cor do texto: #ffffff
• Tamanho do texto: 1vw (desktop), 1,7vw (tablet), 2,5vw (telefone)

Espaçamento

E crie espaço ao redor do módulo usando alguns valores de margem e preenchimento personalizados.

• Margem superior: 4vw (desktop), 11vw (tablet), 0vw (telefone)
• Preenchimento superior: 4vw
• Preenchimento inferior: 4vw

Clonar Módulo de Texto e Colocar Duplicado na Coluna 2

Depois de concluir o Módulo de texto na coluna 1, você pode cloná-lo e colocar a duplicata na segunda coluna.

Mudar o Conteúdo

Certifique-se de alterar o conteúdo e o link.

Mudar a cor do fundo

Bem como a cor de fundo.

• Cor de fundo: # e5e5e5

Mudar a cor do texto

Em seguida, vá para a guia de design e altere a cor do texto.

• Cor do texto: # 000000

Alterar espaçamento

Por último, mas não menos importante, certifique-se de que as configurações de espaçamento contenham apenas os seguintes valores:

• Preenchimento superior: 4vw
• Preenchimento inferior: 4vw

Adicionar Módulo de Imagem à Seção Coluna 2

Enviar Imagem

Para a próxima coluna da seção! Aqui, o primeiro módulo de que precisaremos é um Módulo de imagem. Faça upload de uma imagem de sua escolha ou use uma que você possa encontrar na pasta compactada que foi compartilhada no início desta postagem.

Dimensionamento

Vá para as configurações de dimensionamento e certifique-se de que a opção 'Forçar largura total' esteja habilitada. Isso garantirá que a imagem manterá seu tamanho em todos os tamanhos de tela.

• Forçar largura total: Sim

Filtros

Modifique as configurações dos filtros a seguir.

• Saturação: 0%
• Brilho: 50%

Adicionar Módulo de Texto à Seção Coluna 2

Adicionar parágrafo e conteúdo H3

O segundo módulo de que precisamos nesta coluna é um Módulo de Texto. Insira algum parágrafo e conteúdo H3 de sua escolha.

Cor de fundo

Adicione uma cor de fundo ao módulo.

• Cor de fundo: # 000000

Configurações de texto

Vá para a guia de design e altere as configurações de texto de acordo:

• Fonte do texto: Open Sans
• Cor do texto: #ffffff
• Tamanho do texto: 0,9vw (desktop), 1,6vw (tablet), 2,2vw (telefone)

Configurações de texto H3

Modifique as configurações de texto H3 também.

• Fonte do título 3: Open Sans
• Cabeçalho 3 Peso da fonte: Semi negrito
• Estilo da fonte do título 3: maiúsculas
• Cor do texto do título 3: #ffffff
• Cabeçalho 3 Tamanho do texto: 1,5 vw (desktop), 2,5 vw (tablet), 3vw (telefone)

Espaçamento

E adicione alguns valores de preenchimento personalizados nas configurações de espaçamento.

• Preenchimento superior: 3vw
• Preenchimento inferior: 3vw
• Preenchimento esquerdo: 2vw
• Preenchimento direito: 2vw

Clonar ambos os módulos e colocar duplicatas na seção coluna 3 (ordem invertida)

Depois de concluir os dois módulos, você pode cloná-los. Coloque as duplicatas na coluna de seção restante na ordem inversa.

Alterar Módulo de Texto

Mudar a cor do fundo

Abra o Módulo de Texto duplicado na terceira coluna da seção e mude a cor de fundo.

• Cor de fundo: #ffffff

Mudar a cor do texto

Altere a cor do texto a seguir.

• Cor do texto: # 000000

Mudar a cor do texto H3

Junto com a cor do texto H3.

• Cor do texto do título 3: # 000000

Alterar Módulo de Imagem

Mudar imagem

Faça upload de uma imagem diferente para o Módulo de imagem duplicado a seguir.

Filtros de mudança

E altere as configurações dos filtros.

• Saturação: 0%
• Brilho: 147%

Adicionar Módulo Divisor à Seção Coluna 2

Posição

Também estamos adicionando alguns divisores transformados para adicionar detalhes ao nosso design. Coloque o primeiro Módulo Divisor aqui:

Visibilidade

Certifique-se de que a opção 'Mostrar divisor' esteja habilitada.

• Mostrar divisor: Sim

Linha

Adicione uma cor de linha a seguir.

• Cor da linha: #ffffff

Transformar, girar

E transforme o divisor horizontal em um vertical, modificando o valor de rotação de transformação à esquerda.

• Esquerda: 270deg

Transformar Traduzir

Reposicione o Módulo divisor usando a unidade de largura da janela de visualização nas configurações de conversão de transformação.

• Direita: -19vw (desktop)
• Parte inferior: -11vw (desktop), -24vw (tablet)

Visibilidade

E esconda todo o módulo no telefone.

Adicionar Módulo Divisor à Seção Coluna 3

Posição

O próximo e último Módulo Divisor precisa ser adicionado aqui:

Visibilidade

Certifique-se de que a opção 'Mostrar divisor' esteja habilitada.

• Mostrar divisor: Sim

Linha

Vá para a guia de design e altere a cor da linha.

• Cor da linha: # 000000

Transformar, girar

Transforme a divisória horizontal em vertical a seguir.

• Esquerda: 270deg

Transformar Traduzir

E reposicione o divisor usando as configurações de conversão de transformação.

• Direito: 2vw
• Parte inferior: -11vw (desktop), -24vw (tablet)

Visibilidade

Para garantir que o divisor apareça no topo do Módulo de Imagem abaixo dele, vamos aumentar o Índice Z nas configurações de visibilidade. Também ocultaremos todo o módulo no telefone.

• Índice Z: 2

Antevisão

Agora que já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.

Pensamentos finais

Nesta postagem, mostramos como criar seções de herói de várias colunas lindas e exclusivas apenas com as opções integradas do Divi. Esta é uma ótima técnica que pode ser usada para diferentes tipos de sites. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!

Se você está ansioso para aprender mais sobre o Divi e obter mais brindes do Divi, certifique-se de assinar nosso boletim informativo por e-mail e canal no YouTube para que você sempre seja uma das primeiras pessoas a saber e obter os benefícios desse conteúdo gratuito.