Decorando sua página com formas transformadoras ao passar o mouse com Divi

Criar design interativo é algo que imediatamente ajuda a elevar a aparência de qualquer site. Com as opções integradas do Divi, você pode dar várias voltas e criar efeitos que são verdadeiramente exclusivos para o seu site.

Neste post, vamos mostrar como decorar sua página com formas transformadoras ao passar o mouse. O resultado que obteremos se concentra na experiência da área de trabalho, mas mantém um design simples e amigável também em tamanhos de tela menores.

Vamos lá!

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida nos dois exemplos que recriaremos do zero.

Exemplo 1

Exemplo # 2

Baixe as sobreposições de imagem moldada

Para colocar suas mãos sobre as sobreposições de imagem em forma que são usadas ao longo deste tutorial, você precisará 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!

Vamos começar a criar!

Adicionar nova seção

Cor de fundo

Comece criando uma nova página ou abrindo uma existente. Adicione uma seção regular a ela, abra as configurações da seção e adicione uma cor de fundo totalmente preta.

• Cor de fundo: # 000000

Transbordar

Para cortar a sobreposição de imagem moldada posteriormente neste tutorial, vamos garantir que nada ultrapasse o contêiner da seção, adicionando uma única linha de código CSS ao elemento principal da seção.

overflow: hidden;

Adicionar nova linha

Estrutura da Coluna

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

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e permita que a linha ocupe toda a largura da tela.

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Adicionar Módulo de Imagem à Linha

Carregar sobreposição de imagem moldada

É hora de começar a adicionar módulos! O primeiro módulo de que precisamos é um Módulo de imagem. Carregue a primeira sobreposição de imagem em forma que você pode encontrar na pasta que você baixou. Você pode encontrar sobreposições de imagens com mais formatos acessando este post, baixando os arquivos, abrindo o arquivo do Illustrator e personalizando-os de acordo com as suas necessidades. Se você, no entanto, quiser apenas recriar os exemplos que foram compartilhados na visualização deste post, basta a pasta que você baixou no início deste post.

Cor de fundo padrão

Vá para as configurações de fundo do Módulo de Imagem e adicione a seguinte cor de fundo padrão:

• Cor de fundo: # 6a00ff

Hover Background Color

Altere a cor de fundo ao passar o mouse usando o seguinte código de cor:

• Cor de fundo: # ffa216

Fundo Gradiente

Continue adicionando um fundo gradiente ao Módulo de imagem também.

• Cor 1: # ff2841
• Cor 2: rgba (255,255,255,0)
• Direção do gradiente: 168 graus
• Posição final: 68%

Dimensionamento

Vá para a guia de design e ative a opção 'Forçar largura total'.

• Forçar largura total: Sim

Espaçamento

Também estamos ocultando uma parte da sobreposição de imagem em forma, adicionando uma margem superior negativa às configurações de espaçamento. Você notará que o módulo não ultrapassará o contêiner de seção graças a uma linha de código CSS que adicionamos à seção no início do tutorial.

• Margem superior: -22vw (desktop e tablet), 0vw (telefone)

Rotação de transformação padrão

Agora podemos começar a transformar o módulo! Adicione as seguintes configurações de rotação de transformação padrão ao Módulo de imagem:

• Centro: 359deg

Girar Transformar Girar

E altere esses valores ao passar o mouse para criar uma forma transformadora.

• Esquerda: 250deg
• Centro: 320deg

ID CSS

Ao passar o mouse sobre o Módulo de imagem, a sobreposição de imagem em forma se sobreporá a todos os outros módulos que estão em cima dela. Para evitar isso, precisaremos modificar o z-index do módulo ao passar o mouse posteriormente na postagem. Para fazer isso, você precisará adicionar uma classe CSS personalizada ao Módulo de imagem.

Transições

Por último, mas não menos importante, estamos criando uma transição suave aumentando a duração da transição na guia avançada.

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

Adicionar Módulo de Texto # 1 à Linha

Adicionar conteúdo H2

O próximo módulo de que precisamos é um Módulo de Texto. Adicione algum conteúdo H2 de sua escolha.

Configurações de texto H2

Em seguida, vá para a guia de design e modifique as configurações de texto H2.

• Fonte do título 2: Didact Gothic
• Peso da fonte do cabeçalho 2: negrito
• Alinhamento de Texto do Título 2: Centro
• Cor do texto do título 2: #ffffff
• Tamanho do texto do título 2: 7vw
• Altura da linha do título 2: 0,9em

Espaçamento

Crie uma sobreposição entre este módulo e o Módulo de imagem usando alguns valores de margem personalizados.

• Margem superior: -68vw
• Margem inferior: 8vw
• Margem esquerda: 29vw
• Margem direita: 29vw

Adicionar Módulo de Texto # 2 à Linha

Adicionar conteúdo

Adicione outro Módulo de Texto logo abaixo do anterior e insira algum conteúdo de parágrafo de sua escolha.

Configurações de texto

Em seguida, vá para a guia de design e modifique as configurações de texto.

• Fonte do texto: Open Sans
• Cor do texto: #ffffff
• Tamanho do texto: 1vw (desktop), 2vw (tablet), 3vw (telefone)
• Altura da linha de texto: 1.8em
• Orientação do Texto: Centro

Espaçamento

Adicione alguns valores de margem personalizados também.

• Margem inferior: 2vw (desktop), 4vw (tablet), 6vw (telefone)
• Margem esquerda: 30vw (desktop), 10vw (tablet e telefone)
• Margem direita: 30vw (desktop), 10vw (tablet e telefone)

Adicionar Módulo Divisor à Linha

Visibilidade

O próximo e último módulo de que precisamos é um Módulo Divisor. Certifique-se de que a opção 'Mostrar divisor' esteja habilitada.

• Mostrar divisor: Sim

Cor

Em seguida, vá para a guia de design e altere a cor do divisor.

• Cor: #ffffff

Dimensionamento

Modifique os valores de dimensionamento também.

• Peso do divisor: 7px
• Largura: 15%
• Alinhamento do Módulo: Centro

Espaçamento

E adicione algum preenchimento inferior personalizado.

• Margem inferior: 5vw

Clonar toda a seção

Passemos ao segundo exemplo! Clone a seção que você acabou de concluir.

Alterar Módulo de Imagem

Carregar nova sobreposição de imagem moldada

Precisamos fazer algumas alterações, começando com a sobreposição da imagem em formato. Vá em frente e carregue a segunda sobreposição de imagem em formato que você pode encontrar na pasta que você baixou no início deste post.

Alterar a cor de fundo padrão

Em seguida, vá para as configurações de fundo do Módulo de imagem e altere a cor de fundo padrão.

• Cor de fundo: # 2d007c

Mudar a cor do fundo do Hover

Altere a cor de fundo do foco também.

• Cor de fundo: # 008089

Alterar fundo gradiente

Junto com o fundo gradiente.

• Cor 1: # 0c0c0c
• Cor 2: rgba (255,255,255,0)
• Direção do gradiente: 168 graus
• Posição final: 68%

Alterar configurações de rotação de transformação padrão

Também estamos mudando o efeito de transformação. Vá para as configurações de transformação e altere os valores de rotação de transformação padrão.

• Esquerda: 270deg
• Centro: 359deg

Alterar as configurações de rotação e transformação de foco

Modifique esses mesmos valores ao passar o mouse.

• Esquerda: 192deg
• Centro: 280deg
• Direita: 15deg

Adicionar código personalizado à página

Abra as configurações da página

Agora, a última parte deste post garante que a forma transformadora permaneça abaixo de todos os outros módulos quando estiver sendo pairada. Abra as configurações da página.

Adicionar código CSS

Em seguida, vá para a guia avançada e adicione o seguinte código CSS.

.hover-state:hover {
z-index: -99; }

Estamos usando a classe CSS que atribuímos às seções ao longo do tutorial.

Antevisão

Agora que passamos por todas as etapas, vamos dar uma olhada final no resultado.

Exemplo 1

Exemplo # 2

Pensamentos finais

Neste post, mostramos como ser criativo com as opções de transformação do Divi. Mais especificamente, usamos Módulos de imagem com sobreposições de imagens moldadas para criar uma forma de fundo transformadora. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!