Como criar uma revelação do Blurb em 3 etapas ao pairar com o Divi

Muitos sites de empresas por aí compartilham uma prévia de sua abordagem em algum ponto. Ao criar uma seção de abordagem, você pode manipulá-la da maneira tradicional ou pode tentar adicionar mais interação a ela. Se você está procurando uma maneira de fazer a segunda opção acontecer, vai adorar este post.

Neste tutorial, mostraremos como criar uma revelação de sinopse em 3 etapas usando as novas opções de tamanho do Divi. Começaremos mostrando o título, continuaremos exibindo três setas que conduzem às etapas e concluiremos o efeito revelando as sinopses animadas. 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 de revelação do Blurb em 3 etapas GRATUITAMENTE

Para colocar suas mãos no layout de revelação da sinopse em 3 etapas, primeiro você precisará baixá-lo 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!

Inscreva-se no nosso canal no Youtube

Adicionar nova seção

Fundo gradiente padrão

A primeira coisa que você precisa fazer é adicionar uma nova seção à página em que está trabalhando. Abra as configurações da seção e adicione o seguinte fundo gradiente a ela:

• Cor 1: # ffa3ad
• Cor 2: # ffcea3
• Direção do gradiente: 122 graus

Hover Gradient Background

Modifique o fundo gradiente ao passar o mouse:

• Cor 1: # 000000
• Cor 2: #ffffff
• Tipo de gradiente: radial
• Direção Radial: Topo
• Posição inicial: 36%
• Posição final: 26%

Espaçamento

Vá para a guia de design e adicione um pouco de preenchimento personalizado superior e inferior a seguir.

• Enchimento superior: 1vw
• Preenchimento inferior: 1vw

Transbordar

Mais tarde neste post, vamos brincar com a altura da seção. Para garantir que nada exceda o contêiner da seção, vamos ocultar os transbordamentos nas configurações de visibilidade.

• Excesso horizontal: oculto
• Estouro vertical: oculto

Adicionar linha # 1

Estrutura da Coluna

Depois de concluir as configurações da seção, você pode continuar adicionando a primeira linha à seção usando a seguinte estrutura de colunas:

Adicionar Módulo de Texto à Linha

Adicionar conteúdo H2

Adicione um novo Módulo de Texto à coluna da linha e insira algum conteúdo H2 de sua escolha.

Configurações de texto H2

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

• Fonte do título 2: Montserrat
• Cabeçalho 2 Peso da fonte: Semi negrito
• Alinhamento de Texto do Título 2: Centro
• Cor do texto do título 2: #ffffff
• Tamanho do texto do título 2: 2vw (desktop), 5vw (tablet), 6vw (telefone)
• Cabeçalho 2 espaçamento entre letras: -2 px

Adicionar linha # 2

Estrutura da Coluna

Continue adicionando a segunda linha usando a seguinte estrutura de coluna:

Espaçamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e adicione algum preenchimento personalizado superior e inferior em diferentes tamanhos de tela.

• Preenchimento superior: 2vw (desktop), 4vw (tablet), 5vw (telefone)
• Preenchimento inferior: 2vw (desktop), 4vw (tablet), 5vw (telefone)

Exibição

Para garantir que todas as colunas apareçam lado a lado em tamanhos de tela menores, vamos adicionar uma única linha de código CSS ao elemento principal da linha.

display: flex;

Adicionar Módulo de Texto de Seta à Coluna 1

Adicionar Símbolo

Usaremos esta linha para adicionar as setas animadas. Adicione um novo Módulo de Texto à primeira coluna da linha e adicione o símbolo '↓' à caixa de conteúdo.

Configurações de texto

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

• Alinhamento de Texto: Direito
• Cor do texto: # ffa3ad
• Tamanho do texto: 4vw (desktop), 6vw (tablet), 8vw (telefone)

Espaçamento

Adicione alguns valores de margem personalizados às configurações de espaçamento a seguir.

• Margem superior: -3vw
• Margem inferior: 8vw

Transformar, girar

Gire o módulo nas configurações de transformação.

• Esquerda: 45deg

Animação

E adicione uma animação personalizada usando as seguintes configurações:

• Estilo de animação: slide
• Direção da Animação: Centro
• Atraso de animação: 1000 ms

Adicionar Módulo de Texto de Seta à Coluna 2

Adicionar Símbolo

Continue adicionando uma nova linha à segunda coluna e adicione o símbolo '↓' à caixa de conteúdo.

Configurações de texto

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

• Alinhamento de Texto: Centro
• Cor do texto: # ffa3ad
• Tamanho do texto: 4vw (desktop), 6vw (tablet), 8vw (telefone)

Espaçamento

Adicione alguma margem superior personalizada a seguir.

• Margem superior: 1vw

Animação

E aplique as seguintes configurações de animação:

• Estilo de animação: slide
• Direção da Animação: Centro

Adicionar Módulo de Texto de Seta à Coluna 3

Adicionar Símbolo

Na última seta Módulo de texto na coluna 3. Adicione a seta '↓' à caixa de conteúdo.

Configurações de texto

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

• Alinhamento de Texto: Esquerda
• Cor do texto: # ffa3ad
• Tamanho do texto: 4vw (desktop), 6vw (tablet), 8vw (telefone)

Espaçamento

Adicione alguma margem superior negativa a seguir.

• Margem superior: -3vw

Transformar, girar

Gire o módulo nas configurações de transformação.

• Esquerda: 315deg

Animação

E complete as configurações do módulo adicionando a seguinte animação:

• Estilo de animação: slide
• Direção da Animação: Centro
• Atraso de animação: 1000 ms

Adicionar linha # 3

Estrutura da Coluna

Depois de concluir a segunda linha, você pode continuar adicionando uma nova linha usando a seguinte estrutura de coluna:

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e modifique os valores de largura e largura máxima nas configurações de dimensionamento.

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

Espaçamento

Adicione alguns valores de preenchimento personalizados em diferentes tamanhos de tela a seguir.

• Preenchimento superior: 2vw (desktop), 8vw (tablet), 6vw (telefone)
• Preenchimento inferior: 2vw (desktop), 8vw (tablet), 6vw (telefone)
• Preenchimento esquerdo: 10vw (desktop), 0vw (tablet e telefone)
• Preenchimento direito: 10vw (desktop), 0vw (tablet e telefone)

Exibição

Adicione uma única linha de código CSS ao elemento principal da linha para garantir que todas as colunas apareçam lado a lado em tamanhos de tela menores.

display: flex;

Transbordar

Na última parte deste tutorial, vamos alterar a altura da linha. Para nos prepararmos para isso, precisaremos garantir que nada exceda o contêiner de linha, ocultando os estouros nas configurações de visibilidade.

• Excesso horizontal: oculto
• Estouro vertical: oculto

Adicionar Módulo de Texto Numérico à Coluna 1

Adicionar conteúdo

É hora de começar a adicionar módulos! Adicione um novo Módulo de texto à primeira coluna e insira um número.

Fundo Gradiente

Adicione um fundo gradiente ao módulo usando as seguintes configurações:

• Cor 1: # ffa3ad
• Cor 2: # ffcea3
• Direção do gradiente: 122 graus

Configurações de texto

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

• Fonte do texto: Montserrat
• Peso da fonte do texto: ultra negrito
• Alinhamento de Texto: Centro
• Cor do texto: #ffffff
• Tamanho do texto: 2vw (desktop), 4vw (tablet), 8vw (telefone)
• Altura da linha de texto: 1em

Espaçamento

Adicione um pouco de preenchimento superior e inferior em diferentes tamanhos de tela também.

• Preenchimento superior: 1vw (desktop), 2vw (tablet), 3vw (telefone)
• Preenchimento inferior: 1vw (desktop), 2vw (tablet), 3vw (telefone)

Fronteira

E complete as configurações do módulo adicionando '20px' a cada um dos cantos nas configurações de borda.

Clonar Módulo de Texto de Número Duas Vezes e Colocar Duplicados nas Colunas Restantes

Continue clonando o Módulo de Texto na coluna 1 duas vezes e coloque as duplicatas nas duas colunas restantes da linha.

Mudar Números

Certifique-se de alterar o número em cada uma das duplicatas.

Adicionar Módulo Blurb à Coluna 1

Adicionar conteúdo

O segundo módulo de que precisamos na primeira coluna é um Módulo Blurb. Insira algum conteúdo de sua escolha.

Selecione o ícone

Continue selecionando um ícone.

Cor de fundo

E mude a cor de fundo para branco.

• Cor de fundo: #ffffff

Configurações de ícone

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

• Cor do ícone: # ffcea3
• Posicionamento do ícone: topo
• Use o tamanho da fonte do ícone: Sim
• Tamanho da fonte do ícone: 4vw (desktop), 5vw (tablet), 6vw (telefone)

Configurações de texto do título

Modifique as configurações do texto do título também.

• Fonte do título: Montserrat
• Peso da fonte do título: negrito
• Alinhamento do Texto do Título: Centro
• Cor do texto do título: # 000000
• Tamanho do texto do título: 1vw (desktop), 2vw (tablet), 4vw (telefone)

Configurações do corpo do texto

Junto com as configurações do corpo do texto.

• Alinhamento do corpo do texto: centro
• Tamanho do corpo do texto: 0,6vw (desktop), 1,3vw (tablet), 2vw (telefone)
• Altura da linha corporal: 2,5em

Espaçamento

Também estamos dando ao nosso módulo a forma desejada adicionando os seguintes valores de preenchimento personalizado em diferentes tamanhos de tela:

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

Fronteira

Adicione '20px' a cada um dos cantos nas configurações de borda a seguir.

Sombra da caixa

E crie um pouco de profundidade adicionando uma sombra de caixa sutil.

• Cor da sombra: rgba (0,0,0,0,07)

Animação

Por último, mas não menos importante, adicione uma animação ao módulo.

• Estilo de animação: slide
• Direção da Animação: Centro
• Atraso de animação: 1000 ms

Clone o módulo do Blurb duas vezes e coloque duplicatas nas colunas restantes

Depois de concluir o módulo Blurb na coluna 1, você pode cloná-lo três vezes e colocar as duplicatas nas duas colunas restantes da linha.

Alterar o conteúdo de ambas as duplicatas

Certifique-se de alterar o conteúdo de cada uma das duplicatas.

Modificar as configurações de dimensionamento da linha nº 3

Altura Padrão

Agora, para fazer o efeito de foco funcionar, vamos abrir as configurações da última linha e ir para as configurações de dimensionamento. Uma vez lá, vamos modificar a altura em diferentes tamanhos de tela.

• Altura: 6vw (desktop), 18vw (tablet), 24vw (telefone)

Altura de pairar

Vamos trazer de volta a altura ao normal em pairar.

• Altura: auto

Modificar as configurações de dimensionamento da seção

Altura Padrão

Abra as configurações de seção a seguir e altere a altura de acordo:

• Altura: 7vw (desktop), 15vw (tablet), 20vw (telefone)

Altura de pairar

Traga de volta a altura ao pairar e pronto!

• Altura: auto

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 criar uma revelação de sincronia em 3 etapas usando as novas opções de tamanho do Divi. O resultado do exemplo é altamente responsivo e permite que você adicione interação extra à sua página. Esperamos que este tutorial inspire você a criar seus próprios designs alternativos de 3 etapas também. 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.