Como criar cores de fundo animadas com Divi
Publicados: 2019-06-01As opções de animação do Divi podem rapidamente transformar uma página já bonita em uma página envolvente também. Agora, todos nós já nos acostumamos com as diferentes animações que são incorporadas aos vários elementos de design que a Divi oferece. Mas você sabia que também pode usar essas animações para destacar uma opção de design específica?
Neste tutorial, vamos nos concentrar na criação de cores de fundo animadas. Para alcançar o resultado desejado, vamos usar um Módulo Divisor para sua cor de fundo e colocar um Módulo de Texto em cima dele. Esperamos que este tutorial inspire você a adicionar cores de fundo animadas aos próximos projetos de web design.
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 cor de fundo animado GRATUITAMENTE
Para colocar suas mãos no layout de cor de fundo animado gratuito, primeiro você precisa fazer o download 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.
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 recriar!
Inscreva-se no nosso canal no Youtube
Adicionar nova seção
Espaçamento
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 alguns valores de preenchimento personalizados.
- Preenchimento superior: 5vw
- Preenchimento inferior: 17vw
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.
- Usar largura de calha personalizada: Sim
- Largura da calha: 1
- Largura: 100%
- Largura máxima: 100%
Adicionar Módulo Divisor # 1 à Coluna
Visibilidade
É hora de começar a adicionar os vários módulos de que precisamos, começando com um Módulo divisor. Este Módulo Divisor será usado para sua cor de fundo, tamanho e animação. Certifique-se de que a opção 'Mostrar divisor' esteja desabilitada.
- Mostrar divisor: Não
Cor de fundo
Vá para as configurações de fundo e adicione a seguinte cor de fundo:
- Cor de fundo: # 212121
Espaçamento
Passe para as configurações de espaçamento e dê ao seu módulo a forma desejada usando a unidade de altura do visor.
- Enchimento superior: 30vh
- Preenchimento inferior: 30vh
Animação
Estamos permitindo que a cor de fundo seja animada adicionando uma animação personalizada com um atraso de animação.
- Estilo de animação: slide
- Repetição de animação: uma vez
- Direção da animação: direita
- Atraso de animação: 1000 ms
- Intensidade de animação: 88%
- Opacidade inicial da animação: 100%
Adicionar Módulo de Texto # 1 à Coluna
Adicionar conteúdo
O próximo módulo de que precisamos é um Módulo de Texto. Adicione algum conteúdo H2 e parágrafo de sua escolha.
Configurações de texto
Em seguida, vá para as configurações de texto e modifique os valores de acordo:
- Fonte do texto: Didact Gothic
- Cor do texto: #ffffff
- Tamanho do texto: 1.1vw (desktop), 1.7vw (tablet), 2.5vw (telefone)
- Altura da linha de texto: 2.1em
- Orientação do Texto: Justificar
Configurações de texto do cabeçalho 2 padrão
Faça algumas alterações nas configurações de texto H2 a seguir.
- Fonte do Título 2: Abril Fatface
- Cor do texto do título 2: # 1c1c1c
- Tamanho do texto do título 2: 3vw (desktop), 5vw (tablet), 7vw (telefone)
- Altura da linha do título 2: 1.8em
Hover Heading 2 Text Settings
Também estamos modificando a cor do texto ao pairar.
- Cor do texto do título 2: #ffffff
Clonar Ambos os Módulos
Depois de adicionar e personalizar os dois módulos, você pode cloná-los. Nas próximas etapas desta postagem, modificaremos todos os quatro módulos para criar uma animação com a cor de fundo vinda de ambos os lados. Também adicionaremos uma sobreposição aos Módulos de texto para fazer com que pareça que os módulos divisores e os módulos de texto foram criados no mesmo contêiner.
Modificar Duplicado de Módulo Divisor
Mudar a cor do fundo
Abra o Módulo Divisor duplicado e altere a cor de fundo.
- Cor de fundo: # 0bbfa1
Alterar Animação
Para fazer a animação de fundo aparecer do outro lado, estamos mudando a direção da animação. Também adicionaremos um atraso de animação ligeiramente maior para alcançar o resultado desejado.
- Direção da animação: esquerda
- Atraso de animação: 1500ms
Modificar Duplicado de Módulo de Texto
Mudar o Conteúdo
Continue abrindo o Módulo de Texto duplicado e alterando o conteúdo.
Alterar Configurações de Texto do Título 2
Vá para a guia de design e altere as configurações de texto H2 também.
- Alinhamento de texto do título 2: à direita
- Cor do texto do título 2: # 0cc9ad
Posicionamento do divisor
Módulo divisor # 1
Para permitir que algum espaço em branco apareça no lado direito do primeiro Módulo Divisor, vamos adicionar alguma margem direita usando a unidade de largura da janela de exibição.
- Margem direita: 20vw
Módulo divisor # 2
Abra também o segundo Módulo Divisor e permita que o mesmo espaço seja ocupado, mas no lado esquerdo da página.
- Margem superior: 2vw
- Margem esquerda: 20vw
Adicionar sobreposições
Módulo de Texto # 1
Agora que personalizamos todos os módulos em nossa linha, podemos começar a criar as sobreposições, começando com o primeiro Módulo de texto. Adicione os seguintes valores de margem personalizados às configurações de espaçamento do módulo:
- Margem superior: -49vh
- Margem direita: 20vw (desktop), 15vw (tablet), 10vw (telefone)
Módulo de Texto # 2
Use os seguintes valores de margem personalizados para o Módulo de texto duplicado também:
- Margem superior: -49vh
- Margem esquerda: 20vw (desktop), 15vw (tablet), 10vw (telefone)
Saia do Visual Builder para ver o resultado
Depois de criar as sobreposições, você precisará sair do Visual Builder para ver o resultado!
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
Estamos sempre procurando maneiras de ajudá-lo a ultrapassar os limites em web design e criar sites bonitos e envolventes. Nesta postagem, combinamos de forma criativa diferentes elementos de design e sobreposições para criar cores de fundo animadas. Essa é uma ótima maneira de adicionar alguma dimensão extra a qualquer página em que você está trabalhando e de fazer com que seu site corresponda perfeitamente às tendências de design atuais. Se você tiver dúvidas ou sugestões, certifique-se de deixar 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.