Baixe um projeto de seção de herói de deslize de coluna GRATUITO do CTA para Divi

A seção de herói da sua página merece toda a atenção que puder receber. Existem inúmeras maneiras de definir o estilo de sua seção de herói, dependendo do assunto do seu site e de como seu público-alvo se comporta. Para alguns sites, pode ser útil colocar cartões CTA de várias colunas sem criar uma experiência opressiva. Uma ótima maneira de abordar isso é criando cartões de CTA de furto em coluna. No tutorial Divi de hoje, mostraremos como criar um design impressionante do zero que aborda essa técnica. Você também poderá baixar o arquivo JSON gratuitamente!

Vamos lá.

Antevisão

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

Área de Trabalho

Móvel

Baixe as seções Hero GRATUITAMENTE

Para colocar suas mãos nas seções gratuitas de heróis, primeiro você precisa baixá-las 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!

Inscreva-se no nosso canal no Youtube

Vamos começar a recriar!

Adicionar nova seção

Fundo Gradiente

Adicione uma nova seção à página em que está trabalhando, abra as configurações da seção e insira um fundo gradiente.

• Cor 1: #ffffff
• Cor 2: # f5ede5
• Direção do gradiente: 90 graus
• Posição inicial: 17%
• Posição final: 17%

Espaçamento

Vá para a guia de design e adicione algum preenchimento personalizado superior e inferior em diferentes tamanhos de tela.

• Preenchimento superior: 5vw (desktop), 10vw (tablet), 13vw (telefone)
• Preenchimento inferior: 5vw (desktop), 10vw (tablet), 13vw (telefone)

Adicionar linha # 1

Estrutura da Coluna

Continue adicionando uma nova linha usando a seguinte estrutura de coluna:

Cor de fundo

Sem adicionar nenhum módulo ainda, abra as configurações de linha e altere a cor de fundo.

• Cor de fundo: # fff6ed

Dimensionamento

Vá para a guia de design e altere as configurações de dimensionamento da linha também.

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Largura: 60vw (desktop), 100% (tablet e telefone)
• Largura máxima: 100%
• Alinhamento de linha: direita

Espaçamento

Também estamos adicionando alguns valores de preenchimento personalizados às configurações de espaçamento.

• Acolchoamento superior: 6vw
• Preenchimento inferior: 6vw
• Preenchimento esquerdo: 5.5vw
• Preenchimento direito: 24vw

Fronteira

Vá para as configurações de borda a seguir e adicione uma borda esquerda usando as seguintes configurações:

• Largura da borda esquerda: 6 px
• Cor da borda esquerda: #FFFFFF

Sombra da caixa

Adicione uma sombra de caixa sutil para criar profundidade na seção do herói.

• Força do desfoque de sombra da caixa: 100 px
• Cor da sombra: rgba (0,0,0,0.22)

Classe CSS

E use uma classe CSS na guia avançada. Posteriormente neste post, usaremos esta classe CSS para ocultar a barra de rolagem.

• Classe CSS: swipe-scrollbar

Elemento Principal

Para criar uma rolagem / furto horizontal, precisaremos colocar as colunas horizontalmente. Faremos isso adicionando algum código CSS personalizado no elemento principal da linha.

display: grid;
grid-template-columns: repeat(6, 100%);
grid-column-gap: 2vw;

Transbordamentos

Passe para as configurações de visibilidade e altere os transbordamentos da linha.

• Excesso horizontal: Scroll
• Estouro vertical: oculto

Configurações de coluna

Depois de concluir as configurações de linha, você pode abrir as configurações da primeira coluna.

Fundo Gradiente

Adicione um fundo gradiente.

• Cor 1: rgba (245.237.229.0,91)
• Cor 2: rgba (219,34,65,0,84)
• Posição inicial: 35%
• Posição final: 81%
• Colocar gradiente acima da imagem de fundo: Sim

Imagem de fundo

Junto com uma imagem de fundo.

• Tamanho da imagem de fundo: capa
• Posição da imagem de fundo: centro
• Repetição da imagem de fundo: sem repetição

Espaçamento

Vá para a guia de design e adicione alguns valores de preenchimento personalizados em diferentes tamanhos de tela.

• Preenchimento superior: 4vw (desktop), 10vw (tablet), 12vw (telefone)
• Preenchimento inferior: 4vw (desktop), 10vw (tablet), 12vw (telefone)
• Preenchimento esquerdo: 2vw (desktop), 5vw (tablet), 7vw (telefone)
• Preenchimento direito: 2vw (desktop), 5vw (tablet), 7vw (telefone)

Fronteira

Continue adicionando um raio de borda de '20px' a cada um dos cantos nas configurações de borda.

Elemento Principal

Outra parte importante para fazer este trabalho é adicionar uma única linha de código CSS ao elemento principal da coluna.

width: 100% !important;

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

Adicionar conteúdo H3

É hora de começar a adicionar módulos! Você pode adicionar quantos módulos quiser e estilizá-los de acordo com sua preferência. Se você, entretanto, deseja recriar exatamente o mesmo exemplo que foi compartilhado na visualização deste post, comece com um Módulo de Texto e insira algum conteúdo H3.

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: Poppins
• Peso da fonte do cabeçalho 3: leve
• Cor do texto do título 3: # e92640
• Tamanho do texto do título 3: 1,5 vw (desktop), 3,5 vw (tablet), 4,5 vw (telefone)

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

Adicionar conteúdo

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

Configurações de texto

Vá para as configurações de texto a seguir e faça algumas alterações.

• Fonte do texto: Poppins
• Peso da fonte do texto: leve
• Cor do texto: # e92640
• Tamanho do texto: 0.8vw (desktop), 1.9vw (tablet), 2.8vw (telefone)

Espaçamento

Também estamos adicionando alguma margem inferior para criar espaço em nosso cartão magnético da coluna.

• Margem inferior: 18vw (desktop), 30vw (tablet), 42vw (telefone)

Adicionar Módulo de Botão à Coluna 1

Adicionar cópia

Passe para o próximo módulo, que é um Módulo de Botão. Insira alguma cópia de sua escolha.

Configurações de botão

Vá para a guia de design e altere as configurações do botão de acordo:

• Usar estilos personalizados para botão: Sim
• Tamanho do texto do botão: 0,8vw (desktop), 1,8vw (tablet), 2,5vw (telefone)
• Cor do texto do botão: # f5ede5
• Largura da borda do botão: 1 px
• Cor da borda do botão: # f5ede5
• Raio da borda do botão: 5px
• Fonte do botão: Poppins

Espaçamento

Aumente o tamanho do botão adicionando alguns valores de preenchimento personalizados em diferentes tamanhos de tela.

• Preenchimento superior: 1vw (desktop), 2vw (tablet), 3vw (telefone)
• Preenchimento inferior: 1vw (desktop), 2vw (tablet), 3vw (telefone)
• Preenchimento esquerdo: 3vw (desktop), 5vw (tablet), 7vw (telefone)
• Preenchimento direito: 3vw (desktop), 5vw (tablet), 7vw (telefone)

Adicionar Módulo Divisor à Coluna 1

Visibilidade

O próximo módulo de que precisamos é um Módulo Divisor. 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: # f5ede5

Adicione o Módulo de Texto # 3 à 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: Poppins
• Peso da fonte do texto: leve
• Cor do texto: # f5ede5
• Tamanho do texto: 0.8vw (desktop), 1.9vw (tablet), 2.8vw (telefone)
• Altura da linha de texto: 2.3em

Espaçamento

Adicione alguma margem superior também.

• Margem superior: 2vw

Clonar coluna até 5 vezes e reutilizar para outros CTAs

Depois de concluir a primeira coluna e todos os módulos nela, você pode clonar a coluna inteira até 5 vezes, dependendo de quantos cartões de CTA de furto de coluna você deseja exibir. Certifique-se de alterar todas as cópias de cada coluna duplicada junto com os links dos botões.

Adicionar linha # 2

Estrutura da Coluna

Para a segunda fila! Usaremos esta linha para criar uma sobreposição com a anterior. Escolha a seguinte estrutura de coluna:

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e ajuste as configurações de dimensionamento de acordo:

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

Espaçamento

Mais tarde na postagem, adicionaremos os módulos de que precisamos e criaremos uma sobreposição superior negativa para fazer parecer que os módulos fazem parte da primeira linha. Isso significa que não precisamos que a segunda linha ocupe nenhum espaço em nosso design. É por isso que estamos removendo todo o preenchimento padrão das linhas superior e inferior.

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

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

Adicionar conteúdo H1

É hora de começar a adicionar módulos! Comece com um primeiro Módulo de Texto e insira algum conteúdo H1 de sua escolha.

Configurações de texto H1

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

• Fonte do título: Poppins
• Cor do texto do título: # e92741
• Tamanho do texto do título: 3vw (desktop), 5vw (tablet), 7vw (telefone)

Espaçamento

Adicione alguns valores de margem a seguir.

• Margem superior: -35vw (desktop), 7vw (tablet), 10vw (telefone)
• Margem esquerda: 5vw
• Margem direita: 12vw

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

Adicionar conteúdo

O segundo módulo de que precisamos é 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: Poppins
• Peso da fonte do texto: leve
• Cor do texto: # e92741
• Tamanho do texto: 0.8vw (desktop), 1.9vw (tablet), 2.8vw (telefone)
• Altura da linha de texto: 2.8em

Espaçamento

Estamos adicionando alguns valores de margem personalizados ao Módulo de Texto também.

• Margem superior: 2vw (desktop), 7vw (tablet), 10vw (telefone)
• Margem inferior: 2vw (desktop), 7vw (tablet), 10vw (telefone)
• Margem esquerda: 5vw
• Margem direita: 13vw (desktop), 5vw (tablet e telefone)

Adicionar Módulo de Botão à Coluna 1

Adicionar cópia

O próximo módulo de que precisamos é um Módulo de botão. Insira alguma cópia de sua escolha.

Configurações de botão

Em seguida, vá para a guia de design e estilize o botão.

• Usar estilos personalizados para botão: Sim
• Tamanho do texto do botão: 0,9vw
• Cor do texto do botão: # e92741
• Cor de fundo do botão: # f5ede5
• Largura da borda do botão: 0 px
• Raio da borda do botão: 5px
• Fonte do botão: Poppins

Espaçamento

Também estamos aumentando o tamanho do botão adicionando alguns valores de espaçamento personalizados.

• Margem superior: 2vw
• Margem esquerda: 5vw
• Preenchimento superior: 1,5vw (desktop), 2,5vw (tablet), 3vw (telefone)
• Preenchimento inferior: 1,5vw (desktop), 2,5vw (tablet), 3vw (telefone)
• Preenchimento esquerdo: 6vw (desktop), 9vw (tablet), 15vw (telefone)
• Preenchimento direito: 6vw (desktop), 9vw (tablet), 15vw (telefone)

Sombra da caixa

Conclua o design do Módulo de botão adicionando uma sombra de caixa sutil.

• Posição vertical da sombra da caixa: 20 px
• Força do desfoque de sombra da caixa: 50 px
• Força de propagação da sombra da caixa: -5px
• Cor da sombra: rgba (0,0,0,0.19)

Antevisão

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

Área de Trabalho

Móvel

Pensamentos finais

Neste post, compartilhamos uma bela seção de heróis de furto em coluna gratuitamente e também mostramos como recriá-la do zero. Esta é uma ótima maneira de exibir vários cartões CTA em sua seção de herói sem ter um design que pareça muito opressor. Esperamos que tenha gostado deste tutorial e se você tiver alguma dúvida ou sugestão, certifique-se de deixá-los 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.