Como alterar um fundo gradiente ao pairar com Divi
Publicados: 2019-01-05Criar sites é garantir que todos os detalhes estejam corretos. Prestar atenção aos pequenos detalhes em seu design aumentará rapidamente e elevará a qualidade do seu site. Com as novas opções de foco do Divi, você pode adicionar facilmente pequenas interações em seu site. As opções de foco se aplicam a quase todas as configurações de design. Você pode, por exemplo, alterar indiretamente um fundo gradiente ao pairar para criar uma boa transição. É exatamente isso que vamos mostrar nesta postagem do blog. Além de alcançar a transição de gradiente, também criaremos um exemplo de design impressionante do zero que você pode usar gratuitamente para qualquer tipo de site que construir.
Vamos lá!
Antevisão
Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado final em diferentes tamanhos de tela.
Estático
Flutuar
Baixe as ilustrações GRATUITAMENTE
Para colocar suas mãos nas ilustrações gratuitas originadas do Pacote de Layout de Videogame, primeiro 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 e sexta-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.
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.
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!
Inscreva-se no nosso canal no Youtube
Adicionar Seção # 1
Espaçamento
A primeira coisa que você precisa fazer é criar uma nova página ou abrir uma existente e adicionar uma nova seção regular a ela. Abra as configurações e adicione algumas margens superior e inferior personalizadas.
- Enchimento superior: 100px
- Preenchimento inferior: 100px
Adicionar linha # 1
Estrutura da Coluna
Continue adicionando uma nova linha usando a seguinte estrutura de coluna:
Coluna 1 Cor de fundo padrão
Sem adicionar nenhum módulo ainda, abra as configurações de linha e adicione a seguinte cor de fundo padrão à coluna 1:
- Cor de fundo: # e7ffa0
Coluna 1 Hover Background Color
Altere esta cor de fundo ao pairar.
- Cor de fundo: # 00020c
Fundo Gradiente da Coluna 1
Adicione uma cor de fundo gradiente à coluna 1 também. Você notará que estamos usando uma cor completamente transparente. Essa cor permitirá que a cor de fundo apareça, que por sua vez muda ao passar o mouse.
- Cor 1: rgba (255,255,255,0)
- Cor 2: rgba (16,0,201,0,8)
- Tipo de gradiente da coluna 1: Linear
- Direção do gradiente da coluna 1: 50 graus
- Posição inicial da coluna 1: 20%
Cor de fundo da coluna 2
Adicione também uma cor de fundo da coluna 2.
- Cor de fundo da coluna 2: #ffffff
Dimensionamento
Em seguida, vá para a guia de design e altere as configurações de dimensionamento.
- Usar largura personalizada: Sim
- Unidade: PX
- Largura personalizada: 2.000 px
- Usar largura de calha personalizada: Sim
- Largura da calha: 1
Espaçamento
Continue adicionando alguns valores de preenchimento personalizados nas configurações de espaçamento.
- Preenchimento superior: 0 px
- Preenchimento inferior: 0 px
- Preenchimento superior da coluna 2: 6vw (desktop), 120px (tablet e telefone)
- Preenchimento inferior da coluna 2: 6vw (desktop), 120px (tablet e telefone)
- Coluna 2 Preenchimento esquerdo: 5vw (desktop), 80px (tablet), 50px (telefone)
- Coluna 2 Preenchimento direito: 5vw (desktop), 80px (tablet), 50px (telefone)
Sombra da caixa
E dê à linha uma sombra de caixa sutil também.
- Força do desfoque de sombra da caixa: 100 px
- Força de propagação da sombra da caixa: -10px
Transições
Por último, mas não menos importante, vamos criar uma transição suave de fundo gradiente, aumentando a duração da transição na guia avançada.
- Duração da transição: 1100ms
Adicionar Módulo de Imagem à Coluna 1
Enviar Imagem
É hora de começar a adicionar módulos! Adicione um Módulo de imagem à primeira coluna e carregue o arquivo ' divi-gradient-background-on-hover-illustration-1.png ' que você pode encontrar na pasta compactada que você baixou no início deste post.
Fundo Gradiente
Vá para as configurações de fundo deste Módulo de imagem e adicione um fundo gradiente. Estamos novamente usando uma cor totalmente transparente para permitir que as outras cores apareçam.
- Cor 1: rgba (50.217.255.0,66)
- Cor 2: rgba (255,255,255,0)
- Tipo de gradiente: radial
- Direção Radial: Topo
- Posição final: 57%
Espaçamento
Em seguida, adicione algum preenchimento superior personalizado ao módulo.
- Preenchimento superior: 14vw
Adicionar Módulo de Título de Texto à Coluna 2
Adicionar conteúdo
Vamos para a segunda coluna! O primeiro módulo de que precisaremos é um Módulo de texto de título. Vá em frente e adicione algum conteúdo de título de sua escolha.
Configurações de texto de título
Em seguida, vá para as configurações de texto do título e faça algumas alterações.
- Fonte do cabeçalho: Abril Fatface
- Cor do texto do título: # 000000
- Tamanho do texto do cabeçalho: 4vw (desktop), 60px (tablet), 40px (telefone)
Adicionar Módulo de Texto de Descrição à Coluna 2
Adicionar conteúdo
O segundo módulo de que precisaremos é outro Módulo de Texto. Adicione algum conteúdo de sua escolha.
Configurações de texto
Em seguida, vá para as configurações de texto e altere a orientação do texto.
- Orientação do Texto: Justificar
Dimensionamento
Ajuste a largura nas configurações de dimensionamento também.
- Largura: 73% (desktop), 100% (tablet e telefone)
Espaçamento
Por último, adicione algumas margens superior e inferior personalizadas ao módulo para criar espaços em branco.
- Margem superior: 2,5vw (desktop), 50px (tablet e telefone)
- Margem inferior: 2,5vw (desktop), 50px (tablet e telefone)
Adicionar Módulo de Botão à Coluna 2
Adicionar cópia
O terceiro e último módulo de que precisaremos na segunda coluna é um Módulo de botão. Adicione alguma cópia de sua escolha.
Configurações de botão
Modifique as configurações do botão a seguir.
- Use estilos personalizados para botão: Sim
- Tamanho do texto do botão: 1,2vw (desktop), 14px (tablet e telefone)
- Cor do texto do botão: #ffffff
- Gradient Color 1: # 9ea6ff
- Gradient Color 2: rgba (16,0,201,0.8)
- Direção do gradiente: 78 graus
- Largura da borda do botão: 0 px
- Raio da borda do botão: 30px
- Espaçamento entre letras dos botões: -1px
- Peso da fonte: ultra negrito
- Estilo da fonte: maiúsculas
Espaçamento
Adicione alguns valores de preenchimento personalizados também.
- Enchimento superior: 10 px
- Preenchimento inferior: 10 px
- Preenchimento esquerdo: 40px
- Preenchimento direito: 40px
Sombra da caixa
E aplique uma sombra de caixa sutil ao botão.
- Força do desfoque de sombra da caixa: 40px
Adicionar Seção # 2
Espaçamento
Agora que terminamos a primeira seção, passaremos para a próxima. Adicione uma nova seção regular usando os seguintes valores de preenchimento personalizado:
- Enchimento superior: 100px
- Preenchimento inferior: 100px
Adicionar linha # 2
Estrutura da Coluna
Continue adicionando uma nova linha à seção usando a seguinte estrutura de coluna:
Cor de fundo da coluna 1
Sem adicionar nenhum módulo ainda, abra as configurações de linha e adicione a seguinte cor de fundo à coluna 1:
- Cor de fundo da coluna 1: #ffffff
Cor de fundo padrão da coluna 2
Adicione a seguinte cor de fundo à coluna 2.
- Cor de fundo da coluna 2: #ffffff
Coluna 2 Hover Background Color
E mude essa cor de fundo ao pairar.
- Cor de fundo da coluna 2: # 3d02ff
Fundo Gradiente da Coluna 2
Adicione um fundo gradiente à coluna também.
- Cor 1: rgba (255,255,255,0)
- Cor 2: # ff7700
- Posição inicial da coluna 2: 20%
Dimensionamento
Em seguida, vá para as configurações de dimensionamento e faça algumas alterações.
- Usar largura personalizada: Sim
- Unidade: PX
- Largura personalizada: 2.000 px
- Usar largura de calha personalizada: Sim
- Largura da calha: 1
Espaçamento
Continue adicionando valores de preenchimento personalizados nas configurações de espaçamento.
- Preenchimento superior: 0 px
- Preenchimento inferior: 0 px
- Preenchimento superior da coluna 1: 6vw (desktop), 120px (tablet e telefone)
- Preenchimento inferior da coluna 1: 6vw (desktop), 120px (tablet e telefone)
- Coluna 1 Preenchimento esquerdo: 5vw (desktop), 80px (tablet), 50px (telefone)
- Coluna 1 Preenchimento direito: 5vw (desktop), 80px (tablet), 50px (telefone)
Sombra da caixa
E adicione uma sombra de caixa sutil a essa linha também.
- Força do desfoque de sombra da caixa: 100 px
- Força de propagação da sombra da caixa: -10px
Transições
Por último, mas não menos importante, crie uma transição suave aumentando a duração da transição na guia avançada.
- Duração da transição: 1100ms
Módulos de texto e módulos de botão duplicados da linha 1
Como já temos todos os módulos de que precisamos na seção anterior, vamos economizar tempo clonando-os.
Coloque as duplicatas na coluna 1 da linha # 2
E colocando as duplicatas na primeira coluna da nova linha.
Mudar o Conteúdo
Certifique-se de alterar o conteúdo de seus módulos.
Alterar o fundo gradiente do botão
Altere o fundo do gradiente do botão também.
- Cor 1: # ff653f
- Cor 2: # 0066ff
- Direção do gradiente: 39 graus
Clone Image Module of Row # 2
Clone o Módulo de imagem que você pode encontrar na primeira coluna da linha anterior também.
Coloque o duplicado na coluna 2 da linha # 2
E coloque a duplicata na segunda coluna da nova linha.
Mudar imagem
Mude a imagem para o arquivo ' divi-gradient-background-on-hover-illustration-2.png ' que você pode encontrar na pasta compactada que você baixou no início deste post.
Alterar fundo gradiente
Por último, mas não menos importante, altere o fundo gradiente do Módulo de imagem.
- Cor 1: rgba (0,2,12,0,66)
- Cor 2: rgba (255,255,255,0)
- Posição final: 57%
Antevisão
Agora que passamos por todas as etapas, vamos dar uma olhada final no resultado final em diferentes tamanhos de tela!
Estático
Flutuar
Pensamentos finais
Neste post, mostramos como alterar um fundo gradiente ao pairar usando Divi. Também criamos um exemplo de design impressionante do zero que usa essa abordagem. Você é livre para usar o design e as ilustrações de qualquer tipo de site que estiver construindo. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!