Como revelar uma grade de imagem subjacente em seu herói com as opções fixas de Divi

Criar uma seção de herói que chame a atenção dos visitantes pode definir o tom para o resto do site. Se você está procurando uma maneira criativa de usar as opções adesivas do Divi para ajudá-lo a chegar lá, você vai adorar este tutorial. Hoje, estamos mostrando como revelar uma grade de imagem subjacente em seu herói com as opções adesivas do Divi. Estamos incluindo uma transição suave do padrão para o fixo e 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 o layout GRATUITAMENTE

Para colocar as mãos no layout gratuito, 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!

1. Crie um design de herói

Adicionar nova seção

Cor de fundo

Comece adicionando uma nova seção à página em que está trabalhando. Abra as configurações da seção e adicione uma cor de fundo.

• Cor de fundo: # 111111

Espaçamento

Vá para a guia de design da seção e adicione algum preenchimento inferior. Esse preenchimento inferior nos dará espaço suficiente para criar a experiência de rolagem.

• Preenchimento inferior: 120vh

Adicionar linha # 1

Estrutura da Coluna

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

Dimensionamento

Sem adicionar módulos ainda, abra as configurações de linha, vá para a guia de design e altere as configurações de dimensionamento da seguinte forma:

• Usar largura de calha personalizada: Sim
• Largura da calha: 2
• Largura: 100%
• Largura máxima: 2580 px

Espaçamento

Adicione alguma margem superior responsiva a seguir.

• Margem superior:
  • Desktop: 10vh
  • Tablet e telefone: 5vh

Índice Z

E para garantir que essa linha fique abaixo da segunda linha que adicionaremos a esta seção, mais tarde, vamos usar um índice az de 10 na guia avançada.

• Índice Z: 10

Todas as configurações de coluna

Assim que as configurações gerais de linha forem feitas, abra cada uma das colunas individualmente.

CSS do elemento principal

Em cada uma das colunas, aplique as seguintes linhas de código CSS ao elemento principal no telefone:

Telefone apenas:

width: 50% !important;
margin: 0 !important;

Configurações da coluna 2

Em seguida, abra as configurações da coluna 2.

Índice Z

E aumente o Índice Z para 12. Isso colocará esta coluna acima da terceira coluna.

• Índice Z: 12

Adicionar Módulo de Imagem à Coluna 1

Enviar Imagem

É hora de adicionar módulos, começando com um Módulo de imagem na coluna 1. Carregue uma imagem de sua escolha.

Espaçamento

Vá para a guia de design do módulo e altere as configurações de espaçamento da seguinte forma:

• Margem inferior:
  • Tablet e telefone: 10px
• Margem direita:
  • Tablet e telefone: 2%

Clonar módulo de imagem três vezes e colocar duplicatas nas colunas restantes

Depois de concluir as configurações do módulo, você pode clonar o módulo inteiro três vezes e colocar as duplicatas nas colunas restantes da linha.

Mudar imagens

Certifique-se de alterar a imagem em cada módulo duplicado.

Alterar Espaçamento do Módulo 2 e 4 da Imagem

Em seguida, abra as configurações dos Módulos de imagem nas colunas 2 e 4 e aplique os seguintes valores de espaçamento a eles:

• Margem inferior:
  • Tablet e telefone: 10px
• Margem esquerda:
  • Tablet e telefone: 2%
• Margem direita: /

Adicionar linha # 2

Estrutura da Coluna

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

Fundo Gradiente

Abra as configurações de linha e aplique o seguinte fundo gradiente:

• Cor 1: # 111111
• Cor 2: rgba (255,255,255,0)

Dimensionamento

Modifique as configurações de dimensionamento a seguir.

• Largura: 100%
• Largura máxima: 2580 px

Espaçamento

Em seguida, aplique um pouco de preenchimento superior e inferior.

• Enchimento superior: 20vh
• Preenchimento inferior: 20vh

Posição

Para colocar esta linha no topo da grade da imagem, vamos usar as configurações de posição de acordo:

• Posição: Absoluta
• Localização: Centro Superior
• Índice Z: 12

Adicionar Módulo de Texto à Coluna

Adicionar conteúdo H1

Adicione um primeiro Módulo de Texto a esta linha usando algum conteúdo H1 de sua escolha.

Configurações de texto H1

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

• Fonte do título: Kumbh Sans
• Peso da fonte do cabeçalho: negrito
• Estilo da fonte do título: maiúscula
• Alinhamento do Texto do Título: Centro
• Cor do texto do título: #ffdbaa
• Tamanho do texto do título:
  • Desktop: 120px
  • Tablet: 60px
  • Telefone: 40px
• Espaçamento entre letras de cabeçalhos
  • Desktop: -3px
  • Tablet e telefone: 0px
• Sombra do texto do título:
  • Selecione: Terceira opção
  • Cor da sombra do texto do cabeçalho: rgba (0,0,0,0.4)

Dimensionamento

Modifique as configurações de dimensionamento a seguir.

• Largura máxima: 900px
• Alinhamento do Módulo: Centro

Adicionar Módulo de Botão à Coluna

Adicionar cópia

O próximo e último módulo de que precisamos nesta linha é um Módulo de Botão. Adicione alguma cópia de sua escolha.

Alinhamento de Botão

Vá para a guia de design e altere o alinhamento do botão.

• Alinhamento do botão: Centro

Configurações de botão

Em seguida, defina o estilo do botão.

• Usar estilos personalizados para botão: Sim
• Tamanho do texto do botão:
  • Desktop: 20px
  • Tablet: 16px
  • Telefone: 14px
• Tamanho do texto do botão: # 111111
• Cor de fundo do botão: #ffffff
• Largura da borda do botão: 0 px
• Raio da borda do botão: 100 px

• Fonte do botão: Kumbh Sans
• Peso da fonte do botão: negrito

Espaçamento

E use alguns valores de preenchimento responsivos nas configurações de espaçamento.

• Enchimento superior:
  • Desktop e tablet: 20px
  • Telefone: 15px
• Preenchimento inferior:
  • Desktop e tablet: 20px
  • Telefone: 15px
• Preenchimento esquerdo:
  • Desktop e tablet: 50px
  • Telefone: 40px
• Preenchimento direito:
  • Desktop e tablet: 50px
  • Telefone: 40px

2. Aplicar configurações fixas

Turn Row # 1 Sticky

Agora que temos todos os elementos no lugar, podemos nos concentrar nas configurações fixas. Abra as configurações da primeira linha e aplique as seguintes configurações fixas:

• Posição pegajosa: grudar no topo
• Limite inferior de aderência: seção
• Compensação dos elementos aderentes circundantes: Sim
• Estilos padrão de transição e fixos: Sim

Opacidade pegajosa

Em seguida, altere a opacidade nas configurações de filtros.

• Padrão: 20%
• Pegajoso: 100%

Configurações fixas do módulo de imagem nº 1

Espaçamento

Em seguida, abra as configurações do Módulo de imagem na coluna 1. Vá para a guia de design e adicione algumas margens superior e direita adesivas.

• Margem superior pegajosa: -20%
• Margem direita aderente: -20%

Transição

Aumente a duração da transição também.

• Duração da transição: 700ms

Módulo de imagem nº 2 Espaçamento fixo

Espaçamento

Passe para o Módulo de imagem na coluna 2 e use as seguintes configurações de espaçamento fixo:

• Margem superior pegajosa: 20%
• Margem esquerda aderente: -30%

Transição

Aumente a duração da transição aqui também.

• Duração da transição: 1000ms

Módulo de imagem # 3 Espaçamento fixo

Espaçamento

Em seguida, temos o Módulo de imagem na coluna 3. Use os seguintes valores de espaçamento fixo:

• Margem superior pegajosa: -10%
• Margem esquerda aderente: -25%
• Margem direita aderente: -25%

Transição

Altere a duração da transição de acordo:

• Duração da transição: 700ms

Módulo de imagem # 4 Espaçamento fixo

Espaçamento

E, por último, abra o Módulo de imagem na coluna 4. Aplique os seguintes valores de espaçamento fixo:

• Margem superior pegajosa: -20%
• Margem esquerda aderente: -30%

Transição

Conclua as configurações do módulo e este tutorial, aumentando a duração da transição. É isso! Salve e saia da página para ver o resultado.

• Duração da transição: 1000ms

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, mostramos como ser criativo com sua seção de heróis no Divi. Mais especificamente, mostramos como revelar uma grade de imagem na rolagem usando as seções adesivas do Divi. Você também pode baixar o arquivo JSON gratuitamente. Se você tiver dúvidas ou sugestões, fique à vontade para deixar 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.