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]

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

Neste tutorial, usaremos os separadores de seção um pouco diferente. O Divi permite ajustar a altura e o layout de cada divisor. Isso nos permite posicionar os separadores acima de determinadas áreas ou conteúdos da seção. Ao usar a opção de sobreposição para a altura do divisor, podemos adicionar efeitos de sobreposição exclusivos que revelam conteúdo parcialmente oculto. Funciona muito bem para chamar a atenção para uma determinada chamada à ação ou 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 criar 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 projeto de efeito de sobrevoo de altura secional 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 esquerdo: #73ba57
Gradiente de fundo direito: #2a4c23
Largura: 80%
Largura máxima: 1080px
Alinhamento de Seção: Centro

Mas você também pode escolher o esquema de cores desejado de acordo com a sua imagem. meu esquema de cores é: #fff200 - #e09900 em 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>

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.

Comece a promover seu blog

Faça o download de dezenas de logotipos, banners, modelos de sites e muitas outras ferramentas de marketing para comercializar seu blog WordPress. [Recomendado]

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 upload de uma imagem com um fundo transparente. Uso uma imagem do Juice Shop Layout Pack de pixels 240 por pixels 300.

Ajuste o alinhamento da imagem no centro.

Adicionando uma chamada à ação na coluna 2

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

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

Fundo e título da CTA

Atualize os seguintes parâmetros de design:

Cor de fundo: #ffffff
Cor do texto:
title Fonte: 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 maneira:

Cor do texto do botão: #ffffff
Cor do plano de 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 cursor sobre a altura do separador para revelar o plano de ação

Agora, é hora de adicionar o efeito de foco da altura da divisão da seção para revelar a chamada à ação. Para fazer isso, primeiro precisamos 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: veja a captura de tela Cor do separador superior: # 73ba57 Altura do separador superior: 70% (padrão), 0% (pairado)
Aleta do separador superior: horizontal

Observe que a altura do separador começa com uma altura padrão de 70% e depois se move para uma altura de 0% na sobreposição.

Adição do divisor inferior

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

Estilo do separador superior: veja a captura de tela Cor do separador superior: # 73ba57 Altura do separador superior: 70% (padrão), 0% (pairado)
Aleta do separador superior: 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% na sobreposição. 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 chamada à ação na coluna 1. Em seguida, sobrevôo, o restante da chamada à ação é revelado.

Descubra o resultado até agora.

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

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

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

Diminua a duração da transição

Para uma última etapa, 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.

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]

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

Considerações finais

Espero que este tutorial tenha lhe dado alguma inspiração para criar efeitos únicos de foco de altura do separador de seção para revelar o 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 designs.

Espero ouvir de você nos comentários.

Para sua saúde!

Este artigo contém comentários 0

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.

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