Ir para o conteúdo principal

Como usar efeitos de rollover para revelar conteúdo em Divi

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

Divisores de seção continuam a ser um elemento de design popular em Divi. Existem muitos estilos separadores, incluindo opções úteis que facilitam a adição de transições e planos de fundo exclusivos à sua página.

Neste tutorial, usaremos os separadores de seção de maneira um pouco diferente. Divi permite que você ajuste a altura e o layout de cada divisor. Isso nos permite posicionar os separadores acima de certas áreas ou conteúdos da seção. Ao usar a opção de rollover para a altura do divisor, podemos adicionar efeitos de sobreposição exclusivos que revelam conteúdo parcialmente oculto. Ele funciona muito bem para chamar a atenção para uma determinada chamada à ação ou um botão no qual você deseja que os visitantes cliquem.

Vamos começar.

Resultado da amostra

O que você precisa para começar

Para começar, você precisa do seguinte:

  1. Tema Divi instalado e ativo
  2. Uma nova página criada para construir do zero no front-end (construtor visual)
  3. Algumas imagens fictícias para usar no design. Vou usar algumas imagens com fundos transparentes de Pack de Layout de Loja de Sucos .

Depois disso, você está pronto para começar!

Implementação do design do efeito de sobrevoo em altura seccional em Divi

Criando a seção e a linha

Vamos começar criando uma seção regular com uma linha de duas colunas.

Antes de adicionar um módulo, abra as configurações da seção e atualize o seguinte:

Gradiente de fundo à esquerda: #73ba57
Gradiente de plano de fundo à direita: #2a4c23
Largura: 80%
Largura máxima: 1080px
Alinhamento de Seção: Centro

Mas você também pode escolher o esquema de cores que você gosta de acordo com sua imagem. meu esquema de cores é: #fff200 - #e09900 no gradiente.

Adicionar título da seção

Para adicionar o título da seção, crie um módulo de texto e atualize o conteúdo do corpo com o seguinte cabeçalho h2:

<h2> O suco </ h2>

Em seguida, atualize o desenho da seguinte maneira:

Cabeçalho 2 Font: Lato
Título 2 Tamanho do texto: 80px
Cabeçalho 2 Espaçamento entre letras: -5px
Margem: -50px na parte superior, -40px na parte inferior
Índice Z: -1

A margem personalizada e o índice z permitirão que o texto fique atrás da imagem que adicionaremos à próxima etapa.

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

Adicionando a imagem

Sob o módulo de texto com o título na coluna 1, adicione um módulo de imagem. Em seguida, faça o upload de uma imagem com um fundo transparente. Eu uso uma imagem do pacote de layout Juice Shop de 240 pixels por 300 pixels.

Ajuste o alinhamento da imagem no centro.

Adicionando um call to action na coluna 2

Na coluna 2, adicione uma chamada ao módulo de ação.

Adicione um URL de link de botão para garantir que o botão seja exibido.

Fundo e título da CTA

Em seguida, atualize os seguintes parâmetros de design:

Cor de fundo: #ffffff
Cor do texto:
Fonte do título: Lato
Política de Peso do Título: Pesado
Estilo da fonte do título: TT
Tamanho do texto do título: 18px

Estilize o botão CTA

Atualize o design do botão da seguinte forma:

Cor do texto do botão: #ffffff
Cor do fundo do botão: #e09900
Largura da borda do botão: 0 px

Estilizando a borda do CTA

Em seguida, adicione uma borda para enquadrar o módulo da seguinte maneira:

Largura da borda: 10px
Cor da borda: rgba (224,145,0,0.25)

Adicionado o hover sobre a altura do separador para revelar o apelo à ação

Agora, é hora de adicionar o efeito de hover da altura da divisão de seção para revelar a chamada à ação. Para fazer isso, precisamos primeiro criar nossos separadores de seção.

Adicionando o separador superior

Abra os parâmetros da seção e o separador superior com os seguintes parâmetros.

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

Estilo do separador superior: consulte a captura de tela Cor do separador superior: # 73ba57 Altura do separador superior: 70% (padrão), 0% (pairado)
Separador superior flip: horizontal

Observe que a altura do separador começa com uma altura padrão de 70% e depois passa para uma altura de 0% no rollover.

Adição do divisor inferior

Em seguida, adicione um separador inferior semelhante à seção com os seguintes parâmetros.

Estilo do separador superior: consulte a captura de tela Cor do separador superior: # 73ba57 Altura do separador superior: 70% (padrão), 0% (pairado)
Separador superior flip: horizontal
Disposição do Divisor: Na parte superior da seção de conteúdo

Esse separador inferior também começa com uma altura de 70% que passa para 0% no rollover. No entanto, como a opção de layout do separador é definida na parte superior do conteúdo, o separador de seção oculta a parte inferior da call to action na coluna 1. Então, sobrevôo, o restante da chamada à ação é revelado.

Descubra o resultado até agora.

Adicionando um efeito de pairar da sombra da caixa para uma transição e design exclusivos

Para uma transição e design únicos, podemos adicionar um efeito de sobrevoo de sombra que ocorrerá simultaneamente com o efeito de pairar sobre a altura. Para fazer isso, adicione a sombra da próxima caixa à seção.

Box Shadow: veja o screenshot
Posição Horizontal da Sombra da Caixa: 0px
Posição Vertical da Sombra da Caixa: 0px
Força de propagação de sombra de caixa: 0px (padrão), 150px (passar o mouse)
Cor da Sombra da Caixa: #73ba57

Diminua a duração da transição

Para um último passo, vamos diminuir a duração da transição.

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

Resultado final

Aqui está o resultado final na área de trabalho.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

Com base no que fizemos acima, você pode personalizar a exibição em dispositivos móveis e tablets.

Últimos pensamentos

Espero que este tutorial tenha lhe dado alguma inspiração para criar efeitos exclusivos de foco de altura de separador de seção para revelar conteúdo. De fato, ajustar a altura do divisor de foco pode ser um elemento de design notável. E os exemplos de design devem ajudá-lo a iniciar sua própria exploração e seus próprios projetos.

Espero ouvir de você nos comentários.

Para a sua saúde!

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

Cool WordPress temas que eu encontrei em
E há mais temas e modelos 50 000 para você escolher!

De volta ao topo
6 ações
ação6
chilrear
Enregistrer
Whatsapp